slack-blocks-to-jsx 0.0.8 → 0.1.0

package/dist/index.js

@@ -502,7 +502,7 @@ var ButtonElement = (props) => {
     {
       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 ${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"}`,
+      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"}`,
       onClick: () => {
         if (url) {
           window.open(url, "_blank");
@@ -642,7 +642,7 @@ var CheckboxesElement = (props) => {
       input_ref.current.focus();
     }
   }, [focus_on_load]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: action_id, className: "my-1 flex w-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
     const { text, value, description } = option;
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "label",
@@ -676,107 +676,59 @@ var CheckboxesElement = (props) => {
   }) }) });
 };
 
-// src/components/elements/datepicker_element.tsx
-var import_react3 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DatePickerElement = (props) => {
-  const {
-    action_id,
-    focus_on_load,
-    initial_date = "1990-04-28",
-    placeholder,
-    type,
-    confirm
-  } = props.data;
-  const [date, setDate] = (0, import_react3.useState)(initial_date);
-  const [value, setValue] = (0, import_react3.useState)(() => {
-    const [year, month, day] = initial_date.split("-");
-    return `${month}/${day}/${year}`;
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "label",
-    {
-      htmlFor: action_id,
-      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[220px] border border-black-primary.3s",
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "input",
-          {
-            type: "text",
-            value,
-            onChange: (e) => {
-              setValue(e.target.value);
-            },
-            className: "w-full pr-7 focus:outline-none h-full group-focus:outline",
-            tabIndex: -1,
-            "aria-label": "Select an item"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.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",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Actions = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: block_id, className: "mb-2 text-primary flex w-full text-black-primary items-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
-    if (element.type === "button") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonElement, { data: element }) }, i);
-    }
-    if (element.type === "static_select") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StaticSelectElement, { data: element }) }, i);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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) => {
+        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);
+        }
+        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_runtime7.jsx)("div", { className: "mt-2 mr-2" }, i);
+      }) })
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2 mr-2" }, i);
-  }) }) });
+  );
 };
 
 // src/components/blocks/context.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Context = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       id: block_id,
-      className: "my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden",
+      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_runtime9.jsx)("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextObject, { data: element }) }, i);
+          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_runtime9.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageElement, { data: element }) }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ImageElement, { data: element }) }, i);
       })
     }
   );
 };
 
 // src/components/blocks/divider.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { data } = props;
   const { block_id } = data;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id: block_id, className: "border-b border-gray-primary border-solid w-full mt-1 mb-2" });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      id: block_id,
+      className: "border-b border-gray-primary border-solid w-full mt-1 mb-2 slack_blocks_to_jsx__divider"
+    }
+  );
 };
 
 // src/components/blocks/file.tsx
@@ -792,18 +744,18 @@ var Header2 = (props) => {
 };
 
 // src/components/blocks/image.tsx
-var import_react4 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime10 = 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_react4.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { id: block_id, className: "my-2 flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+  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: [
         alt_text,
         image_bytes && ` (${Math.round(image_bytes / 1e3)} kB)`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -819,7 +771,7 @@ var Image = (props) => {
           style: {
             transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "path",
             {
               fill: "currentColor",
@@ -830,7 +782,7 @@ var Image = (props) => {
         }
       ) })
     ] }),
