slack-blocks-to-jsx 0.1.6 → 0.1.7

package/dist/index.d.mts

@@ -697,6 +697,102 @@ type FilterObject = {
     exclude_bot_users?: boolean;
 };
 
+type RichTextList = {
+    type: "rich_text_list";
+    style: "bullet" | "ordered";
+    /**
+     * The number of spaces to indent this block. It must be a number between 0 and 8.
+     */
+    indent?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    offset?: number;
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+    elements: RichTextSection[];
+};
+type RichTextPreformatted = {
+    type: "rich_text_preformatted";
+    elements: AnyRichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextQuote = {
+    type: "rich_text_quote";
+    elements: AnyRichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextSection = {
+    type: "rich_text_section";
+    elements: AnyRichTextSectionElement[];
+};
+type AnyRichTextBlockElement = RichTextList | RichTextPreformatted | RichTextQuote | RichTextSection;
+type AnyRichTextSectionElement = RichTextSectionText | RichTextSectionChannel | RichTextSectionUser | RichTextSectionEmoji | RichTextSectionLink | RichTextSectionTeam | RichTextSectionUsergroup | RichTextSectionDate | RichTextSectionBroadcast | RichTextSectionColor;
+interface RichTextSectionElement {
+    type: "text" | "channel" | "user" | "emoji" | "link" | "team" | "usergroup" | "date" | "broadcast" | "color";
+    style?: RichTextSectionElementStyle;
+}
+interface RichTextSectionText extends RichTextSectionElement {
+    type: "text";
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+}
+interface RichTextSectionChannel extends RichTextSectionElement {
+    type: "channel";
+    channel_id: string;
+}
+interface RichTextSectionUser extends RichTextSectionElement {
+    type: "user";
+    user_id: string;
+}
+interface RichTextSectionEmoji extends RichTextSectionElement {
+    type: "emoji";
+    name: string;
+    skin_tone?: number;
+    unicode?: string;
+}
+interface RichTextSectionLink extends RichTextSectionElement {
+    type: "link";
+    url: string;
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+}
+interface RichTextSectionTeam extends RichTextSectionElement {
+    type: "team";
+    team_id: string;
+}
+interface RichTextSectionUsergroup extends RichTextSectionElement {
+    type: "usergroup";
+    usergroup_id: string;
+}
+interface RichTextSectionDate extends RichTextSectionElement {
+    type: "date";
+    timestamp: number;
+    format: string;
+    style?: RichTextSectionElementStyleWithCode;
+}
+interface RichTextSectionBroadcast extends RichTextSectionElement {
+    type: "broadcast";
+    range: "channel" | "here" | "everyone";
+}
+interface RichTextSectionColor extends RichTextSectionElement {
+    type: "color";
+    value: string;
+}
+interface RichTextSectionElementStyle {
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+}
+interface RichTextSectionElementStyleWithCode extends RichTextSectionElementStyle {
+    code?: boolean;
+}
+
 type Block = ActionsBlock | ContextBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | SectionBlock | VideoBlock | RichTextBlock;
 type ActionsBlock = {
     /**
@@ -974,7 +1070,53 @@ type RichTextBlock = {
      * A ***rich_text*** block is a formatted, structured representation of text. It is the output of the Slack client's WYSIWYG composer, so all messages sent by end-users will have this format. You can use this block to create your own formatted text in Block Kit Builder or include user-defined formatted text in your Block Kit payload. You might encounter ***rich_text*** blocks in message payloads coming from our APIs, as a built-in type in the next-generation Slack platform, or as output of the ***rich_text_input*** block.
      */
     type: "rich_text";
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. ***block_id*** should be unique for each message and each iteration of a message. If a message is updated, use a new ***block_id***.
+     */
+    block_id?: string;
+    /**
+     * An array of rich text objects - rich_text_section, rich_text_list, rich_text_preformatted, and rich_text_quote. See your specific desired element below for more details.
+     */
+    elements: AnyRichTextBlockElement[];
+};
+
+type User = {
+    id: string;
+    name: string;
+};
+type Channel = {
+    id: string;
+    name: string;
+};
+type Hooks = {
+    user?: (data: User) => string;
+    channel?: (data: Channel) => string;
+    atChannel?: (data: {
+        name: string;
+    }) => string;
+    usergroup?: (data: Channel) => string;
+    atEveryone?: (data: {
+        name: string;
+    }) => string;
+    atHere?: (data: {
+        name: string;
+    }) => string;
+    date?: (data: {
+        timestamp: string;
+        format: string;
+        link?: string | undefined;
+        fallback: string;
+    }) => string;
+};
+type Data = {
+    users: User[];
+    channels: Channel[];
+    hooks: Hooks;
+    setUsers: (users: User[]) => void;
+    setChannels: (channels: Channel[]) => void;
+    setHooks: (hooks: Hooks) => void;
 };
+type GlobalStore = Data;
 
 type Props = {
     /**
@@ -993,15 +1135,10 @@ type Props = {
     style?: React.CSSProperties;
     unstyled?: boolean;
     data?: {
-        users?: {
-            id: string;
-            name: string;
-        }[];
-        channels?: {
-            id: string;
-            name: string;
-        }[];
+        users?: GlobalStore["users"];
+        channels?: GlobalStore["channels"];
     };
+    hooks?: GlobalStore["hooks"];
 };
 declare const Message: (props: Props) => JSX.Element;
 

package/dist/index.d.ts

@@ -697,6 +697,102 @@ type FilterObject = {
     exclude_bot_users?: boolean;
 };
 
+type RichTextList = {
+    type: "rich_text_list";
+    style: "bullet" | "ordered";
+    /**
+     * The number of spaces to indent this block. It must be a number between 0 and 8.
+     */
+    indent?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    offset?: number;
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+    elements: RichTextSection[];
+};
+type RichTextPreformatted = {
+    type: "rich_text_preformatted";
+    elements: AnyRichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextQuote = {
+    type: "rich_text_quote";
+    elements: AnyRichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextSection = {
+    type: "rich_text_section";
+    elements: AnyRichTextSectionElement[];
+};
+type AnyRichTextBlockElement = RichTextList | RichTextPreformatted | RichTextQuote | RichTextSection;
+type AnyRichTextSectionElement = RichTextSectionText | RichTextSectionChannel | RichTextSectionUser | RichTextSectionEmoji | RichTextSectionLink | RichTextSectionTeam | RichTextSectionUsergroup | RichTextSectionDate | RichTextSectionBroadcast | RichTextSectionColor;
+interface RichTextSectionElement {
+    type: "text" | "channel" | "user" | "emoji" | "link" | "team" | "usergroup" | "date" | "broadcast" | "color";
+    style?: RichTextSectionElementStyle;
+}
+interface RichTextSectionText extends RichTextSectionElement {
+    type: "text";
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+}
+interface RichTextSectionChannel extends RichTextSectionElement {
+    type: "channel";
+    channel_id: string;
+}
+interface RichTextSectionUser extends RichTextSectionElement {
+    type: "user";
+    user_id: string;
+}
+interface RichTextSectionEmoji extends RichTextSectionElement {
+    type: "emoji";
+    name: string;
+    skin_tone?: number;
+    unicode?: string;
+}
+interface RichTextSectionLink extends RichTextSectionElement {
+    type: "link";
+    url: string;
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+}
+interface RichTextSectionTeam extends RichTextSectionElement {
+    type: "team";
+    team_id: string;
+}
+interface RichTextSectionUsergroup extends RichTextSectionElement {
+    type: "usergroup";
+    usergroup_id: string;
+}
+interface RichTextSectionDate extends RichTextSectionElement {
+    type: "date";
+    timestamp: number;
+    format: string;
+    style?: RichTextSectionElementStyleWithCode;
+}
+interface RichTextSectionBroadcast extends RichTextSectionElement {
+    type: "broadcast";
+    range: "channel" | "here" | "everyone";
+}
+interface RichTextSectionColor extends RichTextSectionElement {
+    type: "color";
+    value: string;
+}
+interface RichTextSectionElementStyle {
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+}
+interface RichTextSectionElementStyleWithCode extends RichTextSectionElementStyle {
+    code?: boolean;
+}
+
 type Block = ActionsBlock | ContextBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | SectionBlock | VideoBlock | RichTextBlock;
 type ActionsBlock = {
     /**
@@ -974,7 +1070,53 @@ type RichTextBlock = {
      * A ***rich_text*** block is a formatted, structured representation of text. It is the output of the Slack client's WYSIWYG composer, so all messages sent by end-users will have this format. You can use this block to create your own formatted text in Block Kit Builder or include user-defined formatted text in your Block Kit payload. You might encounter ***rich_text*** blocks in message payloads coming from our APIs, as a built-in type in the next-generation Slack platform, or as output of the ***rich_text_input*** block.
      */
     type: "rich_text";
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. ***block_id*** should be unique for each message and each iteration of a message. If a message is updated, use a new ***block_id***.
+     */
+    block_id?: string;
+    /**
+     * An array of rich text objects - rich_text_section, rich_text_list, rich_text_preformatted, and rich_text_quote. See your specific desired element below for more details.
+     */
+    elements: AnyRichTextBlockElement[];
+};
+
+type User = {
+    id: string;
+    name: string;
+};
+type Channel = {
+    id: string;
+    name: string;
+};
+type Hooks = {
+    user?: (data: User) => string;
+    channel?: (data: Channel) => string;
+    atChannel?: (data: {
+        name: string;
+    }) => string;
+    usergroup?: (data: Channel) => string;
+    atEveryone?: (data: {
+        name: string;
+    }) => string;
+    atHere?: (data: {
+        name: string;
+    }) => string;
+    date?: (data: {
+        timestamp: string;
+        format: string;
+        link?: string | undefined;
+        fallback: string;
+    }) => string;
+};
+type Data = {
+    users: User[];
+    channels: Channel[];
+    hooks: Hooks;
+    setUsers: (users: User[]) => void;
+    setChannels: (channels: Channel[]) => void;
+    setHooks: (hooks: Hooks) => void;
 };
+type GlobalStore = Data;
 
 type Props = {
     /**
@@ -993,15 +1135,10 @@ type Props = {
     style?: React.CSSProperties;
     unstyled?: boolean;
     data?: {
-        users?: {
-            id: string;
-            name: string;
-        }[];
-        channels?: {
-            id: string;
-            name: string;
-        }[];
+        users?: GlobalStore["users"];
+        channels?: GlobalStore["channels"];
     };
+    hooks?: GlobalStore["hooks"];
 };
 declare const Message: (props: Props) => JSX.Element;
 

package/dist/index.js

@@ -58,23 +58,36 @@ var parseEmojis = (text) => {
 // src/utils/slack_text_to_jsx.ts
 var import_html_react_parser = __toESM(require("html-react-parser"));
 var import_slack_markdown = require("slack-markdown");
-var slack_text_parser = import_slack_markdown.toHTML;
 var slack_text_to_jsx = (text, parse_options) => {
-  const { markdown, users, channels } = parse_options;
+  const { users, channels, hooks } = parse_options;
   if (!text)
     return null;
-  const html_string = slack_text_parser(text, {
+  const html_string = (0, import_slack_markdown.toHTML)(text, {
     slackCallbacks: {
       user(data) {
         const user = users.find((u) => u.id === data.id || u.name === data.name);
+        if (hooks.user)
+          return hooks.user(user || data);
         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);
+        if (hooks.channel)
+          return hooks.channel(channel || data);
         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);
+      //   if (hooks.atChannel) return hooks.atChannel(channel || data);
+      //   const label = channel?.name || data.name;
+      //   return `<span class="slack_channel" data-channel-id="${channel?.id}">#${label}</span>`;
+      // },
+      // ...(hooks.atEveryone && { atEveryone: hooks.atEveryone }),
+      // ...(hooks.atHere && { atHere: hooks.atHere }),
+      // ...(hooks.date && { date: hooks.date }),
+      // ...(hooks.usergroup && { usergroup: hooks.usergroup }),
     }
   });
   return (0, import_html_react_parser.default)(html_string, { trim: false });
@@ -159,16 +172,20 @@ var import_zustand = require("zustand");
 var useBearStore = (0, import_zustand.create)((set) => ({
   users: [],
   channels: [],
+  hooks: {},
   setUsers: (users) => set({ users }),
-  setChannels: (channels) => set({ channels })
+  setChannels: (channels) => set({ channels }),
+  setHooks: (hooks) => set({ hooks })
 }));
 var useGlobalData = () => {
-  const { users, channels, setChannels, setUsers } = useBearStore();
+  const { users, channels, hooks, setChannels, setUsers, setHooks } = useBearStore();
   return {
     users,
     channels,
+    hooks,
     setChannels,
-    setUsers
+    setUsers,
+    setHooks
   };
 };
 
@@ -177,12 +194,12 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var TextObject = (props) => {
   const { type, text, emoji, verbatim = false } = props.data;
   const { className = "" } = props;
-  const { channels, users } = useGlobalData();
+  const { channels, users, hooks } = useGlobalData();
   let emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
   emoji_parsed = emoji_parsed.replace(/&gt;/g, "> ").replace(/&lt;/g, "<");
   if (type === "plain_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false, users, channels }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true, users, channels }) });
+    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 }) });
 };
 
 // src/components/elements/button_element.tsx
@@ -728,31 +745,203 @@ var Input = (props) => {
   );
 };
 
-// src/components/blocks/rich-text.tsx
+// src/components/blocks/rich_text/rich_text_section_channel.tsx
+var import_jsx_runtime14 = 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 label = (channel == null ? void 0 : channel.name) || channel_id;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "span",
+    {
+      "data-channel-id": channel_id,
+      className: `
+        slack_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: [
+        "#",
+        label
+      ]
+    }
+  );
+};
+
+// src/components/blocks/rich_text/rich_text_section_user.tsx
+var import_jsx_runtime15 = 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 label = (user == null ? void 0 : user.name) || user_id;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "span",
+    {
+      "data-user-id": user_id,
+      className: `
+        slack_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: [
+        "@",
+        label
+      ]
+    }
+  );
+};
+
+// src/components/blocks/rich_text/rich_text.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var RichText = (props) => {
-  const { type } = props.data;
+  const { elements, block_id } = props.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: block_id, children: elements.map((element, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsxs)("div", { className: "flex gap-2", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: `list-none`, children: elements.map((el, i) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "li",
+          {
+            className: "flex",
+            style: {
+              marginLeft: indent ? indent > 5 ? 0 : indent * 28 + 6 + 28 : 0
+            },
+            children: [
+              style === "ordered" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+                i + 1,
+                "."
+              ] }),
+              style === "bullet" && /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
+                (indent === 1 || indent === 4 || indent === 7) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-1.5 h-1.5 rounded-full border border-current" }),
+                (indent === 2 || indent === 5 || indent === 8) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-1.5 h-1.5 rounded-[1.5px] bg-current" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "div",
+                {
+                  style: {
+                    marginLeft: 6
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Element, { element: el }, `${element.type}__${i}`)
+                }
+              )
+            ]
+          },
+          `${el.type}__${i}`
+        );
+      }) })
+    ] });
+  }
+  if (element.type === "rich_text_preformatted") {
+    const { elements, border } = element;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2 w-full", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "pre",
+        {
+          className: "p-2 rounded my-1 whitespace-pre-wrap bg-gray-secondary text-xs leading-[1.50001] border grow",
+          style: {
+            wordWrap: "break-word",
+            wordBreak: "normal"
+          },
+          children: elements.map((el, i) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+          })
+        }
+      )
+    ] });
+  }
+  if (element.type === "rich_text_quote") {
+    const { elements, border } = element;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      elements.map((el, i) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+      })
+    ] });
+  }
+  if (element.type === "rich_text_section") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "inline-block", children: element.elements.map((el, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+    }) });
+  }
   return null;
 };
+var RichTextSectionElement = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { element } = props;
+  if (element.type === "text") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "span",
+      {
+        className: `
+            ${((_a = element.style) == null ? void 0 : _a.italic) ? "italic" : ""}
+            ${((_b = element.style) == null ? void 0 : _b.strike) ? "line-through" : ""}
+            ${((_c = element.style) == null ? void 0 : _c.code) ? "slack_inline_code" : ""}
+            ${((_d = element.style) == null ? void 0 : _d.bold) ? "font-medium" : ""}
+          `,
+        children: element.text
+      }
+    );
+  }
+  if (element.type === "user") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RichTextSectionUser, { user_id: element.user_id, style: element.style });
+  }
+  if (element.type === "channel") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RichTextSectionChannel, { channel_id: element.channel_id, style: element.style });
+  }
+  if (element.type === "link") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "a",
+      {
+        target: "_blank",
+        rel: "noreferrer noopener",
+        href: element.url,
+        className: `
+        text-blue-primary hover:underline underline-offset-4
+          ${((_e = element.style) == null ? void 0 : _e.italic) ? "italic" : ""}
+          ${((_f = element.style) == null ? void 0 : _f.strike) ? "line-through" : ""}
+          ${((_g = element.style) == null ? void 0 : _g.code) ? "slack_inline_code" : ""}
+          ${((_h = element.style) == null ? void 0 : _h.bold) ? "font-medium" : ""}
+        `,
+        children: element.text
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", {});
+};
 
 // src/components/blocks/section.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = 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_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime14.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextObject, { data: text }),
-          fields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextObject, { data: field }, i);
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextObject, { data: text }),
+          fields && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextObject, { data: field }, i);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
@@ -765,41 +954,41 @@ var Video = (props) => {
 };
 
 // src/components/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Divider, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Section, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Image, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Context, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Actions, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(File, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Header2, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Video, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RichText, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ButtonElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxesElement, { data: element });
   if (element.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageElement, { data: element });
   if (element.type === "plain_text_input")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlaintTextInput, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlaintTextInput, { data: element });
   if (element.type === "users_select")
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UsersSelectElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
@@ -838,15 +1027,15 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-base break-words font-normal", children });
 };
 
 // src/message.tsx
 var import_react6 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Message = (props) => {
   const {
     blocks,
@@ -857,22 +1046,25 @@ var Message = (props) => {
     style,
     showBlockKitDebug = false,
     unstyled = false,
-    data = {}
+    data = {},
+    hooks = {}
   } = props;
-  const { setChannels, setUsers } = useGlobalData();
+  const { setChannels, setUsers, setHooks } = useGlobalData();
   (0, import_react6.useEffect)(() => {
     if (data.users)
       setUsers(data.users);
     if (data.channels)
       setChannels(data.channels);
+    if (hooks)
+      setHooks(hooks);
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime17.jsx)(
+        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "a",
           {
             target: "_blank",
@@ -884,14 +1076,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Header, { name, time }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: blocks.map((block, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Header, { name, time }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]

package/dist/index.mjs

@@ -21,24 +21,37 @@ var parseEmojis = (text) => {
 
 // src/utils/slack_text_to_jsx.ts
 import parse from "html-react-parser";
-import { toHTML } from "slack-markdown";
-var slack_text_parser = toHTML;
+import { toHTML as slack_text_parser } from "slack-markdown";
 var slack_text_to_jsx = (text, parse_options) => {
-  const { markdown, users, channels } = parse_options;
+  const { users, channels, hooks } = parse_options;
   if (!text)
     return null;
   const html_string = slack_text_parser(text, {
     slackCallbacks: {
       user(data) {
         const user = users.find((u) => u.id === data.id || u.name === data.name);
+        if (hooks.user)
+          return hooks.user(user || data);
         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);
+        if (hooks.channel)
+          return hooks.channel(channel || data);
         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);
+      //   if (hooks.atChannel) return hooks.atChannel(channel || data);
+      //   const label = channel?.name || data.name;
+      //   return `<span class="slack_channel" data-channel-id="${channel?.id}">#${label}</span>`;
+      // },
+      // ...(hooks.atEveryone && { atEveryone: hooks.atEveryone }),
+      // ...(hooks.atHere && { atHere: hooks.atHere }),
+      // ...(hooks.date && { date: hooks.date }),
+      // ...(hooks.usergroup && { usergroup: hooks.usergroup }),
     }
   });
   return parse(html_string, { trim: false });
@@ -123,16 +136,20 @@ import { create } from "zustand";
 var useBearStore = create((set) => ({
   users: [],
   channels: [],
+  hooks: {},
   setUsers: (users) => set({ users }),
-  setChannels: (channels) => set({ channels })
+  setChannels: (channels) => set({ channels }),
+  setHooks: (hooks) => set({ hooks })
 }));
 var useGlobalData = () => {
-  const { users, channels, setChannels, setUsers } = useBearStore();
+  const { users, channels, hooks, setChannels, setUsers, setHooks } = useBearStore();
   return {
     users,
     channels,
+    hooks,
     setChannels,
-    setUsers
+    setUsers,
+    setHooks
   };
 };
 
@@ -141,12 +158,12 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var TextObject = (props) => {
   const { type, text, emoji, verbatim = false } = props.data;
   const { className = "" } = props;
-  const { channels, users } = useGlobalData();
+  const { channels, users, hooks } = useGlobalData();
   let emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
   emoji_parsed = emoji_parsed.replace(/&gt;/g, "> ").replace(/&lt;/g, "<");
   if (type === "plain_text")
-    return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false, users, channels }) });
-  return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true, users, channels }) });
+    return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false, users, channels, hooks }) });
+  return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true, users, channels, hooks }) });
 };
 
 // src/components/elements/button_element.tsx
@@ -692,31 +709,203 @@ var Input = (props) => {
   );
 };
 
-// src/components/blocks/rich-text.tsx
+// src/components/blocks/rich_text/rich_text_section_channel.tsx
+import { jsxs as jsxs8 } from "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 label = (channel == null ? void 0 : channel.name) || channel_id;
+  return /* @__PURE__ */ jsxs8(
+    "span",
+    {
+      "data-channel-id": channel_id,
+      className: `
+        slack_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: [
+        "#",
+        label
+      ]
+    }
+  );
+};
+
+// src/components/blocks/rich_text/rich_text_section_user.tsx
+import { jsxs as jsxs9 } from "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 label = (user == null ? void 0 : user.name) || user_id;
+  return /* @__PURE__ */ jsxs9(
+    "span",
+    {
+      "data-user-id": user_id,
+      className: `
+        slack_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: [
+        "@",
+        label
+      ]
+    }
+  );
+};
+
+// src/components/blocks/rich_text/rich_text.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var RichText = (props) => {
-  const { type } = props.data;
+  const { elements, block_id } = props.data;
+  return /* @__PURE__ */ jsx14("div", { id: block_id, children: elements.map((element, i) => {
+    return /* @__PURE__ */ jsx14(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__ */ jsxs10("div", { className: "flex gap-2", children: [
+      border === 1 && /* @__PURE__ */ jsx14("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ jsx14("ul", { className: `list-none`, children: elements.map((el, i) => {
+        return /* @__PURE__ */ jsxs10(
+          "li",
+          {
+            className: "flex",
+            style: {
+              marginLeft: indent ? indent > 5 ? 0 : indent * 28 + 6 + 28 : 0
+            },
+            children: [
+              style === "ordered" && /* @__PURE__ */ jsxs10("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+                i + 1,
+                "."
+              ] }),
+              style === "bullet" && /* @__PURE__ */ jsxs10("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+                (indent === void 0 || indent === 0 || indent === 3 || indent === 6) && /* @__PURE__ */ jsx14("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
+                (indent === 1 || indent === 4 || indent === 7) && /* @__PURE__ */ jsx14("span", { className: "w-1.5 h-1.5 rounded-full border border-current" }),
+                (indent === 2 || indent === 5 || indent === 8) && /* @__PURE__ */ jsx14("span", { className: "w-1.5 h-1.5 rounded-[1.5px] bg-current" })
+              ] }),
+              /* @__PURE__ */ jsx14(
+                "div",
+                {
+                  style: {
+                    marginLeft: 6
+                  },
+                  children: /* @__PURE__ */ jsx14(Element, { element: el }, `${element.type}__${i}`)
+                }
+              )
+            ]
+          },
+          `${el.type}__${i}`
+        );
+      }) })
+    ] });
+  }
+  if (element.type === "rich_text_preformatted") {
+    const { elements, border } = element;
+    return /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 w-full", children: [
+      border === 1 && /* @__PURE__ */ jsx14("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ jsx14(
+        "pre",
+        {
+          className: "p-2 rounded my-1 whitespace-pre-wrap bg-gray-secondary text-xs leading-[1.50001] border grow",
+          style: {
+            wordWrap: "break-word",
+            wordBreak: "normal"
+          },
+          children: elements.map((el, i) => {
+            return /* @__PURE__ */ jsx14(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+          })
+        }
+      )
+    ] });
+  }
+  if (element.type === "rich_text_quote") {
+    const { elements, border } = element;
+    return /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx14("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      border === 1 && /* @__PURE__ */ jsx14("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      elements.map((el, i) => {
+        return /* @__PURE__ */ jsx14(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+      })
+    ] });
+  }
+  if (element.type === "rich_text_section") {
+    return /* @__PURE__ */ jsx14("div", { className: "inline-block", children: element.elements.map((el, i) => {
+      return /* @__PURE__ */ jsx14(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+    }) });
+  }
   return null;
 };
