@knocklabs/react 0.1.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, isRequestInFlight, NetworkStatus } from \"@knocklabs/client\";\nimport React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport {\n  useKnockFeed,\n  useFeedSettings,\n  ColorMode,\n  FilterStatus,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport { NotificationCell } from \"../NotificationCell\";\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\n\nimport \"./styles.css\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\n\nexport type OnNotificationClick = (item: FeedItem) => void;\nexport type RenderItem = ({ item }: RenderItemProps) => ReactNode;\nexport type RenderItemProps = {\n  item: FeedItem;\n  onItemClick?: OnNotificationClick;\n};\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactElement<any>;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: OnNotificationClick;\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  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({ item, onItemClick: onNotificationClick }),\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","jsx","NotificationCell","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","noItems","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","useOnBottomScroll","jsxs","NetworkStatus","item"],"mappings":";;;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MACzB,gBAAAC,EAACC,KAAsC,GAAGF,EAAA,GAAnBA,EAAM,KAAK,EAAe,GAG7CG,IAAsB,CAACH,MAC1B,gBAAAC,EAAAG,GAAA,EAAwB,GAAGJ,EAAO,CAAA,GAG/BK,IAAiB,CAAC,EAAE,WAAAC,EAAA,MACvB,gBAAAL,EAAA,OAAA,EAAI,WAAU,4CACb,UAAA,gBAAAA;AAAA,EAACM;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAOD,MAAc,SAAS,8BAA8B;AAAA,EAAA;AAC9D,EACF,CAAA,GAGIE,IACJ,sGAEWC,KAAoD,CAAC;AAAA,EAChE,gBAAAC,sBAAkBC,GAAU,EAAA;AAAA,EAC5B,YAAAC,IAAab;AAAA,EACb,qBAAAc;AAAA,EACA,sBAAAC;AAAA,EACA,qBAAAC,IAAsBC,EAAa;AAAA,EACnC,QAAAC;AAAA,EACA,cAAAC,IAAef;AACjB,MAAM;AACJ,QAAM,CAACgB,GAAQC,CAAS,IAAIC,EAASN,CAAmB,GAClD,EAAE,YAAAO,GAAY,cAAAC,GAAc,WAAAjB,MAAckB,EAAa,GACvD,EAAE,UAAAC,EAAA,IAAaC,EAAgBJ,CAAU,GACzC,EAAE,GAAAK,MAAMC,KAER,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhD,EAAAC,EAAU,MAAM;AACd,IAAAd,EAAUL,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBmB,EAAU,MAAM;AAEH,IAAAZ,EAAA,MAAM,EAAE,QAAAH,EAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjB,QAAAgB,IAAUL,EAAM,WAAW,GAC3BM,IAAkBC,EAAkBN,CAAa,GAGjDO,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBP,EAAS,SAC/BP,EAAW,cAAc;AAAA,EAE1B,GAAA,CAACc,GAAiBP,GAAUP,CAAU,CAAC;AAIxB,SAAAkB,EAAA;AAAA,IAChB,KAAKR;AAAA,IACL,UAAUM;AAAA,IACV,QAAQ;AAAA,EAAA,CACT,GAGC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gDAAgDnC,CAAS;AAAA,MAEnE,UAAA;AAAA,QAAAW,KACCC,EAAa;AAAA,UACX,iBAAiBE;AAAA,UACjB,cAAcD;AAAA,UACd,sBAAAL;AAAA,QAAA,CACD;AAAA,QAEF,gBAAA2B,EAAA,OAAA,EAAI,WAAU,oCAAmC,KAAKT,GACpD,UAAA;AAAA,UAAAD,MAAkBW,EAAc,WAC9B,gBAAAzC,EAAAI,GAAA,EAAe,WAAAC,GAAsB;AAAA,4BAGvC,OAAI,EAAA,WAAU,+CACZ,UAAkByB,MAAAW,EAAc,WAC/BZ,EAAM;AAAA,YAAI,CAACa,MACT/B,EAAW,EAAE,MAAA+B,GAAM,aAAa9B,GAAqB;AAAA,UAAA,GAE3D;AAAA,UAECkB,MAAkBW,EAAc,aAC/B,gBAAAzC,EAACI,KAAe,WAAAC,GAAsB;AAAA,UAGvC,CAAC8B,KAAmBD,KAAWzB;AAAA,QAAA,GAClC;AAAA,SAECe,KAAA,gBAAAA,EAAU,SAAS,sBACjB,gBAAAxB,EAAA,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAA,EAAC,KAAE,EAAA,MAAMO,GAAmB,QAAO,UAChC,UAAEmB,EAAA,WAAW,EAChB,CAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,33 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { FilterStatus as o, useTranslations as d } from "@knocklabs/react-core";
+import { Dropdown as c } from "./Dropdown.mjs";
+import { MarkAsRead as l } from "./MarkAsRead.mjs";
+const f = [
+  o.All,
+  o.Unread,
+  o.Read
+], u = ({
+  onMarkAllAsReadClick: a,
+  filterStatus: t,
+  setFilterStatus: s
+}) => {
+  const { t: r } = d();
+  return /* @__PURE__ */ i("header", { className: "rnf-notification-feed__header", children: [
+    /* @__PURE__ */ i("div", { className: "rnf-notification-feed__selector", children: [
+      /* @__PURE__ */ n("span", { className: "rnf-notification-feed__type", children: r("notifications") }),
+      /* @__PURE__ */ n(
+        c,
+        {
+          value: t,
+          onChange: (e) => s(e.target.value),
+          children: f.map((e) => /* @__PURE__ */ n("option", { value: e, children: r(e) }, e))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n(l, { onClick: a })
+  ] });
+};
+export {
+  u as NotificationFeedHeader
+};
+//# sourceMappingURL=NotificationFeedHeader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeedHeader.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import React, { SetStateAction } from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\n\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n  filterStatus: FilterStatus;\n  setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n  FilterStatus.All,\n  FilterStatus.Unread,\n  FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n  onMarkAllAsReadClick,\n  filterStatus,\n  setFilterStatus,\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <header className=\"rnf-notification-feed__header\">\n      <div className=\"rnf-notification-feed__selector\">\n        <span className=\"rnf-notification-feed__type\">\n          {t(\"notifications\")}\n        </span>\n        <Dropdown\n          value={filterStatus}\n          onChange={(e) => setFilterStatus(e.target.value)}\n        >\n          {OrderedFilterStatuses.map((filterStatus) => (\n            <option key={filterStatus} value={filterStatus}>\n              {t(filterStatus)}\n            </option>\n          ))}\n        </Dropdown>\n      </div>\n      <MarkAsRead onClick={onMarkAllAsReadClick} />\n    </header>\n  );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","jsxs","jsx","Dropdown","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB;AAAA,EAC5BC,EAAa;AAAA,EACbA,EAAa;AAAA,EACbA,EAAa;AACf,GAEaC,IAAgE,CAAC;AAAA,EAC5E,sBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,UAAO,EAAA,WAAU,iCAChB,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAU,+BACb,UAAAH,EAAE,eAAe,GACpB;AAAA,MACA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,UAAU,CAAC,MAAMC,EAAgB,EAAE,OAAO,KAAK;AAAA,UAE9C,UAAsBL,EAAA,IAAI,CAACI,MACzB,gBAAAK,EAAA,UAAA,EAA0B,OAAOL,GAC/B,UAAEA,EAAAA,CAAY,EADJA,GAAAA,CAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,IACA,gBAAAK,EAACE,GAAW,EAAA,SAASR,EAAsB,CAAA;AAAA,EAC7C,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styles.css.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,60 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useEffect as v } from "react";
+import { usePopper as x } from "react-popper";
+import { NotificationFeed as y } from "../NotificationFeed/NotificationFeed.mjs";
+import "../NotificationFeed/NotificationFeedHeader.mjs";
+import { useKnockFeed as F } from "@knocklabs/react-core";
+
+import N from "../../../core/hooks/useComponentVisible.mjs";
+import "./styles.css.mjs";
+const b = ({ store: e, feedClient: o }) => {
+  e.metadata.unseen_count > 0 && o.markAllAsSeen();
+}, E = ({
+  isVisible: e,
+  onOpen: o = b,
+  onClose: i,
+  buttonRef: n,
+  closeOnClickOutside: f = !0,
+  placement: p = "bottom-end",
+  ...s
+}) => {
+  const { colorMode: m, feedClient: d, useFeedStore: c } = F(), a = c(), { ref: r } = N(e, i, {
+    closeOnClickOutside: f
+  }), { styles: l, attributes: u } = x(
+    n.current,
+    r.current,
+    {
+      strategy: "fixed",
+      placement: p,
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 8]
+          }
+        }
+      ]
+    }
+  );
+  return v(() => {
+    e && o && o({ store: a, feedClient: d });
+  }, [e]), /* @__PURE__ */ t(
+    "div",
+    {
+      className: `rnf-notification-feed-popover rnf-notification-feed-popover--${m}`,
+      style: {
+        ...l.popper,
+        visibility: e ? "visible" : "hidden"
+      },
+      ref: r,
+      ...u.popper,
+      role: "dialog",
+      tabIndex: -1,
+      children: /* @__PURE__ */ t("div", { className: "rnf-notification-feed-popover__inner", children: /* @__PURE__ */ t(y, { ...s }) })
+    }
+  );
+};
+export {
+  E as NotificationFeedPopover
+};
+//# sourceMappingURL=NotificationFeedPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\n\nimport \"./styles.css\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Feed, FeedStoreState } from \"@knocklabs/client\";\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]);\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      }}\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","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","popperRef","useComponentVisible","styles","attributes","usePopper","useEffect","jsx","NotificationFeed"],"mappings":";;;;;;;;;AAeA,MAAMA,IAAgB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAgC;AAC1D,EAAAD,EAAM,SAAS,eAAe,KAChCC,EAAW,cAAc;AAE7B,GAWaC,IAET,CAAC;AAAA,EACH,WAAAC;AAAA,EACA,QAAAC,IAASL;AAAA,EACT,SAAAM;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAT,GAAY,cAAAU,MAAiBC,EAAa,GACvDZ,IAAQW,KAER,EAAE,KAAKE,EAAA,IAAcC,EAAoBX,GAAWE,GAAS;AAAA,IACjE,qBAAAE;AAAA,EAAA,CACD,GAEK,EAAE,QAAAQ,GAAQ,YAAAC,EAAA,IAAeC;AAAA,IAC7BX,EAAU;AAAA,IACVO,EAAU;AAAA,IACV;AAAA,MACE,UAAU;AAAA,MACV,WAAAL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,UACE,MAAM;AAAA,UACN,SAAS;AAAA,YACP,QAAQ,CAAC,GAAG,CAAC;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGF,SAAAU,EAAU,MAAM;AAGd,IAAIf,KAAaC,KACRA,EAAA,EAAE,OAAAJ,GAAO,YAAAC,EAAA,CAAY;AAAA,EAC9B,GACC,CAACE,CAAS,CAAC,GAGZ,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gEAAgET,CAAS;AAAA,MACpF,OAAO;AAAA,QACL,GAAGK,EAAO;AAAA,QACV,YAAYZ,IAAY,YAAY;AAAA,MACtC;AAAA,MACA,KAAKU;AAAA,MACJ,GAAGG,EAAW;AAAA,MACf,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA,gBAAAG,EAAC,SAAI,WAAU,wCACb,4BAACC,GAAkB,EAAA,GAAGX,GAAW,EACnC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styles.css.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,27 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import c from "react";
+import { BellIcon as f } from "../../../core/components/Icons/Bell.mjs";
+import { useKnockFeed as a } from "@knocklabs/react-core";
+import { UnseenBadge as m } from "../UnseenBadge/UnseenBadge.mjs";
+
+const x = c.forwardRef(({ onClick: t, badgeCountType: n }, i) => {
+  const { colorMode: r } = a();
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      className: `rnf-notification-icon-button rnf-notification-icon-button--${r}`,
+      role: "button",
+      "aria-label": "Open notification feed",
+      ref: i,
+      onClick: t,
+      children: [
+        /* @__PURE__ */ o(f, {}),
+        /* @__PURE__ */ o(m, { badgeCountType: n })
+      ]
+    }
+  );
+});
+export {
+  x as NotificationIconButton
+};
+//# sourceMappingURL=NotificationIconButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import React, { SyntheticEvent } from \"react\";\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\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","onClick","badgeCountType","ref","colorMode","useKnockFeed","jsxs","jsx","BellIcon","UnseenBadge"],"mappings":";;;;;;AAaa,MAAAA,IAAyBC,EAAM,WAG1C,CAAC,EAAE,SAAAC,GAAS,gBAAAC,KAAkBC,MAAQ;AAChC,QAAA,EAAE,WAAAC,MAAcC;AAGpB,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8DAA8DF,CAAS;AAAA,MAClF,MAAK;AAAA,MACL,cAAW;AAAA,MACX,KAAAD;AAAA,MACA,SAAAF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAS,EAAA;AAAA,QACV,gBAAAD,EAACE,KAAY,gBAAAP,GAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD,CAAC;"}

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styles.css.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,25 @@
+import { jsx as u } from "react/jsx-runtime";
+import { useKnockFeed as s, formatBadgeCount as o } from "@knocklabs/react-core";
+
+function c(n, e) {
+  switch (n) {
+    case "all":
+      return e.total_count;
+    case "unread":
+      return e.unread_count;
+    case "unseen":
+      return e.unseen_count;
+  }
+}
+const i = ({
+  badgeCountType: n = "unseen"
+}) => {
+  const { useFeedStore: e } = s(), t = e(
+    (r) => c(n, r.metadata)
+  );
+  return t !== 0 ? /* @__PURE__ */ u("div", { className: "rnf-unseen-badge", children: /* @__PURE__ */ u("span", { className: "rnf-unseen-badge__count", children: o(t) }) }) : null;
+};
+export {
+  i as UnseenBadge
+};
+//# sourceMappingURL=UnseenBadge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnseenBadge.mjs","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { useKnockFeed, formatBadgeCount } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\nimport { FeedMetadata } from \"@knocklabs/client\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n) {\n  switch (badgeCountType) {\n    case \"all\":\n      return metadata.total_count;\n    case \"unread\":\n      return metadata.unread_count;\n    case \"unseen\":\n      return metadata.unseen_count;\n  }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n  badgeCountType = \"unseen\",\n}) => {\n  const { useFeedStore } = useKnockFeed();\n  const badgeCountValue = useFeedStore((state) =>\n    selectBadgeCount(badgeCountType, state.metadata),\n  );\n\n  return badgeCountValue !== 0 ? (\n    <div className=\"rnf-unseen-badge\">\n      <span className=\"rnf-unseen-badge__count\">\n        {formatBadgeCount(badgeCountValue)}\n      </span>\n    </div>\n  ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","jsx","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAgB;AAAA,IACtB,KAAK;AACH,aAAOC,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,EACpB;AACF;AAEO,MAAMC,IAA0C,CAAC;AAAA,EACtD,gBAAAF,IAAiB;AACnB,MAAM;AACE,QAAA,EAAE,cAAAG,MAAiBC,KACnBC,IAAkBF;AAAA,IAAa,CAACG,MACpCP,EAAiBC,GAAgBM,EAAM,QAAQ;AAAA,EAAA;AAGjD,SAAOD,MAAoB,IACxB,gBAAAE,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA,gBAAAA,EAAC,QAAK,EAAA,WAAU,2BACb,UAAAC,EAAiBH,CAAe,EACnC,CAAA,GACF,IACE;AACN;"}

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styles.css.mjs.map

