slack-blocks-to-jsx 0.2.2 → 0.3.1

package/dist/index.js

@@ -86,48 +86,696 @@ var parseEmojis = (text) => {
   return emojified;
 };
 
-// src/utils/slack_text_to_jsx.tsx
-var import_html_react_parser = __toESM(require("html-react-parser"));
-var import_slack_markdown = require("slack-markdown");
-var slack_text_to_jsx = (text, parse_options) => {
-  const { users, channels } = parse_options;
-  if (!text)
+// src/utils/markdown_parser/parser.tsx
+var import_parser = __toESM(require("@yozora/parser"));
+
+// src/utils/markdown_parser/sub_elements/text.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Text = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: element.value.split("[[DOUBLE_LINE_BREAK]]").map((line, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "slack_blocks_to_jsx__line_break_not_first" }),
+      line
+    ] }, index);
+  }) });
+};
+
+// src/utils/markdown_parser/sub_elements/delete.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Delete = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("s", { children: element.children.map((child, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { element: child }, i);
+  }) });
+};
+
+// src/store/useGlobalData.ts
+var import_zustand = require("zustand");
+var useBearStore = (0, import_zustand.create)((set) => ({
+  users: [],
+  channels: [],
+  user_groups: [],
+  hooks: {},
+  setUsers: (users) => set({ users }),
+  setChannels: (channels) => set({ channels }),
+  setUserGroups: (user_groups) => set({ user_groups }),
+  setHooks: (hooks) => set({ hooks })
+}));
+var useGlobalData = () => {
+  const { users, channels, user_groups, hooks, setChannels, setUsers, setHooks, setUserGroups } = useBearStore();
+  return {
+    users,
+    channels,
+    user_groups,
+    hooks,
+    setChannels,
+    setUsers,
+    setHooks,
+    setUserGroups
+  };
+};
+
+// src/utils/markdown_parser/sub_elements/slack_broadcast.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SlackBroadcast = (props) => {
+  const { element } = props;
+  const { hooks } = useGlobalData();
+  if (element.value === "here" && hooks.atHere)
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: hooks.atHere() });
+  if (element.value === "everyone" && hooks.atEveryone)
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: hooks.atEveryone() });
+  if (element.value === "channel" && hooks.atChannel)
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: hooks.atChannel() });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "slack_broadcast", children: [
+    "@",
+    element.value
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/slack_channel_mention.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SlackChannelMention = (props) => {
+  const { element } = props;
+  const { hooks, channels } = useGlobalData();
+  const channel_id = element.value;
+  const channel = channels.find((u) => u.id === channel_id || u.name === channel_id);
+  const label = (channel == null ? void 0 : channel.name) || channel_id;
+  if (hooks.channel)
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: hooks.channel(channel || { id: channel_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "slack_channel", "data-channel-id": (channel == null ? void 0 : channel.id) || channel_id, children: [
+    "#",
+    label
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/slack_user_group_mention.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SlackUserGroupMention = (props) => {
+  const { element } = props;
+  const { hooks, user_groups } = useGlobalData();
+  const group_id = element.value;
+  const group = user_groups.find((u) => u.id === group_id || u.name === group_id);
+  const label = (group == null ? void 0 : group.name) || group_id;
+  if (hooks.usergroup)
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: hooks.usergroup(group || { id: group_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-usergroup-id": (group == null ? void 0 : group.id) || group_id, className: "slack_user_group", children: [
+    "@",
+    label
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/slack_user_mention.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SlackUserMention = (props) => {
+  const { element } = props;
+  const { hooks, users } = useGlobalData();
+  const user_id = element.value;
+  const user = users.find((u) => u.id === user_id || u.name === user_id);
+  if (hooks.user)
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: hooks.user(user || { id: user_id, name: user_id }) });
+  const label = (user == null ? void 0 : user.name) || user_id;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "slack_user", "data-user-id": (user == null ? void 0 : user.id) || user_id, children: [
+    "@",
+    label
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/emphasis.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Emphasis = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("em", { children: element.children.map((child, i) => {
+    if (child.type === "delete")
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Delete, { element: child }, i);
+    if (child.type === "slack_user_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SlackUserMention, { element: child }, i);
+    if (child.type === "slack_channel_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SlackChannelMention, { element: child }, i);
+    if (child.type === "slack_user_group_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SlackUserGroupMention, { element: child }, i);
+    if (child.type === "slack_broadcast")
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SlackBroadcast, { element: child }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { element: child }, i);
+  }) });
+};
+
+// src/utils/markdown_parser/sub_elements/inline_code.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var InlineCode = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "slack_code_inline", children: element.value });
+};
+
+// src/utils/markdown_parser/sub_elements/strong.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Strong = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: element.children.map((child, i) => {
+    if (child.type === "delete")
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Delete, { element: child }, i);
+    if (child.type === "slack_user_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SlackUserMention, { element: child }, i);
+    if (child.type === "slack_channel_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SlackChannelMention, { element: child }, i);
+    if (child.type === "slack_user_group_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SlackUserGroupMention, { element: child }, i);
+    if (child.type === "slack_broadcast")
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SlackBroadcast, { element: child }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { element: child }, i);
+  }) });
+};
+
+// src/utils/markdown_parser/sub_elements/link.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Link = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { href: element.url, className: "slack_link", children: element.children.map((child, i) => {
+    if (child.type === "delete")
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Delete, { element: child }, i);
+    if (child.type === "emphasis")
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Emphasis, { element: child }, i);
+    if (child.type === "strong")
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Strong, { element: child }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { element: child }, i);
+  }) });
+};
+
+// src/utils/markdown_parser/elements/paragraph.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Paragraph = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: element.children.map((subelement, i) => {
+    if (subelement.type === "text")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { element: subelement }, i);
+    if (subelement.type === "emphasis")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Emphasis, { element: subelement }, i);
+    if (subelement.type === "inlineCode")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InlineCode, { element: subelement }, i);
+    if (subelement.type === "delete")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Delete, { element: subelement }, i);
+    if (subelement.type === "strong")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Strong, { element: subelement }, i);
+    if (subelement.type === "link")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Link, { element: subelement }, i);
+    if (subelement.type === "slack_user_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlackUserMention, { element: subelement }, i);
+    if (subelement.type === "slack_channel_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlackChannelMention, { element: subelement }, i);
+    if (subelement.type === "slack_user_group_mention")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlackUserGroupMention, { element: subelement }, i);
+    if (subelement.type === "slack_broadcast")
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlackBroadcast, { element: subelement }, i);
     return null;
