@knocklabs/react 0.7.16 → 0.7.18

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

@@ -0,0 +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 aria-hidden />\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;AAGE,SAAA,gBAAAiB,EAAA,cAAC,YACC,WAAW,8CAA8Cd,CAAS,IAClE,UAAUU,MAAgB,GAC1B,SAASG,GACT,MAAK,YAEJX,EAAE,eAAe,mCACjBgB,GAAgB,EAAA,eAAW,GAAA,CAAA,CAC9B;AAEJ;"}

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

@@ -0,0 +1,63 @@
+import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
+import { FilterStatus as I, useKnockFeed as R, useFeedSettings as B, useTranslations 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 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(z, null),
+  renderItem: _ = O,
+  onNotificationClick: g,
+  onNotificationButtonClick: E,
+  onMarkAllAsReadClick: b,
+  initialFilterStatus: r = I.All,
+  header: N,
+  renderHeader: S = T
+}) => {
+  const [a, m] = x(r), {
+    feedClient: n,
+    useFeedStore: h,
+    colorMode: c
+  } = R(), {
+    settings: i
+  } = B(n), {
+    t: F
+  } = q(), {
+    pageInfo: l,
+    items: d,
+    networkStatus: o
+  } = h(), u = K(null);
+  p(() => {
+    m(r);
+  }, [r]), p(() => {
+    n.fetch({
+      status: a
+    });
+  }, [n, a]);
+  const v = d.length === 0, s = C(o), w = H(() => {
+    !s && l.after && n.fetchNextPage();
+  }, [s, l, n]);
+  return P({
+    ref: u,
+    callback: w,
+    offset: 70
+  }), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${c}` }, N || S({
+    setFilterStatus: m,
+    filterStatus: a,
+    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: 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
+};
+//# 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, 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/NotificationFeed/NotificationFeedHeader.mjs

@@ -0,0 +1,18 @@
+import { FilterStatus as a, useTranslations as c } from "@knocklabs/react-core";
+import e from "react";
+import { Dropdown as l } from "./Dropdown.mjs";
+import { MarkAsRead as m } from "./MarkAsRead.mjs";
+const s = [a.All, a.Unread, a.Read], u = ({
+  onMarkAllAsReadClick: r,
+  filterStatus: o,
+  setFilterStatus: i
+}) => {
+  const {
+    t: n
+  } = c();
+  return /* @__PURE__ */ e.createElement("header", { className: "rnf-notification-feed__header" }, /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__selector" }, /* @__PURE__ */ e.createElement("span", { className: "rnf-notification-feed__type" }, n("notifications")), /* @__PURE__ */ e.createElement(l, { value: o, onChange: (t) => i(t.target.value) }, s.map((t) => /* @__PURE__ */ e.createElement("option", { key: t, value: t }, n(t))))), /* @__PURE__ */ e.createElement(m, { onClick: r }));
+};
+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 { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\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 as FilterStatus)}\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","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB,CAC5BC,EAAaC,KACbD,EAAaE,QACbF,EAAaG,IAAI,GAGNC,IAAgEA,CAAC;AAAA,EAC5EC,sBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,YAAO,WAAU,gCAAA,mCACf,OAAI,EAAA,WAAU,kCACb,GAAAA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,iCACbF,EAAE,eAAe,CACpB,GACAE,gBAAAA,EAAA,cAACC,KACC,OAAOL,GACP,UAAWM,CAAAA,MAAML,EAAgBK,EAAEC,OAAOC,KAAqB,EAAA,GAE9Df,EAAsBgB,IAAKT,CAAAA,MACzBI,gBAAAA,EAAA,cAAA,UAAA,EAAO,KAAKJ,GAAc,OAAOA,EAAAA,GAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,GACCI,gBAAAA,EAAA,cAAAM,GAAA,EAAW,SAASX,EAAqB,CAAA,CAC5C;AAEJ;"}

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

@@ -0,0 +1,9 @@
+import t from "react";
+/* empty css            */
+const i = ({
+  children: e
+}) => /* @__PURE__ */ t.createElement("div", { className: "rnf-feed-provider" }, e);
+export {
+  i as NotificationFeedContainer
+};
+//# sourceMappingURL=NotificationFeedContainer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeedContainer.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode } from \"react\";\n\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: FunctionComponent<{\n  children?: ReactNode | undefined;\n}> = ({ children }) => <div className=\"rnf-feed-provider\">{children}</div>;\n"],"names":["NotificationFeedContainer","children","React"],"mappings":";;AAIO,MAAMA,IAERA,CAAC;AAAA,EAAEC,UAAAA;AAAS,MAAOC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oBAAA,GAAqBD,CAAS;"}

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

@@ -0,0 +1,63 @@
+import { useTranslations as y, useKnockFeed as _ } from "@knocklabs/react-core";
+import { createPopper as E } from "@popperjs/core";
+import n, { useEffect as c } from "react";
+import F from "../../../core/hooks/useComponentVisible.mjs";
+import { NotificationFeed as N } from "../NotificationFeed/NotificationFeed.mjs";
+import "../NotificationFeed/NotificationFeedHeader.mjs";
+/* empty css                              */
+/* empty css            */
+const x = ({
+  store: e,
+  feedClient: t
+}) => {
+  e.metadata.unseen_count > 0 && t.markAllAsSeen();
+}, K = ({
+  isVisible: e,
+  onOpen: t = x,
+  onClose: p,
+  buttonRef: r,
+  closeOnClickOutside: s = !0,
+  placement: i = "bottom-end",
+  ...m
+}) => {
+  const {
+    t: d
+  } = y(), {
+    colorMode: l,
+    feedClient: f,
+    useFeedStore: u
+  } = _(), a = u(), {
+    ref: o
+  } = F(e, p, {
+    closeOnClickOutside: s
+  });
+  return c(() => {
+    e && t && t({
+      store: a,
+      feedClient: f
+    });
+  }, [e, t, a, f]), c(() => {
+    if (r.current && o.current) {
+      const v = E(r.current, o.current, {
+        strategy: "fixed",
+        placement: i,
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset: [0, 8]
+          }
+        }]
+      });
+      return () => {
+        v.destroy();
+      };
+    }
+  }, [r, o, i]), /* @__PURE__ */ n.createElement("div", { className: `rnf-notification-feed-popover rnf-notification-feed-popover--${l}`, style: {
+    visibility: e ? "visible" : "hidden",
+    opacity: e ? 1 : 0
+  }, ref: o, role: "dialog", "aria-label": d("notifications"), tabIndex: -1 }, /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-feed-popover__inner" }, /* @__PURE__ */ n.createElement(N, { ...m })));
+};
+export {
+  K 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 { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\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 | null>;\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 { t } = useTranslations();\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n    closeOnClickOutside,\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  useEffect(() => {\n    if (buttonRef.current && popperRef.current) {\n      const popperInstance = createPopper(\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      // Cleanup\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [buttonRef, popperRef, placement]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      role=\"dialog\"\n      aria-label={t(\"notifications\")}\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","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","useEffect","current","popperInstance","createPopper","strategy","modifiers","name","options","offset","destroy","visibility","opacity","React","NotificationFeed"],"mappings":";;;;;;;;AAeA,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,GAAAA;AAAAA,MAAMC,EAAgB,GACxB;AAAA,IAAEC,WAAAA;AAAAA,IAAWd,YAAAA;AAAAA,IAAYe,cAAAA;AAAAA,MAAiBC,EAAa,GACvDjB,IAAQgB,EAAa,GAErB;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EAAoBd,GAAWE,GAAS;AAAA,IACjEE,qBAAAA;AAAAA,EAAAA,CACD;AAEDW,SAAAA,EAAU,MAAM;AAGd,IAAIf,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,GAEzCoB,EAAU,MAAM;AACVZ,QAAAA,EAAUa,WAAWH,EAAUG,SAAS;AAC1C,YAAMC,IAAiBC,EACrBf,EAAUa,SACVH,EAAUG,SACV;AAAA,QACEG,UAAU;AAAA,QACVd,WAAAA;AAAAA,QACAe,WAAW,CACT;AAAA,UACEC,MAAM;AAAA,UACNC,SAAS;AAAA,YACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,UAAA;AAAA,QAEhB,CAAA;AAAA,MAAA,CAGP;AAGA,aAAO,MAAM;AACXN,QAAAA,EAAeO,QAAQ;AAAA,MACzB;AAAA,IAAA;AAAA,EAED,GAAA,CAACrB,GAAWU,GAAWR,CAAS,CAAC,mCAGjC,OACC,EAAA,WAAW,gEAAgEI,CAAS,IACpF,OAAO;AAAA,IACLgB,YAAYzB,IAAY,YAAY;AAAA,IACpC0B,SAAS1B,IAAY,IAAI;AAAA,EAC3B,GACA,KAAKa,GACL,MAAK,UACL,cAAYN,EAAE,eAAe,GAC7B,UAAU,MAEToB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,0CACbA,gBAAAA,EAAA,cAACC,KAAiB,GAAItB,EAAAA,CAAU,CAClC,CACF;AAEJ;"}

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

@@ -0,0 +1,18 @@
+import { useKnockFeed as i } from "@knocklabs/react-core";
+import t from "react";
+import { BellIcon as a } from "../../../core/components/Icons/Bell.mjs";
+import { UnseenBadge as c } from "../UnseenBadge/UnseenBadge.mjs";
+/* empty css            */
+const p = t.forwardRef(({
+  onClick: o,
+  badgeCountType: e
+}, n) => {
+  const {
+    colorMode: r
+  } = i();
+  return /* @__PURE__ */ t.createElement("button", { className: `rnf-notification-icon-button rnf-notification-icon-button--${r}`, "aria-label": "Open notification feed", ref: n, onClick: o }, /* @__PURE__ */ t.createElement(a, { "aria-hidden": !0 }), /* @__PURE__ */ t.createElement(c, { badgeCountType: e }));
+});
+export {
+  p 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 { 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      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon aria-hidden />\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,cAAW,0BACX,KAAAD,GACA,SAAAF,KAEAF,gBAAAA,EAAA,cAACO,KAAS,eAAW,GAAA,CAAA,GACpBP,gBAAAA,EAAA,cAAAQ,GAAA,EAAY,gBAAAL,EAA+B,CAAA,CAC9C;AAEJ,CAAC;"}

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

@@ -0,0 +1,25 @@
+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":
+      return e.total_count;
+    case "unread":
+      return e.unread_count;
+    case "unseen":
+      return e.unseen_count;
+  }
+}
+const m = ({
+  badgeCountType: n = "unseen"
+}) => {
+  const {
+    useFeedStore: e
+  } = a(), t = e((r) => s(n, r.metadata));
+  return t !== 0 ? /* @__PURE__ */ u.createElement("div", { className: "rnf-unseen-badge" }, /* @__PURE__ */ u.createElement("span", { className: "rnf-unseen-badge__count" }, o(t))) : null;
+};
+export {
+  m 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 { FeedMetadata } from \"@knocklabs/client\";\nimport { formatBadgeCount, useKnockFeed } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\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","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAc;AAAA,IACpB,KAAK;AACH,aAAOC,EAASC;AAAAA,IAClB,KAAK;AACH,aAAOD,EAASE;AAAAA,IAClB,KAAK;AACH,aAAOF,EAASG;AAAAA,EAAAA;AAEtB;AAEO,MAAMC,IAA0CA,CAAC;AAAA,EACtDL,gBAAAA,IAAiB;AACnB,MAAM;AACE,QAAA;AAAA,IAAEM,cAAAA;AAAAA,MAAiBC,EAAa,GAChCC,IAAkBF,EAAcG,CAAAA,MACpCV,EAAiBC,GAAgBS,EAAMR,QAAQ,CACjD;AAEA,SAAOO,MAAoB,IACxBE,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBACbA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,0BACbC,GAAAA,EAAiBH,CAAe,CACnC,CACF,IACE;AACN;"}

package/dist/esm/modules/guide/components/Banner/Banner.mjs

@@ -0,0 +1,133 @@
+import { useGuide as g } from "@knocklabs/react-core";
+import i from "clsx";
+import t from "react";
+import { maybeNavigateToUrlWithDelay as N } from "../helpers.mjs";
+/* empty css            */
+const f = "banner", s = ({
+  children: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner", n), ...a }, e);
+s.displayName = "BannerView.Root";
+const m = ({
+  children: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__message", n), ...a }, e);
+m.displayName = "BannerView.Content";
+const d = ({
+  title: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__title", n), ...a }, e);
+d.displayName = "BannerView.Title";
+const u = ({
+  body: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__body", n), dangerouslySetInnerHTML: {
+  __html: e
+}, ...a });
+u.displayName = "BannerView.Body";
+const y = ({
+  children: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__actions", n), ...a }, e);
+y.displayName = "BannerView.Actions";
+const _ = ({
+  text: e,
+  action: n,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__action", a), ...r }, e);
+_.displayName = "BannerView.PrimaryButton";
+const b = ({
+  text: e,
+  action: n,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__action knock-guide-banner__action--secondary", a), ...r }, e);
+b.displayName = "BannerView.SecondaryButton";
+const p = ({
+  className: e,
+  ...n
+}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__close", e), ...n }, /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ t.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ t.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ t.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
+p.displayName = "BannerView.DismissButton";
+const k = ({
+  content: e,
+  colorMode: n = "light",
+  onDismiss: a,
+  onButtonClick: r
+}) => /* @__PURE__ */ t.createElement(s, { "data-knock-color-mode": n }, /* @__PURE__ */ t.createElement(m, null, /* @__PURE__ */ t.createElement(d, { title: e.title }), /* @__PURE__ */ t.createElement(u, { body: e.body })), /* @__PURE__ */ t.createElement(y, null, e.secondary_button && /* @__PURE__ */ t.createElement(b, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (c) => {
+  if (r) {
+    const {
+      text: l,
+      action: o
+    } = e.secondary_button;
+    r(c, {
+      name: "secondary_button",
+      text: l,
+      action: o
+    });
+  }
+} }), e.primary_button && /* @__PURE__ */ t.createElement(_, { text: e.primary_button.text, action: e.primary_button.action, onClick: (c) => {
+  if (r) {
+    const {
+      text: l,
+      action: o
+    } = e.primary_button;
+    r(c, {
+      name: "primary_button",
+      text: l,
+      action: o
+    });
+  }
+} }), e.dismissible && /* @__PURE__ */ t.createElement(p, { onClick: a })));
+k.displayName = "BannerView.Default";
+const B = ({
+  guideKey: e,
+  onButtonClick: n
+}) => {
+  const {
+    guide: a,
+    step: r,
+    colorMode: c
+  } = g({
+    key: e,
+    type: f
+  });
+  return t.useEffect(() => {
+    r && r.markAsSeen();
+  }, [r]), !a || !r ? null : /* @__PURE__ */ t.createElement(k, { content: r.content, colorMode: c, onDismiss: () => r.markAsArchived(), onButtonClick: (l, o) => {
+    const E = {
+      ...o,
+      type: "button_click"
+    };
+    return r.markAsInteracted({
+      metadata: E
+    }), n ? n(l, {
+      button: o,
+      step: r,
+      guide: a
+    }) : N(o.action);
+  } });
+};
+B.displayName = "Banner";
+const w = {};
+Object.assign(w, {
+  Default: k,
+  Root: s,
+  Content: m,
+  Title: d,
+  Body: u,
+  Actions: y,
+  PrimaryButton: _,
+  SecondaryButton: b,
+  DismissButton: p
+});
+export {
+  B as Banner,
+  w as BannerView
+};
+//# sourceMappingURL=Banner.mjs.map

package/dist/esm/modules/guide/components/Banner/Banner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.mjs","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport { ButtonContent, TargetButton, TargetButtonWithGuide } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-banner__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\"knock-guide-banner__action\", className)}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-banner__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as BannerContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}

package/dist/esm/modules/guide/components/Card/Card.mjs

@@ -0,0 +1,170 @@
+import { useGuide as C } from "@knocklabs/react-core";
+import c from "clsx";
+import a from "react";
+import { isValidHttpUrl as h, maybeNavigateToUrlWithDelay as V } from "../helpers.mjs";
+/* empty css            */
+const v = "card", o = ({
+  children: e,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card", t), ...r }, e);
+o.displayName = "CardView.Root";
+const u = ({
+  children: e,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__message", t), ...r }, e);
+u.displayName = "CardView.Content";
+const f = ({
+  children: e,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__header", t), ...r }, e);
+f.displayName = "CardView.Header";
+const w = ({
+  headline: e,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__headline", t), ...r }, e);
+w.displayName = "CardView.Headline";
+const y = ({
+  title: e,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__title", t), ...r }, e);
+y.displayName = "CardView.Title";
+const _ = ({
+  body: e,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__body", t), dangerouslySetInnerHTML: {
+  __html: e
+}, ...r });
+_.displayName = "CardView.Body";
+const k = ({
+  children: e,
+  className: t,
+  alt: r,
+  ...i
+}) => /* @__PURE__ */ a.createElement("img", { className: c("knock-guide-card__img", t), alt: r || "", ...i }, e);
+k.displayName = "CardView.Img";
+const p = ({
+  children: e,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ a.createElement("div", { className: c("knock-guide-card__actions", t), ...r }, e);
+p.displayName = "CardView.Actions";
+const g = ({
+  text: e,
+  action: t,
+  className: r,
+  ...i
+}) => /* @__PURE__ */ a.createElement("button", { className: c("knock-guide-card__action", r), ...i }, e);
+g.displayName = "CardView.PrimaryButton";
+const E = ({
+  text: e,
+  action: t,
+  className: r,
+  ...i
+}) => /* @__PURE__ */ a.createElement("button", { className: c("knock-guide-card__action knock-guide-card__action--secondary", r), ...i }, e);
+E.displayName = "CardView.SecondaryButton";
+const N = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ a.createElement("button", { className: c("knock-guide-card__close", e), ...t }, /* @__PURE__ */ a.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ a.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ a.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ a.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
+N.displayName = "CardView.DismissButton";
+const b = ({
+  content: e,
+  colorMode: t = "light",
+  onDismiss: r,
+  onButtonClick: i,
+  onImageClick: n
+}) => /* @__PURE__ */ a.createElement(o, { "data-knock-color-mode": t }, /* @__PURE__ */ a.createElement(u, null, /* @__PURE__ */ a.createElement(f, null, /* @__PURE__ */ a.createElement(w, { headline: e.headline }), e.dismissible && /* @__PURE__ */ a.createElement(N, { onClick: r })), /* @__PURE__ */ a.createElement(y, { title: e.title }), /* @__PURE__ */ a.createElement(_, { body: e.body })), e.image && /* @__PURE__ */ a.createElement("a", { href: h(e.image.action) ? e.image.action : void 0, target: "_blank" }, /* @__PURE__ */ a.createElement(k, { src: e.image.url, alt: e.image.alt, onClick: (d) => {
+  n && n(d, e.image);
+} })), (e.primary_button || e.secondary_button) && /* @__PURE__ */ a.createElement(p, null, e.primary_button && /* @__PURE__ */ a.createElement(g, { text: e.primary_button.text, action: e.primary_button.action, onClick: (d) => {
+  if (i) {
+    const {
+      text: s,
+      action: l
+    } = e.primary_button;
+    i(d, {
+      name: "primary_button",
+      text: s,
+      action: l
+    });
+  }
+} }), e.secondary_button && /* @__PURE__ */ a.createElement(E, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (d) => {
+  if (i) {
+    const {
+      text: s,
+      action: l
+    } = e.secondary_button;
+    i(d, {
+      name: "secondary_button",
+      text: s,
+      action: l
+    });
+  }
+} })));
+b.displayName = "CardView.Default";
+const x = ({
+  guideKey: e,
+  onButtonClick: t,
+  onImageClick: r
+}) => {
+  const {
+    guide: i,
+    step: n,
+    colorMode: d
+  } = C({
+    key: e,
+    type: v
+  });
+  return a.useEffect(() => {
+    n && n.markAsSeen();
+  }, [n]), !i || !n ? null : /* @__PURE__ */ a.createElement(b, { content: n.content, colorMode: d, onDismiss: () => n.markAsArchived(), onButtonClick: (s, l) => {
+    const m = {
+      ...l,
+      type: "button_click"
+    };
+    return n.markAsInteracted({
+      metadata: m
+    }), t ? t(s, {
+      button: l,
+      step: n,
+      guide: i
+    }) : V(l.action);
+  }, onImageClick: (s, l) => {
+    const m = {
+      ...l,
+      type: "image_click"
+    };
+    if (n.markAsInteracted({
+      metadata: m
+    }), r)
+      return r(s, {
+        image: l,
+        step: n,
+        guide: i
+      });
+  } });
+};
+x.displayName = "Card";
+const A = {};
+Object.assign(A, {
+  Default: b,
+  Root: o,
+  Content: u,
+  Title: y,
+  Body: _,
+  Img: k,
+  Actions: p,
+  PrimaryButton: g,
+  SecondaryButton: E,
+  DismissButton: N
+});
+export {
+  x as Card,
+  A as CardView
+};
+//# sourceMappingURL=Card.mjs.map