@knocklabs/react 0.2.25 → 0.2.27

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

@@ -1 +1 @@
-{"version":3,"file":"MarkAsRead.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n  onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n  const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const unreadItems = useFeedStore((state) =>\n    state.items.filter((item) => !item.read_at),\n  );\n\n  const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n  const onClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      feedClient.markAllAsRead();\n      if (onClick) onClick(e, unreadItems);\n    },\n    [feedClient, unreadItems, onClick],\n  );\n\n  return (\n    <button\n      className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n      disabled={unreadCount === 0}\n      onClick={onClickHandler}\n      type=\"button\"\n    >\n      {t(\"markAllAsRead\")}\n      <CheckmarkCircle />\n    </button>\n  );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":";;;;AAYO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,SAAAA;AAAQ,MAAM;AAC9D,QAAA;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACvD;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAcN,EAAcO,CAAAA,MAChCA,EAAMC,MAAMC,OAAQC,CAASA,MAAA,CAACA,EAAKC,OAAO,CAC5C,GAEMC,IAAcZ,EAAcO,CAAUA,MAAAA,EAAMM,SAASC,YAAY,GAEjEC,IAAiBC,EAAMC,YAC3B,CAACC,MAAwB;AACvBjB,IAAAA,EAAWkB,cAAc,GACrBpB,KAASA,EAAQmB,GAAGZ,CAAW;AAAA,EAErC,GAAA,CAACL,GAAYK,GAAaP,CAAO,CACnC;AAEA,yCACG,UACC,EAAA,WAAY,8CAA6CG,CAAU,IACnE,UAAUU,MAAgB,GAC1B,SAASG,GACT,MAAK,SAEJX,GAAAA,EAAE,eAAe,GAClB,gBAAAY,EAAA,cAACI,OAAe,CAClB;AAEJ;"}
+{"version":3,"file":"MarkAsRead.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n  onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n  const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const unreadItems = useFeedStore((state) =>\n    state.items.filter((item) => !item.read_at),\n  );\n\n  const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n  const onClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      feedClient.markAllAsRead();\n      if (onClick) onClick(e, unreadItems);\n    },\n    [feedClient, unreadItems, onClick],\n  );\n\n  return (\n    <button\n      className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n      disabled={unreadCount === 0}\n      onClick={onClickHandler}\n      type=\"button\"\n    >\n      {t(\"markAllAsRead\")}\n      <CheckmarkCircle />\n    </button>\n  );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":";;;;AAYO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,SAAAA;AAAQ,MAAM;AAC9D,QAAA;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACvD;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAcN,EAAcO,CAAAA,MAChCA,EAAMC,MAAMC,OAAQC,CAASA,MAAA,CAACA,EAAKC,OAAO,CAC5C,GAEMC,IAAcZ,EAAcO,CAAUA,MAAAA,EAAMM,SAASC,YAAY,GAEjEC,IAAiBC,EAAMC,YAC3B,CAACC,MAAwB;AACvBjB,IAAAA,EAAWkB,cAAc,GACrBpB,KAAiBmB,EAAAA,GAAGZ,CAAW;AAAA,EAErC,GAAA,CAACL,GAAYK,GAAaP,CAAO,CACnC;AAEA,yCACG,UACC,EAAA,WAAW,8CAA8CG,CAAS,IAClE,UAAUU,MAAgB,GAC1B,SAASG,GACT,MAAK,SAEJX,GAAAA,EAAE,eAAe,GAClB,gBAAAY,EAAA,cAACI,OAAe,CAClB;AAEJ;"}

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

@@ -1,38 +1,38 @@
-import { isRequestInFlight as R, NetworkStatus as f } from "@knocklabs/client";
-import { useKnockFeed as w, useFeedSettings as y, useTranslations as B, FilterStatus as q } from "@knocklabs/react-core";
-import e, { useState as x, useRef as H, useEffect as p, useCallback as K } from "react";
+import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
+import { useKnockFeed as I, useFeedSettings as R, useTranslations as B, FilterStatus as q } from "@knocklabs/react-core";
+import e, { useState as x, useRef as K, useEffect as p, useCallback as H } from "react";
 import { Spinner as M } from "../../../core/components/Spinner/Spinner.mjs";
