slack-blocks-to-jsx 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -478,6 +478,16 @@ type UsersSelectElement = {
      * A {@link https://api.slack.com/reference/block-kit/composition-objects#text ***plain_text*** only text object} that defines the placeholder text shown on the menu. Maximum length for the text in this field is 150 characters.
      */
     placeholder?: TextObject<"plain_text">;
+    /**
+     * This is custom property for you to pass the list of people to show in the select menu. (This is not a part of the official Slack API)
+     */
+    people: {
+        id: string;
+        name: string;
+        image: string;
+        online: boolean;
+        sleeping: boolean;
+    }[];
 };
 type ConversationsSelectElement = {
     type: "conversations_select";
@@ -841,7 +851,7 @@ type InputBlock = {
     /**
      * A plain-text input element, a checkbox element, a radio button element, a select menu element, a multi-select menu element, or a datepicker.
      */
-    element: PlainTextInputElement | CheckboxesElement | RadioButtonsElement | StaticSelectElement | MultiStaticSelectElement | DatePickerElement;
+    element: PlainTextInputElement | CheckboxesElement | RadioButtonsElement | StaticSelectElement | MultiStaticSelectElement | DatePickerElement | UsersSelectElement;
     /**
      * A boolean that indicates whether or not the use of elements in this block should dispatch a {@link https://api.slack.com/reference/interaction-payloads/block-actions ***block_actions*** payload}. Defaults to false.
      */

package/dist/index.d.ts

@@ -478,6 +478,16 @@ type UsersSelectElement = {
      * A {@link https://api.slack.com/reference/block-kit/composition-objects#text ***plain_text*** only text object} that defines the placeholder text shown on the menu. Maximum length for the text in this field is 150 characters.
      */
     placeholder?: TextObject<"plain_text">;
+    /**
+     * This is custom property for you to pass the list of people to show in the select menu. (This is not a part of the official Slack API)
+     */
+    people: {
+        id: string;
+        name: string;
+        image: string;
+        online: boolean;
+        sleeping: boolean;
+    }[];
 };
 type ConversationsSelectElement = {
     type: "conversations_select";
@@ -841,7 +851,7 @@ type InputBlock = {
     /**
      * A plain-text input element, a checkbox element, a radio button element, a select menu element, a multi-select menu element, or a datepicker.
      */
-    element: PlainTextInputElement | CheckboxesElement | RadioButtonsElement | StaticSelectElement | MultiStaticSelectElement | DatePickerElement;
+    element: PlainTextInputElement | CheckboxesElement | RadioButtonsElement | StaticSelectElement | MultiStaticSelectElement | DatePickerElement | UsersSelectElement;
     /**
      * A boolean that indicates whether or not the use of elements in this block should dispatch a {@link https://api.slack.com/reference/interaction-payloads/block-actions ***block_actions*** payload}. Defaults to false.
      */

package/dist/index.js

@@ -479,7 +479,14 @@ var Header = (props) => {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ImageElement = (props) => {
   const { alt_text, image_url } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative w-6 h-[25.25px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: image_url, alt: alt_text, className: "w-5 h-5 rounded-[2px] overflow-hidden" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "img",
+    {
+      src: image_url,
+      alt: alt_text,
+      className: "w-[88px] h-[88px] rounded-lg overflow-hidden object-cover"
+    }
+  ) });
 };
 
 // src/components/composition_objects/text_object.tsx
@@ -676,53 +683,242 @@ var CheckboxesElement = (props) => {
   }) }) });
 };
 