package/dist/esm/modules/feed/components/UnseenBadge/styles.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.css

@@ -0,0 +1 @@
+:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}

package/dist/types/App.d.ts

@@ -0,0 +1,3 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/types/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/App.tsx"],"names":[],"mappings":"AAGA,iBAAS,GAAG,4CA4BX;AAED,eAAe,GAAG,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./modules/core";
+export * from "./modules/feed";
+export * from "@knocklabs/react-core";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/dist/types/main.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=main.d.ts.map

package/dist/types/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAC"}

package/dist/types/modules/core/components/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from "react";
+export type ButtonProps = {
+    variant: "primary" | "secondary";
+    loadingText?: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    onClick: (e: React.MouseEvent) => void;
+};
+export declare const Button: React.FC<PropsWithChildren<ButtonProps>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/types/modules/core/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAqC3D,CAAC"}

package/dist/types/modules/core/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import React, { PropsWithChildren } from "react";
+export declare const ButtonGroup: React.FC<PropsWithChildren>;
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/types/modules/core/components/Button/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Button/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEnD,CAAC"}

package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type ButtonSpinnerProps = {
+    hasLabel: boolean;
+};
+export declare const ButtonSpinner: React.FC<ButtonSpinnerProps>;
+export {};
+//# sourceMappingURL=ButtonSpinner.d.ts.map