-import z from "../../../core/hooks/useOnBottomScroll.mjs";
-import { EmptyFeed as A } from "../EmptyFeed/EmptyFeed.mjs";
-import { NotificationCell as L } from "../NotificationCell/NotificationCell.mjs";
-
-import { NotificationFeedHeader as O } from "./NotificationFeedHeader.mjs";
-
-const P = (t) => /* @__PURE__ */ e.createElement(L, { key: t.item.id, ...t }), T = (t) => /* @__PURE__ */ e.createElement(O, { ...t }), k = ({
+import P from "../../../core/hooks/useOnBottomScroll.mjs";
+import { EmptyFeed as z } from "../EmptyFeed/EmptyFeed.mjs";
+import { NotificationCell as A } from "../NotificationCell/NotificationCell.mjs";
+/* empty css                              */
+import { NotificationFeedHeader as L } from "./NotificationFeedHeader.mjs";
+/* empty css            */
+const O = (t) => /* @__PURE__ */ e.createElement(A, { key: t.item.id, ...t }), T = (t) => /* @__PURE__ */ e.createElement(L, { ...t }), k = ({
   colorMode: t
 }) => /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__spinner-container" }, /* @__PURE__ */ e.createElement(M, { thickness: 3, size: "16px", color: t === "dark" ? "rgba(255, 255, 255, 0.65)" : void 0 })), U = "https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed", Z = ({
-  EmptyComponent: t = /* @__PURE__ */ e.createElement(A, null),
-  renderItem: _ = P,
+  EmptyComponent: t = /* @__PURE__ */ e.createElement(z, null),
+  renderItem: _ = O,
   onNotificationClick: g,
   onNotificationButtonClick: E,
-  onMarkAllAsReadClick: N,
+  onMarkAllAsReadClick: b,
   initialFilterStatus: r = q.All,
-  header: S,
-  renderHeader: b = T
+  header: N,
+  renderHeader: S = T
 }) => {
   const [a, m] = x(r), {
     feedClient: n,
     useFeedStore: h,
-    colorMode: i
-  } = w(), {
-    settings: c
-  } = y(n), {
+    colorMode: c
+  } = I(), {
+    settings: i
+  } = R(n), {
     t: F
   } = B(), {
     pageInfo: l,
     items: d,
     networkStatus: o
-  } = h(), u = H(null);
+  } = h(), u = K(null);
   p(() => {
     m(r);
   }, [r]), p(() => {
@@ -40,22 +40,22 @@ const P = (t) => /* @__PURE__ */ e.createElement(L, { key: t.item.id, ...t }), T
       status: a
     });
   }, [n, a]);
