@knocklabs/react 0.2.25 → 0.2.27

package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAddChannelInputProps {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}\n\nconst SlackAddChannelInput: FunctionComponent<SlackAddChannelInputProps> = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\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":"8bAoBMA,EAAqEA,CAAC,CAC1EC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxB,CAACC,EAAOC,CAAQ,EAAIC,WAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,WAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CAAA,EAGb,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAY,+BAA8BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAoC,GACzH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAK,CAAA,EAErCH,EAAAA,QAAA,cAACI,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAChC,CAAA,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}
+{"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAddChannelInputProps {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}\n\nconst SlackAddChannelInput: FunctionComponent<SlackAddChannelInputProps> = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\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":"8bAoBMA,EAAqEA,CAAC,CAC1EC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxB,CAACC,EAAOC,CAAQ,EAAIC,WAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,WAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CAAA,EAGb,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAW,+BAA+BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAmC,GACxH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAK,CAAA,EAErCH,EAAAA,QAAA,cAACI,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAChC,CAAA,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}

package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),i=require("@knocklabs/react-core");const u=require("../SlackIcon/SlackIcon.js");const E=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=E(_),w=t=>{const n=window.screenLeft??window.screenX,a=window.screenTop??window.screenY,o=window.innerWidth??document.documentElement.clientWidth??screen.width,c=window.innerHeight??document.documentElement.clientHeight??screen.height,r=o/2-600/2+n,h=`width=600,height=800,top=${c/2-800/2+a},left=${r}`;window.open(t,"Slack OAuth",h)},S=({slackClientId:t,redirectUrl:k,onAuthenticationComplete:s})=>{const{t:n}=i.useTranslations(),a=i.useKnockClient(),{setConnectionStatus:o,connectionStatus:c,setActionLabel:r,actionLabel:d,errorLabel:h}=i.useKnockSlackClient(),{buildSlackAuthUrl:f,disconnectFromSlack:g}=i.useSlackAuth(t,k);_.useEffect(()=>{const m=l=>{if(l.origin===a.host)try{l.data==="authComplete"&&o("connected"),l.data==="authFailed"&&o("error"),s&&s(l.data)}catch{o("error")}};return window.addEventListener("message",m,!1),()=>{window.removeEventListener("message",m)}},[a.host,s,o]);const p=n("slackDisconnect")||null,b=n("slackReconnect")||null;return c==="connecting"||c==="disconnecting"?e.default.createElement("div",{className:"rsk-connect__button rsk-connect__button--loading"},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n(c==="connecting"?"slackConnecting":"slackDisconnecting"))):c==="error"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--error",onMouseEnter:()=>r(b),onMouseLeave:()=>r(null)},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--error"},d||h||n("slackError"))):c==="disconnected"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--disconnected"},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n("slackConnect"))):e.default.createElement("button",{onClick:g,className:"rsk-connect__button rsk-connect__button--connected",onMouseEnter:()=>r(p),onMouseLeave:()=>r(null)},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--connected"},d||n("slackConnected")))};exports.SlackAuthButton=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),i=require("@knocklabs/react-core");;/* empty css               */const u=require("../SlackIcon/SlackIcon.js");;/* empty css            */const E=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=E(_),w=t=>{const n=window.screenLeft??window.screenX,a=window.screenTop??window.screenY,o=window.innerWidth??document.documentElement.clientWidth??screen.width,c=window.innerHeight??document.documentElement.clientHeight??screen.height,r=o/2-600/2+n,h=`width=600,height=800,top=${c/2-800/2+a},left=${r}`;window.open(t,"Slack OAuth",h)},S=({slackClientId:t,redirectUrl:k,onAuthenticationComplete:s})=>{const{t:n}=i.useTranslations(),a=i.useKnockClient(),{setConnectionStatus:o,connectionStatus:c,setActionLabel:r,actionLabel:d,errorLabel:h}=i.useKnockSlackClient(),{buildSlackAuthUrl:f,disconnectFromSlack:g}=i.useSlackAuth(t,k);_.useEffect(()=>{const m=l=>{if(l.origin===a.host)try{l.data==="authComplete"&&o("connected"),l.data==="authFailed"&&o("error"),s&&s(l.data)}catch{o("error")}};return window.addEventListener("message",m,!1),()=>{window.removeEventListener("message",m)}},[a.host,s,o]);const p=n("slackDisconnect")||null,b=n("slackReconnect")||null;return c==="connecting"||c==="disconnecting"?e.default.createElement("div",{className:"rsk-connect__button rsk-connect__button--loading"},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n(c==="connecting"?"slackConnecting":"slackDisconnecting"))):c==="error"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--error",onMouseEnter:()=>r(b),onMouseLeave:()=>r(null)},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--error"},d||h||n("slackError"))):c==="disconnected"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--disconnected"},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n("slackConnect"))):e.default.createElement("button",{onClick:g,className:"rsk-connect__button rsk-connect__button--connected",onMouseEnter:()=>r(p),onMouseLeave:()=>r(null)},e.default.createElement(u.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--connected"},d||n("slackConnected")))};exports.SlackAuthButton=S;
 //# sourceMappingURL=SlackAuthButton.js.map

