@knocklabs/react 0.11.0 → 0.11.2

package/dist/esm/index.mjs

@@ -1,107 +1,117 @@
 "use client";
 /* empty css           */
-import { Button as r } from "./modules/core/components/Button/Button.mjs";
-import { ButtonGroup as a } from "./modules/core/components/Button/ButtonGroup.mjs";
-import { BellIcon as i } from "./modules/core/components/Icons/Bell.mjs";
-import { CheckmarkCircle as u } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
-import { ChevronDown as f } from "./modules/core/components/Icons/ChevronDown.mjs";
-import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.mjs";
-import { Spinner as x } from "./modules/core/components/Spinner/Spinner.mjs";
-import { default as k } from "./modules/core/hooks/useOnBottomScroll.mjs";
-import { EmptyFeed as K } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
-import { NotificationCell as h } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
-import { Avatar as v } from "./modules/feed/components/NotificationCell/Avatar.mjs";
-import { NotificationFeed as P } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
-import { NotificationFeedHeader as N } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
-import { MarkAsRead as b } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
-import { NotificationFeedContainer as w } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
-import { NotificationFeedPopover as I } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
-import { NotificationIconButton as O } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
-import { UnseenBadge as D } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
-import { Banner as H, BannerView as R } from "./modules/guide/components/Banner/Banner.mjs";
-import { Card as j, CardView as q } from "./modules/guide/components/Card/Card.mjs";
-import { GuideToolbar as J } from "./modules/guide/components/GuideToolbar/GuideToolbar.mjs";
-import { Modal as Q, ModalView as W } from "./modules/guide/components/Modal/Modal.mjs";
-import { KnockGuideProvider as Y } from "./modules/guide/providers/KnockGuideProvider.mjs";
-import { MsTeamsAuthButton as _ } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
-import { MsTeamsAuthContainer as ee } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
-import { default as te } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
-import { SlackAuthButton as ne } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
-import { SlackAuthContainer as se } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
-import { SlackChannelCombobox as me } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
-import { FilterStatus as ce, I18nContext as fe, KnockFeedProvider as le, KnockGuideContext as de, KnockI18nProvider as pe, KnockMsTeamsProvider as xe, KnockProvider as Ce, KnockSlackProvider as ke, feedProviderKey as Se, formatBadgeCount as Ke, formatTimestamp as Te, locales as he, msTeamsProviderKey as Me, renderNodeOrFallback as ve, slackProviderKey as Be, toSentenceCase as Pe, useAuthenticatedKnockClient as Fe, useConnectedMsTeamsChannels as Ne, useConnectedSlackChannels as Ae, useCreateNotificationStore as be, useFeedSettings as Ge, useGuide as we, useGuideContext as ye, useGuides as Ie, useKnockClient as ge, useKnockFeed as Oe, useKnockMsTeamsClient as Ve, useKnockSlackClient as De, useMsTeamsAuth as Ee, useMsTeamsChannels as He, useMsTeamsConnectionStatus as Re, useMsTeamsTeams as Ue, useNotificationStore as je, useNotifications as qe, usePreferences as ze, useSlackAuth as Je, useSlackChannels as Le, useSlackConnectionStatus as Qe, useStableOptions as We, useTranslations as Xe } from "@knocklabs/react-core";
+import { Button as d } from "./modules/core/components/Button/Button.mjs";
+import { ButtonGroup as C } from "./modules/core/components/Button/ButtonGroup.mjs";
+import { BellIcon as S } from "./modules/core/components/Icons/Bell.mjs";
+import { CheckmarkCircle as K } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
+import { ChevronDown as M } from "./modules/core/components/Icons/ChevronDown.mjs";
+import { CloseCircle as B } from "./modules/core/components/Icons/CloseCircle.mjs";
+import { Spinner as A } from "./modules/core/components/Spinner/Spinner.mjs";
+import { default as N } from "./modules/core/hooks/useOnBottomScroll.mjs";
+import { EmptyFeed as G } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
+import { NotificationCell as w } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
+import { Avatar as I } from "./modules/feed/components/NotificationCell/Avatar.mjs";
+import { NotificationFeed as V } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
+import { NotificationFeedHeader as E } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
+import { MarkAsRead as L } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
+import { NotificationFeedContainer as U } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
+import { NotificationFeedPopover as q } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
+import { NotificationIconButton as J } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
+import { UnseenBadge as W } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
+import { Banner as Y, BannerView as Z } from "./modules/guide/components/Banner/Banner.mjs";
+import { Card as $, CardView as ee } from "./modules/guide/components/Card/Card.mjs";
+import "react";
+import { FilterStatus as te, I18nContext as re, KnockFeedProvider as ne, KnockGuideContext as ae, KnockI18nProvider as ie, KnockMsTeamsProvider as se, KnockProvider as me, KnockSlackProvider as ue, feedProviderKey as ce, formatBadgeCount as pe, formatTimestamp as fe, getBadgeAriaLabel as le, locales as de, msTeamsProviderKey as xe, renderNodeOrFallback as Ce, slackProviderKey as ke, toSentenceCase as Se, useAuthenticatedKnockClient as he, useConnectedMsTeamsChannels as Ke, useConnectedSlackChannels as Te, useCreateNotificationStore as Me, useFeedSettings as ve, useGuide as Be, useGuideContext as Pe, useGuides as Ae, useKnockClient as Fe, useKnockFeed as Ne, useKnockMsTeamsClient as be, useKnockSlackClient as Ge, useMsTeamsAuth as ge, useMsTeamsChannels as we, useMsTeamsConnectionStatus as ye, useMsTeamsTeams as Ie, useNotificationStore as Oe, useNotifications as Ve, usePreferences as De, useSlackAuth as Ee, useSlackChannels as He, useSlackConnectionStatus as Le, useStableOptions as Re, useTranslations as Ue } from "@knocklabs/react-core";
+import "@telegraph/button";
+import "@telegraph/layout";
+import "@telegraph/tag";
+import "@telegraph/typography";
+import "lucide-react";
+/* empty css                                             */
+import "@telegraph/tooltip";
+import "@radix-ui/react-hover-card";
+import "@knocklabs/client";
+import "@telegraph/select";
+import { Modal as qe, ModalView as ze } from "./modules/guide/components/Modal/Modal.mjs";
+import { KnockGuideProvider as Qe } from "./modules/guide/providers/KnockGuideProvider.mjs";
+import { MsTeamsAuthButton as Xe } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
+import { MsTeamsAuthContainer as Ze } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
+import { default as $e } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
+import { SlackAuthButton as oo } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
+import { SlackAuthContainer as ro } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
+import { SlackChannelCombobox as ao } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
 export {
-  v as Avatar,
-  H as Banner,
-  R as BannerView,
-  i as BellIcon,
-  r as Button,
-  a as ButtonGroup,
-  j as Card,
-  q as CardView,
-  u as CheckmarkCircle,
-  f as ChevronDown,
-  d as CloseCircle,
-  K as EmptyFeed,
-  ce as FilterStatus,
-  fe as I18nContext,
-  le as KnockFeedProvider,
-  de as KnockGuideContext,
-  Y as KnockGuideProvider,
-  J as KnockGuideToolbar,
-  pe as KnockI18nProvider,
-  xe as KnockMsTeamsProvider,
-  Ce as KnockProvider,
-  ke as KnockSlackProvider,
-  b as MarkAsRead,
-  Q as Modal,
-  W as ModalView,
-  _ as MsTeamsAuthButton,
-  ee as MsTeamsAuthContainer,
-  te as MsTeamsChannelCombobox,
-  h as NotificationCell,
-  P as NotificationFeed,
-  w as NotificationFeedContainer,
-  N as NotificationFeedHeader,
-  I as NotificationFeedPopover,
-  O as NotificationIconButton,
-  ne as SlackAuthButton,
-  se as SlackAuthContainer,
-  me as SlackChannelCombobox,
-  x as Spinner,
-  D as UnseenBadge,
-  Se as feedProviderKey,
-  Ke as formatBadgeCount,
-  Te as formatTimestamp,
-  he as locales,
-  Me as msTeamsProviderKey,
-  ve as renderNodeOrFallback,
-  Be as slackProviderKey,
-  Pe as toSentenceCase,
-  Fe as useAuthenticatedKnockClient,
-  Ne as useConnectedMsTeamsChannels,
-  Ae as useConnectedSlackChannels,
-  be as useCreateNotificationStore,
-  Ge as useFeedSettings,
-  we as useGuide,
-  ye as useGuideContext,
-  Ie as useGuides,
-  ge as useKnockClient,
-  Oe as useKnockFeed,
-  Ve as useKnockMsTeamsClient,
-  De as useKnockSlackClient,
-  Ee as useMsTeamsAuth,
-  He as useMsTeamsChannels,
-  Re as useMsTeamsConnectionStatus,
-  Ue as useMsTeamsTeams,
-  je as useNotificationStore,
-  qe as useNotifications,
-  k as useOnBottomScroll,
-  ze as usePreferences,
-  Je as useSlackAuth,
-  Le as useSlackChannels,
-  Qe as useSlackConnectionStatus,
-  We as useStableOptions,
-  Xe as useTranslations
+  I as Avatar,
+  Y as Banner,
+  Z as BannerView,
+  S as BellIcon,
+  d as Button,
+  C as ButtonGroup,
+  $ as Card,
+  ee as CardView,
+  K as CheckmarkCircle,
+  M as ChevronDown,
+  B as CloseCircle,
+  G as EmptyFeed,
+  te as FilterStatus,
+  re as I18nContext,
+  ne as KnockFeedProvider,
+  ae as KnockGuideContext,
+  Qe as KnockGuideProvider,
+  ie as KnockI18nProvider,
+  se as KnockMsTeamsProvider,
+  me as KnockProvider,
+  ue as KnockSlackProvider,
+  L as MarkAsRead,
+  qe as Modal,
+  ze as ModalView,
+  Xe as MsTeamsAuthButton,
+  Ze as MsTeamsAuthContainer,
+  $e as MsTeamsChannelCombobox,
+  w as NotificationCell,
+  V as NotificationFeed,
+  U as NotificationFeedContainer,
+  E as NotificationFeedHeader,
+  q as NotificationFeedPopover,
+  J as NotificationIconButton,
+  oo as SlackAuthButton,
+  ro as SlackAuthContainer,
+  ao as SlackChannelCombobox,
+  A as Spinner,
+  W as UnseenBadge,
+  ce as feedProviderKey,
+  pe as formatBadgeCount,
+  fe as formatTimestamp,
+  le as getBadgeAriaLabel,
+  de as locales,
+  xe as msTeamsProviderKey,
+  Ce as renderNodeOrFallback,
+  ke as slackProviderKey,
+  Se as toSentenceCase,
+  he as useAuthenticatedKnockClient,
+  Ke as useConnectedMsTeamsChannels,
+  Te as useConnectedSlackChannels,
+  Me as useCreateNotificationStore,
+  ve as useFeedSettings,
+  Be as useGuide,
+  Pe as useGuideContext,
+  Ae as useGuides,
+  Fe as useKnockClient,
+  Ne as useKnockFeed,
+  be as useKnockMsTeamsClient,
+  Ge as useKnockSlackClient,
+  ge as useMsTeamsAuth,
+  we as useMsTeamsChannels,
+  ye as useMsTeamsConnectionStatus,
+  Ie as useMsTeamsTeams,
+  Oe as useNotificationStore,
+  Ve as useNotifications,
+  N as useOnBottomScroll,
+  De as usePreferences,
+  Ee as useSlackAuth,
+  He as useSlackChannels,
+  Le as useSlackConnectionStatus,
+  Re as useStableOptions,
+  Ue as useTranslations
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      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;"}
+{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { type BadgeCountType, useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { 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

@@ -1,7 +1,7 @@
-import { useKnockFeed as a, formatBadgeCount as o } from "@knocklabs/react-core";
-import u from "react";
+import { useKnockFeed as u, getBadgeAriaLabel as s, formatBadgeCount as o } from "@knocklabs/react-core";
+import a from "react";
 /* empty css            */
-function s(n, e) {
+function c(n, e) {
   switch (n) {
     case "all":
       return e.total_count;
@@ -16,8 +16,8 @@ const m = ({
 }) => {
   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;
+  } = u(), t = e((r) => c(n, r.metadata));
+  return t !== 0 ? /* @__PURE__ */ a.createElement("div", { className: "rnf-unseen-badge", role: "status", "aria-label": s(t, n) }, /* @__PURE__ */ a.createElement("span", { className: "rnf-unseen-badge__count", "aria-hidden": "true" }, o(t))) : null;
 };
 export {
   m as UnseenBadge

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

@@ -1 +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;"}
+{"version":3,"file":"UnseenBadge.mjs","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport {\n  type BadgeCountType,\n  formatBadgeCount,\n  getBadgeAriaLabel,\n  useKnockFeed,\n} from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n): number {\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\n      className=\"rnf-unseen-badge\"\n      role=\"status\"\n      aria-label={getBadgeAriaLabel(badgeCountValue, badgeCountType)}\n    >\n      <span className=\"rnf-unseen-badge__count\" aria-hidden=\"true\">\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","getBadgeAriaLabel","formatBadgeCount"],"mappings":";;;AAeA,SAASA,EACPC,GACAC,GACQ;AACR,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;AAEOO,SAAAA,MAAoB,IACxBE,gBAAAA,EAAA,cAAA,OAAA,EACC,WAAU,oBACV,MAAK,UACL,cAAYC,EAAkBH,GAAiBR,CAAc,EAE7D,GAAAU,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,2BAA0B,eAAY,UACnDE,EAAiBJ,CAAe,CACnC,CACF,IACE;AACN;"}

package/dist/esm/modules/guide/components/Toolbar/KnockButton.mjs

@@ -0,0 +1,18 @@
+import t from "react";
+import { Button as o } from "@telegraph/button";
+import { TOOLBAR_Z_INDEX as a } from "./shared.mjs";
+/* empty css            */
+const p = ({
+  onClick: e
+}) => /* @__PURE__ */ t.createElement(o, { onClick: e, position: "fixed", top: "4", right: "4", bg: "surface-2", shadow: "3", rounded: "3", w: "10", h: "10", variant: "soft", "data-tgph-appearance": "dark", "aria-label": "Expand guide toolbar", style: {
+  zIndex: a
+} }, /* @__PURE__ */ t.createElement("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)"
+} }, /* @__PURE__ */ t.createElement("path", { d: "M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z", fill: "#EDEEEF" }), /* @__PURE__ */ t.createElement("path", { d: "M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z", fill: "#FF573A" })));
+export {
+  p as KnockButton
+};
+//# sourceMappingURL=KnockButton.mjs.map

package/dist/esm/modules/guide/components/Toolbar/KnockButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"KnockButton.mjs","sources":["../../../../../../src/modules/guide/components/Toolbar/KnockButton.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\n\nimport { TOOLBAR_Z_INDEX } from \"./shared\";\nimport \"./styles.css\";\n\ntype Props = {\n  onClick: () => void;\n};\n\nexport const KnockButton = ({ onClick }: Props) => {\n  return (\n    <Button\n      onClick={onClick}\n      position=\"fixed\"\n      top=\"4\"\n      right=\"4\"\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      w=\"10\"\n      h=\"10\"\n      variant=\"soft\"\n      data-tgph-appearance=\"dark\"\n      aria-label=\"Expand guide toolbar\"\n      style={{ zIndex: TOOLBAR_Z_INDEX }}\n    >\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          position: \"absolute\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n        }}\n      >\n        <path\n          d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n          fill=\"#EDEEEF\"\n        />\n        <path\n          d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n          fill=\"#FF573A\"\n        />\n      </svg>\n    </Button>\n  );\n};\n"],"names":["KnockButton","onClick","React","Button","zIndex","TOOLBAR_Z_INDEX","position","top","left","transform"],"mappings":";;;;AASO,MAAMA,IAAcA,CAAC;AAAA,EAAEC,SAAAA;AAAe,MAEzCC,gBAAAA,EAAA,cAACC,GACC,EAAA,SAAAF,GACA,UAAS,SACT,KAAI,KACJ,OAAM,KACN,IAAG,aACH,QAAO,KACP,SAAQ,KACR,GAAE,MACF,GAAE,MACF,SAAQ,QACR,wBAAqB,QACrB,cAAW,wBACX,OAAO;AAAA,EAAEG,QAAQC;AAAAA,EAEjB,GAAAH,gBAAAA,EAAA,cAAC,OACC,EAAA,OAAM,MACN,QAAO,MACP,SAAQ,aACR,MAAK,QACL,OAAM,8BACN,OAAO;AAAA,EACLI,UAAU;AAAA,EACVC,KAAK;AAAA,EACLC,MAAM;AAAA,EACNC,WAAW;AAAA,KAGbP,gBAAAA,EAAA,cAAC,QACC,EAAA,GAAE,2JACF,MAAK,UAAS,CAAA,GAEhBA,gBAAAA,EAAA,cAAC,UACC,GAAE,wKACF,MAAK,UAAS,CAAA,CAElB,CACF;"}

package/dist/esm/modules/guide/components/Toolbar/V1/V1.mjs

@@ -0,0 +1,42 @@
+import e, { useState as d } from "react";
+import { useGuideContext as m, useStore as p } from "@knocklabs/react-core";
+import { Button as n } from "@telegraph/button";
+import { Stack as a } from "@telegraph/layout";
+import { Tag as f } from "@telegraph/tag";
+import { Text as u } from "@telegraph/typography";
+import { Wrench as g, Undo2 as h, Minimize2 as x } from "lucide-react";
+import { KnockButton as E } from "../KnockButton.mjs";
+import { TOOLBAR_Z_INDEX as C } from "../shared.mjs";
+/* empty css             */
+const D = () => {
+  const [o, l] = d(!1), {
+    client: r
+  } = m(), t = p(r.store, (s) => s.debug);
+  if (!(t != null && t.forcedGuideKey))
+    return null;
+  const c = () => {
+    r.exitDebugMode();
+  }, i = () => {
+    l(!o);
+  };
+  return o ? /* @__PURE__ */ e.createElement(E, { onClick: i }) : /* @__PURE__ */ e.createElement(a, { gap: "2", align: "center", position: "fixed", top: "4", right: "4", backgroundColor: "surface-2", bg: "surface-2", shadow: "3", rounded: "3", py: "2", px: "3", "data-tgph-appearance": "dark", style: {
+    zIndex: C
+  } }, /* @__PURE__ */ e.createElement(a, { gap: "2", align: "center", direction: "row" }, /* @__PURE__ */ e.createElement(f, { color: "green", variant: "soft", icon: {
+    icon: g,
+    "aria-hidden": !0
+  } }, "Debug"), /* @__PURE__ */ e.createElement(u, { as: "div", size: "1", weight: "medium", w: "full", maxWidth: "40", style: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  } }, t.forcedGuideKey), /* @__PURE__ */ e.createElement(n, { onClick: c, size: "1", variant: "soft", trailingIcon: {
+    icon: h,
+    "aria-hidden": !0
+  } }, "Exit"), /* @__PURE__ */ e.createElement(n, { onClick: i, size: "1", variant: "soft", leadingIcon: {
+    icon: x,
+    alt: "Collapse guide toolbar"
+  } })));
+};
+export {
+  D as V1
+};
+//# sourceMappingURL=V1.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V1/V1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"V1.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V1/V1.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2, Wrench } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nexport const V1 = () => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const { client } = useGuideContext();\n  const debugState = useStore(client.store, (state) => state.debug);\n\n  if (!debugState?.forcedGuideKey) {\n    return null;\n  }\n\n  const handleExit = () => {\n    client.exitDebugMode();\n  };\n\n  const handleToggleCollapse = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  if (isCollapsed) {\n    return <KnockButton onClick={handleToggleCollapse} />;\n  }\n\n  return (\n    <Stack\n      gap=\"2\"\n      align=\"center\"\n      position=\"fixed\"\n      top=\"4\"\n      right=\"4\"\n      backgroundColor=\"surface-2\"\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      py=\"2\"\n      px=\"3\"\n      data-tgph-appearance=\"dark\"\n      style={{ zIndex: TOOLBAR_Z_INDEX }}\n    >\n      <Stack gap=\"2\" align=\"center\" direction=\"row\">\n        <Tag\n          color=\"green\"\n          variant=\"soft\"\n          icon={{ icon: Wrench, \"aria-hidden\": true }}\n        >\n          Debug\n        </Tag>\n\n        <Text\n          as=\"div\"\n          size=\"1\"\n          weight=\"medium\"\n          w=\"full\"\n          maxWidth=\"40\"\n          style={{\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {debugState.forcedGuideKey}\n        </Text>\n\n        <Button\n          onClick={handleExit}\n          size=\"1\"\n          variant=\"soft\"\n          trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n        >\n          Exit\n        </Button>\n\n        <Button\n          onClick={handleToggleCollapse}\n          size=\"1\"\n          variant=\"soft\"\n          leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["V1","isCollapsed","setIsCollapsed","useState","client","useGuideContext","debugState","useStore","store","state","debug","forcedGuideKey","handleExit","exitDebugMode","handleToggleCollapse","React","KnockButton","Stack","zIndex","TOOLBAR_Z_INDEX","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Button","Undo2","Minimize2","alt"],"mappings":";;;;;;;;;;AAYO,MAAMA,IAAKA,MAAM;AACtB,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9C;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAC7BC,IAAaC,EAASH,EAAOI,OAAQC,CAAAA,MAAUA,EAAMC,KAAK;AAE5D,MAAA,EAACJ,KAAAA,QAAAA,EAAYK;AACR,WAAA;AAGT,QAAMC,IAAaA,MAAM;AACvBR,IAAAA,EAAOS,cAAc;AAAA,EACvB,GAEMC,IAAuBA,MAAM;AACjCZ,IAAAA,EAAe,CAACD,CAAW;AAAA,EAC7B;AAEA,SAAIA,IACKc,gBAAAA,EAAA,cAACC,GAAY,EAAA,SAASF,EAAwB,CAAA,IAIrDC,gBAAAA,EAAA,cAACE,GACC,EAAA,KAAI,KACJ,OAAM,UACN,UAAS,SACT,KAAI,KACJ,OAAM,KACN,iBAAgB,aAChB,IAAG,aACH,QAAO,KACP,SAAQ,KACR,IAAG,KACH,IAAG,KACH,wBAAqB,QACrB,OAAO;AAAA,IAAEC,QAAQC;AAAAA,EAAAA,KAEjBJ,gBAAAA,EAAA,cAACE,GAAM,EAAA,KAAI,KAAI,OAAM,UAAS,WAAU,MAAA,mCACrCG,GACC,EAAA,OAAM,SACN,SAAQ,QACR,MAAM;AAAA,IAAEC,MAAMC;AAAAA,IAAQ,eAAe;AAAA,EAAA,EAAO,GAAA,OAG9C,GAEAP,gBAAAA,EAAA,cAACQ,KACC,IAAG,OACH,MAAK,KACL,QAAO,UACP,GAAE,QACF,UAAS,MACT,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EAGbpB,EAAAA,GAAAA,EAAWK,cACd,GAECI,gBAAAA,EAAA,cAAAY,GAAA,EACC,SAASf,GACT,MAAK,KACL,SAAQ,QACR,cAAc;AAAA,IAAES,MAAMO;AAAAA,IAAO,eAAe;AAAA,EAAK,EAAA,GAAE,MAGrD,GAECb,gBAAAA,EAAA,cAAAY,GAAA,EACC,SAASb,GACT,MAAK,KACL,SAAQ,QACR,aAAa;AAAA,IAAEO,MAAMQ;AAAAA,IAAWC,KAAK;AAAA,EAAyB,EAAA,CAAE,CAEpE,CACF;AAEJ;"}

package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs

@@ -0,0 +1,27 @@
+import { useGuideContext as m, useStore as p } from "@knocklabs/react-core";
+import { Stack as r, Box as s } from "@telegraph/layout";
+import { Text as t } from "@telegraph/typography";
+import { ChevronDown as d, ChevronRight as g } from "lucide-react";
+import * as e from "react";
+const z = () => {
+  const {
+    client: a
+  } = m(), [l, i] = e.useState(!1), n = p(a.store, (o) => o.guideGroups[0]), c = (n == null ? void 0 : n.display_interval) ?? null;
+  return /* @__PURE__ */ e.createElement(r, { direction: "column", borderTop: "px" }, /* @__PURE__ */ e.createElement(r, { h: "5", px: "2", bg: "gray-3", align: "center", gap: "1", style: {
+    cursor: "pointer"
+  }, onClick: () => i((o) => !o) }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", weight: "medium" }, "Details"), l ? /* @__PURE__ */ e.createElement(d, { size: 12 }) : /* @__PURE__ */ e.createElement(g, { size: 12 })), l && /* @__PURE__ */ e.createElement(r, { direction: "column" }, /* @__PURE__ */ e.createElement(r, { direction: "column", gap: "0_5", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", weight: "medium" }, "Throttle"), /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, c === null ? "-" : `Every ${c}s`)), /* @__PURE__ */ e.createElement(r, { direction: "column", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", weight: "medium" }, "Target params"), /* @__PURE__ */ e.createElement(r, { direction: "column", gap: "0_5", mt: "1" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", color: "gray" }, "Tenant"), /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, a.targetParams.tenant ? /* @__PURE__ */ e.createElement(s, { rounded: "2", overflow: "auto", backgroundColor: "gray-2", border: "px", style: {
+    maxHeight: "200px"
+  } }, /* @__PURE__ */ e.createElement("pre", { style: {
+    fontSize: "11px",
+    margin: 0
+  } }, /* @__PURE__ */ e.createElement("code", null, a.targetParams.tenant))) : /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, "-"))), /* @__PURE__ */ e.createElement(r, { direction: "column", gap: "0_5" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", color: "gray" }, "Data"), a.targetParams.data ? /* @__PURE__ */ e.createElement(s, { rounded: "2", overflow: "auto", backgroundColor: "gray-2", border: "px", style: {
+    maxHeight: "200px"
+  } }, /* @__PURE__ */ e.createElement("pre", { style: {
+    fontSize: "11px",
+    margin: 0
+  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(a.targetParams.data, null, 2)))) : /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, "-")))));
+};
+export {
+  z as GuideContextDetails
+};
+//# sourceMappingURL=GuideContextDetails.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuideContextDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]);\n  const displayInterval = defaultGroup?.display_interval ?? null;\n\n  return (\n    <Stack direction=\"column\" borderTop=\"px\">\n      <Stack\n        h=\"5\"\n        px=\"2\"\n        bg=\"gray-3\"\n        align=\"center\"\n        gap=\"1\"\n        style={{ cursor: \"pointer\" }}\n        onClick={() => setIsExpanded((prev) => !prev)}\n      >\n        <Text as=\"span\" size=\"0\" weight=\"medium\">\n          Details\n        </Text>\n        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}\n      </Stack>\n\n      {isExpanded && (\n        <Stack direction=\"column\">\n          <Stack direction=\"column\" gap=\"0_5\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Throttle\n            </Text>\n            <Text as=\"code\" size=\"0\">\n              {displayInterval === null ? \"-\" : `Every ${displayInterval}s`}\n            </Text>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Target params\n            </Text>\n            <Stack direction=\"column\" gap=\"0_5\" mt=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Tenant\n              </Text>\n              <Text as=\"code\" size=\"0\">\n                {client.targetParams.tenant ? (\n                  <Box\n                    rounded=\"2\"\n                    overflow=\"auto\"\n                    backgroundColor=\"gray-2\"\n                    border=\"px\"\n                    style={{ maxHeight: \"200px\" }}\n                  >\n                    <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                      <code>{client.targetParams.tenant}</code>\n                    </pre>\n                  </Box>\n                ) : (\n                  <Text as=\"code\" size=\"0\">\n                    -\n                  </Text>\n                )}\n              </Text>\n            </Stack>\n\n            <Stack direction=\"column\" gap=\"0_5\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Data\n              </Text>\n              {client.targetParams.data ? (\n                <Box\n                  rounded=\"2\"\n                  overflow=\"auto\"\n                  backgroundColor=\"gray-2\"\n                  border=\"px\"\n                  style={{ maxHeight: \"200px\" }}\n                >\n                  <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                    <code>\n                      {JSON.stringify(client.targetParams.data, null, 2)}\n                    </code>\n                  </pre>\n                </Box>\n              ) : (\n                <Text as=\"code\" size=\"0\">\n                  -\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      )}\n    </Stack>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","isExpanded","setIsExpanded","React","useState","defaultGroup","useStore","store","state","guideGroups","displayInterval","display_interval","Stack","cursor","prev","Text","ChevronDown","ChevronRight","targetParams","tenant","Box","maxHeight","fontSize","margin","data","JSON","stringify"],"mappings":"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"}