-  const v = d.length === 0, s = R(o), C = K(() => {
+  const v = d.length === 0, s = C(o), w = H(() => {
     !s && l.after && n.fetchNextPage();
   }, [s, l, n]);
-  return z({
+  return P({
     ref: u,
-    callback: C,
+    callback: w,
     offset: 70
-  }), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${i}` }, S || b({
+  }), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${c}` }, N || S({
     setFilterStatus: m,
     filterStatus: a,
-    onMarkAllAsReadClick: N
-  }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__container", ref: u }, o === f.loading && /* @__PURE__ */ e.createElement(k, { colorMode: i }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__feed-items-container" }, o !== f.loading && d.map((I) => _({
-    item: I,
+    onMarkAllAsReadClick: b
+  }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__container", ref: u }, o === f.loading && /* @__PURE__ */ e.createElement(k, { colorMode: c }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__feed-items-container" }, o !== f.loading && d.map((y) => _({
+    item: y,
     onItemClick: g,
     onButtonClick: E
-  }))), o === f.fetchMore && /* @__PURE__ */ e.createElement(k, { colorMode: i }), !s && v && t), (c == null ? void 0 : c.features.branding_required) && /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__knock-branding" }, /* @__PURE__ */ e.createElement("a", { href: U, target: "_blank" }, F("poweredBy"))));
+  }))), o === f.fetchMore && /* @__PURE__ */ e.createElement(k, { colorMode: c }), !s && v && t), (i == null ? void 0 : i.features.branding_required) && /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__knock-branding" }, /* @__PURE__ */ e.createElement("a", { href: U, target: "_blank" }, F("poweredBy") || "Powered by Knock")));
 };
 export {
   Z as NotificationFeed

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactNode;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n  <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n  <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n  <div className=\"rnf-notification-feed__spinner-container\">\n    <Spinner\n      thickness={3}\n      size=\"16px\"\n      color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n    />\n  </div>\n);\n\nconst poweredByKnockUrl =\n  \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n  EmptyComponent = <EmptyFeed />,\n  renderItem = defaultRenderItem,\n  onNotificationClick,\n  onNotificationButtonClick,\n  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\n}) => {\n  const [status, setStatus] = useState(initialFilterStatus);\n  const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n  const { settings } = useFeedSettings(feedClient);\n  const { t } = useTranslations();\n\n  const { pageInfo, items, networkStatus } = useFeedStore();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStatus(initialFilterStatus);\n  }, [initialFilterStatus]);\n\n  useEffect(() => {\n    // When the feed client changes, or the status changes issue a re-fetch\n    feedClient.fetch({ status });\n  }, [feedClient, status]);\n\n  const noItems = items.length === 0;\n  const requestInFlight = isRequestInFlight(networkStatus);\n\n  // Handle fetching more once we reach the bottom of the list\n  const onBottomCallback = useCallback(() => {\n    if (!requestInFlight && pageInfo.after) {\n      feedClient.fetchNextPage();\n    }\n  }, [requestInFlight, pageInfo, feedClient]);\n\n  // Once we scroll to the bottom of the view we want to automatically fetch\n  // more items for the feed and bring them into the list\n  useOnBottomScroll({\n    ref: containerRef,\n    callback: onBottomCallback,\n    offset: 70,\n  });\n\n  return (\n    <div\n      className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n    >\n      {header ||\n        renderHeader({\n          setFilterStatus: setStatus,\n          filterStatus: status,\n          onMarkAllAsReadClick,\n        })}\n\n      <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n        {networkStatus === NetworkStatus.loading && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        {!requestInFlight && noItems && EmptyComponent}\n      </div>\n\n      {settings?.features.branding_required && (\n        <div className=\"rnf-notification-feed__knock-branding\">\n          <a href={poweredByKnockUrl} target=\"_blank\">\n            {t(\"poweredBy\")}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"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"}
+{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactNode;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n  <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n  <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n  <div className=\"rnf-notification-feed__spinner-container\">\n    <Spinner\n      thickness={3}\n      size=\"16px\"\n      color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n    />\n  </div>\n);\n\nconst poweredByKnockUrl =\n  \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n  EmptyComponent = <EmptyFeed />,\n  renderItem = defaultRenderItem,\n  onNotificationClick,\n  onNotificationButtonClick,\n  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\n}) => {\n  const [status, setStatus] = useState(initialFilterStatus);\n  const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n  const { settings } = useFeedSettings(feedClient);\n  const { t } = useTranslations();\n\n  const { pageInfo, items, networkStatus } = useFeedStore();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStatus(initialFilterStatus);\n  }, [initialFilterStatus]);\n\n  useEffect(() => {\n    // When the feed client changes, or the status changes issue a re-fetch\n    feedClient.fetch({ status });\n  }, [feedClient, status]);\n\n  const noItems = items.length === 0;\n  const requestInFlight = isRequestInFlight(networkStatus);\n\n  // Handle fetching more once we reach the bottom of the list\n  const onBottomCallback = useCallback(() => {\n    if (!requestInFlight && pageInfo.after) {\n      feedClient.fetchNextPage();\n    }\n  }, [requestInFlight, pageInfo, feedClient]);\n\n  // Once we scroll to the bottom of the view we want to automatically fetch\n  // more items for the feed and bring them into the list\n  useOnBottomScroll({\n    ref: containerRef,\n    callback: onBottomCallback,\n    offset: 70,\n  });\n\n  return (\n    <div\n      className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n    >\n      {header ||\n        renderHeader({\n          setFilterStatus: setStatus,\n          filterStatus: status,\n          onMarkAllAsReadClick,\n        })}\n\n      <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n        {networkStatus === NetworkStatus.loading && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        {!requestInFlight && noItems && EmptyComponent}\n      </div>\n\n      {settings?.features.branding_required && (\n        <div className=\"rnf-notification-feed__knock-branding\">\n          <a href={poweredByKnockUrl} target=\"_blank\">\n            {t(\"poweredBy\") || \"Powered by Knock\"}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import t from "react";
-
+/* empty css            */
 const i = ({
   children: e
 }) => /* @__PURE__ */ t.createElement("div", { className: "rnf-feed-provider" }, e);

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

@@ -4,8 +4,8 @@ import { usePopper as _ } from "react-popper";
 import E from "../../../core/hooks/useComponentVisible.mjs";
 import { NotificationFeed as F } from "../NotificationFeed/NotificationFeed.mjs";
 import "../NotificationFeed/NotificationFeedHeader.mjs";
-
-
+/* empty css                              */
+/* empty css            */
 const N = ({
   store: e,
   feedClient: t

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n  store: FeedStoreState;\n  feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n  if (store.metadata.unseen_count > 0) {\n    feedClient.markAllAsSeen();\n  }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n  isVisible: boolean;\n  onOpen?: (arg: OnOpenOptions) => void;\n  onClose: (e: Event) => void;\n  buttonRef: RefObject<HTMLElement>;\n  closeOnClickOutside?: boolean;\n  placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n  NotificationFeedPopoverProps\n> = ({\n  isVisible,\n  onOpen = defaultOnOpen,\n  onClose,\n  buttonRef,\n  closeOnClickOutside = true,\n  placement = \"bottom-end\",\n  ...feedProps\n}) => {\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n    closeOnClickOutside,\n  });\n\n  const { styles, attributes } = usePopper(\n    buttonRef.current,\n    popperRef.current,\n    {\n      strategy: \"fixed\",\n      placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 8],\n          },\n        },\n      ],\n    },\n  );\n\n  useEffect(() => {\n    // Whenever the feed is opened, we want to invoke the `onOpen` callback\n    // function to handle any side effects.\n    if (isVisible && onOpen) {\n      onOpen({ store, feedClient });\n    }\n  }, [isVisible, onOpen, store, feedClient]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        ...styles.popper,\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      {...attributes.popper}\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","styles","attributes","usePopper","current","strategy","modifiers","name","options","offset","useEffect","popper","visibility","opacity","React","NotificationFeed"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAgBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,YAAAA;AAA0B,MAAM;AAC1DD,EAAAA,EAAME,SAASC,eAAe,KAChCF,EAAWG,cAAc;AAE7B,GAWaC,IAETA,CAAC;AAAA,EACHC,WAAAA;AAAAA,EACAC,QAAAA,IAASR;AAAAA,EACTS,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,qBAAAA,IAAsB;AAAA,EACtBC,WAAAA,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWZ,YAAAA;AAAAA,IAAYa,cAAAA;AAAAA,MAAiBC,EAAa,GACvDf,IAAQc,KAER;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EAAoBZ,GAAWE,GAAS;AAAA,IACjEE,qBAAAA;AAAAA,EAAAA,CACD,GAEK;AAAA,IAAES,QAAAA;AAAAA,IAAQC,YAAAA;AAAAA,EAAeC,IAAAA,EAC7BZ,EAAUa,SACVL,EAAUK,SACV;AAAA,IACEC,UAAU;AAAA,IACVZ,WAAAA;AAAAA,IACAa,WAAW,CACT;AAAA,MACEC,MAAM;AAAA,MACNC,SAAS;AAAA,QACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,MACf;AAAA,IAAA,CACD;AAAA,EAAA,CAGP;AAEAC,SAAAA,EAAU,MAAM;AAGd,IAAItB,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,mCAGtC,OACC,EAAA,WAAY,gEAA+DY,CAAU,IACrF,OAAO;AAAA,IACL,GAAGM,EAAOU;AAAAA,IACVC,YAAYxB,IAAY,YAAY;AAAA,IACpCyB,SAASzB,IAAY,IAAI;AAAA,KAE3B,KAAKW,GACL,GAAIG,EAAWS,QACf,MAAK,UACL,UAAU,MAETG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,uCACb,GAAAA,gBAAAA,EAAA,cAACC,KAAiB,GAAIrB,EAAU,CAAA,CAClC,CACF;AAEJ;"}
+{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n  store: FeedStoreState;\n  feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n  if (store.metadata.unseen_count > 0) {\n    feedClient.markAllAsSeen();\n  }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n  isVisible: boolean;\n  onOpen?: (arg: OnOpenOptions) => void;\n  onClose: (e: Event) => void;\n  buttonRef: RefObject<HTMLElement>;\n  closeOnClickOutside?: boolean;\n  placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n  NotificationFeedPopoverProps\n> = ({\n  isVisible,\n  onOpen = defaultOnOpen,\n  onClose,\n  buttonRef,\n  closeOnClickOutside = true,\n  placement = \"bottom-end\",\n  ...feedProps\n}) => {\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n    closeOnClickOutside,\n  });\n\n  const { styles, attributes } = usePopper(\n    buttonRef.current,\n    popperRef.current,\n    {\n      strategy: \"fixed\",\n      placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 8],\n          },\n        },\n      ],\n    },\n  );\n\n  useEffect(() => {\n    // Whenever the feed is opened, we want to invoke the `onOpen` callback\n    // function to handle any side effects.\n    if (isVisible && onOpen) {\n      onOpen({ store, feedClient });\n    }\n  }, [isVisible, onOpen, store, feedClient]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        ...styles.popper,\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      {...attributes.popper}\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","styles","attributes","usePopper","current","strategy","modifiers","name","options","offset","useEffect","popper","visibility","opacity","React","NotificationFeed"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAgBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,YAAAA;AAA0B,MAAM;AAC1DD,EAAAA,EAAME,SAASC,eAAe,KAChCF,EAAWG,cAAc;AAE7B,GAWaC,IAETA,CAAC;AAAA,EACHC,WAAAA;AAAAA,EACAC,QAAAA,IAASR;AAAAA,EACTS,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,qBAAAA,IAAsB;AAAA,EACtBC,WAAAA,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWZ,YAAAA;AAAAA,IAAYa,cAAAA;AAAAA,MAAiBC,EAAa,GACvDf,IAAQc,KAER;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EAAoBZ,GAAWE,GAAS;AAAA,IACjEE,qBAAAA;AAAAA,EAAAA,CACD,GAEK;AAAA,IAAES,QAAAA;AAAAA,IAAQC,YAAAA;AAAAA,EAAeC,IAAAA,EAC7BZ,EAAUa,SACVL,EAAUK,SACV;AAAA,IACEC,UAAU;AAAA,IACVZ,WAAAA;AAAAA,IACAa,WAAW,CACT;AAAA,MACEC,MAAM;AAAA,MACNC,SAAS;AAAA,QACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,MACf;AAAA,IAAA,CACD;AAAA,EAAA,CAGP;AAEAC,SAAAA,EAAU,MAAM;AAGd,IAAItB,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,mCAGtC,OACC,EAAA,WAAW,gEAAgEY,CAAS,IACpF,OAAO;AAAA,IACL,GAAGM,EAAOU;AAAAA,IACVC,YAAYxB,IAAY,YAAY;AAAA,IACpCyB,SAASzB,IAAY,IAAI;AAAA,KAE3B,KAAKW,GACL,GAAIG,EAAWS,QACf,MAAK,UACL,UAAU,MAETG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,uCACb,GAAAA,gBAAAA,EAAA,cAACC,KAAiB,GAAIrB,EAAU,CAAA,CAClC,CACF;AAEJ;"}

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

@@ -2,7 +2,7 @@ import { useKnockFeed as i } from "@knocklabs/react-core";
 import o from "react";
 import { BellIcon as c } from "../../../core/components/Icons/Bell.mjs";
 import { UnseenBadge as a } from "../UnseenBadge/UnseenBadge.mjs";
-
+/* empty css            */
 const d = o.forwardRef(({
   onClick: t,
   badgeCountType: e

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      role=\"button\"\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":";;;;;AAcaA,MAAAA,IAAyBC,EAAMC,WAG1C,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,gBAAAA;AAAe,GAAGC,MAAQ;AAChC,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,UACC,EAAA,WAAY,8DAA6DD,CAAU,IACnF,MAAK,UACL,cAAW,0BACX,KAAAD,GACA,SAAAF,KAECF,gBAAAA,EAAA,cAAAO,GAAA,IAAQ,GACRP,gBAAAA,EAAA,cAAAQ,GAAA,EAAY,gBAAAL,GAA+B,CAC9C;AAEJ,CAAC;"}
+{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      role=\"button\"\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":";;;;;AAcaA,MAAAA,IAAyBC,EAAMC,WAG1C,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,gBAAAA;AAAe,GAAGC,MAAQ;AAChC,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,UACC,EAAA,WAAW,8DAA8DD,CAAS,IAClF,MAAK,UACL,cAAW,0BACX,KAAAD,GACA,SAAAF,KAECF,gBAAAA,EAAA,cAAAO,GAAA,IAAQ,GACRP,gBAAAA,EAAA,cAAAQ,GAAA,EAAY,gBAAAL,GAA+B,CAC9C;AAEJ,CAAC;"}

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

@@ -1,6 +1,6 @@
 import { useKnockFeed as a, formatBadgeCount as o } from "@knocklabs/react-core";
 import u from "react";
-
+/* empty css            */
 function s(n, e) {
   switch (n) {
     case "all":

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

@@ -1,12 +1,12 @@
 import e, { useState as s } from "react";
 import { useTranslations as f } from "@knocklabs/react-core";
 import { Spinner as C } from "../../../core/components/Spinner/Spinner.mjs";
-
+/* empty css                                          */
 import "lodash.debounce";
-
+/* empty css               */
 import _ from "../SlackChannelCombobox/SlackConnectionError.mjs";
 import { SlackIcon as E } from "../SlackIcon/SlackIcon.mjs";
-
+/* empty css            */
 const A = ({
   inErrorState: i,
   connectedChannels: c = [],

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

@@ -1 +1 @@
-{"version":3,"file":"SlackAddChannelInput.mjs","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\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":";;;;;;;;;AAoBA,MAAMA,IAAqEA,CAAC;AAAA,EAC1EC,cAAAA;AAAAA,EACAC,mBAAAA,IAAoB,CAAE;AAAA,EACtBC,yBAAAA;AAAAA,EACAC,wBAAAA;AAAAA,EACAC,2BAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAgB,GACxB,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAE1DG,IAAgBA,MAAM;AAC1B,QAAI,CAACL;AACH;AAWF,QARIG,KACFC,EAAc,IAAI,GAGKV,EAAkBY,KACxCC,CAAYA,MAAAA,EAAQC,eAAeR,CACtC;AAGEC,aAAAA,EAAS,EAAE,GACJG,EAAcN,EAAE,8BAA8B,KAAK,EAAE;AAGxDW,UAAAA,IAAwB,CAAC,GAAGf,GAAmB;AAAA,MAAEc,YAAYR;AAAAA,IAAAA,CAAO;AAC1EL,IAAAA,EAAwBc,CAAqB,GAC7CR,EAAS,EAAE;AAAA,EAAA;AAGb,SACGS,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBAAA,GACZA,gBAAAA,EAAA,cAAA,SAAA,EACC,WAAY,+BAA8BjB,KAAgB,CAAC,CAACU,MAAe,CAACH,KAAS,mCAAoC,IACzH,UAAU,IACV,IAAG,wBACH,MAAK,QACL,aACEG,KAAcP,KAA0BE,EAAE,gBAAgB,GAE5D,UAAWa,CAAAA,MAAMV,EAASU,EAAEC,OAAOZ,KAAK,GACxC,OAAOA,KAAS,IAAG,GAEpBU,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAU,+BAA8B,SAASL,EAAAA,GACtDR,IACCa,gBAAAA,EAAA,cAACG,KAAQ,MAAK,QAAO,WAAW,EAAK,CAAA,IAErCH,gBAAAA,EAAA,cAACI,GAAU,EAAA,QAAO,QAAO,OAAM,OAChC,CAAA,GACAhB,EAAE,qBAAqB,CAC1B,GACAY,gBAAAA,EAAA,cAACK,OAAwB,CAC3B;AAEJ;"}
+{"version":3,"file":"SlackAddChannelInput.mjs","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\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":";;;;;;;;;AAoBA,MAAMA,IAAqEA,CAAC;AAAA,EAC1EC,cAAAA;AAAAA,EACAC,mBAAAA,IAAoB,CAAE;AAAA,EACtBC,yBAAAA;AAAAA,EACAC,wBAAAA;AAAAA,EACAC,2BAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAgB,GACxB,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAE1DG,IAAgBA,MAAM;AAC1B,QAAI,CAACL;AACH;AAWF,QARIG,KACFC,EAAc,IAAI,GAGKV,EAAkBY,KACxCC,CAAYA,MAAAA,EAAQC,eAAeR,CACtC;AAGEC,aAAAA,EAAS,EAAE,GACJG,EAAcN,EAAE,8BAA8B,KAAK,EAAE;AAGxDW,UAAAA,IAAwB,CAAC,GAAGf,GAAmB;AAAA,MAAEc,YAAYR;AAAAA,IAAAA,CAAO;AAC1EL,IAAAA,EAAwBc,CAAqB,GAC7CR,EAAS,EAAE;AAAA,EAAA;AAGb,SACGS,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBAAA,GACZA,gBAAAA,EAAA,cAAA,SAAA,EACC,WAAW,+BAA+BjB,KAAgB,CAAC,CAACU,MAAe,CAACH,KAAS,mCAAmC,IACxH,UAAU,IACV,IAAG,wBACH,MAAK,QACL,aACEG,KAAcP,KAA0BE,EAAE,gBAAgB,GAE5D,UAAWa,CAAAA,MAAMV,EAASU,EAAEC,OAAOZ,KAAK,GACxC,OAAOA,KAAS,IAAG,GAEpBU,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAU,+BAA8B,SAASL,EAAAA,GACtDR,IACCa,gBAAAA,EAAA,cAACG,KAAQ,MAAK,QAAO,WAAW,EAAK,CAAA,IAErCH,gBAAAA,EAAA,cAACI,GAAU,EAAA,QAAO,QAAO,OAAM,OAChC,CAAA,GACAhB,EAAE,qBAAqB,CAC1B,GACAY,gBAAAA,EAAA,cAACK,OAAwB,CAC3B;AAEJ;"}

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

@@ -1,8 +1,8 @@
 import e, { useEffect as E } from "react";
 import { useTranslations as b, useKnockClient as f, useKnockSlackClient as x, useSlackAuth as L } from "@knocklabs/react-core";
-
+/* empty css               */
 import { SlackIcon as a } from "../SlackIcon/SlackIcon.mjs";
-
+/* empty css            */
 const w = (l) => {
   const t = window.screenLeft ?? window.screenX, r = window.screenTop ?? window.screenY, c = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, n = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, o = c / 2 - 600 / 2 + t, d = `width=600,height=800,top=${n / 2 - 800 / 2 + r},left=${o}`;
   window.open(l, "Slack OAuth", d);

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

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { 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":"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"}
+{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { 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":"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"}

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

@@ -1,8 +1,8 @@
 import e from "react";
 import { useTranslations as r } from "@knocklabs/react-core";
-
+/* empty css               */
 import { SlackIcon as c } from "../SlackIcon/SlackIcon.mjs";
-
+/* empty css            */
 const o = ({
   actionButton: t
 }) => {

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

@@ -3,17 +3,17 @@ import { useTranslations as w, useKnockSlackClient as z, useSlackChannels as G,
 import * as S from "@radix-ui/react-popover";
 import * as X from "@radix-ui/react-visually-hidden";
 import { Spinner as j } from "../../../core/components/Spinner/Spinner.mjs";
-
+/* empty css                                          */
 import "lodash.debounce";
 import q from "../../../core/hooks/useOutsideClick.mjs";
-
+/* empty css               */
 import J from "../SlackAddChannelInput/SlackAddChannelInput.mjs";
 import Q from "./SlackChannelListBox.mjs";
 import Y from "./SlackConnectedChannelTagList.mjs";
 import Z from "./SlackConnectionError.mjs";
 import { strContains as g } from "./helpers.mjs";
 import M from "./icons/SearchIcon.mjs";
-
+/* empty css            */
 const nn = 1e3, bn = ({
   slackChannelsRecipientObject: R,
   queryOptions: y,

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

@@ -1 +1 @@
-{"version":3,"file":"SlackChannelCombobox.mjs","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.mjs","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/esm/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.mjs

@@ -1,7 +1,7 @@
 import i from "react";
-
+/* empty css               */
 import l from "./SlackChannelOption.mjs";
-
+/* empty css            */
 const s = ({
   slackChannels: m,
   isLoading: o,

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

@@ -1,13 +1,13 @@
 import e, { useState as a, useEffect as k } from "react";
 import "@knocklabs/react-core";
 import { Spinner as x } from "../../../core/components/Spinner/Spinner.mjs";
-
+/* empty css                                          */
 import "lodash.debounce";
-
+/* empty css               */
 import E from "./icons/CheckmarkIcon.mjs";
 import d from "./icons/HashtagIcon.mjs";
 import v from "./icons/LockIcon.mjs";
-
+/* empty css            */
 const j = ({
   channel: t,
   isLoading: o,

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

@@ -2,7 +2,7 @@ import e from "react";
 import o from "./icons/CloseIcon.mjs";
 import c from "./icons/HashtagIcon.mjs";
 import a from "./icons/LockIcon.mjs";
-
+/* empty css            */
 const i = ({
   channel: t,
   updateConnectedChannels: n

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

@@ -1,6 +1,6 @@
 import o from "react";
 import p from "./SlackConnectedChannelTag.mjs";
-
+/* empty css            */
 const f = ({
   connectedChannels: e,
   slackChannels: r,