slack-blocks-to-jsx 0.1.1 → 0.1.3

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
@@ -500,6 +507,7 @@ var ButtonElement = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
+      type: "button",
       id: action_id,
       "aria-label": accessibility_label,
       className: `px-2 pt-0 pb-[1px] text-small h-[28px] min-w-[56px] border rounded whitespace-nowrap font-semibold slack_blocks_to_jsx__button ${style === "primary" ? "border-green-primary.3 text-green-primary" : style === "danger" ? "border-red-primary.3 text-red-primary" : "border-black-primary.3 text-black-primary"}`,
@@ -602,6 +610,7 @@ var StaticSelectElement = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
+            type: "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: () => {
@@ -676,53 +685,243 @@ 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 group-hover:border-white-primary" }),
+                      option.sleeping && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute -top-[5px] -right-[5px] h-[10px] w-[10px] rounded-full bg-white-secondary flex justify-center z-[10] text-[8px] leading-[8px] font-semibold group-hover:bg-blue-primary", children: "z" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-black-primary group-hover:text-white-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",
+          {
+            type: "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,45 +943,53 @@ 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)(
-        "svg",
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
         {
-          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: showImage ? "rotate(0deg)" : "rotate(-90deg)"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
+          type: "button",
+          className: "w-[15px] h-[15px]",
+          onClick: () => setShowImage((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "svg",
             {
-              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"
+              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: showImage ? "rotate(0deg)" : "rotate(-90deg)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.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"
+                }
+              )
             }
           )
         }
-      ) })
+      )
     ] }),
-    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 +1004,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 +1044,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 +1074,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 +1129,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 +1147,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,13 +1165,13 @@ var Message = (props) => {
     style,
     showBlockKitDebug = false
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__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",
     {
       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",
@@ -948,14 +1183,14 @@ 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);
           }) })
         ] })
       ]