package/dist/esm/modules/guide/components/Toolbar/V2/GuideHoverCard.mjs

@@ -0,0 +1,27 @@
+import * as t from "@radix-ui/react-hover-card";
+import { Stack as n, Box as l } from "@telegraph/layout";
+import * as e from "react";
+import { isUnknownGuide as i } from "./useInspectGuideClientStore.mjs";
+const f = ({
+  children: r,
+  guide: o
+}) => {
+  if (i(o))
+    return /* @__PURE__ */ e.createElement(n, { align: "center" }, r);
+  const {
+    annotation: c,
+    activation_location_rules: m,
+    priority: s,
+    ...a
+  } = o;
+  return /* @__PURE__ */ e.createElement(t.Root, null, /* @__PURE__ */ e.createElement(t.Trigger, null, /* @__PURE__ */ e.createElement(n, { align: "center" }, r)), /* @__PURE__ */ e.createElement(t.Portal, null, /* @__PURE__ */ e.createElement(t.Content, { sideOffset: 16, side: "left" }, /* @__PURE__ */ e.createElement(l, { px: "2", shadow: "2", rounded: "3", border: "px", overflow: "auto", backgroundColor: "surface-2", style: {
+    width: "450px",
+    maxHeight: "600px"
+  } }, /* @__PURE__ */ e.createElement("pre", { style: {
+    fontSize: "11px"
+  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(a, null, 2)))), /* @__PURE__ */ e.createElement(t.Arrow, null))));
+};
+export {
+  f as GuideHoverCard
+};
+//# sourceMappingURL=GuideHoverCard.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuideHoverCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuideHoverCard.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx"],"sourcesContent":["import * as HoverCard from \"@radix-ui/react-hover-card\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport * as React from \"react\";\n\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\ntype Props = {\n  guide: AnnotatedGuide | UnknownGuide;\n};\n\nexport const GuideHoverCard = ({\n  children,\n  guide,\n}: React.PropsWithChildren<Props>) => {\n  if (isUnknownGuide(guide)) {\n    return <Stack align=\"center\">{children}</Stack>;\n  }\n\n  // Prune out internal or legacy fields.\n  const {\n    annotation: _annotation,\n    activation_location_rules: _activation_location_rules,\n    priority: _priority,\n    ...rest\n  } = guide;\n\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger>\n        <Stack align=\"center\">{children}</Stack>\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content sideOffset={16} side=\"left\">\n          <Box\n            px=\"2\"\n            shadow=\"2\"\n            rounded=\"3\"\n            border=\"px\"\n            overflow=\"auto\"\n            backgroundColor=\"surface-2\"\n            style={{\n              width: \"450px\",\n              maxHeight: \"600px\",\n            }}\n          >\n            <pre\n              style={{\n                fontSize: \"11px\",\n              }}\n            >\n              <code>{JSON.stringify(rest, null, 2)}</code>\n            </pre>\n          </Box>\n          <HoverCard.Arrow />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n};\n"],"names":["GuideHoverCard","children","guide","isUnknownGuide","React","Stack","annotation","_annotation","activation_location_rules","_activation_location_rules","priority","_priority","rest","HoverCard","Box","width","maxHeight","fontSize","JSON","stringify"],"mappings":";;;;AAcO,MAAMA,IAAiBA,CAAC;AAAA,EAC7BC,UAAAA;AAAAA,EACAC,OAAAA;AAC8B,MAAM;AAChCC,MAAAA,EAAeD,CAAK;AACtB,WAAQ,gBAAAE,EAAA,cAAAC,GAAA,EAAM,OAAM,SAAA,GAAUJ,CAAS;AAInC,QAAA;AAAA,IACJK,YAAYC;AAAAA,IACZC,2BAA2BC;AAAAA,IAC3BC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDV;AAEJ,yCACGW,EAAU,MAAV,MACE,gBAAAT,EAAA,cAAAS,EAAU,SAAV,MACC,gBAAAT,EAAA,cAACC,GAAM,EAAA,OAAM,YAAUJ,CAAS,CAClC,GACC,gBAAAG,EAAA,cAAAS,EAAU,QAAV,MACC,gBAAAT,EAAA,cAACS,EAAU,SAAV,EAAkB,YAAY,IAAI,MAAK,UACtC,gBAAAT,EAAA,cAACU,KACC,IAAG,KACH,QAAO,KACP,SAAQ,KACR,QAAO,MACP,UAAS,QACT,iBAAgB,aAChB,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,WAAW;AAAA,EACb,EAAA,GAEC,gBAAAZ,EAAA,cAAA,OAAA,EACC,OAAO;AAAA,IACLa,UAAU;AAAA,EAAA,KAGX,gBAAAb,EAAA,cAAA,QAAA,MAAMc,KAAKC,UAAUP,GAAM,MAAM,CAAC,CAAE,CACvC,CACF,GACC,gBAAAR,EAAA,cAAAS,EAAU,OAAV,IAAe,CAClB,CACF,CACF;AAEJ;"}

package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs

@@ -0,0 +1,37 @@
+import { Button as n } from "@telegraph/button";
+import { Stack as a, Box as l } from "@telegraph/layout";
+import { Tag as s } from "@telegraph/tag";
+import { Tooltip as r } from "@telegraph/tooltip";
+import { Text as c } from "@telegraph/typography";
+import { Code2 as m, LocateFixed as d, UserCircle2 as p, Eye as u, CheckCircle2 as b, CircleDashed as h } from "lucide-react";
+import * as e from "react";
+import { GuideHoverCard as E } from "./GuideHoverCard.mjs";
+import { isUnknownGuide as o } from "./useInspectGuideClientStore.mjs";
+const f = ({
+  children: t
+}) => /* @__PURE__ */ e.createElement(a, { h: "7", px: "2", borderTop: "px", justify: "space-between", align: "center" }, t), I = ({
+  guide: t,
+  orderIndex: i
+}) => /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(E, { guide: t }, /* @__PURE__ */ e.createElement(a, { h: "6", justify: "flex-start", align: "center", gap: "2" }, /* @__PURE__ */ e.createElement(s, { size: "0", variant: "soft", color: t.bypass_global_group_limit ? "blue" : "default" }, i + 1), /* @__PURE__ */ e.createElement(c, { as: "code", size: "1" }, t.key))), /* @__PURE__ */ e.createElement(a, { justify: "flex-end" }, !o(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(a, { gap: "1" }, /* @__PURE__ */ e.createElement(r, { label: t.annotation.selectable.status === "returned" ? "This guide was queried and can display" : t.annotation.selectable.status === "queried" ? "This guide was queried but cannot display" : t.annotation.selectable.status === "throttled" ? "This guide was queried and can display but is throttled currently" : "No component is present in the current location to display this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.selectable.status === "returned" ? "green" : t.annotation.selectable.status === "queried" ? "gray" : t.annotation.selectable.status === "throttled" ? "yellow" : "red", leadingIcon: {
+  icon: m,
+  alt: "Render"
+} })), /* @__PURE__ */ e.createElement(r, { label: t.annotation.activatable.status ? "This guide can be activated at the current location" : "This guide cannot be activated at the current location" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.activatable.status ? "green" : "red", leadingIcon: {
+  icon: d,
+  alt: "Target"
+} }))), /* @__PURE__ */ e.createElement(a, { px: "2", align: "center" }, /* @__PURE__ */ e.createElement(l, { h: "3", borderLeft: "px", borderColor: "gray-6" }))), /* @__PURE__ */ e.createElement(a, { gap: "1" }, !o(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(r, { label: t.annotation.targetable.status ? "This user is being targeted" : t.annotation.targetable.message }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.targetable.status ? "green" : "red", leadingIcon: {
+  icon: p,
+  alt: "Target"
+} })), /* @__PURE__ */ e.createElement(r, { label: t.annotation.archived.status ? "User has already dismissed this guide" : "User has not dismissed this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.archived.status ? "red" : "green", leadingIcon: {
+  icon: u,
+  alt: "Not archived"
+} }))), /* @__PURE__ */ e.createElement(r, { label: o(t) ? "This guide has never been committed and published yet" : t.active ? "This guide is active" : "This guide is not active" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.active ? "green" : "red", leadingIcon: t.active ? {
+  icon: b,
+  alt: "Active"
+} : {
+  icon: h,
+  alt: "Inactive"
+} })))));
+export {
+  I as GuideRow
+};
+//# sourceMappingURL=GuideRow.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuideRow.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text as=\"code\" size=\"1\">\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","GuideHoverCard","Tag","bypass_global_group_limit","Text","key","isUnknownGuide","Tooltip","annotation","selectable","status","Button","icon","Code2","alt","activatable","LocateFixed","Box","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"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"}