-  let text_string = text;
-  text_string = text_string.replace(/(\n)+/g, (match) => {
-    return match.replace(/\n/g, (newline, index) => {
-      return index === 0 ? "<span class='slack_blocks_to_jsx__line_break'></span>" : "<span class='slack_blocks_to_jsx__line_break_not_first'></span>";
+  }) });
+};
+
+// src/utils/markdown_parser/elements/blockquote.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Blockquote = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: element.children.map((para) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Paragraph, { element: para });
+  }) });
+};
+
+// src/utils/markdown_parser/elements/code.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Code = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { className: "slack_code", children: element.value });
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/tokenizer.ts
+var import_core_tokenizer2 = require("@yozora/core-tokenizer");
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/match.ts
+var import_character = require("@yozora/character");
+var import_core_tokenizer = require("@yozora/core-tokenizer");
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/types.ts
+var SlackUserMentionType = "slack_user_mention";
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/match.ts
+var match = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a, _b;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      const c = (_a = nodePoints[i]) == null ? void 0 : _a.codePoint;
+      if (c === import_character.AsciiCodePoint.OPEN_ANGLE && ((_b = nodePoints[i + 1]) == null ? void 0 : _b.codePoint) === import_character.AsciiCodePoint.AT_SIGN) {
+        const j = (0, import_core_tokenizer.eatOptionalCharacters)(nodePoints, i + 2, blockEndIndex, import_character.AsciiCodePoint.AT_SIGN);
+        if (j < blockEndIndex) {
+          potentialDelimiters.push({
+            type: "opener",
+            startIndex: i,
+            endIndex: j
+          });
+        }
+      } else if (c === import_character.AsciiCodePoint.CLOSE_ANGLE) {
+        potentialDelimiters.push({
+          type: "closer",
+          startIndex: i,
+          endIndex: i + 1
+        });
+      }
+    }
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let delimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield delimiter;
+      if (lastEndIndex === endIndex) {
+        if (delimiter == null || delimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      let openerDelimiter = null;
+      let closerDelimiter = null;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter2 = potentialDelimiters[pIndex];
+        if (delimiter2.startIndex >= startIndex && delimiter2.type !== "closer") {
+          openerDelimiter = delimiter2;
+          break;
+        }
+      }
+      for (let i = pIndex + 1; i < potentialDelimiters.length; ++i) {
+        const delimiter2 = potentialDelimiters[i];
+        if (delimiter2.type === "closer") {
+          closerDelimiter = delimiter2;
+          break;
+        }
+      }
+      if (closerDelimiter == null)
+        return;
+      delimiter = {
+        type: "full",
+        startIndex: openerDelimiter.startIndex,
+        endIndex: closerDelimiter.endIndex,
+        thickness: closerDelimiter.endIndex - closerDelimiter.startIndex
+      };
+    }
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackUserMentionType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/parse.ts
+var import_character2 = require("@yozora/character");
+var parse = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 2;
+      let endIndex = token.endIndex - 1;
+      const value = (0, import_character2.calcStringFromNodePoints)(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackUserMentionType, position: api.calcPosition(token), value } : { type: SlackUserMentionType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/tokenizer.ts
+var SlackUserMentionTokenizer = class extends import_core_tokenizer2.BaseInlineTokenizer {
+  constructor(props = {}) {
+    super({
+      name: SlackUserMentionType,
+      priority: props.priority || import_core_tokenizer2.TokenizerPriority.ATOMIC
     });
-  });
-  text_string = (0, import_slack_markdown.toHTML)(text_string, {
-    escapeHTML: false,
-    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>`;
-      },
-      atChannel(data) {
-        const channel = channels.find((c) => c.name === data.name);
-        const label = (channel == null ? void 0 : channel.name) || data.name;
-        return `<span class="slack_channel" data-channel-id="${channel == null ? void 0 : channel.id}">#${label}</span>`;
-      },
-      atEveryone() {
-        return `<span class="slack_broadcast">@everyone</span>`;
-      },
-      atHere() {
-        return `<span class="slack_broadcast">@everyone</span>`;
+    this.match = match;
+    this.parse = parse;
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/tokenizer.ts
+var import_core_tokenizer4 = require("@yozora/core-tokenizer");
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/match.ts
+var import_character3 = require("@yozora/character");
+var import_core_tokenizer3 = require("@yozora/core-tokenizer");
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/types.ts
+var SlackChannelMentionType = "slack_channel_mention";
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/match.ts
+var match2 = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a, _b;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      const c = (_a = nodePoints[i]) == null ? void 0 : _a.codePoint;
+      if (c === import_character3.AsciiCodePoint.OPEN_ANGLE && ((_b = nodePoints[i + 1]) == null ? void 0 : _b.codePoint) === import_character3.AsciiCodePoint.NUMBER_SIGN) {
+        const j = (0, import_core_tokenizer3.eatOptionalCharacters)(nodePoints, i + 2, blockEndIndex, import_character3.AsciiCodePoint.AT_SIGN);
+        if (j < blockEndIndex) {
+          potentialDelimiters.push({
+            type: "opener",
+            startIndex: i,
+            endIndex: j
+          });
+        }
+      } else if (c === import_character3.AsciiCodePoint.CLOSE_ANGLE) {
+        potentialDelimiters.push({
+          type: "closer",
+          startIndex: i,
+          endIndex: i + 1
+        });
+      }
+    }
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let delimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield delimiter;
+      if (lastEndIndex === endIndex) {
+        if (delimiter == null || delimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      let openerDelimiter = null;
+      let closerDelimiter = null;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter2 = potentialDelimiters[pIndex];
+        if (delimiter2.startIndex >= startIndex && delimiter2.type !== "closer") {
+          openerDelimiter = delimiter2;
+          break;
+        }
+      }
+      for (let i = pIndex + 1; i < potentialDelimiters.length; ++i) {
+        const delimiter2 = potentialDelimiters[i];
+        if (delimiter2.type === "closer") {
+          closerDelimiter = delimiter2;
+          break;
+        }
       }
-      // ...(hooks.date && { date: hooks.date }),
-      // ...(hooks.usergroup && { usergroup: hooks.usergroup }),
+      if (closerDelimiter == null)
+        return;
+      delimiter = {
+        type: "full",
+        startIndex: openerDelimiter.startIndex,
+        endIndex: closerDelimiter.endIndex,
+        thickness: closerDelimiter.endIndex - closerDelimiter.startIndex
+      };
     }
-  });
-  return (0, import_html_react_parser.default)(text_string, { trim: false });
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackChannelMentionType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/parse.ts
+var import_character4 = require("@yozora/character");
+var parse2 = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 2;
+      let endIndex = token.endIndex - 1;
+      const value = (0, import_character4.calcStringFromNodePoints)(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackChannelMentionType, position: api.calcPosition(token), value } : { type: SlackChannelMentionType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/tokenizer.ts
+var SlackChannelMentionTokenizer = class extends import_core_tokenizer4.BaseInlineTokenizer {
+  constructor(props = {}) {
+    super({
+      name: SlackChannelMentionType,
+      priority: props.priority || import_core_tokenizer4.TokenizerPriority.ATOMIC
+    });
+    this.match = match2;
+    this.parse = parse2;
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/tokenizer.ts
+var import_core_tokenizer6 = require("@yozora/core-tokenizer");
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/match.ts
+var import_character5 = require("@yozora/character");
+var import_core_tokenizer5 = require("@yozora/core-tokenizer");
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/types.ts
+var SlackUserGroupMentionType = "slack_user_group_mention";
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/match.ts
+var match3 = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      const c = (_a = nodePoints[i]) == null ? void 0 : _a.codePoint;
+      if (c === import_character5.AsciiCodePoint.OPEN_ANGLE && ((_b = nodePoints[i + 1]) == null ? void 0 : _b.codePoint) === import_character5.AsciiCodePoint.EXCLAMATION_MARK && ((_c = nodePoints[i + 2]) == null ? void 0 : _c.codePoint) === import_character5.AsciiCodePoint.LOWERCASE_S && ((_d = nodePoints[i + 3]) == null ? void 0 : _d.codePoint) === import_character5.AsciiCodePoint.LOWERCASE_U && ((_e = nodePoints[i + 4]) == null ? void 0 : _e.codePoint) === import_character5.AsciiCodePoint.LOWERCASE_B && ((_f = nodePoints[i + 5]) == null ? void 0 : _f.codePoint) === import_character5.AsciiCodePoint.LOWERCASE_T && ((_g = nodePoints[i + 6]) == null ? void 0 : _g.codePoint) === import_character5.AsciiCodePoint.LOWERCASE_E && ((_h = nodePoints[i + 7]) == null ? void 0 : _h.codePoint) === import_character5.AsciiCodePoint.LOWERCASE_A && ((_i = nodePoints[i + 8]) == null ? void 0 : _i.codePoint) === import_character5.AsciiCodePoint.LOWERCASE_M && ((_j = nodePoints[i + 9]) == null ? void 0 : _j.codePoint) === import_character5.AsciiCodePoint.CARET) {
+        const j = (0, import_core_tokenizer5.eatOptionalCharacters)(nodePoints, i + 10, blockEndIndex, import_character5.AsciiCodePoint.CARET);
+        if (j < blockEndIndex) {
+          potentialDelimiters.push({
+            type: "opener",
+            startIndex: i,
+            endIndex: j
+          });
+        }
+      } else if (c === import_character5.AsciiCodePoint.CLOSE_ANGLE) {
+        potentialDelimiters.push({
+          type: "closer",
+          startIndex: i,
+          endIndex: i + 1
+        });
+      }
+    }
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let delimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield delimiter;
+      if (lastEndIndex === endIndex) {
+        if (delimiter == null || delimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      let openerDelimiter = null;
+      let closerDelimiter = null;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter2 = potentialDelimiters[pIndex];
+        if (delimiter2.startIndex >= startIndex && delimiter2.type !== "closer") {
+          openerDelimiter = delimiter2;
+          break;
+        }
+      }
+      for (let i = pIndex + 1; i < potentialDelimiters.length; ++i) {
+        const delimiter2 = potentialDelimiters[i];
+        if (delimiter2.type === "closer") {
+          closerDelimiter = delimiter2;
+          break;
+        }
+      }
+      if (closerDelimiter == null)
+        return;
+      delimiter = {
+        type: "full",
+        startIndex: openerDelimiter.startIndex,
+        endIndex: closerDelimiter.endIndex,
+        thickness: closerDelimiter.endIndex - closerDelimiter.startIndex
+      };
+    }
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackUserGroupMentionType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/parse.ts
+var import_character6 = require("@yozora/character");
+var parse3 = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 10;
+      let endIndex = token.endIndex - 1;
+      const value = (0, import_character6.calcStringFromNodePoints)(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackUserGroupMentionType, position: api.calcPosition(token), value } : { type: SlackUserGroupMentionType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/tokenizer.ts
+var SlackUserGroupMentionTokenizer = class extends import_core_tokenizer6.BaseInlineTokenizer {
+  constructor(props = {}) {
+    super({
+      name: SlackUserGroupMentionType,
+      priority: props.priority || import_core_tokenizer6.TokenizerPriority.ATOMIC
+    });
+    this.match = match3;
+    this.parse = parse3;
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/tokenizer.ts
+var import_core_tokenizer7 = require("@yozora/core-tokenizer");
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/match.ts
+var import_character7 = require("@yozora/character");
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/types.ts
+var SlackBroadcastType = "slack_broadcast";
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/match.ts
+var match4 = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const targets = ["@everyone", "@here", "@channel"];
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      if (((_a = nodePoints[i]) == null ? void 0 : _a.codePoint) === import_character7.AsciiCodePoint.AT_SIGN) {
+        for (const target of targets) {
+          if (matchTarget(nodePoints, i, target)) {
+            potentialDelimiters.push({
+              type: "full",
+              startIndex: i,
+              endIndex: i + target.length,
+              thickness: target.length
+            });
+            i += target.length - 1;
+            break;
+          }
+        }
+      }
+    }
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let currentDelimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield currentDelimiter;
+      if (lastEndIndex === endIndex) {
+        if (currentDelimiter == null || currentDelimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter = potentialDelimiters[pIndex];
+        if (delimiter.startIndex >= startIndex) {
+          currentDelimiter = {
+            type: "full",
+            startIndex: delimiter.startIndex,
+            endIndex: delimiter.endIndex,
+            thickness: delimiter.thickness
+          };
+          break;
+        }
+      }
+    }
+  }
+  function matchTarget(nodePoints, startIndex, target) {
+    var _a;
+    for (let j = 0; j < target.length; ++j) {
+      if (((_a = nodePoints[startIndex + j]) == null ? void 0 : _a.codePoint) !== target.charCodeAt(j)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackBroadcastType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/parse.ts
+var import_character8 = require("@yozora/character");
+var parse4 = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 1;
+      let endIndex = token.endIndex;
+      const value = (0, import_character8.calcStringFromNodePoints)(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackBroadcastType, position: api.calcPosition(token), value } : { type: SlackBroadcastType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/tokenizer.ts
+var SlackBroadcastTokenizer = class extends import_core_tokenizer7.BaseInlineTokenizer {
+  constructor(props = {}) {
+    super({
+      name: SlackBroadcastType,
+      priority: props.priority || import_core_tokenizer7.TokenizerPriority.ATOMIC
+    });
+    this.match = match4;
+    this.parse = parse4;
+  }
+};
+
+// src/utils/markdown_parser/parser.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var parser = new import_parser.default().unmountTokenizer("@yozora/tokenizer-list").useTokenizer(new SlackUserMentionTokenizer()).useTokenizer(new SlackChannelMentionTokenizer()).useTokenizer(new SlackUserGroupMentionTokenizer()).useTokenizer(new SlackBroadcastTokenizer());
+var markdown_parser = (markdown, options) => {
+  if (!markdown)
+    return null;
+  let text_string = markdown;
+  text_string = text_string.replace(/```/g, `
+\`\`\`
+`);
+  text_string = text_string.replace(new RegExp("(?<!\\*)\\*(?!\\*)([^*]+)\\*(?!\\*)", "g"), "**$1**");
+  text_string = text_string.replace(new RegExp("(?<!~)~(?!~)([^~]+)~(?!~)", "g"), "~~$1~~");
+  text_string = text_string.replace(/<([^|>]+)\|([^>]+)>/g, "[$2]($1)");
+  text_string = text_string.replace(/\n\n/g, "[[DOUBLE_LINE_BREAK]]");
+  text_string = text_string.replace(/<!here>/g, "@here");
+  text_string = text_string.replace(/<!everyone>/g, "@everyone");
+  text_string = text_string.replace(/<!channel>/g, "@channel");
+  const parsed_data = parser.parse(text_string);
+  const elements = parsed_data.children;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: elements.map((element, i) => {
+    if (element.type === "paragraph")
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { element }, i);
+    if (element.type === "blockquote")
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Blockquote, { element }, i);
+    if (element.type === "code")
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Code, { element }, i);
+    return null;
+  }) });
 };
 
 // src/utils/is_accessory_stacked.ts
@@ -180,21 +828,21 @@ var is_accessory_stacked = (element) => {
 };
 
 // src/header.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Header = (props) => {
   const { name, time } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-[5px] items-center w-full slack_blocks_to_jsx--header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-black text-[15px]", children: name }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[14px] w-[27px] leading-[12.5px] py-[1px] px-[3px] uppercase text-[10px]  text-black-primary/[0.7] bg-black-primary/[0.13] font-semibold rounded-[2px] text-center", children: "APP" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-black-secondary uppercase leading-[17.6px]", children: dateToTime(time) })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-[5px] items-center w-full slack_blocks_to_jsx--header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "font-black text-[15px]", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-[14px] w-[27px] leading-[12.5px] py-[1px] px-[3px] uppercase text-[10px]  text-black-primary/[0.7] bg-black-primary/[0.13] font-semibold rounded-[2px] text-center", children: "APP" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-xs text-black-secondary uppercase leading-[17.6px]", children: dateToTime(time) })
   ] });
 };
 
 // src/components/elements/image_element.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var ImageElement = (props) => {
   const { alt_text, image_url } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "img",
     {
       src: image_url,
@@ -204,32 +852,8 @@ var ImageElement = (props) => {
   ) });
 };
 