package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSpinner.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAQtD,CAAC"}

package/dist/types/modules/core/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Button";
+export * from "./ButtonGroup";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/core/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}

package/dist/types/modules/core/components/Icons/Bell.d.ts

@@ -0,0 +1,6 @@
+declare function BellIcon({ width, height }: {
+    width?: number | undefined;
+    height?: number | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export { BellIcon };
+//# sourceMappingURL=Bell.d.ts.map

package/dist/types/modules/core/components/Icons/Bell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bell.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"names":[],"mappings":"AAAA,iBAAS,QAAQ,CAAC,EAAE,KAAU,EAAE,MAAW,EAAE;;;CAAA,2CAmB5C;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/types/modules/core/components/Icons/CheckmarkCircle.d.ts

@@ -0,0 +1,3 @@
+declare const CheckmarkCircle: () => import("react/jsx-runtime").JSX.Element;
+export { CheckmarkCircle };
+//# sourceMappingURL=CheckmarkCircle.d.ts.map

package/dist/types/modules/core/components/Icons/CheckmarkCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckmarkCircle.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Icons/CheckmarkCircle.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe,+CAsBpB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/types/modules/core/components/Icons/ChevronDown.d.ts

@@ -0,0 +1,3 @@
+declare const ChevronDown: () => import("react/jsx-runtime").JSX.Element;
+export { ChevronDown };
+//# sourceMappingURL=ChevronDown.d.ts.map

package/dist/types/modules/core/components/Icons/ChevronDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronDown.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Icons/ChevronDown.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,+CAgBhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/types/modules/core/components/Icons/CloseCircle.d.ts

@@ -0,0 +1,3 @@
+declare const CloseCircle: () => import("react/jsx-runtime").JSX.Element;
+export { CloseCircle };
+//# sourceMappingURL=CloseCircle.d.ts.map

package/dist/types/modules/core/components/Icons/CloseCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseCircle.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,+CAahB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/types/modules/core/components/Icons/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Bell";
+export * from "./CheckmarkCircle";
+export * from "./ChevronDown";
+export * from "./CloseCircle";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/core/components/Icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/types/modules/core/components/Spinner/Spinner.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type Speed = "fast" | "slow" | "medium";
+export interface SpinnerProps {
+    color?: string;
+    speed?: Speed;
+    gap?: number;
+    thickness?: number;
+    size?: string;
+}
+export declare const Spinner: React.FC<SpinnerProps>;
+export {};
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/types/modules/core/components/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAQxC,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgD1C,CAAC"}

package/dist/types/modules/core/components/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Spinner";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/core/components/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/core/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/types/modules/core/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useOnBottomScroll } from "./useOnBottomScroll";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/core/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/modules/core/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/types/modules/core/hooks/useComponentVisible.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Options = {
+    closeOnClickOutside: boolean;
+};
+export default function useComponentVisible(isVisible: boolean, onClose: (event: Event) => void, options: Options): {
+    ref: import("react").RefObject<HTMLDivElement>;
+};
+export {};
+//# sourceMappingURL=useComponentVisible.d.ts.map

package/dist/types/modules/core/hooks/useComponentVisible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentVisible.d.ts","sourceRoot":"","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"names":[],"mappings":";AAOA,KAAK,OAAO,GAAG;IACb,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EAC/B,OAAO,EAAE,OAAO;;EAiCjB"}