package/dist/esm/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.mjs

@@ -0,0 +1,17 @@
+import e from "react";
+import { Select as l } from "@telegraph/select";
+import { TOOLBAR_Z_INDEX as a } from "../shared.mjs";
+const p = ({
+  value: i,
+  onChange: n
+}) => /* @__PURE__ */ e.createElement(l.Root, { size: "1", value: i, onValueChange: (t) => {
+  t && n(t);
+}, contentProps: {
+  style: {
+    zIndex: a
+  }
+} }, /* @__PURE__ */ e.createElement(l.Option, { size: "1", value: "only-displaying" }, "Displaying on current page"), /* @__PURE__ */ e.createElement(l.Option, { size: "1", value: "only-displayable" }, "Displayable on current page"), /* @__PURE__ */ e.createElement(l.Option, { size: "1", value: "all-eligible" }, "All eligible guides for user"), /* @__PURE__ */ e.createElement(l.Option, { size: "1", value: "all-guides" }, "All existing guides"));
+export {
+  p as GuidesListDisplaySelect
+};
+//# sourceMappingURL=GuidesListDisplaySelect.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuidesListDisplaySelect.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx"],"sourcesContent":["import { Select } from \"@telegraph/select\";\n\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\n\nexport type DisplayOption =\n  | \"only-displaying\"\n  | \"only-displayable\"\n  | \"all-eligible\"\n  | \"all-guides\";\n\ntype Props = {\n  value: DisplayOption;\n  onChange: (option: DisplayOption) => void;\n};\n\nexport const GuidesListDisplaySelect = ({ value, onChange }: Props) => {\n  return (\n    <Select.Root\n      size=\"1\"\n      value={value}\n      onValueChange={(value) => {\n        if (!value) return;\n        onChange(value as DisplayOption);\n      }}\n      contentProps={{\n        style: { zIndex: TOOLBAR_Z_INDEX },\n      }}\n    >\n      <Select.Option size=\"1\" value=\"only-displaying\">\n        Displaying on current page\n      </Select.Option>\n      <Select.Option size=\"1\" value=\"only-displayable\">\n        Displayable on current page\n      </Select.Option>\n      <Select.Option size=\"1\" value=\"all-eligible\">\n        All eligible guides for user\n      </Select.Option>\n      <Select.Option size=\"1\" value=\"all-guides\">\n        All existing guides\n      </Select.Option>\n    </Select.Root>\n  );\n};\n"],"names":["GuidesListDisplaySelect","value","onChange","React","Select","style","zIndex","TOOLBAR_Z_INDEX"],"mappings":";;;AAeO,MAAMA,IAA0BA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,UAAAA;AAAgB,MAE7DC,gBAAAA,EAAA,cAACC,EAAO,MAAP,EACC,MAAK,KACL,OAAAH,GACA,eAAgBA,CAAAA,MAAU;AACxB,EAAKA,KACLC,EAASD,CAAsB;GAEjC,cAAc;AAAA,EACZI,OAAO;AAAA,IAAEC,QAAQC;AAAAA,EAAAA;AAAgB,KAGlCJ,gBAAAA,EAAA,cAAAC,EAAO,QAAP,EAAc,MAAK,KAAI,OAAM,kBAAA,GAAiB,4BAE/C,mCACCA,EAAO,QAAP,EAAc,MAAK,KAAI,OAAM,sBAAkB,6BAEhD,GACAD,gBAAAA,EAAA,cAACC,EAAO,QAAP,EAAc,MAAK,KAAI,OAAM,kBAAc,8BAE5C,GACCD,gBAAAA,EAAA,cAAAC,EAAO,QAAP,EAAc,MAAK,KAAI,OAAM,gBAAY,qBAE1C,CACF;"}