-// src/store/useGlobalData.ts
-var import_zustand = require("zustand");
-var useBearStore = (0, import_zustand.create)((set) => ({
-  users: [],
-  channels: [],
-  user_groups: [],
-  hooks: {},
-  setUsers: (users) => set({ users }),
-  setChannels: (channels) => set({ channels }),
-  setHooks: (hooks) => set({ hooks })
-}));
-var useGlobalData = () => {
-  const { users, channels, user_groups, hooks, setChannels, setUsers, setHooks } = useBearStore();
-  return {
-    users,
-    channels,
-    user_groups,
-    hooks,
-    setChannels,
-    setUsers,
-    setHooks
-  };
-};
-
 // src/components/composition_objects/text_object.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TextObject = (props) => {
   const { type, text, emoji, verbatim = false } = props.data;
   const { className = "" } = props;
@@ -237,15 +861,15 @@ var TextObject = (props) => {
   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, users, channels, hooks }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true, users, channels, hooks }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className, children: markdown_parser(emoji_parsed, { markdown: false, users, channels, hooks }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className, children: markdown_parser(emoji_parsed, { markdown: true, users, channels, hooks }) });
 };
 
 // src/components/elements/button_element.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ButtonElement = (props) => {
   const { text, action_id, url, style, accessibility_label } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       type: "button",