+var RichTextSectionElement = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { element } = props;
+  if (element.type === "text") {
+    return /* @__PURE__ */ jsx14(
+      "span",
+      {
+        className: `
+            ${((_a = element.style) == null ? void 0 : _a.italic) ? "italic" : ""}
+            ${((_b = element.style) == null ? void 0 : _b.strike) ? "line-through" : ""}
+            ${((_c = element.style) == null ? void 0 : _c.code) ? "slack_inline_code" : ""}
+            ${((_d = element.style) == null ? void 0 : _d.bold) ? "font-medium" : ""}
+          `,
+        children: element.text
+      }
+    );
+  }
+  if (element.type === "user") {
+    return /* @__PURE__ */ jsx14(RichTextSectionUser, { user_id: element.user_id, style: element.style });
+  }
+  if (element.type === "channel") {
+    return /* @__PURE__ */ jsx14(RichTextSectionChannel, { channel_id: element.channel_id, style: element.style });
+  }
+  if (element.type === "link") {
+    return /* @__PURE__ */ jsx14(
+      "a",
+      {
+        target: "_blank",
+        rel: "noreferrer noopener",
+        href: element.url,
+        className: `
+        text-blue-primary hover:underline underline-offset-4
+          ${((_e = element.style) == null ? void 0 : _e.italic) ? "italic" : ""}
+          ${((_f = element.style) == null ? void 0 : _f.strike) ? "line-through" : ""}
+          ${((_g = element.style) == null ? void 0 : _g.code) ? "slack_inline_code" : ""}
+          ${((_h = element.style) == null ? void 0 : _h.bold) ? "font-medium" : ""}
+        `,
+        children: element.text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14("span", {});
+};
 
 // src/components/blocks/section.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "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__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "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__ */ jsx14("div", { className: "grow", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ jsx14(TextObject, { data: text }),
-          fields && /* @__PURE__ */ jsx14("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ jsx14(TextObject, { data: field }, i);
+        /* @__PURE__ */ jsx15("div", { className: "grow", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ jsx15(TextObject, { data: text }),
+          fields && /* @__PURE__ */ jsx15("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ jsx15(TextObject, { data: field }, i);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ jsx14("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ jsx15("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
@@ -729,41 +918,41 @@ var Video = (props) => {
 };
 
 // src/components/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ jsx15(Divider, { data: block });
+    return /* @__PURE__ */ jsx16(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ jsx15(Section, { data: block });
+    return /* @__PURE__ */ jsx16(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ jsx15(Image, { data: block });
+    return /* @__PURE__ */ jsx16(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ jsx15(Context, { data: block });
+    return /* @__PURE__ */ jsx16(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ jsx15(Actions, { data: block });
+    return /* @__PURE__ */ jsx16(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ jsx15(File, { data: block });
+    return /* @__PURE__ */ jsx16(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ jsx15(Header2, { data: block });
+    return /* @__PURE__ */ jsx16(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ jsx15(Input, { data: block });
+    return /* @__PURE__ */ jsx16(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ jsx15(Video, { data: block });
+    return /* @__PURE__ */ jsx16(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ jsx15(RichText, { data: block });
+    return /* @__PURE__ */ jsx16(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ jsx15(ButtonElement, { data: element });
+    return /* @__PURE__ */ jsx16(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ jsx15(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ jsx16(CheckboxesElement, { data: element });
   if (element.type === "image")
-    return /* @__PURE__ */ jsx15(ImageElement, { data: element });
+    return /* @__PURE__ */ jsx16(ImageElement, { data: element });
   if (element.type === "plain_text_input")
-    return /* @__PURE__ */ jsx15(PlaintTextInput, { data: element });
+    return /* @__PURE__ */ jsx16(PlaintTextInput, { data: element });
   if (element.type === "users_select")
-    return /* @__PURE__ */ jsx15(UsersSelectElement, { data: element });
+    return /* @__PURE__ */ jsx16(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
@@ -802,15 +991,15 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx16("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ jsx17("div", { className: "text-base break-words font-normal", children });
 };
 
 // src/message.tsx
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var Message = (props) => {
   const {
     blocks,
@@ -821,22 +1010,25 @@ var Message = (props) => {
     style,
     showBlockKitDebug = false,
     unstyled = false,
-    data = {}
+    data = {},
+    hooks = {}
   } = props;
-  const { setChannels, setUsers } = useGlobalData();
+  const { setChannels, setUsers, setHooks } = useGlobalData();
   useEffect5(() => {
     if (data.users)
       setUsers(data.users);
     if (data.channels)
       setChannels(data.channels);
+    if (hooks)
+      setHooks(hooks);
   }, [data]);
-  return /* @__PURE__ */ jsx17("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx18("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs12(
     "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__ */ jsx17(
+        showBlockKitDebug && /* @__PURE__ */ jsx18(
           "a",
           {
             target: "_blank",
@@ -848,14 +1040,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ jsx17("div", { className: "shrink-0", children: /* @__PURE__ */ jsx17("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ jsx17(Header, { name, time }),
-          /* @__PURE__ */ jsx17("div", { children: blocks.map((block, i) => {
+        /* @__PURE__ */ jsx18("div", { className: "shrink-0", children: /* @__PURE__ */ jsx18("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ jsx18(Header, { name, time }),
+          /* @__PURE__ */ jsx18("div", { children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ jsx17(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ jsx18(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]

package/dist/style.css

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

package/package.json

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