slack-blocks-to-jsx 0.3.0 → 0.3.1

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

@@ -1710,47 +1710,111 @@ var Section = (props) => {
 };
 
 // src/components/blocks/video.tsx
+var import_react6 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Video = (props) => {
-  const { type } = props.data;
-  return null;
+  const {
+    // thumbnail_url,
+    // provider_icon_url,
+    // provider_name,
+    //
+    alt_text,
+    title,
+    video_url,
+    author_name,
+    block_id,
+    description,
+    title_url,
+    iframeProps = {}
+  } = props.data;
+  const [showVideo, setShowVideo] = (0, import_react6.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "py-2 slack_blocks_to_jsx__video", id: block_id, children: [
+    author_name && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "slack_blocks_to_jsx__video_author", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-bold", children: "Manish Panwar" }) }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "slack_blocks_to_jsx__video_description", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: description }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-wrap items-center gap-1 slack_blocks_to_jsx__video_title", children: [
+      title_url ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { href: title_url, className: "text-blue-primary", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextObject, { data: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "w-[15px] h-[15px]",
+          onClick: () => setShowVideo((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              className: "text-blue-primary",
+              imageRendering: "optimizeQuality",
+              shapeRendering: "geometricPrecision",
+              textRendering: "geometricPrecision",
+              viewBox: "0 0 512 336.36",
+              width: 6,
+              height: 6,
+              style: {
+                transform: showVideo ? "rotate(0deg)" : "rotate(-90deg)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                "path",
+                {
+                  fill: "currentColor",
+                  fillRule: "nonzero",
+                  d: "M42.47.01L469.5 0C492.96 0 512 19.04 512 42.5c0 11.07-4.23 21.15-11.17 28.72L294.18 320.97c-14.93 18.06-41.7 20.58-59.76 5.65-1.8-1.49-3.46-3.12-4.97-4.83L10.43 70.39C-4.97 52.71-3.1 25.86 14.58 10.47 22.63 3.46 32.57.02 42.47.01z"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "slack_blocks_to_jsx__video_container max-w-max", children: showVideo && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "iframe",
+      __spreadValues({
+        title: alt_text,
+        className: "max-w-[360px] bg-gray-100 w-full aspect-video",
+        src: video_url
+      }, iframeProps)
+    ) })
+  ] });
 };
 
 // src/components/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = 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_runtime38.jsx)(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Section, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Image, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Context, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Actions, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(File, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Header2, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Input, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Video, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RichText, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ButtonElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckboxesElement, { data: element });
   if (element.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ImageElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ImageElement, { data: element });
   if (element.type === "plain_text_input")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlaintTextInput, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlaintTextInput, { data: element });
   if (element.type === "users_select")
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(UsersSelectElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
@@ -1789,15 +1853,15 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = 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_runtime39.jsx)("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
 };
 
 // src/message.tsx
-var import_react6 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Message = (props) => {
   const {
     blocks,
@@ -1813,7 +1877,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 +1888,7 @@ var Message = (props) => {
       setHooks(hooks);
   }, [data, hooks]);
   if (withoutWrapper) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
         id: "slack_blocks_to_jsx",
@@ -1834,18 +1898,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_runtime40.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_runtime40.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "section",
     {
       className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${unstyled ? "styles_disabled" : "styles_enabled"} ${className}`,
       style,
       children: [
-        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "a",
           {
             target: "_blank",
@@ -1857,14 +1921,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_runtime40.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Header, { name, time }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]

package/dist/index.mjs

@@ -1677,47 +1677,111 @@ var Section = (props) => {
 };
 
 // src/components/blocks/video.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx37, jsxs as jsxs19 } from "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] = useState6(true);
+  return /* @__PURE__ */ jsxs19("div", { className: "py-2 slack_blocks_to_jsx__video", id: block_id, children: [
+    author_name && /* @__PURE__ */ jsx37("div", { className: "slack_blocks_to_jsx__video_author", children: /* @__PURE__ */ jsx37("span", { className: "font-bold", children: "Manish Panwar" }) }),
+    description && /* @__PURE__ */ jsx37("div", { className: "slack_blocks_to_jsx__video_description", children: /* @__PURE__ */ jsx37(TextObject, { data: description }) }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap items-center gap-1 slack_blocks_to_jsx__video_title", children: [
+      title_url ? /* @__PURE__ */ jsx37("a", { href: title_url, className: "text-blue-primary", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx37(TextObject, { data: title }) }) : /* @__PURE__ */ jsx37("p", { children: /* @__PURE__ */ jsx37(TextObject, { data: title }) }),
+      /* @__PURE__ */ jsx37(
+        "button",
+        {
+          type: "button",
+          className: "w-[15px] h-[15px]",
+          onClick: () => setShowVideo((prev) => !prev),
+          children: /* @__PURE__ */ jsx37(
+            "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__ */ jsx37(
+                "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__ */ jsx37("div", { className: "slack_blocks_to_jsx__video_container max-w-max", children: showVideo && /* @__PURE__ */ jsx37(
+      "iframe",
+      __spreadValues({
+        title: alt_text,
+        className: "max-w-[360px] bg-gray-100 w-full aspect-video",
+        src: video_url
+      }, iframeProps)
+    ) })
+  ] });
 };
 
 // src/components/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ jsx37(Divider, { data: block });
+    return /* @__PURE__ */ jsx38(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ jsx37(Section, { data: block });
+    return /* @__PURE__ */ jsx38(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ jsx37(Image, { data: block });
+    return /* @__PURE__ */ jsx38(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ jsx37(Context, { data: block });
+    return /* @__PURE__ */ jsx38(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ jsx37(Actions, { data: block });
+    return /* @__PURE__ */ jsx38(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ jsx37(File, { data: block });
+    return /* @__PURE__ */ jsx38(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ jsx37(Header2, { data: block });
+    return /* @__PURE__ */ jsx38(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ jsx37(Input, { data: block });
+    return /* @__PURE__ */ jsx38(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ jsx37(Video, { data: block });
+    return /* @__PURE__ */ jsx38(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ jsx37(RichText, { data: block });
+    return /* @__PURE__ */ jsx38(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ jsx37(ButtonElement, { data: element });
+    return /* @__PURE__ */ jsx38(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ jsx37(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ jsx38(CheckboxesElement, { data: element });
   if (element.type === "image")
-    return /* @__PURE__ */ jsx37(ImageElement, { data: element });
+    return /* @__PURE__ */ jsx38(ImageElement, { data: element });
   if (element.type === "plain_text_input")
-    return /* @__PURE__ */ jsx37(PlaintTextInput, { data: element });
+    return /* @__PURE__ */ jsx38(PlaintTextInput, { data: element });
   if (element.type === "users_select")
-    return /* @__PURE__ */ jsx37(UsersSelectElement, { data: element });
+    return /* @__PURE__ */ jsx38(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
@@ -1756,15 +1820,15 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx38("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
+  return /* @__PURE__ */ jsx39("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
 };
 
 // src/message.tsx
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
 var Message = (props) => {
   const {
     blocks,
@@ -1791,7 +1855,7 @@ var Message = (props) => {
       setHooks(hooks);
   }, [data, hooks]);
   if (withoutWrapper) {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(
       "div",
       {
         id: "slack_blocks_to_jsx",
@@ -1801,18 +1865,18 @@ var Message = (props) => {
           const element = getBlockComponent(block);
           if (!element)
             return null;
-          return /* @__PURE__ */ jsx39(BlockWrapper, { children: element }, i);
+          return /* @__PURE__ */ jsx40(BlockWrapper, { children: element }, i);
         })
       }
     );
   }
-  return /* @__PURE__ */ jsx39("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx40("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs20(
     "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__ */ jsx39(
+        showBlockKitDebug && /* @__PURE__ */ jsx40(
           "a",
           {
             target: "_blank",
@@ -1824,14 +1888,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ jsx39("div", { className: "shrink-0", children: /* @__PURE__ */ jsx39("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ jsx39(Header, { name, time }),
-          /* @__PURE__ */ jsx39("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
+        /* @__PURE__ */ jsx40("div", { className: "shrink-0", children: /* @__PURE__ */ jsx40("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ jsx40(Header, { name, time }),
+          /* @__PURE__ */ jsx40("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ jsx39(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ jsx40(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-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_inline{display:inline-block;padding-left:.25rem;padding-right:.25rem;--tw-text-opacity:1;color:rgb(224 30 90/var(--tw-text-opacity))}.slack_blocks_to_jsx.styles_enabled .slack_code,.slack_blocks_to_jsx.styles_enabled .slack_code_inline{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_code{display:block;margin-bottom:.25rem;margin-top:.25rem;padding:.5rem;width:100%}.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;display:inline-block;line-height:1.5;overflow-wrap:break-word;padding:.125rem 3px 1px;white-space:pre-wrap;--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,.slack_blocks_to_jsx.styles_enabled .slack_user_group{background:rgba(29,155,209,.1);color:#1264a3;-webkit-user-select:none;-moz-user-select:none;user-select:none}.slack_blocks_to_jsx.styles_enabled .slack_broadcast{background:rgba(255,198,0,.18);color:#1d1c1d;font-weight:600}.slack_blocks_to_jsx.styles_enabled .slack_blocks_to_jsx__line_break{display:block}.slack_blocks_to_jsx.styles_enabled .slack_blocks_to_jsx__line_break_not_first{display:block;height:3px}.slack_blocks_to_jsx.styles_enabled .slack_link{color:#1264a3}.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))}
+@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-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(.aspect-video){aspect-ratio:16/9}#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-\[360px\]){max-width:360px}#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-100){--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}#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-2){padding-bottom:.5rem;padding-top:.5rem}#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-bold){font-weight:700}#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_inline{display:inline-block;padding-left:.25rem;padding-right:.25rem;--tw-text-opacity:1;color:rgb(224 30 90/var(--tw-text-opacity))}.slack_blocks_to_jsx.styles_enabled .slack_code,.slack_blocks_to_jsx.styles_enabled .slack_code_inline{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_code{display:block;margin-bottom:.25rem;margin-top:.25rem;padding:.5rem;width:100%}.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;display:inline-block;line-height:1.5;overflow-wrap:break-word;padding:.125rem 3px 1px;white-space:pre-wrap;--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,.slack_blocks_to_jsx.styles_enabled .slack_user_group{background:rgba(29,155,209,.1);color:#1264a3;-webkit-user-select:none;-moz-user-select:none;user-select:none}.slack_blocks_to_jsx.styles_enabled .slack_broadcast{background:rgba(255,198,0,.18);color:#1d1c1d;font-weight:600}.slack_blocks_to_jsx.styles_enabled .slack_blocks_to_jsx__line_break{display:block}.slack_blocks_to_jsx.styles_enabled .slack_blocks_to_jsx__line_break_not_first{display:block;height:3px}.slack_blocks_to_jsx.styles_enabled .slack_link{color:#1264a3}.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.3.0",
+  "version": "0.3.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/readme.md

@@ -1,11 +1,13 @@
 # Slack Blocks to JSX Documentation
 
 ## Overview
+
 The `slack-blocks-to-jsx` package allows you to render Slack blocks in React with styles that closely mimic how they are displayed in Slack. This library converts Slack's block kit components into JSX components, maintaining the visual fidelity and interactive elements.
 
 **🚨 Quickly test out the libray on online playground**: https://slack-block-to-jsx-playground.vercel.app/
 
 ## Installation
+
 To use this package in your project, install it via npm:
 
 ```bash
@@ -21,6 +23,7 @@ yarn add slack-blocks-to-jsx
 ## Usage
 
 ### Importing Styles
+
 Import the necessary CSS file in your entry point to ensure the styles are applied:
 
 ```javascript
@@ -28,6 +31,7 @@ import "slack-blocks-to-jsx/dist/style.css";
 ```
 
 ### Using Components
+
 Import the `Message` component from the package and use it to render your Slack blocks:
 
 ```javascript
@@ -39,6 +43,7 @@ const blocks = [...]; // your Slack blocks data
 ```
 
 ### Types
+
 For better type safety, you can import the `Block` type:
 
 ```javascript
@@ -50,6 +55,7 @@ const blocks: Block[] = [...]; // your Slack blocks data
 ## Components
 
 ### `Message`
+
 This is the main component that renders the entire Slack message. It supports various props to customize the appearance and behavior:
 
 - `blocks`: Array of Slack block objects.
@@ -64,6 +70,7 @@ This is the main component that renders the entire Slack message. It supports va
 - `showBlockKitDebug?`: Show a link to open the message in the Slack Block Kit Builder, for debugging purposes. Defaults to false.
 
 ### Block Components
+
 Each Slack block type has a corresponding component:
 
 - `Section` (✅ supported)
@@ -75,11 +82,12 @@ Each Slack block type has a corresponding component:
 - `Header` (❌ not supported yet)
 - `Input` (🟨 partially supported)
 - `RichText` (✅ supported)
-- `Video` (❌ not supported yet)
+- `Video` (✅ supported)
 
 If you want a support of a particular block or element which is not supported yet so please raise a github issue or mail me at codeemash@gmail.com. I will try to push it asap.
 
 ## Customization
+
 You can handle custom rendering and interactions using the `hooks` prop in the `Message` component. This allows you to define custom behavior for user mentions, channels, and other interactive elements. You can also override default styling. Here are the classes structure to understand to override any block styling.
 
 `.slack_blocks_to_jsx`: Main Wrapper  
@@ -90,25 +98,26 @@ You can handle custom rendering and interactions using the `hooks` prop in the `
 `.slack_blocks_to_jsx__section`: Section Block  
 `.slack_blocks_to_jsx__image`: Image Block  
 `.slack_blocks_to_jsx__context`: Context Block  
-`.slack_blocks_to_jsx__actions`: Actions Block   
+`.slack_blocks_to_jsx__actions`: Actions Block  
 `.slack_blocks_to_jsx__input`: Input Block  
 `.slack_blocks_to_jsx__rich_text`: Rich Text Block  
 `.slack_blocks_to_jsx__rich_text_list_element`: Rich Text Block List Element  
 `.slack_blocks_to_jsx__rich_text_preformatted_element`: Rich Text Block Preformatted Element  
 `.slack_blocks_to_jsx__rich_text_quote_element`: Rich Text Block Element Quote Element  
-`.slack_blocks_to_jsx__rich_text_section_element`: Rich Text Block Section Element  
+`.slack_blocks_to_jsx__rich_text_section_element`: Rich Text Block Section Element
 
 ...as so on (all the other classes will be similar too, for example `.slack_blocks_to_jsx__rich_text_section_element_user` for Rich Text Block Section Element User)
 
 If you want any other customization so please raise a github issue or mail me at codeemash@gmail.com. I will try to push it asap if it aligns with the library development vision.
 
-
 ## Development and Contribution
+
 The project is open-source, and contributions are welcome. If you encounter any issues or want to suggest improvements, please file an issue on the GitHub repository:
 
 [GitHub Repository Issues](https://github.com/themashcodee/slack-blocks-to-jsx/issues)
 
 ## License
+
 The project is licensed under the MIT license, allowing free use, modification, and distribution.
 
 ## Support