@@ -257,14 +881,14 @@ var ButtonElement = (props) => {
           window.open(url, "_blank");
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextObject, { data: text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextObject, { data: text })
     }
   );
 };
 
 // src/components/elements/static_select_element.tsx
 var import_react = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var StaticSelectElement = (props) => {
   const {
     action_id,
@@ -299,20 +923,20 @@ var StaticSelectElement = (props) => {
     const results = option.text.text.toLowerCase().includes(search.toLowerCase());
     return results;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       id: action_id,
       className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3",
       tabIndex: 0,
       children: [
-        visible && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        visible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             className: "absolute top-[24px] -left-3 bg-white-secondary border border-gray-primary rounded-[6px] shadow-custom_shadow-1 w-[322px] max-w-[322px] max-h-[240px] overflow-auto py-3 z-20",
             id: "static_select_popup",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "div",
                 {
                   className: "h-7 px-6 flex items-center select-none cursor-pointer hover:bg-blue-primary hover:text-white-primary",
@@ -321,14 +945,14 @@ var StaticSelectElement = (props) => {
                     setVisible(false);
                     setSelected(option.value);
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextObject, { data: option.text })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextObject, { data: option.text })
                 },
                 i
               );
             }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "text",
@@ -339,7 +963,7 @@ var StaticSelectElement = (props) => {
             "aria-label": "Select an item"
           }
         ),
