@knocklabs/react 0.2.8 → 0.2.10

package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs

@@ -1,51 +1,34 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useTranslations as C } from "@knocklabs/react-core";
-import { useState as i } from "react";
-import { Spinner as x } from "../../../core/components/Spinner/Spinner.mjs";
+import e, { useState as s } from "react";
+import { useTranslations as f } from "@knocklabs/react-core";
+import { Spinner as C } from "../../../core/components/Spinner/Spinner.mjs";
 
 import "lodash.debounce";
 
 import _ from "../SlackChannelCombobox/SlackConnectionError.mjs";
-import { SlackIcon as S } from "../SlackIcon/SlackIcon.mjs";
+import { SlackIcon as E } from "../SlackIcon/SlackIcon.mjs";
 
-const w = ({
-  inErrorState: h,
-  connectedChannels: a = [],
-  updateConnectedChannels: p,
-  connectedChannelsError: d,
-  connectedChannelsUpdating: m
+const A = ({
+  inErrorState: i,
+  connectedChannels: c = [],
+  updateConnectedChannels: m,
+  connectedChannelsError: u,
+  connectedChannelsUpdating: p
 }) => {
-  const { t } = C(), [n, o] = i(null), [r, c] = i(null), u = () => {
+  const {
+    t
+  } = f(), [n, a] = s(null), [l, r] = s(null), d = () => {
     if (!n)
       return;
-    if (r && c(null), a.find(
-      (f) => f.channel_id === n
-    ))
-      return o(""), c(t("slackChannelAlreadyConnected") || "");
-    const k = [...a, { channel_id: n }];
-    p(k), o("");
+    if (l && r(null), c.find((k) => k.channel_id === n))
+      return a(""), r(t("slackChannelAlreadyConnected") || "");
+    const h = [...c, {
+      channel_id: n
+    }];
+    m(h), a("");
   };
-  return /* @__PURE__ */ s("div", { className: "rsk-connect-channel", children: [
-    /* @__PURE__ */ e(
-      "input",
-      {
-        className: `rsk-connect-channel__input ${(h || !!r) && !n && "rsk-connect-channel__input--error"}`,
-        tabIndex: -1,
-        id: "slack-channel-search",
-        type: "text",
-        placeholder: r || d || t("slackChannelId"),
-        onChange: (l) => o(l.target.value),
-        value: n || ""
-      }
-    ),
-    /* @__PURE__ */ s("button", { className: "rsk-connect-channel__button", onClick: u, children: [
-      m ? /* @__PURE__ */ e(x, { size: "15px", thickness: 3 }) : /* @__PURE__ */ e(S, { height: "16px", width: "16px" }),
-      t("slackConnectChannel")
-    ] }),
-    /* @__PURE__ */ e(_, {})
-  ] });
+  return /* @__PURE__ */ e.createElement("div", { className: "rsk-connect-channel" }, /* @__PURE__ */ e.createElement("input", { className: `rsk-connect-channel__input ${(i || !!l) && !n && "rsk-connect-channel__input--error"}`, tabIndex: -1, id: "slack-channel-search", type: "text", placeholder: l || u || t("slackChannelId"), onChange: (o) => a(o.target.value), value: n || "" }), /* @__PURE__ */ e.createElement("button", { className: "rsk-connect-channel__button", onClick: d }, p ? /* @__PURE__ */ e.createElement(C, { size: "15px", thickness: 3 }) : /* @__PURE__ */ e.createElement(E, { height: "16px", width: "16px" }), t("slackConnectChannel")), /* @__PURE__ */ e.createElement(_, null));
 };
 export {
-  w as default
+  A as default
 };
 //# sourceMappingURL=SlackAddChannelInput.mjs.map

package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAddChannelInput.mjs","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nconst SlackAddChannelInput = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\n}: {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}) => {\n  const { t } = useTranslations();\n  const [value, setValue] = useState<string | null>(null);\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  const submitChannel = () => {\n    if (!value) {\n      return;\n    }\n\n    if (localError) {\n      setLocalError(null);\n    }\n\n    const alreadyConnected = connectedChannels.find(\n      (channel) => channel.channel_id === value,\n    );\n\n    if (alreadyConnected) {\n      setValue(\"\");\n      return setLocalError(t(\"slackChannelAlreadyConnected\") || \"\");\n    }\n\n    const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n    updateConnectedChannels(channelsToSendToKnock);\n    setValue(\"\");\n  };\n\n  return (\n    <div className=\"rsk-connect-channel\">\n      <input\n        className={`rsk-connect-channel__input ${(inErrorState || !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n        tabIndex={-1}\n        id=\"slack-channel-search\"\n        type=\"text\"\n        placeholder={\n          localError || connectedChannelsError || t(\"slackChannelId\")\n        }\n        onChange={(e) => setValue(e.target.value)}\n        value={value || \"\"}\n      />\n      <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n        {connectedChannelsUpdating ? (\n          <Spinner size=\"15px\" thickness={3} />\n        ) : (\n          <SlackIcon height=\"16px\" width=\"16px\" />\n        )}\n        {t(\"slackConnectChannel\")}\n      </button>\n      <ConnectionErrorInfoBoxes />\n    </div>\n  );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","channel","channelsToSendToKnock","jsxs","jsx","e","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,cAAAC;AAAA,EACA,mBAAAC,IAAoB,CAAC;AAAA,EACrB,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,2BAAAC;AACF,MAMM;AACE,QAAA,EAAE,MAAMC,KACR,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAE1DG,IAAgB,MAAM;AAC1B,QAAI,CAACL;AACH;AAWF,QARIG,KACFC,EAAc,IAAI,GAGKT,EAAkB;AAAA,MACzC,CAACW,MAAYA,EAAQ,eAAeN;AAAA,IAAA;AAIpC,aAAAC,EAAS,EAAE,GACJG,EAAc,EAAE,8BAA8B,KAAK,EAAE;AAG9D,UAAMG,IAAwB,CAAC,GAAGZ,GAAmB,EAAE,YAAYK,GAAO;AAC1E,IAAAJ,EAAwBW,CAAqB,GAC7CN,EAAS,EAAE;AAAA,EAAA;AAIX,SAAA,gBAAAO,EAAC,OAAI,EAAA,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,+BAA+Bf,KAAgB,CAAC,CAACS,MAAe,CAACH,KAAS,mCAAmC;AAAA,QACxH,UAAU;AAAA,QACV,IAAG;AAAA,QACH,MAAK;AAAA,QACL,aACEG,KAAcN,KAA0B,EAAE,gBAAgB;AAAA,QAE5D,UAAU,CAACa,MAAMT,EAASS,EAAE,OAAO,KAAK;AAAA,QACxC,OAAOV,KAAS;AAAA,MAAA;AAAA,IAClB;AAAA,IACC,gBAAAQ,EAAA,UAAA,EAAO,WAAU,+BAA8B,SAASH,GACtD,UAAA;AAAA,MAAAP,IACE,gBAAAW,EAAAE,GAAA,EAAQ,MAAK,QAAO,WAAW,EAAA,CAAG,IAEnC,gBAAAF,EAACG,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,MAEvC,EAAE,qBAAqB;AAAA,IAAA,GAC1B;AAAA,sBACCC,GAAyB,EAAA;AAAA,EAC5B,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SlackAddChannelInput.mjs","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nconst SlackAddChannelInput = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\n}: {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}) => {\n  const { t } = useTranslations();\n  const [value, setValue] = useState<string | null>(null);\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  const submitChannel = () => {\n    if (!value) {\n      return;\n    }\n\n    if (localError) {\n      setLocalError(null);\n    }\n\n    const alreadyConnected = connectedChannels.find(\n      (channel) => channel.channel_id === value,\n    );\n\n    if (alreadyConnected) {\n      setValue(\"\");\n      return setLocalError(t(\"slackChannelAlreadyConnected\") || \"\");\n    }\n\n    const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n    updateConnectedChannels(channelsToSendToKnock);\n    setValue(\"\");\n  };\n\n  return (\n    <div className=\"rsk-connect-channel\">\n      <input\n        className={`rsk-connect-channel__input ${(inErrorState || !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n        tabIndex={-1}\n        id=\"slack-channel-search\"\n        type=\"text\"\n        placeholder={\n          localError || connectedChannelsError || t(\"slackChannelId\")\n        }\n        onChange={(e) => setValue(e.target.value)}\n        value={value || \"\"}\n      />\n      <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n        {connectedChannelsUpdating ? (\n          <Spinner size=\"15px\" thickness={3} />\n        ) : (\n          <SlackIcon height=\"16px\" width=\"16px\" />\n        )}\n        {t(\"slackConnectChannel\")}\n      </button>\n      <ConnectionErrorInfoBoxes />\n    </div>\n  );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","find","channel","channel_id","channelsToSendToKnock","React","e","target","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAuBA,CAAC;AAAA,EAC5BC,cAAAA;AAAAA,EACAC,mBAAAA,IAAoB,CAAE;AAAA,EACtBC,yBAAAA;AAAAA,EACAC,wBAAAA;AAAAA,EACAC,2BAAAA;AAOF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAgB,GACxB,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAE1DG,IAAgBA,MAAM;AAC1B,QAAI,CAACL;AACH;AAWF,QARIG,KACFC,EAAc,IAAI,GAGKV,EAAkBY,KACxCC,CAAYA,MAAAA,EAAQC,eAAeR,CACtC;AAGEC,aAAAA,EAAS,EAAE,GACJG,EAAcN,EAAE,8BAA8B,KAAK,EAAE;AAGxDW,UAAAA,IAAwB,CAAC,GAAGf,GAAmB;AAAA,MAAEc,YAAYR;AAAAA,IAAAA,CAAO;AAC1EL,IAAAA,EAAwBc,CAAqB,GAC7CR,EAAS,EAAE;AAAA,EAAA;AAGb,SACGS,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBAAA,GACZA,gBAAAA,EAAA,cAAA,SAAA,EACC,WAAY,+BAA8BjB,KAAgB,CAAC,CAACU,MAAe,CAACH,KAAS,mCAAoC,IACzH,UAAU,IACV,IAAG,wBACH,MAAK,QACL,aACEG,KAAcP,KAA0BE,EAAE,gBAAgB,GAE5D,UAAWa,CAAAA,MAAMV,EAASU,EAAEC,OAAOZ,KAAK,GACxC,OAAOA,KAAS,IAAG,GAEpBU,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAU,+BAA8B,SAASL,EAAAA,GACtDR,IACCa,gBAAAA,EAAA,cAACG,KAAQ,MAAK,QAAO,WAAW,EAAK,CAAA,IAErCH,gBAAAA,EAAA,cAACI,GAAU,EAAA,QAAO,QAAO,OAAM,OAChC,CAAA,GACAhB,EAAE,qBAAqB,CAC1B,GACAY,gBAAAA,EAAA,cAACK,OAAwB,CAC3B;AAEJ;"}

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs

@@ -1,29 +1,30 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { useTranslations as f, useKnockClient as x, useKnockSlackClient as L, useSlackAuth as S } from "@knocklabs/react-core";
-import { useEffect as C } from "react";
+import e, { useEffect as E } from "react";
+import { useTranslations as b, useKnockClient as f, useKnockSlackClient as x, useSlackAuth as L } from "@knocklabs/react-core";
 
-import { SlackIcon as l } from "../SlackIcon/SlackIcon.mjs";
+import { SlackIcon as a } from "../SlackIcon/SlackIcon.mjs";
 
-const m = (d) => {
-  const n = window.screenLeft ?? window.screenX, r = window.screenTop ?? window.screenY, c = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, e = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, o = c / 2 - 600 / 2 + n, u = `width=600,height=800,top=${e / 2 - 800 / 2 + r},left=${o}`;
-  window.open(d, "Slack OAuth", u);
-}, T = ({
-  slackClientId: d,
-  redirectUrl: k,
+const w = (l) => {
+  const t = window.screenLeft ?? window.screenX, r = window.screenTop ?? window.screenY, c = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, n = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, o = c / 2 - 600 / 2 + t, d = `width=600,height=800,top=${n / 2 - 800 / 2 + r},left=${o}`;
+  window.open(l, "Slack OAuth", d);
+}, A = ({
+  slackClientId: l,
+  redirectUrl: h,
   onAuthenticationComplete: s
 }) => {
-  const { t: n } = f(), r = x(), {
+  const {
+    t
+  } = b(), r = f(), {
     setConnectionStatus: c,
-    connectionStatus: e,
+    connectionStatus: n,
     setActionLabel: o,
-    actionLabel: h,
-    errorLabel: u
-  } = L(), { buildSlackAuthUrl: p, disconnectFromSlack: _ } = S(
-    d,
-    k
-  );
-  C(() => {
-    const w = (i) => {
+    actionLabel: u,
+    errorLabel: d
+  } = x(), {
+    buildSlackAuthUrl: m,
+    disconnectFromSlack: p
+  } = L(l, h);
+  E(() => {
+    const k = (i) => {
       if (i.origin === r.host)
         try {
           i.data === "authComplete" && c("connected"), i.data === "authFailed" && c("error"), s && s(i.data);
@@ -31,51 +32,14 @@ const m = (d) => {
           c("error");
         }
     };
-    return window.addEventListener("message", w, !1), () => {
-      window.removeEventListener("message", w);
+    return window.addEventListener("message", k, !1), () => {
+      window.removeEventListener("message", k);
     };
   }, [r.host, s, c]);
-  const g = n("slackDisconnect") || null, b = n("slackReconnect") || null;
-  return e === "connecting" || e === "disconnecting" ? /* @__PURE__ */ a("div", { className: "rsk-connect__button rsk-connect__button--loading", children: [
-    /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
-    /* @__PURE__ */ t("span", { children: n(e === "connecting" ? "slackConnecting" : "slackDisconnecting") })
-  ] }) : e === "error" ? /* @__PURE__ */ a(
-    "button",
-    {
-      onClick: () => m(p()),
-      className: "rsk-connect__button rsk-connect__button--error",
-      onMouseEnter: () => o(b),
-      onMouseLeave: () => o(null),
-      children: [
-        /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
-        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--error", children: h || u || n("slackError") })
-      ]
-    }
-  ) : e === "disconnected" ? /* @__PURE__ */ a(
-    "button",
-    {
-      onClick: () => m(p()),
-      className: "rsk-connect__button rsk-connect__button--disconnected",
-      children: [
-        /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
-        /* @__PURE__ */ t("span", { children: n("slackConnect") })
-      ]
-    }
-  ) : /* @__PURE__ */ a(
-    "button",
-    {
-      onClick: _,
-      className: "rsk-connect__button rsk-connect__button--connected",
-      onMouseEnter: () => o(g),
-      onMouseLeave: () => o(null),
-      children: [
-        /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
-        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--connected", children: h || n("slackConnected") })
-      ]
-    }
-  );
+  const _ = t("slackDisconnect") || null, g = t("slackReconnect") || null;
+  return n === "connecting" || n === "disconnecting" ? /* @__PURE__ */ e.createElement("div", { className: "rsk-connect__button rsk-connect__button--loading" }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t(n === "connecting" ? "slackConnecting" : "slackDisconnecting"))) : n === "error" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--error", onMouseEnter: () => o(g), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--error" }, u || d || t("slackError"))) : n === "disconnected" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--disconnected" }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t("slackConnect"))) : /* @__PURE__ */ e.createElement("button", { onClick: p, className: "rsk-connect__button rsk-connect__button--connected", onMouseEnter: () => o(_), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--connected" }, u || t("slackConnected")));
 };
 export {
-  T as SlackAuthButton
+  A as SlackAuthButton
 };
 //# sourceMappingURL=SlackAuthButton.mjs.map

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\ntype Props = {\n  slackClientId: string;\n  redirectUrl?: string;\n  onAuthenticationComplete?: (authenticationResp: string) => void;\n};\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: React.FC<Props> = ({\n  slackClientId,\n  redirectUrl,\n  onAuthenticationComplete,\n}) => {\n  const { t } = useTranslations();\n  const knock = useKnockClient();\n\n  const {\n    setConnectionStatus,\n    connectionStatus,\n    setActionLabel,\n    actionLabel,\n    errorLabel,\n  } = useKnockSlackClient();\n\n  const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n    slackClientId,\n    redirectUrl,\n  );\n\n  useEffect(() => {\n    const receiveMessage = (event: MessageEvent) => {\n      if (event.origin !== knock.host) {\n        return;\n      }\n\n      try {\n        if (event.data === \"authComplete\") {\n          setConnectionStatus(\"connected\");\n        }\n\n        if (event.data === \"authFailed\") {\n          setConnectionStatus(\"error\");\n        }\n\n        if (onAuthenticationComplete) {\n          onAuthenticationComplete(event.data);\n        }\n      } catch (error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    window.addEventListener(\"message\", receiveMessage, false);\n\n    // Cleanup the event listener when the component unmounts\n    return () => {\n      window.removeEventListener(\"message\", receiveMessage);\n    };\n  }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n  const disconnectLabel = t(\"slackDisconnect\") || null;\n  const reconnectLabel = t(\"slackReconnect\") || null;\n\n  // Loading states\n  if (\n    connectionStatus === \"connecting\" ||\n    connectionStatus === \"disconnecting\"\n  ) {\n    return (\n      <div className=\"rsk-connect__button rsk-connect__button--loading\">\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>\n          {connectionStatus === \"connecting\"\n            ? t(\"slackConnecting\")\n            : t(\"slackDisconnecting\")}\n        </span>\n      </div>\n    );\n  }\n\n  // Error state\n  if (connectionStatus === \"error\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--error\"\n        onMouseEnter={() => setActionLabel(reconnectLabel)}\n        onMouseLeave={() => setActionLabel(null)}\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span className=\"rsk-connect__button__text--error\">\n          {actionLabel || errorLabel || t(\"slackError\")}\n        </span>\n      </button>\n    );\n  }\n\n  // Disconnected state\n  if (connectionStatus === \"disconnected\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--disconnected\"\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>{t(\"slackConnect\")}</span>\n      </button>\n    );\n  }\n\n  // Connected state\n  return (\n    <button\n      onClick={disconnectFromSlack}\n      className=\"rsk-connect__button rsk-connect__button--connected\"\n      onMouseEnter={() => setActionLabel(disconnectLabel)}\n      onMouseLeave={() => setActionLabel(null)}\n    >\n      <SlackIcon height=\"16px\" width=\"16px\" />\n      <span className=\"rsk-connect__button__text--connected\">\n        {actionLabel || t(\"slackConnected\")}\n      </span>\n    </button>\n  );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","screenTop","innerWidth","innerHeight","left","features","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":"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"}
+{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\ntype Props = {\n  slackClientId: string;\n  redirectUrl?: string;\n  onAuthenticationComplete?: (authenticationResp: string) => void;\n};\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: React.FC<Props> = ({\n  slackClientId,\n  redirectUrl,\n  onAuthenticationComplete,\n}) => {\n  const { t } = useTranslations();\n  const knock = useKnockClient();\n\n  const {\n    setConnectionStatus,\n    connectionStatus,\n    setActionLabel,\n    actionLabel,\n    errorLabel,\n  } = useKnockSlackClient();\n\n  const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n    slackClientId,\n    redirectUrl,\n  );\n\n  useEffect(() => {\n    const receiveMessage = (event: MessageEvent) => {\n      if (event.origin !== knock.host) {\n        return;\n      }\n\n      try {\n        if (event.data === \"authComplete\") {\n          setConnectionStatus(\"connected\");\n        }\n\n        if (event.data === \"authFailed\") {\n          setConnectionStatus(\"error\");\n        }\n\n        if (onAuthenticationComplete) {\n          onAuthenticationComplete(event.data);\n        }\n      } catch (error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    window.addEventListener(\"message\", receiveMessage, false);\n\n    // Cleanup the event listener when the component unmounts\n    return () => {\n      window.removeEventListener(\"message\", receiveMessage);\n    };\n  }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n  const disconnectLabel = t(\"slackDisconnect\") || null;\n  const reconnectLabel = t(\"slackReconnect\") || null;\n\n  // Loading states\n  if (\n    connectionStatus === \"connecting\" ||\n    connectionStatus === \"disconnecting\"\n  ) {\n    return (\n      <div className=\"rsk-connect__button rsk-connect__button--loading\">\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>\n          {connectionStatus === \"connecting\"\n            ? t(\"slackConnecting\")\n            : t(\"slackDisconnecting\")}\n        </span>\n      </div>\n    );\n  }\n\n  // Error state\n  if (connectionStatus === \"error\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--error\"\n        onMouseEnter={() => setActionLabel(reconnectLabel)}\n        onMouseLeave={() => setActionLabel(null)}\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span className=\"rsk-connect__button__text--error\">\n          {actionLabel || errorLabel || t(\"slackError\")}\n        </span>\n      </button>\n    );\n  }\n\n  // Disconnected state\n  if (connectionStatus === \"disconnected\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--disconnected\"\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>{t(\"slackConnect\")}</span>\n      </button>\n    );\n  }\n\n  // Connected state\n  return (\n    <button\n      onClick={disconnectFromSlack}\n      className=\"rsk-connect__button rsk-connect__button--connected\"\n      onMouseEnter={() => setActionLabel(disconnectLabel)}\n      onMouseLeave={() => setActionLabel(null)}\n    >\n      <SlackIcon height=\"16px\" width=\"16px\" />\n      <span className=\"rsk-connect__button__text--connected\">\n        {actionLabel || t(\"slackConnected\")}\n      </span>\n    </button>\n  );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":"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"}

package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs

@@ -1,22 +1,17 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { useTranslations as a } from "@knocklabs/react-core";
+import e from "react";
+import { useTranslations as r } from "@knocklabs/react-core";
 
-import { SlackIcon as e } from "../SlackIcon/SlackIcon.mjs";
+import { SlackIcon as c } from "../SlackIcon/SlackIcon.mjs";
 
-const d = ({
+const o = ({
   actionButton: t
 }) => {
-  const { t: s } = a();
-  return /* @__PURE__ */ i("div", { className: "rsk-auth", children: [
-    /* @__PURE__ */ i("div", { className: "rsk-auth__header", children: [
-      /* @__PURE__ */ r(e, { height: "32px", width: "32px" }),
-      /* @__PURE__ */ r("div", { children: t })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "rsk-auth__title", children: "Slack" }),
-    /* @__PURE__ */ r("div", { className: "rsk-auth__description", children: s("slackConnectContainerDescription") })
-  ] });
+  const {
+    t: a
+  } = r();
+  return /* @__PURE__ */ e.createElement("div", { className: "rsk-auth" }, /* @__PURE__ */ e.createElement("div", { className: "rsk-auth__header" }, /* @__PURE__ */ e.createElement(c, { height: "32px", width: "32px" }), /* @__PURE__ */ e.createElement("div", null, t)), /* @__PURE__ */ e.createElement("div", { className: "rsk-auth__title" }, "Slack"), /* @__PURE__ */ e.createElement("div", { className: "rsk-auth__description" }, a("slackConnectContainerDescription")));
 };
 export {
-  d as SlackAuthContainer
+  o as SlackAuthContainer
 };
 //# sourceMappingURL=SlackAuthContainer.mjs.map

package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthContainer.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthContainer/SlackAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport const SlackAuthContainer = ({\n  actionButton,\n}: {\n  actionButton: React.ReactElement;\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <div className=\"rsk-auth\">\n      <div className=\"rsk-auth__header\">\n        <SlackIcon height=\"32px\" width=\"32px\" />\n        <div>{actionButton}</div>\n      </div>\n      <div className=\"rsk-auth__title\">Slack</div>\n      <div className=\"rsk-auth__description\">\n        {t(\"slackConnectContainerDescription\")}\n      </div>\n    </div>\n  );\n};\n"],"names":["SlackAuthContainer","actionButton","t","useTranslations","jsxs","jsx","SlackIcon"],"mappings":";;;;;AAOO,MAAMA,IAAqB,CAAC;AAAA,EACjC,cAAAC;AACF,MAEM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,MACtC,gBAAAD,EAAC,SAAK,UAAaJ,EAAA,CAAA;AAAA,IAAA,GACrB;AAAA,IACC,gBAAAI,EAAA,OAAA,EAAI,WAAU,mBAAkB,UAAK,SAAA;AAAA,sBACrC,OAAI,EAAA,WAAU,yBACZ,UAAAH,EAAE,kCAAkC,GACvC;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SlackAuthContainer.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthContainer/SlackAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport const SlackAuthContainer = ({\n  actionButton,\n}: {\n  actionButton: React.ReactElement;\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <div className=\"rsk-auth\">\n      <div className=\"rsk-auth__header\">\n        <SlackIcon height=\"32px\" width=\"32px\" />\n        <div>{actionButton}</div>\n      </div>\n      <div className=\"rsk-auth__title\">Slack</div>\n      <div className=\"rsk-auth__description\">\n        {t(\"slackConnectContainerDescription\")}\n      </div>\n    </div>\n  );\n};\n"],"names":["SlackAuthContainer","actionButton","t","useTranslations","React","SlackIcon"],"mappings":";;;;;AAOO,MAAMA,IAAqBA,CAAC;AAAA,EACjCC,cAAAA;AAGF,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAE9B,SACGC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8CACZ,OAAI,EAAA,WAAU,mBACb,GAAAA,gBAAAA,EAAA,cAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAM,GACrCD,gBAAAA,EAAA,cAAC,OAAKH,MAAAA,CAAa,CACrB,GACCG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,kBAAkB,GAAA,OAAK,GACtCA,gBAAAA,EAAA,cAAC,SAAI,WAAU,wBAAA,GACZF,EAAE,kCAAkC,CACvC,CACF;AAEJ;"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs

@@ -1,63 +1,66 @@
-import { jsx as r, jsxs as C } from "react/jsx-runtime";
-import { useTranslations as H, useKnockSlackClient as w, useSlackChannels as z, useConnectedSlackChannels as G } from "@knocklabs/react-core";
-import * as u from "@radix-ui/react-popover";
-import * as W from "@radix-ui/react-visually-hidden";
-import { useState as p, useRef as X, useEffect as y, useMemo as x } from "react";
-import { Spinner as q } from "../../../core/components/Spinner/Spinner.mjs";
+import c, { useState as u, useRef as H, useEffect as O, useMemo as E } from "react";
+import { useTranslations as w, useKnockSlackClient as z, useSlackChannels as G, useConnectedSlackChannels as W } from "@knocklabs/react-core";
+import * as S from "@radix-ui/react-popover";
+import * as X from "@radix-ui/react-visually-hidden";
+import { Spinner as j } from "../../../core/components/Spinner/Spinner.mjs";
 
 import "lodash.debounce";
-import J from "../../../core/hooks/useOutsideClick.mjs";
+import q from "../../../core/hooks/useOutsideClick.mjs";
 
-import Q from "../SlackAddChannelInput/SlackAddChannelInput.mjs";
-import Y from "./SlackChannelListBox.mjs";
-import Z from "./SlackConnectedChannelTagList.mjs";
-import g from "./SlackConnectionError.mjs";
-import { strContains as M } from "./helpers.mjs";
-import nn from "./icons/SearchIcon.mjs";
+import J from "../SlackAddChannelInput/SlackAddChannelInput.mjs";
+import Q from "./SlackChannelListBox.mjs";
+import Y from "./SlackConnectedChannelTagList.mjs";
+import Z from "./SlackConnectionError.mjs";
+import { strContains as g } from "./helpers.mjs";
+import M from "./icons/SearchIcon.mjs";
 
-const on = 1e3, Sn = ({
-  slackChannelsRecipientObject: I,
-  queryOptions: R,
-  inputProps: U,
-  inputContainerProps: $,
-  listBoxProps: D,
-  channelOptionProps: K,
+const nn = 1e3, bn = ({
+  slackChannelsRecipientObject: R,
+  queryOptions: y,
+  inputProps: I,
+  inputContainerProps: U,
+  listBoxProps: $,
+  channelOptionProps: D,
   inputMessages: n,
-  showConnectedChannelTags: P = !1
+  showConnectedChannelTags: K = !1
 }) => {
-  const { t: l } = H(), [m, L] = p(!1), [E, N] = p(""), T = X(null);
-  J({
-    ref: T,
+  const {
+    t: l
+  } = w(), [C, p] = u(!1), [x, L] = u(""), N = H(null);
+  q({
+    ref: N,
     fn: () => {
-      N(""), L(!1);
+      L(""), p(!1);
     }
   });
-  const { connectionStatus: a, errorLabel: v } = w(), { data: t, isLoading: f } = z({ queryOptions: R }), {
+  const {
+    connectionStatus: a,
+    errorLabel: T
+  } = z(), {
+    data: t,
+    isLoading: s
+  } = G({
+    queryOptions: y
+  }), {
     data: h,
-    updateConnectedChannels: b,
-    loading: V,
+    updateConnectedChannels: f,
+    loading: P,
     error: d,
-    updating: F
-  } = G({ slackChannelsRecipientObject: I }), [c, _] = p(null);
-  y(() => {
-    m && setTimeout(() => {
-      var o;
-      (o = document.getElementById("slack-channel-search")) == null || o.focus();
+    updating: v
+  } = W({
+    slackChannelsRecipientObject: R
+  }), [r, _] = u(null);
+  O(() => {
+    C && setTimeout(() => {
+      var e;
+      (e = document.getElementById("slack-channel-search")) == null || e.focus();
     }, 0);
-  }, [m]), y(() => {
-    const o = new Map(
-      t.map((e) => [e.id, e])
-    ), i = (h == null ? void 0 : h.filter((e) => o.has(e.channel_id || ""))) || [];
+  }, [C]), O(() => {
+    const e = new Map(t.map((o) => [o.id, o])), i = (h == null ? void 0 : h.filter((o) => e.has(o.channel_id || ""))) || [];
     _(i);
   }, [h, t]);
-  const s = x(
-    () => a === "disconnected" || a === "error" || d,
-    [d, a]
-  ), k = x(
-    () => a === "connecting" || a === "disconnecting" || f,
-    [a, f]
-  ), j = x(() => {
-    const o = {
+  const m = E(() => a === "disconnected" || a === "error" || d, [d, a]), b = E(() => a === "connecting" || a === "disconnecting" || s, [a, s]), V = E(() => {
+    const e = {
       disconnected: l("slackSearchbarDisconnected"),
       multipleChannelsConnected: l("slackSearchbarMultipleChannels"),
       noChannelsConnected: l("slackSearchbarNoChannelsConnected"),
@@ -65,131 +68,40 @@ const on = 1e3, Sn = ({
       channelsError: l("slackSearchbarChannelsError")
     };
     if (a === "disconnected")
-      return (n == null ? void 0 : n.disconnected) || o.disconnected;
+      return (n == null ? void 0 : n.disconnected) || e.disconnected;
     if (a === "error")
-      return (n == null ? void 0 : n.error) || v;
-    if (!k && t.length === 0)
-      return (n == null ? void 0 : n.noSlackChannelsFound) || o.noSlackChannelsFound;
+      return (n == null ? void 0 : n.error) || T;
+    if (!b && t.length === 0)
+      return (n == null ? void 0 : n.noSlackChannelsFound) || e.noSlackChannelsFound;
     if (d)
       return d;
-    const i = (c == null ? void 0 : c.length) || 0;
-    if (c && i === 0)
-      return (n == null ? void 0 : n.noChannelsConnected) || o.noChannelsConnected;
-    if (c && i === 1) {
-      const e = t == null ? void 0 : t.find(
-        (S) => {
-          var O;
-          return S.id === ((O = c[0]) == null ? void 0 : O.channel_id);
-        }
-      );
-      return (n == null ? void 0 : n.singleChannelConnected) || `# ${e == null ? void 0 : e.name}`;
+    const i = (r == null ? void 0 : r.length) || 0;
+    if (r && i === 0)
+      return (n == null ? void 0 : n.noChannelsConnected) || e.noChannelsConnected;
+    if (r && i === 1) {
+      const o = t == null ? void 0 : t.find((k) => {
+        var A;
+        return k.id === ((A = r[0]) == null ? void 0 : A.channel_id);
+      });
+      return (n == null ? void 0 : n.singleChannelConnected) || `# ${o == null ? void 0 : o.name}`;
     }
-    return c && i > 1 ? (n == null ? void 0 : n.multipleChannelsConnected) || `${i} channels connected` : "";
-  }, [
-    a,
-    k,
-    t,
-    d,
-    c,
-    n,
-    v,
-    l
-  ]), A = async (o) => {
-    if (!c)
+    return r && i > 1 ? (n == null ? void 0 : n.multipleChannelsConnected) || `${i} channels connected` : "";
+  }, [a, b, t, d, r, n, T, l]), F = async (e) => {
+    if (!r)
       return;
-    if (c.find(
-      (e) => e.channel_id === o
-    )) {
-      const e = c.filter(
-        (S) => S.channel_id !== o
-      );
-      _(e), b(e);
+    if (r.find((o) => o.channel_id === e)) {
+      const o = r.filter((k) => k.channel_id !== e);
+      _(o), f(o);
     } else {
-      const e = [
-        ...c,
-        { channel_id: o }
-      ];
-      _(e), b(e);
+      const o = [...r, {
+        channel_id: e
+      }];
+      _(o), f(o);
     }
-  }, B = t.filter(
-    (o) => M(o.name, E)
-  );
-  return t.length > on ? /* @__PURE__ */ r(
-    Q,
-    {
-      inErrorState: !!s,
-      connectedChannels: c || [],
-      updateConnectedChannels: b,
-      connectedChannelsError: d,
-      connectedChannelsUpdating: F
-    }
-  ) : /* @__PURE__ */ C("div", { ref: T, className: "rsk-combobox", children: [
-    /* @__PURE__ */ C(
-      u.Root,
-      {
-        open: a !== "disconnected" ? m : !1,
-        children: [
-          /* @__PURE__ */ r(W.Root, { children: /* @__PURE__ */ r("label", { htmlFor: "slack-channel-search", children: l("slackSearchChannels") }) }),
-          /* @__PURE__ */ r(u.Trigger, { asChild: !0, children: /* @__PURE__ */ C("div", { className: "rsk-combobox__searchbar", children: [
-            /* @__PURE__ */ C(
-              "div",
-              {
-                className: "rsk-combobox__searchbar__input-container",
-                ...$,
-                children: [
-                  /* @__PURE__ */ r(
-                    "div",
-                    {
-                      className: `rsk-combobox__searchbar__input-container__icon ${s && "rsk-combobox__searchbar__input-container__icon--error"}`,
-                      children: k ? /* @__PURE__ */ r(q, { size: "15px", thickness: 3 }) : /* @__PURE__ */ r(nn, {})
-                    }
-                  ),
-                  /* @__PURE__ */ r(
-                    "input",
-                    {
-                      className: `rsk-combobox__searchbar__input-container__input ${s ? "rsk-combobox__searchbar__input-container__input--error" : ""}`,
-                      tabIndex: -1,
-                      id: "slack-channel-search",
-                      type: "text",
-                      onFocus: () => t.length > 0 && L(!0),
-                      onChange: (o) => N(o.target.value),
-                      value: E,
-                      placeholder: j || "",
-                      disabled: !!s,
-                      ...U
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ r(g, {})
-          ] }) }),
-          /* @__PURE__ */ r(u.Content, { children: /* @__PURE__ */ r(
-            Y,
-            {
-              isLoading: f || V,
-              isUpdating: F,
-              connectedChannels: c,
-              onClick: A,
-              slackChannels: B,
-              listBoxProps: D,
-              channelOptionProps: K
-            }
-          ) })
-        ]
-      }
-    ),
-    P && /* @__PURE__ */ r(
-      Z,
-      {
-        connectedChannels: c,
-        slackChannels: t,
-        updateConnectedChannels: A
-      }
-    )
-  ] });
+  }, B = t.filter((e) => g(e.name, x));
+  return t.length > nn ? /* @__PURE__ */ c.createElement(J, { inErrorState: !!m, connectedChannels: r || [], updateConnectedChannels: f, connectedChannelsError: d, connectedChannelsUpdating: v }) : /* @__PURE__ */ c.createElement("div", { ref: N, className: "rsk-combobox" }, /* @__PURE__ */ c.createElement(S.Root, { open: a !== "disconnected" ? C : !1 }, /* @__PURE__ */ c.createElement(X.Root, null, /* @__PURE__ */ c.createElement("label", { htmlFor: "slack-channel-search" }, l("slackSearchChannels"))), /* @__PURE__ */ c.createElement(S.Trigger, { asChild: !0 }, /* @__PURE__ */ c.createElement("div", { className: "rsk-combobox__searchbar" }, /* @__PURE__ */ c.createElement("div", { className: "rsk-combobox__searchbar__input-container", ...U }, /* @__PURE__ */ c.createElement("div", { className: `rsk-combobox__searchbar__input-container__icon ${m && "rsk-combobox__searchbar__input-container__icon--error"}` }, b ? /* @__PURE__ */ c.createElement(j, { size: "15px", thickness: 3 }) : /* @__PURE__ */ c.createElement(M, null)), /* @__PURE__ */ c.createElement("input", { className: `rsk-combobox__searchbar__input-container__input ${m ? "rsk-combobox__searchbar__input-container__input--error" : ""}`, tabIndex: -1, id: "slack-channel-search", type: "text", onFocus: () => t.length > 0 && p(!0), onChange: (e) => L(e.target.value), value: x, placeholder: V || "", disabled: !!m, ...I })), /* @__PURE__ */ c.createElement(Z, null))), /* @__PURE__ */ c.createElement(S.Content, null, /* @__PURE__ */ c.createElement(Q, { isLoading: s || P, isUpdating: v, connectedChannels: r, onClick: F, slackChannels: B, listBoxProps: $, channelOptionProps: D }))), K && /* @__PURE__ */ c.createElement(Y, { connectedChannels: r, slackChannels: t, updateConnectedChannels: F }));
 };
 export {
-  Sn as SlackChannelCombobox
+  bn as SlackChannelCombobox
 };
 //# sourceMappingURL=SlackChannelCombobox.mjs.map