package/dist/types/modules/core/hooks/useOnBottomScroll.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from "react";
+type OnBottomScrollOptions = {
+    ref: RefObject<HTMLDivElement | undefined>;
+    callback: () => void;
+    offset?: number;
+};
+declare function useOnBottomScroll(options: OnBottomScrollOptions): void;
+export default useOnBottomScroll;
+//# sourceMappingURL=useOnBottomScroll.d.ts.map

package/dist/types/modules/core/hooks/useOnBottomScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnBottomScroll.d.ts","sourceRoot":"","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAGnE,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAIF,iBAAS,iBAAiB,CAAC,OAAO,EAAE,qBAAqB,QAgCxD;AAED,eAAe,iBAAiB,CAAC"}

package/dist/types/modules/core/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./components/Button";
+export * from "./components/Icons";
+export * from "./components/Spinner";
+export * from "./hooks";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC"}

package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const EmptyFeed: React.FC;
+//# sourceMappingURL=EmptyFeed.d.ts.map

package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyFeed.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAY7B,CAAC"}

package/dist/types/modules/feed/components/EmptyFeed/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./EmptyFeed";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/feed/components/EmptyFeed/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/EmptyFeed/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts

@@ -0,0 +1,8 @@
+import { FeedItem } from "@knocklabs/client";
+import React from "react";
+export interface ArchiveButtonProps {
+    item: FeedItem;
+}
+declare const ArchiveButton: React.FC<ArchiveButtonProps>;
+export { ArchiveButton };
+//# sourceMappingURL=ArchiveButton.d.ts.map

package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchiveButton.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuC/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/types/modules/feed/components/NotificationCell/Avatar.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface AvatarProps {
+    name: string;
+    src?: string | null;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/types/modules/feed/components/NotificationCell/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmBxC,CAAC"}

package/dist/types/modules/feed/components/NotificationCell/NotificationCell.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import { FeedItem } from "@knocklabs/client";
+export interface NotificationCellProps {
+    item: FeedItem;
+    onItemClick?: (item: FeedItem) => void;
+    avatar?: ReactNode;
+    children?: ReactNode;
+    archiveButton?: ReactNode;
+}
+export declare const NotificationCell: React.ForwardRefExoticComponent<NotificationCellProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=NotificationCell.d.ts.map

package/dist/types/modules/feed/components/NotificationCell/NotificationCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCell.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAClD,OAAO,EAAgB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAU3D,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAMD,eAAO,MAAM,gBAAgB,8FAuF3B,CAAC"}