-        !search && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        !search && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           TextObject,
           {
             data: placeholder != null ? placeholder : {
@@ -348,7 +972,7 @@ var StaticSelectElement = (props) => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -357,7 +981,7 @@ var StaticSelectElement = (props) => {
             onClick: () => {
               setVisible((prev) => !prev);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -366,7 +990,7 @@ var StaticSelectElement = (props) => {
                 strokeWidth: "3",
                 stroke: "currentColor",
                 className: "w-3 h-3",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
               }
             )
           }
@@ -378,7 +1002,7 @@ var StaticSelectElement = (props) => {
 
 // src/components/elements/checkboxes_element.tsx
 var import_react2 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var CheckboxesElement = (props) => {
   const { action_id, options, focus_on_load, initial_options } = props.data;
   const [selected, setSelected] = (0, import_react2.useState)(
@@ -392,15 +1016,15 @@ var CheckboxesElement = (props) => {
       input_ref.current.focus();
     }
   }, [focus_on_load]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes_element", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes_element", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
     const { text, value, description } = option;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "label",
       {
         className: "flex cursor-pointer items-baseline gap-3 select-none",
         htmlFor: `checkboxes-${action_id}-value-${value}-${i}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "input",
             {
               type: "checkbox",
@@ -416,9 +1040,9 @@ var CheckboxesElement = (props) => {
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextObject, { data: text }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextObject, { className: "text-black-secondary", data: description })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextObject, { data: text }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextObject, { className: "text-black-secondary", data: description })
           ] })
         ]
       }
@@ -428,7 +1052,7 @@ var CheckboxesElement = (props) => {
 
 // src/components/elements/plain_text_input.tsx
 var import_react3 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var PlaintTextInput = (props) => {
   const {
     action_id,
@@ -456,15 +1080,15 @@ var PlaintTextInput = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       id: action_id,
       className: "relative text-small w-full slack_blocks_to_jsx__plain_text_input_element",
       tabIndex: 0,
       children: [
-        !value && placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextObject, { data: placeholder }) }),
-        !value && !placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        !value && placeholder && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TextObject, { data: placeholder }) }),
+        !value && !placeholder && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           TextObject,
           {
             data: {
@@ -473,7 +1097,7 @@ var PlaintTextInput = (props) => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "textarea",
           {
             value,
@@ -496,7 +1120,7 @@ var PlaintTextInput = (props) => {
 
 // src/components/elements/users_select_element.tsx
 var import_react4 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var UsersSelectElement = (props) => {
   const { action_id, focus_on_load, placeholder, type, confirm, initial_user, people } = props.data;
   const [visible, setVisible] = (0, import_react4.useState)(focus_on_load || false);
@@ -521,20 +1145,20 @@ var UsersSelectElement = (props) => {
     const name = person.name.toLowerCase();
     return name.includes(search_query);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       id: action_id,
       className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3 slack_blocks_to_jsx__users_select_element",
       tabIndex: 0,
       children: [
-        visible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        visible && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "absolute top-[24px] -left-3 bg-white-secondary border border-gray-primary rounded-[6px] shadow-custom_shadow-1 w-[322px] max-w-[322px] max-h-[240px] overflow-auto py-3 z-20",
             id: "static_select_popup",
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "button",
                 {
                   className: "h-7 px-6 flex group items-center gap-2 select-none cursor-pointer hover:bg-blue-primary hover:text-white-primary",
@@ -545,7 +1169,7 @@ var UsersSelectElement = (props) => {
                     setSelected(option.id);
                   },
                   children: [
-                    option.image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    option.image && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "img",
                       {
                         src: option.image,
@@ -553,8 +1177,8 @@ var UsersSelectElement = (props) => {
                         className: "w-5 h-5 rounded-md overflow-hidden"
                       }
                     ),
-                    !option.image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-5 h-5 rounded-md overflow-hidden bg-gray-300 text-black-primary font-semibold flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: option.name[0] || "" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    !option.image && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-5 h-5 rounded-md overflow-hidden bg-gray-300 text-black-primary font-semibold flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: option.name[0] || "" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       TextObject,
                       {
                         data: {
@@ -563,17 +1187,17 @@ var UsersSelectElement = (props) => {
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
-                      option.online && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+                      option.online && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                         "div",
                         {
                           className: `bg-green-secondary w-[9px] h-[9px] rounded-full shrink-0`
                         }
                       ),
-                      !option.online && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-[9px] h-[9px] rounded-full border-[1.5px] shrink-0 border-black-secondary group-hover:border-white-primary" }),
-                      option.sleeping && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute -top-[5px] -right-[5px] h-[10px] w-[10px] rounded-full bg-white-secondary flex justify-center z-[10] text-[8px] leading-[8px] font-semibold group-hover:bg-blue-primary", children: "z" })
+                      !option.online && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-[9px] h-[9px] rounded-full border-[1.5px] shrink-0 border-black-secondary group-hover:border-white-primary" }),
+                      option.sleeping && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute -top-[5px] -right-[5px] h-[10px] w-[10px] rounded-full bg-white-secondary flex justify-center z-[10] text-[8px] leading-[8px] font-semibold group-hover:bg-blue-primary", children: "z" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-black-primary group-hover:text-white-primary", children: option.name })
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-black-primary group-hover:text-white-primary", children: option.name })
                   ]
                 },
                 i
@@ -581,7 +1205,7 @@ var UsersSelectElement = (props) => {
             }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             type: "text",
@@ -593,7 +1217,7 @@ var UsersSelectElement = (props) => {
             "aria-label": "Select an item"
           }
         ),
-        !search && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        !search && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           TextObject,
           {
             data: placeholder != null ? placeholder : {
@@ -602,7 +1226,7 @@ var UsersSelectElement = (props) => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
           {
             type: "button",
@@ -611,7 +1235,7 @@ var UsersSelectElement = (props) => {
             onClick: () => {
               setVisible((prev) => !prev);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -620,7 +1244,7 @@ var UsersSelectElement = (props) => {
                 strokeWidth: "3",
                 stroke: "currentColor",
                 className: "w-3 h-3",
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
               }
             )
           }
@@ -631,52 +1255,52 @@ var UsersSelectElement = (props) => {
 };
 
 // src/components/blocks/actions.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Actions = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       id: block_id,
       className: "mb-2 text-primary flex w-full text-black-primary items-center slack_blocks_to_jsx__actions",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
         if (element.type === "button") {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonElement, { data: element }) }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ButtonElement, { data: element }) }, i);
         }
         if (element.type === "static_select") {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StaticSelectElement, { data: element }) }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StaticSelectElement, { data: element }) }, i);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 mr-2" }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-2 mr-2" }, i);
       }) })
     }
   );
 };
 
 // src/components/blocks/context.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Context = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       id: block_id,
       className: "my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden slack_blocks_to_jsx__context",
       children: elements.slice(0, 10).map((element, i) => {
         if (element.type !== "image") {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextObject, { data: element }) }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TextObject, { data: element }) }, i);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageElement, { data: element }) }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImageElement, { data: element }) }, i);
       })
     }
   );
 };
 
 // src/components/blocks/divider.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { data } = props;
   const { block_id } = data;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       id: block_id,
@@ -699,23 +1323,23 @@ var Header2 = (props) => {
 
 // src/components/blocks/image.tsx
 var import_react5 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Image = (props) => {
   const { block_id, alt_text, image_url, image_bytes, image_height, image_width } = props.data;
   const [showImage, setShowImage] = (0, import_react5.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { children: [
         alt_text,
         image_bytes && ` (${Math.round(image_bytes / 1e3)} kB)`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           type: "button",
           className: "w-[15px] h-[15px]",
           onClick: () => setShowImage((prev) => !prev),
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -731,7 +1355,7 @@ var Image = (props) => {
               style: {
                 transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "path",
                 {
                   fill: "currentColor",
@@ -744,7 +1368,7 @@ var Image = (props) => {
         }
       )
     ] }),
-    showImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "img",
       {
         src: image_url,
@@ -759,17 +1383,17 @@ var Image = (props) => {
 };
 
 // src/components/blocks/input.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Input = (props) => {
   const { element: given_element, label, block_id, hint, optional, type } = props.data;
   const element = given_element ? getElementComponent(given_element) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       id: block_id,
       className: `mt-2 mb-1 text-primary slack_blocks_to_jsx__input flex w-full text-black-primary`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           TextObject,
           {
             data: {
@@ -780,11 +1404,11 @@ var Input = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mb-1 flex flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative shrink-0", children: element }),
-          (hint || given_element.type === "plain_text_input") && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-black-secondary text-small flex gap-1", children: [
-            hint && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "inline", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TextObject, { data: hint }) }),
-            given_element.type === "plain_text_input" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: "\u21B5 Please 'enter' to submit" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mb-1 flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "relative shrink-0", children: element }),
+          (hint || given_element.type === "plain_text_input") && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-black-secondary text-small flex gap-1", children: [
+            hint && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "inline", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextObject, { data: hint }) }),
+            given_element.type === "plain_text_input" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { children: "\u21B5 Please 'enter' to submit" })
           ] })
         ] })
       ] }) })
@@ -793,25 +1417,30 @@ var Input = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_list_wrapper.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var RichTextListWrapper = (props) => {
   const _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
   if (element.style === "bullet") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", __spreadProps(__spreadValues({}, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", __spreadProps(__spreadValues({}, rest), { children }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ol", __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // src/components/blocks/rich_text/rich_text_section_broadcast.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var RichTextSectionBroadcast = (props) => {
   const { range, style } = props;
   const { hooks } = useGlobalData();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    "div",
+  if (range === "channel" && hooks.atChannel)
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: hooks.atChannel() });
+  if (range === "everyone" && hooks.atEveryone)
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: hooks.atEveryone() });
+  if (range === "here" && hooks.atHere)
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: hooks.atHere() });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "span",
     {
       className: `
-        inline-block
         slack_broadcast
         slack_blocks_to_jsx__rich_text_section_element_broadcast
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
@@ -819,121 +1448,122 @@ var RichTextSectionBroadcast = (props) => {
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
       `,
       children: [
-        range === "channel" && (hooks.atChannel ? hooks.atChannel() : `@${range}`),
-        range === "everyone" && (hooks.atEveryone ? hooks.atEveryone() : `@${range}`),
-        range === "here" && (hooks.atHere ? hooks.atHere() : `@${range}`)
+        "@",
+        range
       ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section_channel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var RichTextSectionChannel = (props) => {
   const { channel_id, style } = props;
   const { channels, hooks } = useGlobalData();
-  const channel = channels.find((u) => u.id === channel_id);
+  const channel = channels.find((u) => u.id === channel_id || u.name === channel_id);
   const label = (channel == null ? void 0 : channel.name) || channel_id;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "div",
+  if (hooks.channel)
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: hooks.channel(channel || { id: channel_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "span",
     {
-      "data-channel-id": channel_id,
+      "data-channel-id": (channel == null ? void 0 : channel.id) || channel_id,
       className: `
-        inline-block
         slack_channel
         slack_blocks_to_jsx__rich_text_section_element_channel
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
       `,
-      children: hooks.user ? hooks.user(
-        channel || {
-          id: channel_id,
-          name: label
-        }
-      ) : `#${label}`
+      children: [
+        "#",
+        label
+      ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section_emoji.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var RichTextSectionEmoji = (props) => {
   const { name } = props;
   const { hooks } = useGlobalData();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: hooks.emoji ? hooks.emoji(name) : parseEmojis(`:${name}:`) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: hooks.emoji ? hooks.emoji(name) : parseEmojis(`:${name}:`) });
 };
 
 // src/components/blocks/rich_text/rich_text_section_user.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var RichTextSectionUser = (props) => {
   const { user_id, style } = props;
   const { users, hooks } = useGlobalData();
-  const user = users.find((u) => u.id === user_id);
+  const user = users.find((u) => u.id === user_id || u.name === user_id);
   const label = (user == null ? void 0 : user.name) || user_id;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    "div",
+  if (hooks.user)
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: hooks.user(user || { id: user_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "span",
     {
-      "data-user-id": user_id,
+      "data-user-id": (user == null ? void 0 : user.id) || user_id,
       className: `
-        inline-block
         slack_user
         slack_blocks_to_jsx__rich_text_section_element_user
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
       `,
-      children: hooks.user ? hooks.user(
-        user || {
-          id: user_id,
-          name: label
-        }
-      ) : `@${label}`
+      children: [
+        "@",
+        label
+      ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section_user_group.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var RichTextSectionUserGroup = (props) => {
   const { usergroup_id, style } = props;
   const { user_groups, hooks } = useGlobalData();
-  const group = user_groups.find((u) => u.id === usergroup_id);
+  const group = user_groups.find((u) => u.id === usergroup_id || u.name === usergroup_id);
   const label = (group == null ? void 0 : group.name) || usergroup_id;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    "div",
+  if (hooks.usergroup)
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: hooks.usergroup(group || { id: usergroup_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "span",
     {
-      "data-usergroup-id": usergroup_id,
+      "data-usergroup-id": (group == null ? void 0 : group.id) || usergroup_id,
       className: `
-        inline-block
         slack_user_group
         slack_blocks_to_jsx__rich_text_section_element_user_group
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
       `,
-      children: hooks.usergroup ? hooks.usergroup(usergroup_id) : `@${label}`
+      children: [
+        "@",
+        label
+      ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var RichTextSectionElement = (props) => {
   const { element } = props;
   if (element.type === "user")
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RichTextSectionUser, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionUser, __spreadValues({}, element));
   if (element.type === "channel")
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RichTextSectionChannel, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionChannel, __spreadValues({}, element));
   if (element.type === "broadcast")
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RichTextSectionBroadcast, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionBroadcast, __spreadValues({}, element));
   if (element.type === "emoji")
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RichTextSectionEmoji, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionEmoji, __spreadValues({}, element));
   if (element.type === "usergroup")
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RichTextSectionUserGroup, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionUserGroup, __spreadValues({}, element));
   if (element.type === "text") {
     const { text, style } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "span",
       {
         className: `
@@ -949,7 +1579,7 @@ var RichTextSectionElement = (props) => {
   }
   if (element.type === "link") {
     const { url, style, text } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "a",
       {
         target: "_blank",
@@ -971,21 +1601,21 @@ var RichTextSectionElement = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var RichText = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id: block_id, className: "slack_blocks_to_jsx__rich_text", children: elements.map((element, i) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Element, { element }, `${element.type}__${i}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { id: block_id, className: "slack_blocks_to_jsx__rich_text", children: elements.map((element, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Element, { element }, `${element.type}__${i}`);
   }) });
 };
 var Element = (props) => {
   const { element } = props;
   if (element.type === "rich_text_list") {
     const { elements, style, border = 0, indent, offset } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_list_element", children: [
-      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichTextListWrapper, { element, className: `list-none`, children: elements.map((el, i) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_list_element", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextListWrapper, { element, className: `list-none`, children: elements.map((el, i) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "li",
           {
             className: "flex",
@@ -993,22 +1623,22 @@ var Element = (props) => {
               marginLeft: indent ? indent > 5 ? 0 : indent * 28 + 6 + 28 : 0
             },
             children: [
-              style === "ordered" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+              style === "ordered" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
                 i + 1,
                 "."
               ] }),
-              style === "bullet" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
-                (indent === void 0 || indent === 0 || indent === 3 || indent === 6) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
-                (indent === 1 || indent === 4 || indent === 7) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-1.5 h-1.5 rounded-full border border-current" }),
-                (indent === 2 || indent === 5 || indent === 8) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-1.5 h-1.5 rounded-[1.5px] bg-current" })
+              style === "bullet" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+                (indent === void 0 || indent === 0 || indent === 3 || indent === 6) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
+                (indent === 1 || indent === 4 || indent === 7) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "w-1.5 h-1.5 rounded-full border border-current" }),
+                (indent === 2 || indent === 5 || indent === 8) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "w-1.5 h-1.5 rounded-[1.5px] bg-current" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "div",
                 {
                   style: {
                     marginLeft: 6
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Element, { element: el }, `${element.type}__${i}`)
+                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Element, { element: el }, `${element.type}__${i}`)
                 }
               )
             ]
@@ -1020,9 +1650,9 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_preformatted") {
     const { elements, border } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("code", { className: "flex gap-2 w-full slack_blocks_to_jsx__rich_text_preformatted_element", children: [
-      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("code", { className: "flex gap-2 w-full slack_blocks_to_jsx__rich_text_preformatted_element", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "pre",
         {
           className: "p-2 rounded my-1 whitespace-pre-wrap bg-gray-secondary text-xs leading-[1.50001] border grow",
@@ -1031,7 +1661,7 @@ var Element = (props) => {
             wordBreak: "normal"
           },
           children: elements.map((el, i) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
           })
         }
       )
@@ -1039,88 +1669,152 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_quote") {
     const { elements, border } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("blockquote", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_quote_element", children: [
-      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("blockquote", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_quote_element", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       elements.map((el, i) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
       })
     ] });
   }
   if (element.type === "rich_text_section") {
     const { elements } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "inline-block slack_blocks_to_jsx__rich_text_section_element", children: elements.map((el, i) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "inline-block slack_blocks_to_jsx__rich_text_section_element", children: elements.map((el, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
     }) });
   }
   return null;
 };
 
 // src/components/blocks/section.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Section = (props) => {
   const { accessory, fields, text, block_id } = props.data;
   const element = accessory ? getElementComponent(accessory) : null;
   const is_stacked = accessory ? is_accessory_stacked(accessory) : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       id: block_id,
       className: `mt-2 mb-1 text-primary slack_blocks_to_jsx__section flex w-full text-black-primary ${is_stacked ? "flex-col" : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextObject, { data: text }),
-          fields && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextObject, { data: field }, i);
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TextObject, { data: text }),
+          fields && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TextObject, { data: field }, i);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
 };
 
 // src/components/blocks/video.tsx
+var import_react6 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Video = (props) => {
-  const { type } = props.data;
-  return null;
+  const {
+    // thumbnail_url,
+    // provider_icon_url,
+    // provider_name,
+    //
+    alt_text,
+    title,
+    video_url,
+    author_name,
+    block_id,
+    description,
+    title_url,
+    iframeProps = {}
+  } = props.data;
+  const [showVideo, setShowVideo] = (0, import_react6.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "py-2 slack_blocks_to_jsx__video", id: block_id, children: [
+    author_name && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "slack_blocks_to_jsx__video_author", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-bold", children: "Manish Panwar" }) }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "slack_blocks_to_jsx__video_description", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: description }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-wrap items-center gap-1 slack_blocks_to_jsx__video_title", children: [
+      title_url ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { href: title_url, className: "text-blue-primary", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "w-[15px] h-[15px]",
+          onClick: () => setShowVideo((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              className: "text-blue-primary",
+              imageRendering: "optimizeQuality",
+              shapeRendering: "geometricPrecision",
+              textRendering: "geometricPrecision",
+              viewBox: "0 0 512 336.36",
+              width: 6,
+              height: 6,
+              style: {
+                transform: showVideo ? "rotate(0deg)" : "rotate(-90deg)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                "path",
+                {
+                  fill: "currentColor",
+                  fillRule: "nonzero",
+                  d: "M42.47.01L469.5 0C492.96 0 512 19.04 512 42.5c0 11.07-4.23 21.15-11.17 28.72L294.18 320.97c-14.93 18.06-41.7 20.58-59.76 5.65-1.8-1.49-3.46-3.12-4.97-4.83L10.43 70.39C-4.97 52.71-3.1 25.86 14.58 10.47 22.63 3.46 32.57.02 42.47.01z"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "slack_blocks_to_jsx__video_container max-w-max", children: showVideo && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "iframe",
+      __spreadValues({
+        title: alt_text,
+        className: "max-w-[360px] bg-gray-100 w-full aspect-video",
+        src: video_url
+      }, iframeProps)
+    ) })
+  ] });
 };
 
 // src/components/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Divider, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Section, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Context, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Actions, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(File, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Header2, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Input, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Video, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RichText, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ButtonElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckboxesElement, { data: element });
   if (element.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ImageElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ImageElement, { data: element });
   if (element.type === "plain_text_input")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PlaintTextInput, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlaintTextInput, { data: element });
   if (element.type === "users_select")
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UsersSelectElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
@@ -1159,15 +1853,15 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
 };
 
 // src/message.tsx
-var import_react6 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Message = (props) => {
   const {
     blocks,
@@ -1182,17 +1876,19 @@ var Message = (props) => {
     hooks,
     withoutWrapper = false
   } = props;
-  const { setChannels, setUsers, setHooks } = useGlobalData();
-  (0, import_react6.useEffect)(() => {
+  const { setChannels, setUsers, setHooks, setUserGroups } = useGlobalData();
+  (0, import_react7.useEffect)(() => {
     if (data == null ? void 0 : data.users)
       setUsers(data.users);
     if (data == null ? void 0 : data.channels)
       setChannels(data.channels);
+    if (data == null ? void 0 : data.user_groups)
+      setUserGroups(data.user_groups);
     if (hooks)
       setHooks(hooks);
   }, [data, hooks]);
   if (withoutWrapper) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
         id: "slack_blocks_to_jsx",
@@ -1202,18 +1898,18 @@ var Message = (props) => {
           const element = getBlockComponent(block);
           if (!element)
             return null;
-          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BlockWrapper, { children: element }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BlockWrapper, { children: element }, i);
         })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "section",
     {
       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_runtime25.jsx)(
+        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "a",
           {
             target: "_blank",
@@ -1225,14 +1921,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header, { name, time }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Header, { name, time }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]