-// src/components/blocks/actions.tsx
+// src/components/elements/plain_text_input.tsx
+var import_react3 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var PlaintTextInput = (props) => {
+  const {
+    action_id,
+    dispatch_action_config,
+    focus_on_load,
+    initial_value,
+    max_length,
+    min_length,
+    multiline,
+    placeholder
+  } = props.data;
+  const [visible, setVisible] = (0, import_react3.useState)(focus_on_load != null ? focus_on_load : false);
+  const [value, setValue] = (0, import_react3.useState)(initial_value || "");
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b;
+      const target = e.target;
+      console.log({ target });
+      console.log(target.id);
+      if (target.id !== "static_select_popup" && target.id !== "static_select_dropdown_button" && ((_a = target.parentElement) == null ? void 0 : _a.id) !== "static_select_popup" && ((_b = target.parentElement) == null ? void 0 : _b.id) !== "static_select_dropdown_button")
+        setVisible(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: action_id, className: "relative text-small w-full", tabIndex: 0, children: [
+    !value && placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextObject, { data: placeholder }) }),
+    !value && !placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      TextObject,
+      {
+        data: {
+          type: "plain_text",
+          text: "Write something"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "textarea",
+      {
+        value,
+        onChange: (e) => setValue(e.target.value),
+        className: "w-full focus:outline-none rounded border border-black-primary.3 p-2",
+        minLength: min_length,
+        maxLength: max_length,
+        style: {
+          maxHeight: "200px",
+          minHeight: "80px",
+          height: "100px"
+        },
+        "aria-label": "Select an item"
+      }
+    )
+  ] });
+};
+
+// src/components/elements/users_select_element.tsx
+var import_react4 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var UsersSelectElement = (props) => {
+  const { action_id, focus_on_load, placeholder, type, confirm, initial_user, people } = props.data;
+  const [visible, setVisible] = (0, import_react4.useState)(focus_on_load || false);
+  const [search, setSearch] = (0, import_react4.useState)("");
+  const [selected, setSelected] = (0, import_react4.useState)("");
+  (0, import_react4.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b;
+      const target = e.target;
+      console.log({ target });
+      console.log(target.id);
+      if (target.id !== "static_select_popup" && target.id !== "static_select_dropdown_button" && ((_a = target.parentElement) == null ? void 0 : _a.id) !== "static_select_popup" && ((_b = target.parentElement) == null ? void 0 : _b.id) !== "static_select_dropdown_button")
+        setVisible(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const filteredOptions = people.filter((person) => {
+    const search_query = search.toLowerCase().trim();
+    if (!search_query)
+      return true;
+    const name = person.name.toLowerCase();
+    return name.includes(search_query);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      id: action_id,
+      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3",
+      tabIndex: 0,
+      children: [
+        visible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: "absolute top-[24px] -left-3 bg-white-secondary border border-gray-primary rounded-[6px] shadow-custom_shadow-1 w-[322px] max-w-[322px] max-h-[240px] overflow-auto py-3 z-20",
+            id: "static_select_popup",
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "button",
+                {
+                  className: "h-7 px-6 flex group items-center gap-2 select-none cursor-pointer hover:bg-blue-primary hover:text-white-primary",
+                  tabIndex: 0,
+                  type: "button",
+                  onClick: () => {
+                    setVisible(false);
+                    setSelected(option.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: option.image, alt: option.name, className: "w-5 h-5 rounded-md" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      TextObject,
+                      {
+                        data: {
+                          type: "mrkdwn",
+                          text: `*${option.name}*`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
+                      option.online && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        "div",
+                        {
+                          className: `bg-green-secondary w-[9px] h-[9px] rounded-full shrink-0`
+                        }
+                      ),
+                      !option.online && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-[9px] h-[9px] rounded-full border-[1.5px] shrink-0 border-black-secondary" }),
+                      option.sleeping && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute -top-[5px] -right-[5px] h-[10px] w-[10px] rounded-full bg-white-secondary flex justify-center z-[10] text-[8px] leading-[8px] font-semibold group-hover:bg-blue-primary", children: "z" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-black-primary", children: option.name })
+                  ]
+                },
+                i
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "input",
+          {
+            type: "text",
+            value: search,
+            onClick: () => setVisible(true),
+            onChange: (e) => setSearch(e.currentTarget.value),
+            className: "w-full py-1 pr-7 focus:outline-none",
+            tabIndex: -1,
+            "aria-label": "Select an item"
+          }
+        ),
+        !search && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          TextObject,
+          {
+            data: placeholder != null ? placeholder : {
+              type: "plain_text",
+              text: "Pick an option"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            className: "absolute right-1 top-1/2 flex justify-center items-center w-5 -translate-y-1/2 text-black-secondary z-10 h-full",
+            id: "static_select_dropdown_button",
+            onClick: () => {
+              setVisible((prev) => !prev);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: "3",
+                stroke: "currentColor",
+                className: "w-3 h-3",
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/blocks/actions.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Actions = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       id: block_id,
       className: "mb-2 text-primary flex w-full text-black-primary items-center slack_blocks_to_jsx__actions",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
         if (element.type === "button") {
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonElement, { data: element }) }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonElement, { data: element }) }, i);
         }
         if (element.type === "static_select") {
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StaticSelectElement, { data: element }) }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StaticSelectElement, { data: element }) }, i);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 mr-2" }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 mr-2" }, i);
       }) })
     }
   );
 };
 
 // src/components/blocks/context.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Context = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       id: block_id,
       className: "my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden slack_blocks_to_jsx__context",
       children: elements.slice(0, 10).map((element, i) => {
         if (element.type !== "image") {
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextObject, { data: element }) }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextObject, { data: element }) }, i);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ImageElement, { data: element }) }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageElement, { data: element }) }, i);
       })
     }
   );
 };
 
 // src/components/blocks/divider.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { data } = props;
   const { block_id } = data;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       id: block_id,