package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthButton.js","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\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: FunctionComponent<SlackAuthButtonProps> = ({\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":"uTAoBMA,EAAuBC,GAAgB,CAIrCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAY,4BAHNJ,EAAc,EAAIE,IAAS,EAAIV,CAGiB,SAAQW,CAAK,GAElEE,OAAAA,KAAKjB,EAAK,cAAegB,CAAQ,CAC1C,EAEaE,EAA2DA,CAAC,CACvEC,cAAAA,EACAC,YAAAA,EACAC,yBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxBC,EAAQC,EAAAA,iBAER,CACJC,oBAAAA,EACAC,iBAAAA,EACAC,eAAAA,EACAC,YAAAA,EACAC,WAAAA,GACEC,EAAoB,oBAAA,EAElB,CAAEC,kBAAAA,EAAmBC,oBAAAA,CAAAA,EAAwBC,EACjDf,aAAAA,EACAC,CACF,EAEAe,EAAAA,UAAU,IAAM,CACRC,MAAAA,EAAkBC,GAAwB,CAC1CA,GAAAA,EAAMC,SAAWd,EAAMe,KAIvB,GAAA,CACEF,EAAMG,OAAS,gBACjBd,EAAoB,WAAW,EAG7BW,EAAMG,OAAS,cACjBd,EAAoB,OAAO,EAGzBL,GACFA,EAAyBgB,EAAMG,IAAI,OAEvB,CACdd,EAAoB,OAAO,CAC7B,CAAA,EAGKe,cAAAA,iBAAiB,UAAWL,EAAgB,EAAK,EAGjD,IAAM,CACJM,OAAAA,oBAAoB,UAAWN,CAAc,CAAA,GAErD,CAACZ,EAAMe,KAAMlB,EAA0BK,CAAmB,CAAC,EAExDiB,MAAAA,EAAkBrB,EAAE,iBAAiB,GAAK,KAC1CsB,EAAiBtB,EAAE,gBAAgB,GAAK,KAI5CK,OAAAA,IAAqB,cACrBA,IAAqB,gBAGnBkB,EAAA,QAAA,cAAC,OAAI,UAAU,kDAAA,0BACZC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACpCD,EAAAA,QAAA,cAAA,OAAA,KAEKvB,EADHK,IAAqB,aAChB,kBACA,oBADiB,CAEzB,CACF,EAKAA,IAAqB,gCAEpB,SACC,CAAA,QAAS,IAAM5B,EAAoBiC,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAegB,CAAc,EACjD,aAAc,IAAMhB,EAAe,IAAI,CAAA,0BAEtCkB,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,oCACbhB,GAAeC,GAAcR,EAAE,YAAY,CAC9C,CACF,EAKAK,IAAqB,eAErBkB,EAAA,QAAA,cAAC,UACC,QAAS,IAAM9C,EAAoBiC,EAAkB,CAAC,EACtD,UAAU,uDAEV,EAAAa,EAAA,QAAA,cAACC,aAAU,OAAO,OAAO,MAAM,MAAM,CAAA,0BACpC,OAAMxB,KAAAA,EAAE,cAAc,CAAE,CAC3B,EAMDuB,EAAAA,QAAA,cAAA,SAAA,CACC,QAASZ,EACT,UAAU,qDACV,aAAc,IAAML,EAAee,CAAe,EAClD,aAAc,IAAMf,EAAe,IAAI,CAEvC,EAAAiB,EAAA,QAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,sCACbhB,EAAAA,GAAeP,EAAE,gBAAgB,CACpC,CACF,CAEJ"}
+{"version":3,"file":"SlackAuthButton.js","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\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: FunctionComponent<SlackAuthButtonProps> = ({\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":"uTAoBMA,EAAuBC,GAAgB,CAIrCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAW,4BAHLJ,EAAc,EAAIE,IAAS,EAAIV,CAGgB,SAASW,CAAI,GAEjEE,OAAAA,KAAKjB,EAAK,cAAegB,CAAQ,CAC1C,EAEaE,EAA2DA,CAAC,CACvEC,cAAAA,EACAC,YAAAA,EACAC,yBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxBC,EAAQC,EAAAA,iBAER,CACJC,oBAAAA,EACAC,iBAAAA,EACAC,eAAAA,EACAC,YAAAA,EACAC,WAAAA,GACEC,EAAoB,oBAAA,EAElB,CAAEC,kBAAAA,EAAmBC,oBAAAA,CAAAA,EAAwBC,EACjDf,aAAAA,EACAC,CACF,EAEAe,EAAAA,UAAU,IAAM,CACRC,MAAAA,EAAkBC,GAAwB,CAC1CA,GAAAA,EAAMC,SAAWd,EAAMe,KAIvB,GAAA,CACEF,EAAMG,OAAS,gBACjBd,EAAoB,WAAW,EAG7BW,EAAMG,OAAS,cACjBd,EAAoB,OAAO,EAGzBL,GACFA,EAAyBgB,EAAMG,IAAI,OAEvB,CACdd,EAAoB,OAAO,CAC7B,CAAA,EAGKe,cAAAA,iBAAiB,UAAWL,EAAgB,EAAK,EAGjD,IAAM,CACJM,OAAAA,oBAAoB,UAAWN,CAAc,CAAA,GAErD,CAACZ,EAAMe,KAAMlB,EAA0BK,CAAmB,CAAC,EAExDiB,MAAAA,EAAkBrB,EAAE,iBAAiB,GAAK,KAC1CsB,EAAiBtB,EAAE,gBAAgB,GAAK,KAI5CK,OAAAA,IAAqB,cACrBA,IAAqB,gBAGnBkB,EAAA,QAAA,cAAC,OAAI,UAAU,kDAAA,0BACZC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACpCD,EAAAA,QAAA,cAAA,OAAA,KAEKvB,EADHK,IAAqB,aAChB,kBACA,oBADiB,CAEzB,CACF,EAKAA,IAAqB,gCAEpB,SACC,CAAA,QAAS,IAAM5B,EAAoBiC,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAegB,CAAc,EACjD,aAAc,IAAMhB,EAAe,IAAI,CAAA,0BAEtCkB,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,oCACbhB,GAAeC,GAAcR,EAAE,YAAY,CAC9C,CACF,EAKAK,IAAqB,eAErBkB,EAAA,QAAA,cAAC,UACC,QAAS,IAAM9C,EAAoBiC,EAAkB,CAAC,EACtD,UAAU,uDAEV,EAAAa,EAAA,QAAA,cAACC,aAAU,OAAO,OAAO,MAAM,MAAM,CAAA,0BACpC,OAAMxB,KAAAA,EAAE,cAAc,CAAE,CAC3B,EAMDuB,EAAAA,QAAA,cAAA,SAAA,CACC,QAASZ,EACT,UAAU,qDACV,aAAc,IAAML,EAAee,CAAe,EAClD,aAAc,IAAMf,EAAe,IAAI,CAEvC,EAAAiB,EAAA,QAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,sCACbhB,EAAAA,GAAeP,EAAE,gBAAgB,CACpC,CACF,CAEJ"}

package/dist/cjs/modules/slack/components/SlackAuthContainer/SlackAuthContainer.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),c=require("@knocklabs/react-core");const l=require("../SlackIcon/SlackIcon.js");const n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(r),s=({actionButton:e})=>{const{t:a}=c.useTranslations();return t.default.createElement("div",{className:"rsk-auth"},t.default.createElement("div",{className:"rsk-auth__header"},t.default.createElement(l.SlackIcon,{height:"32px",width:"32px"}),t.default.createElement("div",null,e)),t.default.createElement("div",{className:"rsk-auth__title"},"Slack"),t.default.createElement("div",{className:"rsk-auth__description"},a("slackConnectContainerDescription")))};exports.SlackAuthContainer=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),c=require("@knocklabs/react-core");;/* empty css               */const l=require("../SlackIcon/SlackIcon.js");;/* empty css            */const n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(r),s=({actionButton:e})=>{const{t:a}=c.useTranslations();return t.default.createElement("div",{className:"rsk-auth"},t.default.createElement("div",{className:"rsk-auth__header"},t.default.createElement(l.SlackIcon,{height:"32px",width:"32px"}),t.default.createElement("div",null,e)),t.default.createElement("div",{className:"rsk-auth__title"},"Slack"),t.default.createElement("div",{className:"rsk-auth__description"},a("slackConnectContainerDescription")))};exports.SlackAuthContainer=s;
 //# sourceMappingURL=SlackAuthContainer.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js

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

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackChannelCombobox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n  ContainerObject,\n  SlackChannelQueryOptions,\n  useConnectedSlackChannels,\n  useKnockSlackClient,\n  useSlackChannels,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\nexport type SlackChannelComboboxInputMessages = {\n  disconnected: string;\n  error: string;\n  singleChannelConnected: string;\n  multipleChannelsConnected: string;\n  noChannelsConnected: string;\n  noSlackChannelsFound: string;\n};\n\nexport interface SlackChannelComboboxProps {\n  slackChannelsRecipientObject: ContainerObject;\n  queryOptions?: SlackChannelQueryOptions;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n  listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n  channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n  inputMessages?: SlackChannelComboboxInputMessages;\n  showConnectedChannelTags?: boolean;\n}\n\nexport const SlackChannelCombobox: FunctionComponent<\n  SlackChannelComboboxProps\n> = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\n  showConnectedChannelTags = false,\n}) => {\n  const { t } = useTranslations();\n\n  const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState(\"\");\n\n  // Used to close the combobox when clicking outside of it\n  const comboboxRef = useRef(null);\n  useOutsideClick({\n    ref: comboboxRef,\n    fn: () => {\n      setInputValue(\"\");\n      setComboboxListOpen(false);\n    },\n  });\n\n  // Gather API data\n  const { connectionStatus, errorLabel: connectionErrorLabel } =\n    useKnockSlackClient();\n\n  const { data: slackChannels, isLoading: slackChannelsLoading } =\n    useSlackChannels({ queryOptions });\n\n  const {\n    data: connectedChannels,\n    updateConnectedChannels,\n    loading: connectedChannelsLoading,\n    error: connectedChannelsError,\n    updating: connectedChannelsUpdating,\n  } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n  const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n    SlackChannelConnection[] | null\n  >(null);\n\n  useEffect(() => {\n    if (comboboxListOpen) {\n      // Timeout to allow for the state to update and the component to re-render\n      // when we change the `comboboxListOpen` state upon focus\n      setTimeout(() => {\n        document.getElementById(\"slack-channel-search\")?.focus();\n      }, 0);\n    }\n  }, [comboboxListOpen]);\n\n  useEffect(() => {\n    // Used to make sure we're only showing currently available channels to select from.\n    // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n    // posting to it if the channel is private and the Slackbot doesn't belong to it,\n    // so the channel won't show up here and it won't be posted to.\n    const slackChannelsMap = new Map(\n      slackChannels.map((channel) => [channel.id, channel]),\n    );\n\n    const channels =\n      connectedChannels?.filter((connectedChannel) => {\n        return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n      }) || [];\n\n    setCurrentConnectedChannels(channels);\n  }, [connectedChannels, slackChannels]);\n\n  const inErrorState = useMemo(\n    () =>\n      connectionStatus === \"disconnected\" ||\n      connectionStatus === \"error\" ||\n      connectedChannelsError,\n    [connectedChannelsError, connectionStatus],\n  );\n\n  const inLoadingState = useMemo(\n    () =>\n      connectionStatus === \"connecting\" ||\n      connectionStatus === \"disconnecting\" ||\n      slackChannelsLoading,\n\n    [connectionStatus, slackChannelsLoading],\n  );\n\n  // Construct placeholder text\n  const searchPlaceholder = useMemo(() => {\n    const DEFAULT_INPUT_MESSAGES = {\n      disconnected: t(\"slackSearchbarDisconnected\"),\n      multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n      noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n      noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n      channelsError: t(\"slackSearchbarChannelsError\"),\n    };\n\n    // Connection status message\n    if (connectionStatus === \"disconnected\") {\n      return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n    }\n\n    if (connectionStatus === \"error\") {\n      return inputMessages?.error || connectionErrorLabel;\n    }\n\n    // Channels status messages\n    if (!inLoadingState && slackChannels.length === 0) {\n      return (\n        inputMessages?.noSlackChannelsFound ||\n        DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n      );\n    }\n\n    if (connectedChannelsError) {\n      return connectedChannelsError;\n    }\n\n    const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n    if (currentConnectedChannels && numberConnectedChannels === 0) {\n      return (\n        inputMessages?.noChannelsConnected ||\n        DEFAULT_INPUT_MESSAGES.noChannelsConnected\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels === 1) {\n      const connectedChannel = slackChannels?.find(\n        (slackChannel) =>\n          slackChannel.id === currentConnectedChannels[0]?.channel_id,\n      );\n\n      return (\n        inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels > 1) {\n      return (\n        inputMessages?.multipleChannelsConnected ||\n        `${numberConnectedChannels} channels connected`\n      );\n    }\n\n    return \"\";\n  }, [\n    connectionStatus,\n    inLoadingState,\n    slackChannels,\n    connectedChannelsError,\n    currentConnectedChannels,\n    inputMessages,\n    connectionErrorLabel,\n    t,\n  ]);\n\n  // Handle channel click\n  const handleOptionClick = async (channelId: string) => {\n    if (!currentConnectedChannels) {\n      return;\n    }\n\n    const isChannelConnected = currentConnectedChannels.find(\n      (channel) => channel.channel_id === channelId,\n    );\n\n    if (isChannelConnected) {\n      const channelsToSendToKnock = currentConnectedChannels.filter(\n        (connectedChannel) => connectedChannel.channel_id !== channelId,\n      );\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    } else {\n      const channelsToSendToKnock = [\n        ...currentConnectedChannels,\n        { channel_id: channelId } as SlackChannelConnection,\n      ];\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    }\n  };\n\n  // Handle channel search\n  const matchedChannels = slackChannels.filter((slackChannel) =>\n    strContains(slackChannel.name, inputValue),\n  );\n\n  if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n    return (\n      <SlackAddChannelInput\n        inErrorState={!!inErrorState}\n        connectedChannels={currentConnectedChannels || []}\n        updateConnectedChannels={updateConnectedChannels}\n        connectedChannelsError={connectedChannelsError}\n        connectedChannelsUpdating={connectedChannelsUpdating}\n      />\n    );\n  }\n\n  return (\n    <div ref={comboboxRef} className=\"rsk-combobox\">\n      <Popover.Root\n        open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n      >\n        <VisuallyHidden.Root>\n          <label htmlFor=\"slack-channel-search\">\n            {t(\"slackSearchChannels\")}\n          </label>\n        </VisuallyHidden.Root>\n        <Popover.Trigger asChild>\n          <div className=\"rsk-combobox__searchbar\">\n            <div\n              className={\"rsk-combobox__searchbar__input-container\"}\n              {...inputContainerProps}\n            >\n              <div\n                className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n              >\n                {inLoadingState ? (\n                  <Spinner size=\"15px\" thickness={3} />\n                ) : (\n                  <SearchIcon />\n                )}\n              </div>\n\n              <input\n                className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n                tabIndex={-1}\n                id=\"slack-channel-search\"\n                type=\"text\"\n                onFocus={() =>\n                  slackChannels.length > 0 && setComboboxListOpen(true)\n                }\n                onChange={(e) => setInputValue(e.target.value)}\n                value={inputValue}\n                placeholder={searchPlaceholder || \"\"}\n                disabled={!!inErrorState}\n                {...inputProps}\n              />\n            </div>\n\n            <SlackConnectionError />\n          </div>\n        </Popover.Trigger>\n\n        <Popover.Content>\n          <SlackChannelListBox\n            isLoading={slackChannelsLoading || connectedChannelsLoading}\n            isUpdating={connectedChannelsUpdating}\n            connectedChannels={currentConnectedChannels}\n            onClick={handleOptionClick}\n            slackChannels={matchedChannels}\n            listBoxProps={listBoxProps}\n            channelOptionProps={channelOptionProps}\n          />\n        </Popover.Content>\n      </Popover.Root>\n      {showConnectedChannelTags && (\n        <SlackConnectedChannelTagList\n          connectedChannels={currentConnectedChannels}\n          slackChannels={slackChannels}\n          updateConnectedChannels={handleOptionClick}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","ref","fn","connectionStatus","errorLabel","connectionErrorLabel","useKnockSlackClient","data","slackChannels","isLoading","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","loading","connectedChannelsLoading","error","connectedChannelsError","updating","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","setTimeout","getElementById","focus","slackChannelsMap","Map","map","channel","id","channels","filter","connectedChannel","has","channel_id","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","disconnected","multipleChannelsConnected","noChannelsConnected","noSlackChannelsFound","channelsError","length","numberConnectedChannels","find","slackChannel","singleChannelConnected","name","handleOptionClick","channelId","channelsToSendToKnock","matchedChannels","strContains","React","SlackAddChannelInput","Popover","VisuallyHidden","Spinner","SearchIcon","e","target","value","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}
+{"version":3,"file":"SlackChannelCombobox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n  ContainerObject,\n  SlackChannelQueryOptions,\n  useConnectedSlackChannels,\n  useKnockSlackClient,\n  useSlackChannels,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\nexport type SlackChannelComboboxInputMessages = {\n  disconnected: string;\n  error: string;\n  singleChannelConnected: string;\n  multipleChannelsConnected: string;\n  noChannelsConnected: string;\n  noSlackChannelsFound: string;\n};\n\nexport interface SlackChannelComboboxProps {\n  slackChannelsRecipientObject: ContainerObject;\n  queryOptions?: SlackChannelQueryOptions;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n  listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n  channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n  inputMessages?: SlackChannelComboboxInputMessages;\n  showConnectedChannelTags?: boolean;\n}\n\nexport const SlackChannelCombobox: FunctionComponent<\n  SlackChannelComboboxProps\n> = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\n  showConnectedChannelTags = false,\n}) => {\n  const { t } = useTranslations();\n\n  const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState(\"\");\n\n  // Used to close the combobox when clicking outside of it\n  const comboboxRef = useRef(null);\n  useOutsideClick({\n    ref: comboboxRef,\n    fn: () => {\n      setInputValue(\"\");\n      setComboboxListOpen(false);\n    },\n  });\n\n  // Gather API data\n  const { connectionStatus, errorLabel: connectionErrorLabel } =\n    useKnockSlackClient();\n\n  const { data: slackChannels, isLoading: slackChannelsLoading } =\n    useSlackChannels({ queryOptions });\n\n  const {\n    data: connectedChannels,\n    updateConnectedChannels,\n    loading: connectedChannelsLoading,\n    error: connectedChannelsError,\n    updating: connectedChannelsUpdating,\n  } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n  const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n    SlackChannelConnection[] | null\n  >(null);\n\n  useEffect(() => {\n    if (comboboxListOpen) {\n      // Timeout to allow for the state to update and the component to re-render\n      // when we change the `comboboxListOpen` state upon focus\n      setTimeout(() => {\n        document.getElementById(\"slack-channel-search\")?.focus();\n      }, 0);\n    }\n  }, [comboboxListOpen]);\n\n  useEffect(() => {\n    // Used to make sure we're only showing currently available channels to select from.\n    // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n    // posting to it if the channel is private and the Slackbot doesn't belong to it,\n    // so the channel won't show up here and it won't be posted to.\n    const slackChannelsMap = new Map(\n      slackChannels.map((channel) => [channel.id, channel]),\n    );\n\n    const channels =\n      connectedChannels?.filter((connectedChannel) => {\n        return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n      }) || [];\n\n    setCurrentConnectedChannels(channels);\n  }, [connectedChannels, slackChannels]);\n\n  const inErrorState = useMemo(\n    () =>\n      connectionStatus === \"disconnected\" ||\n      connectionStatus === \"error\" ||\n      connectedChannelsError,\n    [connectedChannelsError, connectionStatus],\n  );\n\n  const inLoadingState = useMemo(\n    () =>\n      connectionStatus === \"connecting\" ||\n      connectionStatus === \"disconnecting\" ||\n      slackChannelsLoading,\n\n    [connectionStatus, slackChannelsLoading],\n  );\n\n  // Construct placeholder text\n  const searchPlaceholder = useMemo(() => {\n    const DEFAULT_INPUT_MESSAGES = {\n      disconnected: t(\"slackSearchbarDisconnected\"),\n      multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n      noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n      noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n      channelsError: t(\"slackSearchbarChannelsError\"),\n    };\n\n    // Connection status message\n    if (connectionStatus === \"disconnected\") {\n      return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n    }\n\n    if (connectionStatus === \"error\") {\n      return inputMessages?.error || connectionErrorLabel;\n    }\n\n    // Channels status messages\n    if (!inLoadingState && slackChannels.length === 0) {\n      return (\n        inputMessages?.noSlackChannelsFound ||\n        DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n      );\n    }\n\n    if (connectedChannelsError) {\n      return connectedChannelsError;\n    }\n\n    const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n    if (currentConnectedChannels && numberConnectedChannels === 0) {\n      return (\n        inputMessages?.noChannelsConnected ||\n        DEFAULT_INPUT_MESSAGES.noChannelsConnected\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels === 1) {\n      const connectedChannel = slackChannels?.find(\n        (slackChannel) =>\n          slackChannel.id === currentConnectedChannels[0]?.channel_id,\n      );\n\n      return (\n        inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels > 1) {\n      return (\n        inputMessages?.multipleChannelsConnected ||\n        `${numberConnectedChannels} channels connected`\n      );\n    }\n\n    return \"\";\n  }, [\n    connectionStatus,\n    inLoadingState,\n    slackChannels,\n    connectedChannelsError,\n    currentConnectedChannels,\n    inputMessages,\n    connectionErrorLabel,\n    t,\n  ]);\n\n  // Handle channel click\n  const handleOptionClick = async (channelId: string) => {\n    if (!currentConnectedChannels) {\n      return;\n    }\n\n    const isChannelConnected = currentConnectedChannels.find(\n      (channel) => channel.channel_id === channelId,\n    );\n\n    if (isChannelConnected) {\n      const channelsToSendToKnock = currentConnectedChannels.filter(\n        (connectedChannel) => connectedChannel.channel_id !== channelId,\n      );\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    } else {\n      const channelsToSendToKnock = [\n        ...currentConnectedChannels,\n        { channel_id: channelId } as SlackChannelConnection,\n      ];\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    }\n  };\n\n  // Handle channel search\n  const matchedChannels = slackChannels.filter((slackChannel) =>\n    strContains(slackChannel.name, inputValue),\n  );\n\n  if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n    return (\n      <SlackAddChannelInput\n        inErrorState={!!inErrorState}\n        connectedChannels={currentConnectedChannels || []}\n        updateConnectedChannels={updateConnectedChannels}\n        connectedChannelsError={connectedChannelsError}\n        connectedChannelsUpdating={connectedChannelsUpdating}\n      />\n    );\n  }\n\n  return (\n    <div ref={comboboxRef} className=\"rsk-combobox\">\n      <Popover.Root\n        open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n      >\n        <VisuallyHidden.Root>\n          <label htmlFor=\"slack-channel-search\">\n            {t(\"slackSearchChannels\")}\n          </label>\n        </VisuallyHidden.Root>\n        <Popover.Trigger asChild>\n          <div className=\"rsk-combobox__searchbar\">\n            <div\n              className={\"rsk-combobox__searchbar__input-container\"}\n              {...inputContainerProps}\n            >\n              <div\n                className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n              >\n                {inLoadingState ? (\n                  <Spinner size=\"15px\" thickness={3} />\n                ) : (\n                  <SearchIcon />\n                )}\n              </div>\n\n              <input\n                className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n                tabIndex={-1}\n                id=\"slack-channel-search\"\n                type=\"text\"\n                onFocus={() =>\n                  slackChannels.length > 0 && setComboboxListOpen(true)\n                }\n                onChange={(e) => setInputValue(e.target.value)}\n                value={inputValue}\n                placeholder={searchPlaceholder || \"\"}\n                disabled={!!inErrorState}\n                {...inputProps}\n              />\n            </div>\n\n            <SlackConnectionError />\n          </div>\n        </Popover.Trigger>\n\n        <Popover.Content>\n          <SlackChannelListBox\n            isLoading={slackChannelsLoading || connectedChannelsLoading}\n            isUpdating={connectedChannelsUpdating}\n            connectedChannels={currentConnectedChannels}\n            onClick={handleOptionClick}\n            slackChannels={matchedChannels}\n            listBoxProps={listBoxProps}\n            channelOptionProps={channelOptionProps}\n          />\n        </Popover.Content>\n      </Popover.Root>\n      {showConnectedChannelTags && (\n        <SlackConnectedChannelTagList\n          connectedChannels={currentConnectedChannels}\n          slackChannels={slackChannels}\n          updateConnectedChannels={handleOptionClick}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","ref","fn","connectionStatus","errorLabel","connectionErrorLabel","useKnockSlackClient","data","slackChannels","isLoading","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","loading","connectedChannelsLoading","error","connectedChannelsError","updating","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","setTimeout","getElementById","focus","slackChannelsMap","Map","map","channel","id","channels","filter","connectedChannel","has","channel_id","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","disconnected","multipleChannelsConnected","noChannelsConnected","noSlackChannelsFound","channelsError","length","numberConnectedChannels","find","slackChannel","singleChannelConnected","name","handleOptionClick","channelId","channelsToSendToKnock","matchedChannels","strContains","React","SlackAddChannelInput","Popover","VisuallyHidden","Spinner","SearchIcon","e","target","value","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.js

@@ -1,2 +1,2 @@
-"use strict";const f=require("react");const c=require("./SlackChannelOption.js");const m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=m(f),p=({slackChannels:t,isLoading:a,connectedChannels:e,onClick:o,listBoxProps:u,channelOptionProps:s,isUpdating:l})=>i.default.createElement("div",{className:"rsk-combobox__list-box",...u},t.map(r=>i.default.createElement(c,{key:r.id,tabIndex:0,channel:r,isLoading:a,isConnected:!!(e!=null&&e.find(d=>d.channel_id===r.id)),onClick:o,channelOptionProps:s,isUpdating:l})));module.exports=p;
+"use strict";const f=require("react");;/* empty css               */const c=require("./SlackChannelOption.js");;/* empty css            */const m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=m(f),p=({slackChannels:t,isLoading:a,connectedChannels:e,onClick:o,listBoxProps:u,channelOptionProps:s,isUpdating:l})=>i.default.createElement("div",{className:"rsk-combobox__list-box",...u},t.map(r=>i.default.createElement(c,{key:r.id,tabIndex:0,channel:r,isLoading:a,isConnected:!!(e!=null&&e.find(d=>d.channel_id===r.id)),onClick:o,channelOptionProps:s,isUpdating:l})));module.exports=p;
 //# sourceMappingURL=SlackChannelListBox.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelOption.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("react");require("@knocklabs/react-core");const k=require("../../../core/components/Spinner/Spinner.js");require("lodash.debounce");const p=require("./icons/CheckmarkIcon.js"),x=require("./icons/HashtagIcon.js"),E=require("./icons/LockIcon.js");const q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=q(n),v=({channel:e,isLoading:o,isConnected:a,onClick:i,tabIndex:_,channelOptionProps:m,isUpdating:r})=>{const[d,u]=n.useState(!1),[c,s]=n.useState(null),f=()=>c===e.id&&(r||o)?t.default.createElement(k.Spinner,{thickness:3}):d||a?t.default.createElement(p,{isConnected:a}):t.default.createElement("div",{className:"rsk-combobox__option__text-container__empty-icon"}),b=l=>{s(l),i(l)};return n.useEffect(()=>{if(c&&!r)return s(null)},[o,r,c]),t.default.createElement("button",{key:e.id,className:"rsk-combobox__option__button",onClick:()=>!o&&b(e.id),disabled:o||r,onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),tabIndex:_,...m},t.default.createElement("div",{className:"rsk-combobox__option__text-container"},t.default.createElement("div",{className:"rsk-combobox__option__text-container__connection-icon"},f()),t.default.createElement("div",{className:"rsk-combobox__option__text-container__channel-icon"},e.is_private?t.default.createElement(E,null):t.default.createElement(x,null)),t.default.createElement("div",{className:"rsk-combobox__option__text-container__text"},e.name)))};module.exports=v;
+"use strict";const n=require("react");require("@knocklabs/react-core");const k=require("../../../core/components/Spinner/Spinner.js");;/* empty css                                          */require("lodash.debounce");;/* empty css               */const p=require("./icons/CheckmarkIcon.js"),x=require("./icons/HashtagIcon.js"),E=require("./icons/LockIcon.js");;/* empty css            */const q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=q(n),v=({channel:e,isLoading:o,isConnected:a,onClick:i,tabIndex:_,channelOptionProps:m,isUpdating:r})=>{const[d,u]=n.useState(!1),[c,s]=n.useState(null),f=()=>c===e.id&&(r||o)?t.default.createElement(k.Spinner,{thickness:3}):d||a?t.default.createElement(p,{isConnected:a}):t.default.createElement("div",{className:"rsk-combobox__option__text-container__empty-icon"}),b=l=>{s(l),i(l)};return n.useEffect(()=>{if(c&&!r)return s(null)},[o,r,c]),t.default.createElement("button",{key:e.id,className:"rsk-combobox__option__button",onClick:()=>!o&&b(e.id),disabled:o||r,onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),tabIndex:_,...m},t.default.createElement("div",{className:"rsk-combobox__option__text-container"},t.default.createElement("div",{className:"rsk-combobox__option__text-container__connection-icon"},f()),t.default.createElement("div",{className:"rsk-combobox__option__text-container__channel-icon"},e.is_private?t.default.createElement(E,null):t.default.createElement(x,null)),t.default.createElement("div",{className:"rsk-combobox__option__text-container__text"},e.name)))};module.exports=v;
 //# sourceMappingURL=SlackChannelOption.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.js

@@ -1,2 +1,2 @@
-"use strict";const c=require("react"),a=require("./icons/CloseIcon.js"),o=require("./icons/HashtagIcon.js"),l=require("./icons/LockIcon.js");const _=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=_(c),r=({channel:e,updateConnectedChannels:n})=>t.default.createElement("div",{className:"rsk-combobox__connected_channel_tag"},t.default.createElement("div",{className:"rsk-combobox__connected_channel_tag__channel_type_icon"},e.is_private?t.default.createElement(l,null):t.default.createElement(o,null)),t.default.createElement("div",{className:"rsk-combobox__connected_channel_tag__text"},e.name),t.default.createElement("button",{onClick:()=>n(e.id),className:"rsk-combobox__connected_channel_tag__delete_button"},t.default.createElement(a,null)));module.exports=r;
+"use strict";const c=require("react"),a=require("./icons/CloseIcon.js"),o=require("./icons/HashtagIcon.js"),l=require("./icons/LockIcon.js");;/* empty css            */const _=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=_(c),r=({channel:e,updateConnectedChannels:n})=>t.default.createElement("div",{className:"rsk-combobox__connected_channel_tag"},t.default.createElement("div",{className:"rsk-combobox__connected_channel_tag__channel_type_icon"},e.is_private?t.default.createElement(l,null):t.default.createElement(o,null)),t.default.createElement("div",{className:"rsk-combobox__connected_channel_tag__text"},e.name),t.default.createElement("button",{onClick:()=>n(e.id),className:"rsk-combobox__connected_channel_tag__delete_button"},t.default.createElement(a,null)));module.exports=r;
 //# sourceMappingURL=SlackConnectedChannelTag.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("react"),d=require("./SlackConnectedChannelTag.js");const _=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=_(u),f=({connectedChannels:t,slackChannels:r,updateConnectedChannels:o})=>{const i=new Map(t==null?void 0:t.map(e=>[e.channel_id,e])),c=(r==null?void 0:r.filter(e=>i.has(e.id||"")))||[];return a.default.createElement("div",{className:"rsk-combobox__connected_channel_tag_list"},c.map(e=>a.default.createElement(d,{key:e.id,channel:e,updateConnectedChannels:o})))};module.exports=f;
+"use strict";const u=require("react"),d=require("./SlackConnectedChannelTag.js");;/* empty css            */const _=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=_(u),f=({connectedChannels:t,slackChannels:r,updateConnectedChannels:o})=>{const i=new Map(t==null?void 0:t.map(e=>[e.channel_id,e])),c=(r==null?void 0:r.filter(e=>i.has(e.id||"")))||[];return a.default.createElement("div",{className:"rsk-combobox__connected_channel_tag_list"},c.map(e=>a.default.createElement(d,{key:e.id,channel:e,updateConnectedChannels:o})))};module.exports=f;
 //# sourceMappingURL=SlackConnectedChannelTagList.js.map

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-
+/* empty css           */
 import { Button as t } from "./modules/core/components/Button/Button.mjs";
 import { ButtonGroup as m } from "./modules/core/components/Button/ButtonGroup.mjs";
 import { BellIcon as i } from "./modules/core/components/Icons/Bell.mjs";

package/dist/esm/modules/core/components/Button/Button.mjs

@@ -1,7 +1,7 @@
 import { useKnockFeed as c } from "@knocklabs/react-core";
 import e from "react";
 import { ButtonSpinner as b } from "./ButtonSpinner.mjs";
-
+/* empty css            */
 const _ = ({
   variant: r = "primary",
   loadingText: n,

package/dist/esm/modules/core/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { ButtonSpinner } from \"./ButtonSpinner\";\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n  variant: \"primary\" | \"secondary\";\n  loadingText?: string;\n  isLoading?: boolean;\n  isDisabled?: boolean;\n  isFullWidth?: boolean;\n  onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: FunctionComponent<PropsWithChildren<ButtonProps>> = ({\n  variant = \"primary\",\n  loadingText,\n  isLoading = false,\n  isDisabled = false,\n  isFullWidth = false,\n  onClick,\n  children,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  const classNames = [\n    \"rnf-button\",\n    `rnf-button--${variant}`,\n    isFullWidth ? \"rnf-button--full-width\" : \"\",\n    isLoading ? \"rnf-button--is-loading\" : \"\",\n    `rnf-button--${colorMode}`,\n  ].join(\" \");\n\n  // In this case when there's no loading text, we still want to display the original\n  // content of the button, but make it hidden. That allows us to keep the button width\n  // consistent and show the spinner in the middle, meaning no layout shift.\n  const textToShowWhileLoading = loadingText || (\n    <span className=\"rnf-button__button-text-hidden\">{children}</span>\n  );\n\n  return (\n    <button\n      onClick={onClick}\n      className={classNames}\n      disabled={isLoading || isDisabled}\n      type=\"button\"\n    >\n      {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n      {isLoading ? textToShowWhileLoading : children}\n    </button>\n  );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","join","textToShowWhileLoading","React","ButtonSpinner"],"mappings":";;;;AAgBO,MAAMA,IAA4DA,CAAC;AAAA,EACxEC,SAAAA,IAAU;AAAA,EACVC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,YAAAA,IAAa;AAAA,EACbC,aAAAA,IAAc;AAAA,EACdC,SAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa,GAE7BC,IAAa,CACjB,cACC,eAAcT,CAAQ,IACvBI,IAAc,2BAA2B,IACzCF,IAAY,2BAA2B,IACtC,eAAcK,CAAU,EAAC,EAC1BG,KAAK,GAAG,GAKJC,IAAyBV,KAC7BW,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,oCAAkCN,CAAS;AAI3D,SAAAM,gBAAAA,EAAA,cAAC,YACC,SAAAP,GACA,WAAWI,GACX,UAAUP,KAAaC,GACvB,MAAK,SAAA,GAEJD,KAAcU,gBAAAA,EAAA,cAAAC,GAAA,EAAc,UAAU,CAAC,CAACZ,GAAe,GACvDC,IAAYS,IAAyBL,CACxC;AAEJ;"}
+{"version":3,"file":"Button.mjs","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { ButtonSpinner } from \"./ButtonSpinner\";\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n  variant: \"primary\" | \"secondary\";\n  loadingText?: string;\n  isLoading?: boolean;\n  isDisabled?: boolean;\n  isFullWidth?: boolean;\n  onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: FunctionComponent<PropsWithChildren<ButtonProps>> = ({\n  variant = \"primary\",\n  loadingText,\n  isLoading = false,\n  isDisabled = false,\n  isFullWidth = false,\n  onClick,\n  children,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  const classNames = [\n    \"rnf-button\",\n    `rnf-button--${variant}`,\n    isFullWidth ? \"rnf-button--full-width\" : \"\",\n    isLoading ? \"rnf-button--is-loading\" : \"\",\n    `rnf-button--${colorMode}`,\n  ].join(\" \");\n\n  // In this case when there's no loading text, we still want to display the original\n  // content of the button, but make it hidden. That allows us to keep the button width\n  // consistent and show the spinner in the middle, meaning no layout shift.\n  const textToShowWhileLoading = loadingText || (\n    <span className=\"rnf-button__button-text-hidden\">{children}</span>\n  );\n\n  return (\n    <button\n      onClick={onClick}\n      className={classNames}\n      disabled={isLoading || isDisabled}\n      type=\"button\"\n    >\n      {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n      {isLoading ? textToShowWhileLoading : children}\n    </button>\n  );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","join","textToShowWhileLoading","React","ButtonSpinner"],"mappings":";;;;AAgBO,MAAMA,IAA4DA,CAAC;AAAA,EACxEC,SAAAA,IAAU;AAAA,EACVC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,YAAAA,IAAa;AAAA,EACbC,aAAAA,IAAc;AAAA,EACdC,SAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa,GAE7BC,IAAa,CACjB,cACA,eAAeT,CAAO,IACtBI,IAAc,2BAA2B,IACzCF,IAAY,2BAA2B,IACvC,eAAeK,CAAS,EAAE,EAC1BG,KAAK,GAAG,GAKJC,IAAyBV,KAC7BW,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,oCAAkCN,CAAS;AAI3D,SAAAM,gBAAAA,EAAA,cAAC,YACC,SAAAP,GACA,WAAWI,GACX,UAAUP,KAAaC,GACvB,MAAK,SAAA,GAEJD,KAAcU,gBAAAA,EAAA,cAAAC,GAAA,EAAc,UAAU,CAAC,CAACZ,GAAe,GACvDC,IAAYS,IAAyBL,CACxC;AAEJ;"}

package/dist/esm/modules/core/components/Button/ButtonGroup.mjs

@@ -1,5 +1,5 @@
 import o from "react";
-
+/* empty css            */
 const a = ({
   children: t
 }) => /* @__PURE__ */ o.createElement("div", { className: "rnf-button-group" }, t);

package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs

@@ -1,6 +1,6 @@
 import t from "react";
 import { Spinner as n } from "../Spinner/Spinner.mjs";
-
+/* empty css            */
 const l = ({
   hasLabel: e
 }) => /* @__PURE__ */ t.createElement("div", { className: `rnf-button-spinner rnf-button-spinner--${e ? "with-label" : "without-label"}` }, /* @__PURE__ */ t.createElement(n, null));

package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSpinner.mjs","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../Spinner\";\n\nimport \"./styles.css\";\n\ntype ButtonSpinnerProps = {\n  hasLabel: boolean;\n};\n\nexport const ButtonSpinner: FunctionComponent<ButtonSpinnerProps> = ({\n  hasLabel,\n}) => (\n  <div\n    className={`rnf-button-spinner rnf-button-spinner--${\n      hasLabel ? \"with-label\" : \"without-label\"\n    }`}\n  >\n    <Spinner />\n  </div>\n);\n"],"names":["ButtonSpinner","hasLabel","React","Spinner"],"mappings":";;;AAUO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AACF,MACEC,gBAAAA,EAAA,cAAC,OACC,EAAA,WAAY,0CACVD,IAAW,eAAe,eAC3B,GAAA,GAEAC,gBAAAA,EAAA,cAAAC,GAAA,IAAO,CACV;"}
+{"version":3,"file":"ButtonSpinner.mjs","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../Spinner\";\n\nimport \"./styles.css\";\n\ntype ButtonSpinnerProps = {\n  hasLabel: boolean;\n};\n\nexport const ButtonSpinner: FunctionComponent<ButtonSpinnerProps> = ({\n  hasLabel,\n}) => (\n  <div\n    className={`rnf-button-spinner rnf-button-spinner--${\n      hasLabel ? \"with-label\" : \"without-label\"\n    }`}\n  >\n    <Spinner />\n  </div>\n);\n"],"names":["ButtonSpinner","hasLabel","React","Spinner"],"mappings":";;;AAUO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AACF,MACEC,gBAAAA,EAAA,cAAC,OACC,EAAA,WAAW,0CACTD,IAAW,eAAe,eAAe,GAAA,GAG1CC,gBAAAA,EAAA,cAAAC,GAAA,IAAO,CACV;"}

