slack-blocks-to-jsx 0.3.0 → 0.3.2

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 type Element = ButtonElement | CheckboxesElement | DatePickerElement | DateTimePickerElement | EmailInputElement | ImageElement | MultiStaticSelectElement | MultiExternalSelectElement | MultiUsersSelectElement | MultiConversationsSelectElement | MultiChannelsSelectElement | NumberInputElement | OverflowMenuElement | PlainTextInputElement | RadioButtonsElement | StaticSelectElement | ExternalSelectElement | UsersSelectElement | ConversationsSelectElement | ChannelsSelectElement | TimePickerElement | UrlTextInputElement | RichTextBlockElement;
 type ButtonElement = {
@@ -965,6 +965,10 @@ type VideoBlock = {
      * The URL to be embedded. Must match any existing {@link https://api.slack.com/reference/messaging/link-unfurling#configuring_domains unfurl domains} within the app and point to a HTTPS URL.
      */
     video_url: string;
+    /**
+     * This is a custom property added by slack-block-to-jsx library to more control over iframe
+     */
+    iframeProps?: ComponentPropsWithoutRef<"iframe">;
 };
 type RichTextBlock = {
     /**

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 type Element = ButtonElement | CheckboxesElement | DatePickerElement | DateTimePickerElement | EmailInputElement | ImageElement | MultiStaticSelectElement | MultiExternalSelectElement | MultiUsersSelectElement | MultiConversationsSelectElement | MultiChannelsSelectElement | NumberInputElement | OverflowMenuElement | PlainTextInputElement | RadioButtonsElement | StaticSelectElement | ExternalSelectElement | UsersSelectElement | ConversationsSelectElement | ChannelsSelectElement | TimePickerElement | UrlTextInputElement | RichTextBlockElement;
 type ButtonElement = {
@@ -965,6 +965,10 @@ type VideoBlock = {
      * The URL to be embedded. Must match any existing {@link https://api.slack.com/reference/messaging/link-unfurling#configuring_domains unfurl domains} within the app and point to a HTTPS URL.
      */
     video_url: string;
+    /**
+     * This is a custom property added by slack-block-to-jsx library to more control over iframe
+     */
+    iframeProps?: ComponentPropsWithoutRef<"iframe">;
 };
 type RichTextBlock = {
     /**

package/dist/index.js

@@ -1316,30 +1316,31 @@ var File = (props) => {
 };
 
 // src/components/blocks/header.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Header2 = (props) => {
-  const { type } = props.data;
-  return null;
+  const { text, block_id } = props.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id: block_id, className: "mt-1 slack_blocks_to_jsx__header", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "text-header font-bold slack_blocks_to_jsx__header_heading", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextObject, { data: text }) }) });
 };
 
 // src/components/blocks/image.tsx
 var import_react5 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = 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_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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
         alt_text,
         image_bytes && ` (${Math.round(image_bytes / 1e3)} kB)`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
           type: "button",
           className: "w-[15px] h-[15px]",
           onClick: () => setShowImage((prev) => !prev),
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -1355,7 +1356,7 @@ var Image = (props) => {
               style: {
                 transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "path",
                 {
                   fill: "currentColor",
@@ -1368,7 +1369,7 @@ var Image = (props) => {
         }
       )
     ] }),
-    showImage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "img",
       {
         src: image_url,
@@ -1383,17 +1384,17 @@ var Image = (props) => {
 };
 
 // src/components/blocks/input.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = 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_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.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_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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           TextObject,
           {
             data: {
@@ -1404,11 +1405,11 @@ var Input = (props) => {
             }
           }
         ),
-        /* @__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" })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-1 flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative shrink-0", children: element }),
+          (hint || given_element.type === "plain_text_input") && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-black-secondary text-small flex gap-1", children: [
+            hint && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "inline", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TextObject, { data: hint }) }),
+            given_element.type === "plain_text_input" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { children: "\u21B5 Please 'enter' to submit" })
           ] })
         ] })
       ] }) })
@@ -1417,27 +1418,27 @@ var Input = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_list_wrapper.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = 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_runtime28.jsx)("ul", __spreadProps(__spreadValues({}, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", __spreadProps(__spreadValues({}, rest), { children }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ol", __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // src/components/blocks/rich_text/rich_text_section_broadcast.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var RichTextSectionBroadcast = (props) => {
   const { range, style } = props;
   const { hooks } = useGlobalData();
   if (range === "channel" && hooks.atChannel)
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: hooks.atChannel() });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: hooks.atChannel() });
   if (range === "everyone" && hooks.atEveryone)
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: hooks.atEveryone() });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: hooks.atHere() });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "span",
     {
       className: `
@@ -1456,15 +1457,15 @@ var RichTextSectionBroadcast = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_section_channel.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = 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 || u.name === channel_id);
   const label = (channel == null ? void 0 : channel.name) || channel_id;
   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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: hooks.channel(channel || { id: channel_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "span",
     {
       "data-channel-id": (channel == null ? void 0 : channel.id) || channel_id,
@@ -1484,23 +1485,23 @@ var RichTextSectionChannel = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_section_emoji.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var RichTextSectionEmoji = (props) => {
   const { name } = props;
   const { hooks } = useGlobalData();
-  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}:`) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = 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 || u.name === user_id);
   const label = (user == null ? void 0 : user.name) || user_id;
   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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: hooks.user(user || { id: user_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "span",
     {
       "data-user-id": (user == null ? void 0 : user.id) || user_id,
@@ -1520,15 +1521,15 @@ var RichTextSectionUser = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_section_user_group.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = 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 || u.name === usergroup_id);
   const label = (group == null ? void 0 : group.name) || usergroup_id;
   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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: hooks.usergroup(group || { id: usergroup_id, name: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "span",
     {
       "data-usergroup-id": (group == null ? void 0 : group.id) || usergroup_id,
@@ -1548,22 +1549,22 @@ var RichTextSectionUserGroup = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_section.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var RichTextSectionElement = (props) => {
   const { element } = props;
   if (element.type === "user")
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionUser, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionUser, __spreadValues({}, element));
   if (element.type === "channel")
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionChannel, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionChannel, __spreadValues({}, element));
   if (element.type === "broadcast")
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionBroadcast, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionBroadcast, __spreadValues({}, element));
   if (element.type === "emoji")
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionEmoji, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionEmoji, __spreadValues({}, element));
   if (element.type === "usergroup")
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RichTextSectionUserGroup, __spreadValues({}, element));
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionUserGroup, __spreadValues({}, element));
   if (element.type === "text") {
     const { text, style } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "span",
       {
         className: `
@@ -1579,7 +1580,7 @@ var RichTextSectionElement = (props) => {
   }
   if (element.type === "link") {
     const { url, style, text } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "a",
       {
         target: "_blank",
@@ -1601,21 +1602,21 @@ var RichTextSectionElement = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var RichText = (props) => {
   const { elements, block_id } = props.data;
-  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}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { id: block_id, className: "slack_blocks_to_jsx__rich_text", children: elements.map((element, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.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_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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_list_element", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RichTextListWrapper, { element, className: `list-none`, children: elements.map((el, i) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "li",
           {
             className: "flex",
@@ -1623,22 +1624,22 @@ var Element = (props) => {
               marginLeft: indent ? indent > 5 ? 0 : indent * 28 + 6 + 28 : 0
             },
             children: [
-              style === "ordered" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+              style === "ordered" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
                 i + 1,
                 "."
               ] }),
-              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" })
+              style === "bullet" && /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
+                (indent === 1 || indent === 4 || indent === 7) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "w-1.5 h-1.5 rounded-full border border-current" }),
+                (indent === 2 || indent === 5 || indent === 8) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "w-1.5 h-1.5 rounded-[1.5px] bg-current" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 "div",
                 {
                   style: {
                     marginLeft: 6
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Element, { element: el }, `${element.type}__${i}`)
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Element, { element: el }, `${element.type}__${i}`)
                 }
               )
             ]
@@ -1650,9 +1651,9 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_preformatted") {
     const { elements, border } = element;
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("code", { className: "flex gap-2 w-full slack_blocks_to_jsx__rich_text_preformatted_element", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "pre",
         {
           className: "p-2 rounded my-1 whitespace-pre-wrap bg-gray-secondary text-xs leading-[1.50001] border grow",
@@ -1661,7 +1662,7 @@ var Element = (props) => {
             wordBreak: "normal"
           },
           children: elements.map((el, i) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
           })
         }
       )
@@ -1669,88 +1670,152 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_quote") {
     const { elements, border } = element;
-    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" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("blockquote", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_quote_element", children: [
+      border === 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       elements.map((el, i) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
       })
     ] });
   }
   if (element.type === "rich_text_section") {
     const { elements } = element;
-    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 /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "inline-block slack_blocks_to_jsx__rich_text_section_element", children: elements.map((el, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
     }) });
   }
   return null;
 };
 
 // src/components/blocks/section.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = 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_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.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_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);
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: text }),
+          fields && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: field }, i);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime38 = 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_runtime38.jsxs)("div", { className: "py-2 slack_blocks_to_jsx__video", id: block_id, children: [
+    author_name && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "slack_blocks_to_jsx__video_author", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "font-bold", children: "Manish Panwar" }) }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "slack_blocks_to_jsx__video_description", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TextObject, { data: description }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-wrap items-center gap-1 slack_blocks_to_jsx__video_title", children: [
+      title_url ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { href: title_url, className: "text-blue-primary", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TextObject, { data: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TextObject, { data: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "w-[15px] h-[15px]",
+          onClick: () => setShowVideo((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime38.jsx)("div", { className: "slack_blocks_to_jsx__video_container max-w-max", children: showVideo && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Divider, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Section, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Image, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Context, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Actions, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(File, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Header2, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Input, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Video, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RichText, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ButtonElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckboxesElement, { data: element });
   if (element.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ImageElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ImageElement, { data: element });
   if (element.type === "plain_text_input")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlaintTextInput, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlaintTextInput, { data: element });
   if (element.type === "users_select")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(UsersSelectElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
@@ -1789,15 +1854,15 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime39 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Message = (props) => {
   const {
     blocks,
@@ -1813,7 +1878,7 @@ var Message = (props) => {
     withoutWrapper = false
   } = props;
   const { setChannels, setUsers, setHooks, setUserGroups } = useGlobalData();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (data == null ? void 0 : data.users)
       setUsers(data.users);
     if (data == null ? void 0 : data.channels)
@@ -1824,7 +1889,7 @@ var Message = (props) => {
       setHooks(hooks);
   }, [data, hooks]);
   if (withoutWrapper) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
         id: "slack_blocks_to_jsx",
@@ -1834,18 +1899,18 @@ var Message = (props) => {
           const element = getBlockComponent(block);
           if (!element)
             return null;
-          return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BlockWrapper, { children: element }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BlockWrapper, { children: element }, i);
         })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime39.jsx)(
+        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "a",
           {
             target: "_blank",
@@ -1857,14 +1922,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Header, { name, time }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Header, { name, time }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime39.jsx)(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]