@@ -744,18 +940,18 @@ var Header2 = (props) => {
 };
 
 // src/components/blocks/image.tsx
-var import_react3 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime12 = 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_react3.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+  const [showImage, setShowImage] = (0, import_react5.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
         alt_text,
         image_bytes && ` (${Math.round(image_bytes / 1e3)} kB)`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -771,7 +967,7 @@ var Image = (props) => {
           style: {
             transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "path",
             {
               fill: "currentColor",
@@ -782,7 +978,7 @@ var Image = (props) => {
         }
       ) })
     ] }),
-    showImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "img",
       {
         src: image_url,
@@ -797,9 +993,37 @@ var Image = (props) => {
 };
 
 // src/components/blocks/input.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Input = (props) => {
-  const { type } = props.data;
-  return null;
+  const { element: given_element, label, block_id, hint, optional, type } = props.data;
+  const element = given_element ? getElementComponent(given_element) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      id: block_id,
+      className: `mt-2 mb-1 text-primary slack_blocks_to_jsx__input flex w-full text-black-primary`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          TextObject,
+          {
+            data: {
+              type: "mrkdwn",
+              text: `*${label.text}*`,
+              emoji: label.emoji,
+              verbatim: label.verbatim
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mb-1 flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative shrink-0", children: element }),
+          (hint || given_element.type === "plain_text_input") && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-black-secondary text-small flex gap-1", children: [
+            hint && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "inline", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TextObject, { data: hint }) }),
+            given_element.type === "plain_text_input" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: "\u21B5 Please 'enter' to submit" })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
 };
 
 // src/components/blocks/rich-text.tsx
@@ -809,24 +1033,24 @@ var RichText = (props) => {
 };
 
 // src/components/blocks/section.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = 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_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime11.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextObject, { data: text }),
-          fields && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextObject, { data: field }, i);
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextObject, { data: text }),
+          fields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextObject, { data: field }, i);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
@@ -839,43 +1063,47 @@ var Video = (props) => {
 };
 
 // src/components/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Divider, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Section, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Image, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Context, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Actions, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(File, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Header2, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Video, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RichText, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ButtonElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckboxesElement, { data: element });
+  if (element.type === "image")
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageElement, { data: element });
+  if (element.type === "plain_text_input")
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlaintTextInput, { data: element });
+  if (element.type === "users_select")
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
     return null;
   if (element.type === "email_text_input")
     return null;
-  if (element.type === "image")
-    return null;
   if (element.type === "multi_static_select")
     return null;
   if (element.type === "multi_external_select")