package/dist/esm/modules/core/components/Spinner/Spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.mjs","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n  if (speed === \"fast\") return 600;\n  if (speed === \"slow\") return 900;\n  return 750;\n}\n\nexport interface SpinnerProps {\n  color?: string;\n  speed?: Speed;\n  gap?: number;\n  thickness?: number;\n  size?: string;\n}\n\nexport const Spinner: FunctionComponent<SpinnerProps> = ({\n  color = \"rgba(0,0,0,0.4)\",\n  speed = \"medium\",\n  gap = 4,\n  thickness = 4,\n  size = \"1em\",\n  ...props\n}) => (\n  <svg\n    height={size}\n    width={size}\n    {...props}\n    style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n    className=\"__react-svg-spinner_circle\"\n    role=\"img\"\n    aria-labelledby=\"title desc\"\n    viewBox=\"0 0 32 32\"\n  >\n    <title id=\"title\">Circle loading spinner</title>\n    <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n      .__react-svg-spinner_circle{\n          transition-property: transform;\n          animation-name: __react-svg-spinner_infinite-spin;\n          animation-iteration-count: infinite;\n          animation-timing-function: linear;\n      }\n      @keyframes __react-svg-spinner_infinite-spin {\n          from {transform: rotate(0deg)}\n          to {transform: rotate(360deg)}\n      }\n    `,\n      }}\n    />\n    <circle\n      role=\"presentation\"\n      cx={16}\n      cy={16}\n      r={14 - thickness / 2}\n      stroke={color}\n      fill=\"none\"\n      strokeWidth={thickness}\n      strokeDasharray={Math.PI * 2 * (11 - gap)}\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","React","animationDuration","__html","Math","PI"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AACjC,SAAIA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAA2CA,CAAC;AAAA,EACvDC,OAAAA,IAAQ;AAAA,EACRF,OAAAA,IAAQ;AAAA,EACRG,KAAAA,IAAM;AAAA,EACNC,WAAAA,IAAY;AAAA,EACZC,MAAAA,IAAO;AAAA,EACP,GAAGC;AACL,MACEC,gBAAAA,EAAA,cAAC,SACC,QAAQF,GACR,OAAOA,GACP,GAAIC,GACJ,OAAO;AAAA,EAAEE,mBAAoB,GAAET,EAAYC,CAAK,CAAE;AAAI,GACtD,WAAU,8BACV,MAAK,OACL,mBAAgB,cAChB,SAAQ,YAER,GAAAO,gBAAAA,EAAA,cAAC,SAAM,EAAA,IAAG,WAAQ,wBAAsB,mCACvC,QAAK,EAAA,IAAG,UAAO,iDAA+C,GAC9DA,gBAAAA,EAAA,cAAA,SAAA,EACC,yBAAyB;AAAA,EACvBE,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYX,EAAE,CAAA,GAEHF,gBAAAA,EAAA,cAAA,UAAA,EACC,MAAK,gBACL,IAAI,IACJ,IAAI,IACJ,GAAG,KAAKH,IAAY,GACpB,QAAQF,GACR,MAAK,QACL,aAAaE,GACb,iBAAiBM,KAAKC,KAAK,KAAK,KAAKR,IACrC,eAAc,QAAA,CAAO,CAEzB;"}
+{"version":3,"file":"Spinner.mjs","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n  if (speed === \"fast\") return 600;\n  if (speed === \"slow\") return 900;\n  return 750;\n}\n\nexport interface SpinnerProps {\n  color?: string;\n  speed?: Speed;\n  gap?: number;\n  thickness?: number;\n  size?: string;\n}\n\nexport const Spinner: FunctionComponent<SpinnerProps> = ({\n  color = \"rgba(0,0,0,0.4)\",\n  speed = \"medium\",\n  gap = 4,\n  thickness = 4,\n  size = \"1em\",\n  ...props\n}) => (\n  <svg\n    height={size}\n    width={size}\n    {...props}\n    style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n    className=\"__react-svg-spinner_circle\"\n    role=\"img\"\n    aria-labelledby=\"title desc\"\n    viewBox=\"0 0 32 32\"\n  >\n    <title id=\"title\">Circle loading spinner</title>\n    <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n      .__react-svg-spinner_circle{\n          transition-property: transform;\n          animation-name: __react-svg-spinner_infinite-spin;\n          animation-iteration-count: infinite;\n          animation-timing-function: linear;\n      }\n      @keyframes __react-svg-spinner_infinite-spin {\n          from {transform: rotate(0deg)}\n          to {transform: rotate(360deg)}\n      }\n    `,\n      }}\n    />\n    <circle\n      role=\"presentation\"\n      cx={16}\n      cy={16}\n      r={14 - thickness / 2}\n      stroke={color}\n      fill=\"none\"\n      strokeWidth={thickness}\n      strokeDasharray={Math.PI * 2 * (11 - gap)}\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","React","animationDuration","__html","Math","PI"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AAC7BA,SAAAA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAA2CA,CAAC;AAAA,EACvDC,OAAAA,IAAQ;AAAA,EACRF,OAAAA,IAAQ;AAAA,EACRG,KAAAA,IAAM;AAAA,EACNC,WAAAA,IAAY;AAAA,EACZC,MAAAA,IAAO;AAAA,EACP,GAAGC;AACL,MACEC,gBAAAA,EAAA,cAAC,SACC,QAAQF,GACR,OAAOA,GACP,GAAIC,GACJ,OAAO;AAAA,EAAEE,mBAAmB,GAAGT,EAAYC,CAAK,CAAC;AAAK,GACtD,WAAU,8BACV,MAAK,OACL,mBAAgB,cAChB,SAAQ,YAER,GAAAO,gBAAAA,EAAA,cAAC,SAAM,EAAA,IAAG,WAAQ,wBAAsB,mCACvC,QAAK,EAAA,IAAG,UAAO,iDAA+C,GAC9DA,gBAAAA,EAAA,cAAA,SAAA,EACC,yBAAyB;AAAA,EACvBE,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYV,EAAE,CAAA,GAEHF,gBAAAA,EAAA,cAAA,UAAA,EACC,MAAK,gBACL,IAAI,IACJ,IAAI,IACJ,GAAG,KAAKH,IAAY,GACpB,QAAQF,GACR,MAAK,QACL,aAAaE,GACb,iBAAiBM,KAAKC,KAAK,KAAK,KAAKR,IACrC,eAAc,QAAA,CAAO,CAEzB;"}

package/dist/esm/modules/core/hooks/useComponentVisible.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentVisible.mjs","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options,\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","useEffect","addEventListener","removeEventListener"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAOD,SAASE,CAAK,IAD5B;AAEtB;AAMwBC,SAAAA,EACtBC,GACAC,GACAC,GACA;AACMC,QAAAA,IAAMC,EAAuB,IAAI,GAEjCC,IAAgBA,CAACC,MAAyB;AAC1CA,IAAAA,EAAMC,QAAQ,YAChBN,EAAQK,CAAK;AAAA,EACf,GAGIE,IAAqBA,CAACF,MAAiB;AAEzCJ,IAAAA,EAAQO,uBACR,CAACb,EAASO,EAAIO,SAASJ,EAAMK,WAE7BV,EAAQK,CAAK;AAAA,EACf;AAGFM,SAAAA,EAAU,OACJZ,MACOa,SAAAA,iBAAiB,WAAWR,GAAe,EAAI,GAC/CQ,SAAAA,iBAAiB,SAASL,GAAoB,EAAI,IAGtD,MAAM;AACFM,aAAAA,oBAAoB,WAAWT,GAAe,EAAI,GAClDS,SAAAA,oBAAoB,SAASN,GAAoB,EAAI;AAAA,EAAA,IAI/D,CAACR,CAAS,CAAC,GAEP;AAAA,IAAEG,KAAAA;AAAAA,EAAAA;AACX;"}
+{"version":3,"file":"useComponentVisible.mjs","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options,\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","useEffect","addEventListener","removeEventListener"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAC5D,SAACD,IACEA,MAAWC,KAASD,EAAOD,SAASE,CAAK,IAD5B;AAEtB;AAMwBC,SAAAA,EACtBC,GACAC,GACAC,GACA;AACMC,QAAAA,IAAMC,EAAuB,IAAI,GAEjCC,IAAgBA,CAACC,MAAyB;AAC1CA,IAAAA,EAAMC,QAAQ,YAChBN,EAAQK,CAAK;AAAA,EACf,GAGIE,IAAqBA,CAACF,MAAiB;AAEzCJ,IAAAA,EAAQO,uBACR,CAACb,EAASO,EAAIO,SAASJ,EAAMK,MAAqB,KAElDV,EAAQK,CAAK;AAAA,EACf;AAGFM,SAAAA,EAAU,OACJZ,MACOa,SAAAA,iBAAiB,WAAWR,GAAe,EAAI,GAC/CQ,SAAAA,iBAAiB,SAASL,GAAoB,EAAI,IAGtD,MAAM;AACFM,aAAAA,oBAAoB,WAAWT,GAAe,EAAI,GAClDS,SAAAA,oBAAoB,SAASN,GAAoB,EAAI;AAAA,EAAA,IAI/D,CAACR,CAAS,CAAC,GAEP;AAAA,IAAEG,KAAAA;AAAAA,EAAAA;AACX;"}

package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.mjs

@@ -1,6 +1,6 @@
 import e from "react";
 import { useKnockFeed as r, useTranslations as n } from "@knocklabs/react-core";
-
+/* empty css            */
 const s = () => {
   const {
     colorMode: m

package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyFeed.mjs","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n  const { colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  return (\n    <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n      <div className=\"rnf-empty-feed__inner\">\n        <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n        <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n      </div>\n    </div>\n  );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","React"],"mappings":";;;AAKO,MAAMA,IAA+BA,MAAM;AAC1C,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa,GAC7B;AAAA,IAAEC;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAY,kCAAiCJ,CAAU,GAC1D,GAAAI,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,wBACb,GAAAA,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAU,4BAA0BF,EAAE,gBAAgB,CAAE,GAC3DE,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAU,uBAAA,GAAwBF,EAAE,eAAe,CAAE,CAC1D,CACF;AAEJ;"}
+{"version":3,"file":"EmptyFeed.mjs","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n  const { colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  return (\n    <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n      <div className=\"rnf-empty-feed__inner\">\n        <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n        <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n      </div>\n    </div>\n  );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","React"],"mappings":";;;AAKO,MAAMA,IAA+BA,MAAM;AAC1C,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa,GAC7B;AAAA,IAAEC;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAW,kCAAkCJ,CAAS,GACzD,GAAAI,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,wBACb,GAAAA,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAU,4BAA0BF,EAAE,gBAAgB,CAAE,GAC3DE,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAU,uBAAA,GAAwBF,EAAE,eAAe,CAAE,CAC1D,CACF;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n    usePopperTooltip({ placement: \"top-end\" });\n\n  return (\n    <button\n      ref={setTriggerRef}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle />\n\n      {visible && (\n        <div\n          ref={setTooltipRef}\n          {...getTooltipProps({\n            className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n          })}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":";;;;AAWA,MAAMA,IAA8CA,CAAC;AAAA,EAAEC,MAAAA;AAAK,MAAM;AAC1D,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,YAAAA;AAAAA,MAAeC,EAAa,GACzC;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAUC;AAAAA,IACd,CAACC,MAAqC;AACpCA,MAAAA,EAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBR,EAAWS,eAAeX,CAAI;AAAA,IAChC;AAAA;AAAA;AAAA,IAGA,CAACA,CAAI;AAAA,EAAA,GAGD;AAAA,IAAEY,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,MACrDC,EAAiB;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAW;AAGzC,SAAAC,gBAAAA,EAAA,cAAC,UACC,EAAA,KAAKJ,GACL,SAAAR,GACA,MAAK,UACL,cAAYF,EAAE,qBAAqB,GACnC,WAAY,8DAA6DH,CAAU,GAAA,GAElFiB,gBAAAA,EAAA,cAAAC,GAAA,IAAW,GAEXJ,qCACE,OACC,EAAA,KAAKF,GACL,GAAID,EAAgB;AAAA,IAClBQ,WAAY,4BAA2BnB,CAAU;AAAA,EAClD,CAAA,KAEAG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}
+{"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n    usePopperTooltip({ placement: \"top-end\" });\n\n  return (\n    <button\n      ref={setTriggerRef}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle />\n\n      {visible && (\n        <div\n          ref={setTooltipRef}\n          {...getTooltipProps({\n            className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n          })}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":";;;;AAWA,MAAMA,IAA8CA,CAAC;AAAA,EAAEC,MAAAA;AAAK,MAAM;AAC1D,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,YAAAA;AAAAA,MAAeC,EAAa,GACzC;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAUC;AAAAA,IACd,CAACC,MAAqC;AACpCA,MAAAA,EAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBR,EAAWS,eAAeX,CAAI;AAAA,IAChC;AAAA;AAAA;AAAA,IAGA,CAACA,CAAI;AAAA,EAAA,GAGD;AAAA,IAAEY,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,MACrDC,EAAiB;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAW;AAGzC,SAAAC,gBAAAA,EAAA,cAAC,UACC,EAAA,KAAKJ,GACL,SAAAR,GACA,MAAK,UACL,cAAYF,EAAE,qBAAqB,GACnC,WAAW,8DAA8DH,CAAS,GAAA,GAEjFiB,gBAAAA,EAAA,cAAAC,GAAA,IAAW,GAEXJ,qCACE,OACC,EAAA,KAAKF,GACL,GAAID,EAAgB;AAAA,IAClBQ,WAAW,4BAA4BnB,CAAS;AAAA,EACjD,CAAA,KAEAG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs

@@ -1,5 +1,5 @@
 import t from "react";
-
+/* empty css            */
 const l = ({
   name: e,
   src: r

package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={`Image of ${name}`} className=\"rnf-avatar__image\" />\n      ) : (\n        <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n      )}\n    </div>\n  );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":";;AASO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,KAAAA;AAAI,MAAM;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAKK,MAAM,GAAG;AAC5C,WAAOF,KAAaC,IACf,GAAED,EAAUG,OAAO,CAAC,CAAE,GAAEF,EAASE,OAAO,CAAC,CAAE,KAC5CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,aAAA,GACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAM,YAAWD,CAAK,IAAG,WAAU,oBAAA,CAAsB,IAEvEO,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAU,uBAAwBL,GAAAA,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={`Image of ${name}`} className=\"rnf-avatar__image\" />\n      ) : (\n        <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n      )}\n    </div>\n  );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":";;AASO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,KAAAA;AAAI,MAAM;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAKK,MAAM,GAAG;AAC5C,WAAOF,KAAaC,IAChB,GAAGD,EAAUG,OAAO,CAAC,CAAC,GAAGF,EAASE,OAAO,CAAC,CAAC,KAC3CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,aAAA,GACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAK,YAAYD,CAAI,IAAI,WAAU,oBAAA,CAAsB,IAEvEO,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAU,uBAAwBL,GAAAA,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs

@@ -1,11 +1,11 @@
-import { useKnockFeed as w, useTranslations as T, renderNodeOrFallback as _, formatTimestamp as h } from "@knocklabs/react-core";
+import { useKnockFeed as w, useTranslations as T, renderNodeOrFallback as u, formatTimestamp as h } from "@knocklabs/react-core";
 import n, { useMemo as A } from "react";
 import { Button as B } from "../../../core/components/Button/Button.mjs";
 import { ButtonGroup as H } from "../../../core/components/Button/ButtonGroup.mjs";
 import "lodash.debounce";
 import { ArchiveButton as M } from "./ArchiveButton.mjs";
 import { Avatar as x } from "./Avatar.mjs";
-
+/* empty css            */
 function p(e) {
   e && e !== "" && setTimeout(() => window.location.assign(e), 200);
 }
@@ -13,32 +13,40 @@ const L = n.forwardRef(({
   item: e,
   onItemClick: l,
   onButtonClick: i,
-  avatar: E,
-  children: m,
-  archiveButton: N
-}, b) => {
-  var u;
+  avatar: k,
+  children: f,
+  archiveButton: y
+}, E) => {
+  var _;
   const {
     feedClient: o,
-    colorMode: k
+    colorMode: N
   } = w(), {
-    locale: v
+    locale: b
   } = T(), c = A(() => e.blocks.reduce((t, a) => ({
     ...t,
     [a.name]: a
-  }), {}), [e]), f = (u = c.action_url) == null ? void 0 : u.rendered, d = c.actions, s = n.useCallback(() => (o.markAsInteracted(e), l ? l(e) : p(f)), [e, f, l, o]), y = n.useCallback((t, a) => (o.markAsInteracted(e), i ? i(e, a) : p(a.action)), [i, o, e]), C = n.useCallback((t) => {
+  }), {}), [e]), s = (_ = c.action_url) == null ? void 0 : _.rendered, d = c.actions, m = n.useCallback(() => (o.markAsInteracted(e, {
+    type: "cell_click",
+    action: s
+  }), l ? l(e) : p(s)), [e, s, l, o]), v = n.useCallback((t, a) => (o.markAsInteracted(e, {
+    type: "button_click",
+    name: a.name,
+    label: a.label,
+    action: a.action
+  }), i ? i(e, a) : p(a.action)), [i, o, e]), C = n.useCallback((t) => {
     switch (t.key) {
       case "Enter": {
-        t.stopPropagation(), s();
+        t.stopPropagation(), m();
         break;
       }
     }
-  }, [s]), r = e.actors[0];
-  return /* @__PURE__ */ n.createElement("div", { ref: b, className: `rnf-notification-cell rnf-notification-cell--${k}`, onClick: s, onKeyDown: C, tabIndex: 0 }, /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__inner" }, !e.read_at && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__unread-dot" }), _(E, r && "name" in r && r.name && /* @__PURE__ */ n.createElement(x, { name: r.name, src: r.avatar })), /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__content-outer" }, c.body && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__content", dangerouslySetInnerHTML: {
+  }, [m]), r = e.actors[0];
+  return /* @__PURE__ */ n.createElement("div", { ref: E, className: `rnf-notification-cell rnf-notification-cell--${N}`, onClick: m, onKeyDown: C, tabIndex: 0 }, /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__inner" }, !e.read_at && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__unread-dot" }), u(k, r && "name" in r && r.name && /* @__PURE__ */ n.createElement(x, { name: r.name, src: r.avatar })), /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__content-outer" }, c.body && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__content", dangerouslySetInnerHTML: {
     __html: c.body.rendered
-  } }), d && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__button-group" }, /* @__PURE__ */ n.createElement(H, null, d.buttons.map((t, a) => /* @__PURE__ */ n.createElement(B, { variant: a === 0 ? "primary" : "secondary", key: t.name, onClick: (g) => y(g, t) }, t.label)))), m && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__child-content" }, m), /* @__PURE__ */ n.createElement("span", { className: "rnf-notification-cell__timestamp" }, h(e.inserted_at, {
-    locale: v
-  }))), _(N, /* @__PURE__ */ n.createElement(M, { item: e }))));
+  } }), d && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__button-group" }, /* @__PURE__ */ n.createElement(H, null, d.buttons.map((t, a) => /* @__PURE__ */ n.createElement(B, { variant: a === 0 ? "primary" : "secondary", key: t.name, onClick: (g) => v(g, t) }, t.label)))), f && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__child-content" }, f), /* @__PURE__ */ n.createElement("span", { className: "rnf-notification-cell__timestamp" }, h(e.inserted_at, {
+    locale: b
+  }))), u(y, /* @__PURE__ */ n.createElement(M, { item: e }))));
 });
 export {
   L as NotificationCell

package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n  ActionButton,\n  ButtonSetContentBlock,\n  ContentBlock,\n  FeedItem,\n  MarkdownContentBlock,\n  TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n  formatTimestamp,\n  renderNodeOrFallback,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  // Invoked when the outer container is clicked\n  onItemClick?: (item: FeedItem) => void;\n  // Invoked when a button in the notification cell is clicked\n  onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n  if (url && url !== \"\") {\n    setTimeout(() => window.location.assign(url), 200);\n  }\n}\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(\n  (\n    { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n    ref,\n  ) => {\n    const { feedClient, colorMode } = useKnockFeed();\n    const { locale } = useTranslations();\n\n    const blocksByName: BlockByName = useMemo(() => {\n      return item.blocks.reduce((acc, block) => {\n        return { ...acc, [block.name]: block };\n      }, {});\n    }, [item]);\n\n    const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n    const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n    const onContainerClickHandler = React.useCallback(() => {\n      // Mark as interacted + read once we click the item\n      feedClient.markAsInteracted(item);\n\n      if (onItemClick) return onItemClick(item);\n\n      return maybeNavigateToUrlWithDelay(actionUrl);\n    }, [item, actionUrl, onItemClick, feedClient]);\n\n    const onButtonClickHandler = React.useCallback(\n      (e: React.MouseEvent, button: ActionButton) => {\n        feedClient.markAsInteracted(item);\n\n        if (onButtonClick) return onButtonClick(item, button);\n\n        return maybeNavigateToUrlWithDelay(button.action);\n      },\n      [onButtonClick, feedClient, item],\n    );\n\n    const onKeyDown = React.useCallback(\n      (ev: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (ev.key) {\n          case \"Enter\": {\n            ev.stopPropagation();\n            onContainerClickHandler();\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onContainerClickHandler],\n    );\n\n    const actor = item.actors[0];\n\n    return (\n      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\n        tabIndex={0}\n      >\n        <div className=\"rnf-notification-cell__inner\">\n          {!item.read_at && (\n            <div className=\"rnf-notification-cell__unread-dot\" />\n          )}\n\n          {renderNodeOrFallback(\n            avatar,\n            actor && \"name\" in actor && actor.name && (\n              <Avatar name={actor.name} src={actor.avatar} />\n            ),\n          )}\n\n          <div className=\"rnf-notification-cell__content-outer\">\n            {blocksByName.body && (\n              <div\n                className=\"rnf-notification-cell__content\"\n                dangerouslySetInnerHTML={{\n                  __html: (blocksByName.body as MarkdownContentBlock).rendered,\n                }}\n              />\n            )}\n\n            {buttonSet && (\n              <div className=\"rnf-notification-cell__button-group\">\n                <ButtonGroup>\n                  {buttonSet.buttons.map((button, i) => (\n                    <Button\n                      variant={i === 0 ? \"primary\" : \"secondary\"}\n                      key={button.name}\n                      onClick={(e) => onButtonClickHandler(e, button)}\n                    >\n                      {button.label}\n                    </Button>\n                  ))}\n                </ButtonGroup>\n              </div>\n            )}\n\n            {children && (\n              <div className=\"rnf-notification-cell__child-content\">\n                {children}\n              </div>\n            )}\n\n            <span className=\"rnf-notification-cell__timestamp\">\n              {formatTimestamp(item.inserted_at, { locale })}\n            </span>\n          </div>\n\n          {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","onButtonClickHandler","e","button","action","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","label","formatTimestamp","inserted_at","ArchiveButton"],"mappings":";;;;;;;;AAqCA,SAASA,EAA4BC,GAAc;AAC7CA,EAAAA,KAAOA,MAAQ,MACjBC,WAAW,MAAMC,OAAOC,SAASC,OAAOJ,CAAG,GAAG,GAAG;AAErD;AAEaK,MAAAA,IAAmBC,EAAMC,WAIpC,CACE;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,aAAAA;AAAAA,EAAaC,eAAAA;AAAAA,EAAeC,QAAAA;AAAAA,EAAQC,UAAAA;AAAAA,EAAUC,eAAAA;AAAc,GACpEC,MACG;;AACG,QAAA;AAAA,IAAEC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACzC;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAE7BC,IAA4BC,EAAQ,MACjCb,EAAKc,OAAOC,OAAO,CAACC,GAAKC,OACvB;AAAA,IAAE,GAAGD;AAAAA,IAAK,CAACC,EAAMC,IAAI,GAAGD;AAAAA,EAAAA,IAC9B,CAAE,CAAA,GACJ,CAACjB,CAAI,CAAC,GAEHmB,KAAaP,IAAAA,EAAaQ,eAAbR,gBAAAA,EAA8CS,UAC3DC,IAAYV,EAAaW,SAEzBC,IAA0B1B,EAAM2B,YAAY,OAEhDlB,EAAWmB,iBAAiB1B,CAAI,GAE5BC,IAAoBA,EAAYD,CAAI,IAEjCT,EAA4B4B,CAAS,IAC3C,CAACnB,GAAMmB,GAAWlB,GAAaM,CAAU,CAAC,GAEvCoB,IAAuB7B,EAAM2B,YACjC,CAACG,GAAqBC,OACpBtB,EAAWmB,iBAAiB1B,CAAI,GAE5BE,IAAsBA,EAAcF,GAAM6B,CAAM,IAE7CtC,EAA4BsC,EAAOC,MAAM,IAElD,CAAC5B,GAAeK,GAAYP,CAAI,CAClC,GAEM+B,IAAYjC,EAAM2B,YACtB,CAACO,MAA4C;AAC3C,YAAQA,EAAGC,KAAG;AAAA,MACZ,KAAK,SAAS;AACZD,QAAAA,EAAGE,gBAAgB,GACKV;AACxB;AAAA,MACF;AAAA,IAGF;AAAA,EAAA,GAEF,CAACA,CAAuB,CAC1B,GAEMW,IAAQnC,EAAKoC,OAAO,CAAC;AAGzB,SAAAtC,gBAAAA,EAAA,cAAC,SACC,KAAAQ,GACA,WAAY,gDAA+CE,CAAU,IACrE,SAASgB,GACT,WAAAO,GACA,UAAU,KAETjC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,+BAAA,GACZ,CAACE,EAAKqC,WACJvC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oCAAA,CAChB,GAEAwC,EACCnC,GACAgC,KAAS,UAAUA,KAASA,EAAMjB,QAChCpB,gBAAAA,EAAA,cAACyC,KAAO,MAAMJ,EAAMjB,MAAM,KAAKiB,EAAMhC,SAEzC,GAEAL,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,uCACZc,GAAAA,EAAa4B,QACX1C,gBAAAA,EAAA,cAAA,OAAA,EACC,WAAU,kCACV,yBAAyB;AAAA,IACvB2C,QAAS7B,EAAa4B,KAA8BnB;AAAAA,EACtD,EAAA,CAEH,GAEAC,KACCxB,gBAAAA,EAAA,cAAC,SAAI,WAAU,sCAAA,GACZA,gBAAAA,EAAA,cAAA4C,GAAA,MACEpB,EAAUqB,QAAQC,IAAI,CAACf,GAAQgB,MAC9B/C,gBAAAA,EAAA,cAACgD,GACC,EAAA,SAASD,MAAM,IAAI,YAAY,aAC/B,KAAKhB,EAAOX,MACZ,SAAUU,CAAMD,MAAAA,EAAqBC,GAAGC,CAAM,EAAA,GAE7CA,EAAOkB,KACV,CACD,CACH,CACF,GAGD3C,qCACE,OAAI,EAAA,WAAU,uCACZA,GAAAA,CACH,GAGFN,gBAAAA,EAAA,cAAC,UAAK,WAAU,mCAAA,GACbkD,EAAgBhD,EAAKiD,aAAa;AAAA,IAAEvC,QAAAA;AAAAA,EAAQ,CAAA,CAC/C,CACF,GAEC4B,EAAqBjC,GAAeP,gBAAAA,EAAA,cAACoD,GAAc,EAAA,MAAAlD,IAAc,CACpE,CACF;AAEJ,CACF;"}
+{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n  ActionButton,\n  ButtonSetContentBlock,\n  ContentBlock,\n  FeedItem,\n  MarkdownContentBlock,\n  TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n  formatTimestamp,\n  renderNodeOrFallback,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  // Invoked when the outer container is clicked\n  onItemClick?: (item: FeedItem) => void;\n  // Invoked when a button in the notification cell is clicked\n  onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n  if (url && url !== \"\") {\n    setTimeout(() => window.location.assign(url), 200);\n  }\n}\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(\n  (\n    { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n    ref,\n  ) => {\n    const { feedClient, colorMode } = useKnockFeed();\n    const { locale } = useTranslations();\n\n    const blocksByName: BlockByName = useMemo(() => {\n      return item.blocks.reduce((acc, block) => {\n        return { ...acc, [block.name]: block };\n      }, {});\n    }, [item]);\n\n    const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n    const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n    const onContainerClickHandler = React.useCallback(() => {\n      // Mark as interacted + read once we click the item\n      feedClient.markAsInteracted(item, {\n        type: \"cell_click\",\n        action: actionUrl,\n      });\n\n      if (onItemClick) return onItemClick(item);\n\n      return maybeNavigateToUrlWithDelay(actionUrl);\n    }, [item, actionUrl, onItemClick, feedClient]);\n\n    const onButtonClickHandler = React.useCallback(\n      (e: React.MouseEvent, button: ActionButton) => {\n        // Record the interaction with the metadata for the button that was clicked\n        feedClient.markAsInteracted(item, {\n          type: \"button_click\",\n          name: button.name,\n          label: button.label,\n          action: button.action,\n        });\n\n        if (onButtonClick) return onButtonClick(item, button);\n\n        return maybeNavigateToUrlWithDelay(button.action);\n      },\n      [onButtonClick, feedClient, item],\n    );\n\n    const onKeyDown = React.useCallback(\n      (ev: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (ev.key) {\n          case \"Enter\": {\n            ev.stopPropagation();\n            onContainerClickHandler();\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onContainerClickHandler],\n    );\n\n    const actor = item.actors[0];\n\n    return (\n      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\n        tabIndex={0}\n      >\n        <div className=\"rnf-notification-cell__inner\">\n          {!item.read_at && (\n            <div className=\"rnf-notification-cell__unread-dot\" />\n          )}\n\n          {renderNodeOrFallback(\n            avatar,\n            actor && \"name\" in actor && actor.name && (\n              <Avatar name={actor.name} src={actor.avatar} />\n            ),\n          )}\n\n          <div className=\"rnf-notification-cell__content-outer\">\n            {blocksByName.body && (\n              <div\n                className=\"rnf-notification-cell__content\"\n                dangerouslySetInnerHTML={{\n                  __html: (blocksByName.body as MarkdownContentBlock).rendered,\n                }}\n              />\n            )}\n\n            {buttonSet && (\n              <div className=\"rnf-notification-cell__button-group\">\n                <ButtonGroup>\n                  {buttonSet.buttons.map((button, i) => (\n                    <Button\n                      variant={i === 0 ? \"primary\" : \"secondary\"}\n                      key={button.name}\n                      onClick={(e) => onButtonClickHandler(e, button)}\n                    >\n                      {button.label}\n                    </Button>\n                  ))}\n                </ButtonGroup>\n              </div>\n            )}\n\n            {children && (\n              <div className=\"rnf-notification-cell__child-content\">\n                {children}\n              </div>\n            )}\n\n            <span className=\"rnf-notification-cell__timestamp\">\n              {formatTimestamp(item.inserted_at, { locale })}\n            </span>\n          </div>\n\n          {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}

package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs

@@ -1,7 +1,7 @@
-import { useKnockFeed as m } from "@knocklabs/react-core";
+import { useKnockFeed as l } from "@knocklabs/react-core";
 import e from "react";
 import { ChevronDown as c } from "../../../core/components/Icons/ChevronDown.mjs";
-
+/* empty css            */
 const f = ({
   children: o,
   value: r,
@@ -9,8 +9,8 @@ const f = ({
 }) => {
   const {
     colorMode: n
-  } = m();
-  return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(c, null));
+  } = l();
+  return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { "aria-label": "Select notification filter", value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(c, null));
 };
 export {
   f as Dropdown

package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select value={value} onChange={onChange}>\n        {children}\n      </select>\n      <ChevronDown />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","React","ChevronDown"],"mappings":";;;;AAYO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,SACGC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAY,8BAA6BF,CAAU,GACtD,GAAAE,gBAAAA,EAAA,cAAC,UAAO,EAAA,OAAAJ,GAAc,UAAAC,EACnBF,GAAAA,CACH,GACAK,gBAAAA,EAAA,cAACC,OAAW,CACd;AAEJ;"}
+{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select\n        aria-label=\"Select notification filter\"\n        value={value}\n        onChange={onChange}\n      >\n        {children}\n      </select>\n      <ChevronDown />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","React","ChevronDown"],"mappings":";;;;AAYO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,OAAI,EAAA,WAAW,8BAA8BD,CAAS,MACpDE,gBAAAA,EAAA,cAAA,UAAA,EACC,cAAW,8BACX,OAAAJ,GACA,UAAAC,KAECF,CACH,GACAK,gBAAAA,EAAA,cAACC,OAAW,CACd;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs

@@ -1,7 +1,7 @@
 import { useKnockFeed as u, useTranslations as i } from "@knocklabs/react-core";
 import * as t from "react";
 import { CheckmarkCircle as k } from "../../../core/components/Icons/CheckmarkCircle.mjs";
-
+/* empty css            */
 const C = ({
   onClick: a
 }) => {