-    showImage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "img",
       {
         src: image_url,
@@ -857,24 +809,24 @@ var RichText = (props) => {
 };
 
 // src/components/blocks/section.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = 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_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       id: block_id,
-      className: `mt-2 mb-1 text-primary flex w-full text-black-primary ${is_stacked ? "flex-col" : ""}`,
+      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_runtime12.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextObject, { data: text }),
-          fields && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextObject, { data: field }, i);
+        /* @__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);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
@@ -887,37 +839,37 @@ var Video = (props) => {
 };
 
 // src/components/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Divider, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Section, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Image, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Context, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Actions, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(File, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Header2, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Video, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RichText, { data: block });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ButtonElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckboxesElement, { data: element });
   if (element.type === "datepicker")
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerElement, { data: element });
+    return null;
   if (element.type === "datetimepicker")
     return null;
   if (element.type === "email_text_input")
@@ -960,14 +912,14 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-base break-words font-normal", children });
 };
 
 // src/message.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Message = (props) => {
   const {
     blocks,
@@ -978,13 +930,14 @@ var Message = (props) => {
     style,
     showBlockKitDebug = false
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "section",
     {
-      className: `flex gap-2 w-full max-w-[600px] slack-message relative ${className}`,
+      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_runtime15.jsx)(
+        showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "a",
           {
             target: "_blank",
@@ -996,14 +949,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Header, { name, time }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: blocks.map((block, i) => {
+        /* @__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) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]

package/dist/index.mjs

@@ -466,7 +466,7 @@ var ButtonElement = (props) => {
     {
       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 ${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"}`,
+      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"}`,
       onClick: () => {
         if (url) {
           window.open(url, "_blank");
@@ -606,7 +606,7 @@ var CheckboxesElement = (props) => {
       input_ref.current.focus();
     }
   }, [focus_on_load]);
-  return /* @__PURE__ */ jsx6("div", { id: action_id, className: "my-1 flex w-full", children: /* @__PURE__ */ jsx6("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
+  return /* @__PURE__ */ jsx6("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes", children: /* @__PURE__ */ jsx6("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
     const { text, value, description } = option;
     return /* @__PURE__ */ jsxs3(
       "label",
@@ -640,107 +640,59 @@ var CheckboxesElement = (props) => {
   }) }) });
 };
 
-// src/components/elements/datepicker_element.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var DatePickerElement = (props) => {
-  const {
-    action_id,
-    focus_on_load,
-    initial_date = "1990-04-28",
-    placeholder,
-    type,
-    confirm
-  } = props.data;
-  const [date, setDate] = useState3(initial_date);
-  const [value, setValue] = useState3(() => {
-    const [year, month, day] = initial_date.split("-");
-    return `${month}/${day}/${year}`;
-  });
-  return /* @__PURE__ */ jsxs4(
-    "label",
-    {
-      htmlFor: action_id,
-      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[220px] border border-black-primary.3s",
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ jsx7(
-          "input",
-          {
-            type: "text",
-            value,
-            onChange: (e) => {
-              setValue(e.target.value);
-            },
-            className: "w-full pr-7 focus:outline-none h-full group-focus:outline",
-            tabIndex: -1,
-            "aria-label": "Select an item"
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          "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",
-            children: /* @__PURE__ */ jsx7(
-              "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__ */ jsx7("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 jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Actions = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ jsx8("div", { id: block_id, className: "mb-2 text-primary flex w-full text-black-primary items-center", children: /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
-    if (element.type === "button") {
-      return /* @__PURE__ */ jsx8("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx8(ButtonElement, { data: element }) }, i);
-    }
-    if (element.type === "static_select") {
-      return /* @__PURE__ */ jsx8("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx8(StaticSelectElement, { data: element }) }, i);
+  return /* @__PURE__ */ jsx7(
+    "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) => {
+        if (element.type === "button") {
+          return /* @__PURE__ */ jsx7("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx7(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__ */ jsx7("div", { className: "mt-2 mr-2" }, i);
+      }) })
     }
-    return /* @__PURE__ */ jsx8("div", { className: "mt-2 mr-2" }, i);
-  }) }) });
+  );
 };
 
 // src/components/blocks/context.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Context = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       id: block_id,
-      className: "my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden",
+      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__ */ jsx9("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ jsx9(TextObject, { data: element }) }, i);
+          return /* @__PURE__ */ jsx8("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ jsx8(TextObject, { data: element }) }, i);
         }
-        return /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(ImageElement, { data: element }) }, i);
+        return /* @__PURE__ */ jsx8("span", { children: /* @__PURE__ */ jsx8(ImageElement, { data: element }) }, i);
       })
     }
   );
 };
 
 // src/components/blocks/divider.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Divider = (props) => {
   const { data } = props;
   const { block_id } = data;
-  return /* @__PURE__ */ jsx10("div", { id: block_id, className: "border-b border-gray-primary border-solid w-full mt-1 mb-2" });
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      id: block_id,
+      className: "border-b border-gray-primary border-solid w-full mt-1 mb-2 slack_blocks_to_jsx__divider"
+    }
+  );
 };
 
 // src/components/blocks/file.tsx