@@ -890,16 +1118,12 @@ var getElementComponent = (element) => {
     return null;
   if (element.type === "overflow")
     return null;
-  if (element.type === "plain_text_input")
-    return null;
   if (element.type === "radio_buttons")
     return null;
   if (element.type === "static_select")
     return null;
   if (element.type === "external_select")
     return null;
-  if (element.type === "users_select")
-    return null;
   if (element.type === "conversations_select")
     return null;
   if (element.type === "channels_select")
@@ -912,14 +1136,14 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-base break-words font-normal", children });
 };
 
 // src/message.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Message = (props) => {
   const {
     blocks,
@@ -930,14 +1154,13 @@ var Message = (props) => {
     style,
     showBlockKitDebug = false
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "section",
     {
-      id: "slack_blocks_to_jsx",
       className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${className}`,
       style,
       children: [
-        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "a",
           {
             target: "_blank",
@@ -949,19 +1172,19 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Header, { name, time }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: blocks.map((block, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Header, { name, time }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]
     }
-  );
+  ) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -443,7 +443,14 @@ var Header = (props) => {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ImageElement = (props) => {
   const { alt_text, image_url } = props.data;
-  return /* @__PURE__ */ jsx2("div", { className: "relative w-6 h-[25.25px]", children: /* @__PURE__ */ jsx2("img", { src: image_url, alt: alt_text, className: "w-5 h-5 rounded-[2px] overflow-hidden" }) });
+  return /* @__PURE__ */ jsx2("div", { className: "relative", children: /* @__PURE__ */ jsx2(
+    "img",
+    {
+      src: image_url,
+      alt: alt_text,
+      className: "w-[88px] h-[88px] rounded-lg overflow-hidden object-cover"
+    }
+  ) });
 };
 
 // src/components/composition_objects/text_object.tsx
@@ -640,53 +647,242 @@ var CheckboxesElement = (props) => {
   }) }) });
 };
 
+// src/components/elements/plain_text_input.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var PlaintTextInput = (props) => {
+  const {
+    action_id,
+    dispatch_action_config,
+    focus_on_load,
+    initial_value,
+    max_length,
+    min_length,
+    multiline,
+    placeholder
+  } = props.data;
+  const [visible, setVisible] = useState3(focus_on_load != null ? focus_on_load : false);
+  const [value, setValue] = useState3(initial_value || "");
+  useEffect3(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b;
+      const target = e.target;
+      console.log({ target });
+      console.log(target.id);
+      if (target.id !== "static_select_popup" && target.id !== "static_select_dropdown_button" && ((_a = target.parentElement) == null ? void 0 : _a.id) !== "static_select_popup" && ((_b = target.parentElement) == null ? void 0 : _b.id) !== "static_select_dropdown_button")
+        setVisible(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs4("div", { id: action_id, className: "relative text-small w-full", tabIndex: 0, children: [
+    !value && placeholder && /* @__PURE__ */ jsx7("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx7(TextObject, { data: placeholder }) }),
+    !value && !placeholder && /* @__PURE__ */ jsx7("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx7(
+      TextObject,
+      {
+        data: {
+          type: "plain_text",
+          text: "Write something"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(
+      "textarea",
+      {
+        value,
+        onChange: (e) => setValue(e.target.value),
+        className: "w-full focus:outline-none rounded border border-black-primary.3 p-2",
+        minLength: min_length,
+        maxLength: max_length,
+        style: {
+          maxHeight: "200px",
+          minHeight: "80px",
+          height: "100px"
+        },
+        "aria-label": "Select an item"
+      }
+    )
+  ] });
+};
+
+// src/components/elements/users_select_element.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var UsersSelectElement = (props) => {
+  const { action_id, focus_on_load, placeholder, type, confirm, initial_user, people } = props.data;
+  const [visible, setVisible] = useState4(focus_on_load || false);
+  const [search, setSearch] = useState4("");
+  const [selected, setSelected] = useState4("");
+  useEffect4(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b;
+      const target = e.target;
+      console.log({ target });
+      console.log(target.id);
+      if (target.id !== "static_select_popup" && target.id !== "static_select_dropdown_button" && ((_a = target.parentElement) == null ? void 0 : _a.id) !== "static_select_popup" && ((_b = target.parentElement) == null ? void 0 : _b.id) !== "static_select_dropdown_button")
+        setVisible(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const filteredOptions = people.filter((person) => {
+    const search_query = search.toLowerCase().trim();
+    if (!search_query)
+      return true;
+    const name = person.name.toLowerCase();
+    return name.includes(search_query);
+  }, []);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      id: action_id,
+      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3",
+      tabIndex: 0,
+      children: [
+        visible && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "absolute top-[24px] -left-3 bg-white-secondary border border-gray-primary rounded-[6px] shadow-custom_shadow-1 w-[322px] max-w-[322px] max-h-[240px] overflow-auto py-3 z-20",
+            id: "static_select_popup",
+            children: /* @__PURE__ */ jsx8("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  className: "h-7 px-6 flex group items-center gap-2 select-none cursor-pointer hover:bg-blue-primary hover:text-white-primary",
+                  tabIndex: 0,
+                  type: "button",
+                  onClick: () => {
+                    setVisible(false);
+                    setSelected(option.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8("img", { src: option.image, alt: option.name, className: "w-5 h-5 rounded-md" }),
+                    /* @__PURE__ */ jsx8(
+                      TextObject,
+                      {
+                        data: {
+                          type: "mrkdwn",
+                          text: `*${option.name}*`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+                      option.online && /* @__PURE__ */ jsx8(
+                        "div",
+                        {
+                          className: `bg-green-secondary w-[9px] h-[9px] rounded-full shrink-0`
+                        }
+                      ),
+                      !option.online && /* @__PURE__ */ jsx8("div", { className: "w-[9px] h-[9px] rounded-full border-[1.5px] shrink-0 border-black-secondary" }),
+                      option.sleeping && /* @__PURE__ */ jsx8("div", { className: "absolute -top-[5px] -right-[5px] h-[10px] w-[10px] rounded-full bg-white-secondary flex justify-center z-[10] text-[8px] leading-[8px] font-semibold group-hover:bg-blue-primary", children: "z" })
+                    ] }),
+                    /* @__PURE__ */ jsx8("div", { className: "text-black-primary", children: option.name })
+                  ]
+                },
+                i
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "input",
+          {
+            type: "text",
+            value: search,
+            onClick: () => setVisible(true),
+            onChange: (e) => setSearch(e.currentTarget.value),
+            className: "w-full py-1 pr-7 focus:outline-none",
+            tabIndex: -1,
+            "aria-label": "Select an item"
+          }
+        ),
+        !search && /* @__PURE__ */ jsx8("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ jsx8(
+          TextObject,
+          {
+            data: placeholder != null ? placeholder : {
+              type: "plain_text",
+              text: "Pick an option"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            className: "absolute right-1 top-1/2 flex justify-center items-center w-5 -translate-y-1/2 text-black-secondary z-10 h-full",
+            id: "static_select_dropdown_button",
+            onClick: () => {
+              setVisible((prev) => !prev);
+            },
+            children: /* @__PURE__ */ jsx8(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: "3",
+                stroke: "currentColor",
+                className: "w-3 h-3",
+                children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/components/blocks/actions.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Actions = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       id: block_id,
       className: "mb-2 text-primary flex w-full text-black-primary items-center slack_blocks_to_jsx__actions",
-      children: /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
+      children: /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
         if (element.type === "button") {
-          return /* @__PURE__ */ jsx7("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx7(ButtonElement, { data: element }) }, i);
+          return /* @__PURE__ */ jsx9("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx9(ButtonElement, { data: element }) }, i);
         }
         if (element.type === "static_select") {
-          return /* @__PURE__ */ jsx7("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx7(StaticSelectElement, { data: element }) }, i);
+          return /* @__PURE__ */ jsx9("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx9(StaticSelectElement, { data: element }) }, i);
         }
-        return /* @__PURE__ */ jsx7("div", { className: "mt-2 mr-2" }, i);
+        return /* @__PURE__ */ jsx9("div", { className: "mt-2 mr-2" }, i);
       }) })
     }
   );
 };
 
 // src/components/blocks/context.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Context = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       id: block_id,
       className: "my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden slack_blocks_to_jsx__context",
       children: elements.slice(0, 10).map((element, i) => {
         if (element.type !== "image") {
-          return /* @__PURE__ */ jsx8("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ jsx8(TextObject, { data: element }) }, i);
+          return /* @__PURE__ */ jsx10("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ jsx10(TextObject, { data: element }) }, i);
         }
-        return /* @__PURE__ */ jsx8("span", { children: /* @__PURE__ */ jsx8(ImageElement, { data: element }) }, i);
+        return /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(ImageElement, { data: element }) }, i);
       })
     }
   );
 };
 
 // src/components/blocks/divider.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Divider = (props) => {
   const { data } = props;
   const { block_id } = data;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       id: block_id,
@@ -708,18 +904,18 @@ var Header2 = (props) => {
 };
 
 // src/components/blocks/image.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var Image = (props) => {
   const { block_id, alt_text, image_url, image_bytes, image_height, image_width } = props.data;
-  const [showImage, setShowImage] = useState3(true);
-  return /* @__PURE__ */ jsxs4("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
-      /* @__PURE__ */ jsxs4("span", { children: [
+  const [showImage, setShowImage] = useState5(true);
+  return /* @__PURE__ */ jsxs6("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
+      /* @__PURE__ */ jsxs6("span", { children: [
         alt_text,
         image_bytes && ` (${Math.round(image_bytes / 1e3)} kB)`
       ] }),
-      /* @__PURE__ */ jsx10("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ jsx12(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -735,7 +931,7 @@ var Image = (props) => {
           style: {
             transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx12(
             "path",
             {
               fill: "currentColor",
@@ -746,7 +942,7 @@ var Image = (props) => {
         }
       ) })
     ] }),
-    showImage && /* @__PURE__ */ jsx10("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ jsx10(
+    showImage && /* @__PURE__ */ jsx12("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ jsx12(
       "img",
       {
         src: image_url,
@@ -761,9 +957,37 @@ var Image = (props) => {
 };
 
 // src/components/blocks/input.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var Input = (props) => {
-  const { type } = props.data;
-  return null;
+  const { element: given_element, label, block_id, hint, optional, type } = props.data;
+  const element = given_element ? getElementComponent(given_element) : null;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      id: block_id,
+      className: `mt-2 mb-1 text-primary slack_blocks_to_jsx__input flex w-full text-black-primary`,
+      children: /* @__PURE__ */ jsx13("div", { className: "grow", children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx13(
+          TextObject,
+          {
+            data: {
+              type: "mrkdwn",
+              text: `*${label.text}*`,
+              emoji: label.emoji,
+              verbatim: label.verbatim
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "mb-1 flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx13("div", { className: "relative shrink-0", children: element }),
+          (hint || given_element.type === "plain_text_input") && /* @__PURE__ */ jsxs7("div", { className: "text-black-secondary text-small flex gap-1", children: [
+            hint && /* @__PURE__ */ jsx13("div", { className: "inline", children: /* @__PURE__ */ jsx13(TextObject, { data: hint }) }),
+            given_element.type === "plain_text_input" && /* @__PURE__ */ jsx13("p", { children: "\u21B5 Please 'enter' to submit" })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
 };
 
 // src/components/blocks/rich-text.tsx
@@ -773,24 +997,24 @@ var RichText = (props) => {
 };
 
 // src/components/blocks/section.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var Section = (props) => {
   const { accessory, fields, text, block_id } = props.data;
   const element = accessory ? getElementComponent(accessory) : null;
   const is_stacked = accessory ? is_accessory_stacked(accessory) : false;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     "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__ */ jsx11("div", { className: "grow", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ jsx11(TextObject, { data: text }),
-          fields && /* @__PURE__ */ jsx11("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ jsx11(TextObject, { data: field }, i);
+        /* @__PURE__ */ jsx14("div", { className: "grow", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ jsx14(TextObject, { data: text }),
+          fields && /* @__PURE__ */ jsx14("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ jsx14(TextObject, { data: field }, i);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ jsx11("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ jsx14("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
@@ -803,43 +1027,47 @@ var Video = (props) => {
 };
 
 // src/components/index.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ jsx12(Divider, { data: block });
+    return /* @__PURE__ */ jsx15(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ jsx12(Section, { data: block });
+    return /* @__PURE__ */ jsx15(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ jsx12(Image, { data: block });
+    return /* @__PURE__ */ jsx15(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ jsx12(Context, { data: block });
+    return /* @__PURE__ */ jsx15(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ jsx12(Actions, { data: block });
+    return /* @__PURE__ */ jsx15(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ jsx12(File, { data: block });
+    return /* @__PURE__ */ jsx15(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ jsx12(Header2, { data: block });
+    return /* @__PURE__ */ jsx15(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ jsx12(Input, { data: block });
+    return /* @__PURE__ */ jsx15(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ jsx12(Video, { data: block });
+    return /* @__PURE__ */ jsx15(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ jsx12(RichText, { data: block });
+    return /* @__PURE__ */ jsx15(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ jsx12(ButtonElement, { data: element });
+    return /* @__PURE__ */ jsx15(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ jsx12(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ jsx15(CheckboxesElement, { data: element });
+  if (element.type === "image")
+    return /* @__PURE__ */ jsx15(ImageElement, { data: element });
+  if (element.type === "plain_text_input")
+    return /* @__PURE__ */ jsx15(PlaintTextInput, { data: element });
+  if (element.type === "users_select")
+    return /* @__PURE__ */ jsx15(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
     return null;
   if (element.type === "email_text_input")
     return null;
-  if (element.type === "image")
-    return null;
   if (element.type === "multi_static_select")
     return null;
   if (element.type === "multi_external_select")
@@ -854,16 +1082,12 @@ var getElementComponent = (element) => {
     return null;
   if (element.type === "overflow")
     return null;
-  if (element.type === "plain_text_input")
-    return null;
   if (element.type === "radio_buttons")
     return null;
   if (element.type === "static_select")
     return null;
   if (element.type === "external_select")
     return null;
-  if (element.type === "users_select")
-    return null;
   if (element.type === "conversations_select")
     return null;
   if (element.type === "channels_select")
@@ -876,14 +1100,14 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx13("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ jsx16("div", { className: "text-base break-words font-normal", children });
 };
 
 // src/message.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var Message = (props) => {
   const {
     blocks,
@@ -894,14 +1118,13 @@ var Message = (props) => {
     style,
     showBlockKitDebug = false
   } = props;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx17("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs9(
     "section",
     {
-      id: "slack_blocks_to_jsx",
       className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${className}`,
       style,
       children: [
-        showBlockKitDebug && /* @__PURE__ */ jsx14(
+        showBlockKitDebug && /* @__PURE__ */ jsx17(
           "a",
           {
             target: "_blank",
@@ -913,19 +1136,19 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: /* @__PURE__ */ jsx14("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ jsx14(Header, { name, time }),
-          /* @__PURE__ */ jsx14("div", { children: blocks.map((block, i) => {
+        /* @__PURE__ */ jsx17("div", { className: "shrink-0", children: /* @__PURE__ */ jsx17("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ jsx17(Header, { name, time }),
+          /* @__PURE__ */ jsx17("div", { children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ jsx14(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ jsx17(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]
     }
-  );
+  ) });
 };
 export {
   Message

package/dist/style.css

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

package/package.json

@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -32,15 +32,20 @@
     "@changesets/cli": "^2.26.2",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
+    "autoprefixer": "^10.4.17",
+    "cssnano": "^6.0.3",
+    "postcss": "^8.4.33",
+    "postcss-cli": "^11.0.0",
+    "postcss-nesting": "^12.0.2",
     "tailwindcss": "^3.4.1",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2"
   },
   "scripts": {
-    "build": "tsup ./src/index.ts --format cjs,esm --dts && npm run build:tailwind",
-    "build:tailwind": "npx tailwindcss -i ./src/style.css -o ./dist/style.css --minify",
+    "build": "tsup ./src/index.ts --format cjs,esm --dts && npm run build:css",
+    "build:css": "postcss ./src/style.css -o ./dist/style.css",
+    "dev:css": "postcss ./src/style.css -o ./dist/style.css --watch",
     "dev": "tsup ./src/index.ts --format cjs,esm --dts --watch",
-    "dev:tailwind": "npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch",
     "new-version": "pnpm changeset",
     "lint": "tsc",
     "release": "pnpm run build && changeset publish"

package/readme.md

@@ -10,3 +10,7 @@
    `import type { Block } from "slack-blocks-to-jsx"`
 
    `const blocks: Block[] = [...your slack blocks]`
+
+   `<Message time={new Date()} name="Your Company" logo="https://commons.wikimedia.org/wiki/File:Google_%22G%22_logo.svg" blocks={blocks} />`
+
+Note: This library is under development, if you need any functionality and it is not working/available yet in the library please raise an issue [here](https://github.com/themashcodee/slack-blocks-to-jsx/issues). I will try to fix it asap :).