package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs

@@ -0,0 +1,54 @@
+import { useGuideContext as p } from "@knocklabs/react-core";
+import { Button as d } from "@telegraph/button";
+import { Box as a, Stack as m } from "@telegraph/layout";
+import { Undo2 as f, Minimize2 as b } from "lucide-react";
+import e from "react";
+import { KnockButton as E } from "../KnockButton.mjs";
+import { TOOLBAR_Z_INDEX as y } from "../shared.mjs";
+/* empty css             */
+import { GuideContextDetails as g } from "./GuideContextDetails.mjs";
+import { GuideRow as x } from "./GuideRow.mjs";
+import { GuidesListDisplaySelect as C } from "./GuidesListDisplaySelect.mjs";
+import { detectToolbarParam as w } from "./helpers.mjs";
+import { useInspectGuideClientStore as D } from "./useInspectGuideClientStore.mjs";
+const k = ({
+  guides: r,
+  displayOption: i
+}) => r.map((o, n) => {
+  const {
+    isEligible: l,
+    isQualified: u,
+    selectable: s
+  } = o.annotation, t = l && u, c = t && s.status === "returned";
+  return i === "only-displaying" && !c || i === "only-displayable" && !t || i === "all-eligible" && !l ? null : /* @__PURE__ */ e.createElement(x, { key: o.key, guide: o, orderIndex: n });
+}), j = () => {
+  const {
+    client: r
+  } = p(), [i, o] = e.useState("only-displayable"), [n, l] = e.useState(w()), [u, s] = e.useState(!0);
+  e.useEffect(() => {
+    if (n)
+      return r.setDebug(), () => {
+        r.unsetDebug();
+      };
+  }, [n, r]);
+  const t = D();
+  return t ? /* @__PURE__ */ e.createElement(a, { position: "fixed", top: "4", right: "4", style: {
+    zIndex: y
+  } }, u ? /* @__PURE__ */ e.createElement(E, { onClick: () => s(!1) }) : /* @__PURE__ */ e.createElement(m, { direction: "column", backgroundColor: "surface-2", shadow: "2", rounded: "3", border: "px", overflow: "hidden", style: {
+    width: "400px"
+  } }, /* @__PURE__ */ e.createElement(m, { w: "full", p: "2", justify: "space-between", direction: "row", style: {
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ e.createElement(a, { style: {
+    width: "220px"
+  } }, /* @__PURE__ */ e.createElement(C, { value: i, onChange: (c) => o(c) })), /* @__PURE__ */ e.createElement(m, { gap: "2" }, /* @__PURE__ */ e.createElement(d, { onClick: () => l(!1), size: "1", variant: "soft", trailingIcon: {
+    icon: f,
+    "aria-hidden": !0
+  } }, "Exit"), /* @__PURE__ */ e.createElement(d, { onClick: () => s(!0), size: "1", variant: "soft", leadingIcon: {
+    icon: b,
+    alt: "Collapse guide toolbar"
+  } }))), /* @__PURE__ */ e.createElement(a, { w: "full" }, t.error && /* @__PURE__ */ e.createElement(a, null, t.error), /* @__PURE__ */ e.createElement(g, null), /* @__PURE__ */ e.createElement(k, { guides: t.guides, displayOption: i })))) : null;
+};
+export {
+  j as V2
+};
+//# sourceMappingURL=V2.mjs.map