@@ -756,18 +708,18 @@ var Header2 = (props) => {
 };
 
 // src/components/blocks/image.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx10, jsxs as jsxs4 } 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] = useState4(true);
-  return /* @__PURE__ */ jsxs5("div", { id: block_id, className: "my-2 flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
-      /* @__PURE__ */ jsxs5("span", { children: [
+  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: [
         alt_text,
         image_bytes && ` (${Math.round(image_bytes / 1e3)} kB)`
       ] }),
-      /* @__PURE__ */ jsx11("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx10("button", { className: "w-[15px] h-[15px]", onClick: () => setShowImage((prev) => !prev), children: /* @__PURE__ */ jsx10(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -783,7 +735,7 @@ var Image = (props) => {
           style: {
             transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
           },
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx10(
             "path",
             {
               fill: "currentColor",
@@ -794,7 +746,7 @@ var Image = (props) => {
         }
       ) })
     ] }),
-    showImage && /* @__PURE__ */ jsx11("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ jsx11(
+    showImage && /* @__PURE__ */ jsx10("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ jsx10(
       "img",
       {
         src: image_url,
@@ -821,24 +773,24 @@ var RichText = (props) => {
 };
 
 // src/components/blocks/section.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } 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__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       id: block_id,
-      className: `mt-2 mb-1 text-primary flex w-full text-black-primary ${is_stacked ? "flex-col" : ""}`,
+      className: `mt-2 mb-1 text-primary slack_blocks_to_jsx__section flex w-full text-black-primary ${is_stacked ? "flex-col" : ""}`,
       children: [
-        /* @__PURE__ */ jsx12("div", { className: "grow", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ jsx12(TextObject, { data: text }),
-          fields && /* @__PURE__ */ jsx12("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ jsx12(TextObject, { data: field }, i);
+        /* @__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);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ jsx12("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ jsx11("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
@@ -851,37 +803,37 @@ var Video = (props) => {
 };
 
 // src/components/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ jsx13(Divider, { data: block });
+    return /* @__PURE__ */ jsx12(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ jsx13(Section, { data: block });
+    return /* @__PURE__ */ jsx12(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ jsx13(Image, { data: block });
+    return /* @__PURE__ */ jsx12(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ jsx13(Context, { data: block });
+    return /* @__PURE__ */ jsx12(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ jsx13(Actions, { data: block });
+    return /* @__PURE__ */ jsx12(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ jsx13(File, { data: block });
+    return /* @__PURE__ */ jsx12(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ jsx13(Header2, { data: block });
+    return /* @__PURE__ */ jsx12(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ jsx13(Input, { data: block });
+    return /* @__PURE__ */ jsx12(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ jsx13(Video, { data: block });
+    return /* @__PURE__ */ jsx12(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ jsx13(RichText, { data: block });
+    return /* @__PURE__ */ jsx12(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ jsx13(ButtonElement, { data: element });
+    return /* @__PURE__ */ jsx12(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ jsx13(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ jsx12(CheckboxesElement, { data: element });
   if (element.type === "datepicker")
-    return /* @__PURE__ */ jsx13(DatePickerElement, { data: element });
+    return null;
   if (element.type === "datetimepicker")
     return null;
   if (element.type === "email_text_input")
@@ -924,14 +876,14 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx14("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ jsx13("div", { className: "text-base break-words font-normal", children });
 };
 
 // src/message.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var Message = (props) => {
   const {
     blocks,
@@ -942,13 +894,14 @@ var Message = (props) => {
     style,
     showBlockKitDebug = false
   } = props;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     "section",
     {
-      className: `flex gap-2 w-full max-w-[600px] slack-message relative ${className}`,
+      id: "slack_blocks_to_jsx",
+      className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${className}`,
       style,
       children: [
-        showBlockKitDebug && /* @__PURE__ */ jsx15(
+        showBlockKitDebug && /* @__PURE__ */ jsx14(
           "a",
           {
             target: "_blank",
@@ -960,14 +913,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__PURE__ */ jsx15("div", { className: "shrink-0", children: /* @__PURE__ */ jsx15("img", { src: logo, className: "w-9 h-9", alt: name }) }),
-        /* @__PURE__ */ jsxs7("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ jsx15(Header, { name, time }),
-          /* @__PURE__ */ jsx15("div", { children: blocks.map((block, i) => {
+        /* @__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) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ jsx15(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ jsx14(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]

package/dist/style.css

@@ -1,2 +1,2 @@
 @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: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.-left-3{left:-.75rem}.right-0{right:0}.right-1{right:.25rem}.top-0{top:0}.top-1\/2{top:50%}.top-\[24px\]{top:24px}.z-10{z-index:10}.z-20{z-index:20}.z-\[-1\]{z-index:-1}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.h-3{height:.75rem}.h-5{height:1.25rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-\[14px\]{height:14px}.h-\[15px\]{height:15px}.h-\[25\.25px\]{height:25.25px}.h-\[28px\]{height:28px}.h-full{height:100%}.max-h-\[240px\]{max-height:240px}.min-h-\[28px\]{min-height:28px}.w-3{width:.75rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-9{width:2.25rem}.w-\[15px\]{width:15px}.w-\[190px\]{width:190px}.w-\[220px\]{width:220px}.w-\[27px\]{width:27px}.w-\[322px\]{width:322px}.w-full{width:100%}.min-w-\[56px\]{min-width:56px}.max-w-\[322px\]{max-width:322px}.max-w-\[600px\]{max-width:600px}.max-w-max{max-width:-moz-max-content;max-width:max-content}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.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))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-\[5px\]{gap:5px}.overflow-auto{overflow:auto}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[6px\]{border-radius:6px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-solid{border-style:solid}.border-black-primary{--tw-border-opacity:1;border-color:rgb(29 28 29/var(--tw-border-opacity))}.border-black-primary\.3{border-color:#1d1c1d4d}.border-gray-primary{--tw-border-opacity:1;border-color:rgb(221 221 221/var(--tw-border-opacity))}.border-green-primary{--tw-border-opacity:1;border-color:rgb(0 122 90/var(--tw-border-opacity))}.border-green-primary\.3{border-color:#007a5a4d}.border-red-primary{--tw-border-opacity:1;border-color:rgb(224 30 90/var(--tw-border-opacity))}.border-red-primary\.3{border-color:#e01e5a4d}.bg-black-primary\/\[0\.13\]{background-color:#1d1c1d21}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity))}.bg-white-secondary{--tw-bg-opacity:1;background-color:rgb(248 248 248/var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[3px\]{padding-left:3px;padding-right:3px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[1px\]{padding-top:1px}.pb-\[1px\],.py-\[1px\]{padding-bottom:1px}.pr-3{padding-right:.75rem}.pr-7{padding-right:1.75rem}.pt-0{padding-top:0}.text-center{text-align:center}.text-\[10px\]{font-size:10px}.text-\[15px\],.text-base{font-size:15px}.text-base{line-height:1.46668}.text-small{font-size:13px;line-height:1.38461538}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[12\.5px\]{line-height:12.5px}.leading-\[17\.6px\]{line-height:17.6px}.text-black-primary{--tw-text-opacity:1;color:rgb(29 28 29/var(--tw-text-opacity))}.text-black-primary\.3{color:#1d1c1d4d}.text-black-primary\/\[0\.7\]{color:#1d1c1db3}.text-black-secondary{--tw-text-opacity:1;color:rgb(97 96 97/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-primary{--tw-text-opacity:1;color:rgb(18 100 163/var(--tw-text-opacity))}.text-green-primary{--tw-text-opacity:1;color:rgb(0 122 90/var(--tw-text-opacity))}.text-red-primary{--tw-text-opacity:1;color:rgb(224 30 90/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.shadow-custom_shadow-1{--tw-shadow-color:#1d1c1d21 0px 0px 0px 1px,#0000001f 0px 5px 10px 0px;--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid #0000;outline-offset:2px}.outline{outline-style:solid}.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}.hover\:bg-blue-primary:hover{--tw-bg-opacity:1;background-color:rgb(18 100 163/var(--tw-bg-opacity))}.hover\:text-white-primary:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.group:focus .group-focus\:outline{outline-style:solid}
+/*! 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}

package/package.json

@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -32,6 +32,7 @@
     "@changesets/cli": "^2.26.2",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
+    "tailwindcss": "^3.4.1",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2"
   },