@knocklabs/react 0.11.4 → 0.11.5

package/dist/esm/index.mjs

@@ -1,117 +1,118 @@
 "use client";
 /* empty css           */
-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 { Button as x } from "./modules/core/components/Button/Button.mjs";
+import { ButtonGroup as k } from "./modules/core/components/Button/ButtonGroup.mjs";
+import { BellIcon as h } from "./modules/core/components/Icons/Bell.mjs";
+import { CheckmarkCircle as T } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
+import { ChevronDown as v } from "./modules/core/components/Icons/ChevronDown.mjs";
+import { CloseCircle as P } from "./modules/core/components/Icons/CloseCircle.mjs";
+import { Spinner as F } from "./modules/core/components/Spinner/Spinner.mjs";
+import { default as b } from "./modules/core/hooks/useOnBottomScroll.mjs";
+import { EmptyFeed as g } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
+import { NotificationCell as y } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
+import { Avatar as O } from "./modules/feed/components/NotificationCell/Avatar.mjs";
+import { NotificationFeed as D } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
+import { NotificationFeedHeader as H } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
+import { MarkAsRead as R } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
+import { NotificationFeedContainer as j } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
+import { NotificationFeedPopover as z } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
+import { NotificationIconButton as Q } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
+import { UnseenBadge as X } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
+import { Banner as Z, BannerView as _ } from "./modules/guide/components/Banner/Banner.mjs";
+import { Card as ee, CardView as oe } 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 { FilterStatus as re, I18nContext as ne, KnockFeedProvider as ie, KnockGuideContext as ae, KnockI18nProvider as se, KnockMsTeamsProvider as me, KnockProvider as ue, KnockSlackProvider as pe, feedProviderKey as ce, formatBadgeCount as fe, formatTimestamp as le, getBadgeAriaLabel as de, locales as xe, msTeamsProviderKey as Ce, renderNodeOrFallback as ke, slackProviderKey as Se, toSentenceCase as he, useAuthenticatedKnockClient as Ke, useConnectedMsTeamsChannels as Te, useConnectedSlackChannels as Me, useCreateNotificationStore as ve, useFeedSettings as Be, useGuide as Pe, useGuideContext as Ae, useGuides as Fe, useKnockClient as Ne, useKnockFeed as be, useKnockMsTeamsClient as Ge, useKnockSlackClient as ge, useMsTeamsAuth as we, useMsTeamsChannels as ye, useMsTeamsConnectionStatus as Ie, useMsTeamsTeams as Oe, useNotificationStore as Ve, useNotifications as De, usePreferences as Ee, useSlackAuth as He, useSlackChannels as Le, useSlackConnectionStatus as Re, useStableOptions as Ue, useTranslations as je } from "@knocklabs/react-core";
 import "@telegraph/button";
 import "@telegraph/layout";
 import "@telegraph/tag";
 import "@telegraph/typography";
 import "lucide-react";
 /* empty css                                             */
+import "@telegraph/icon";
 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 { Modal as ze, ModalView as Je } from "./modules/guide/components/Modal/Modal.mjs";
+import { KnockGuideProvider as We } from "./modules/guide/providers/KnockGuideProvider.mjs";
+import { MsTeamsAuthButton as Ye } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
+import { MsTeamsAuthContainer as _e } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
+import { default as eo } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
+import { SlackAuthButton as to } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
+import { SlackAuthContainer as no } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
 import { SlackChannelCombobox as ao } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
 export {
-  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,
+  O as Avatar,
+  Z as Banner,
+  _ as BannerView,
+  h as BellIcon,
+  x as Button,
+  k as ButtonGroup,
+  ee as Card,
+  oe as CardView,
+  T as CheckmarkCircle,
+  v as ChevronDown,
+  P as CloseCircle,
+  g as EmptyFeed,
+  re as FilterStatus,
+  ne as I18nContext,
+  ie 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,
+  We as KnockGuideProvider,
+  se as KnockI18nProvider,
+  me as KnockMsTeamsProvider,
+  ue as KnockProvider,
+  pe as KnockSlackProvider,
+  R as MarkAsRead,
+  ze as Modal,
+  Je as ModalView,
+  Ye as MsTeamsAuthButton,
+  _e as MsTeamsAuthContainer,
+  eo as MsTeamsChannelCombobox,
+  y as NotificationCell,
+  D as NotificationFeed,
+  j as NotificationFeedContainer,
+  H as NotificationFeedHeader,
+  z as NotificationFeedPopover,
+  Q as NotificationIconButton,
+  to as SlackAuthButton,
+  no as SlackAuthContainer,
   ao as SlackChannelCombobox,
-  A as Spinner,
-  W as UnseenBadge,
+  F as Spinner,
+  X 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
+  fe as formatBadgeCount,
+  le as formatTimestamp,
+  de as getBadgeAriaLabel,
+  xe as locales,
+  Ce as msTeamsProviderKey,
+  ke as renderNodeOrFallback,
+  Se as slackProviderKey,
+  he as toSentenceCase,
+  Ke as useAuthenticatedKnockClient,
+  Te as useConnectedMsTeamsChannels,
+  Me as useConnectedSlackChannels,
+  ve as useCreateNotificationStore,
+  Be as useFeedSettings,
+  Pe as useGuide,
+  Ae as useGuideContext,
+  Fe as useGuides,
+  Ne as useKnockClient,
+  be as useKnockFeed,
+  Ge as useKnockMsTeamsClient,
+  ge as useKnockSlackClient,
+  we as useMsTeamsAuth,
+  ye as useMsTeamsChannels,
+  Ie as useMsTeamsConnectionStatus,
+  Oe as useMsTeamsTeams,
+  Ve as useNotificationStore,
+  De as useNotifications,
+  b as useOnBottomScroll,
+  Ee as usePreferences,
+  He as useSlackAuth,
+  Le as useSlackChannels,
+  Re as useSlackConnectionStatus,
+  Ue as useStableOptions,
+  je 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/guide/components/Toolbar/KnockButton.mjs

@@ -1,18 +1,24 @@
 import t from "react";
-import { Button as o } from "@telegraph/button";
-import { TOOLBAR_Z_INDEX as a } from "./shared.mjs";
+import { Button as a } from "@telegraph/button";
+import { TOOLBAR_Z_INDEX as r } 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: {
+const s = ({
+  onClick: e,
+  positioned: o = !0
+}) => /* @__PURE__ */ t.createElement(a, { onClick: e, ...o && {
+  position: "fixed",
+  top: "4",
+  right: "4",
+  style: {
+    zIndex: r
+  }
+}, bg: "surface-2", shadow: "3", rounded: "3", w: "10", h: "10", variant: "soft", "data-tgph-appearance": "dark", "aria-label": "Expand guide toolbar" }, /* @__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
+  s as KnockButton
 };
 //# sourceMappingURL=KnockButton.mjs.map

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

@@ -1 +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;"}
+{"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  positioned?: boolean;\n};\n\nexport const KnockButton = ({ onClick, positioned = true }: Props) => {\n  return (\n    <Button\n      onClick={onClick}\n      {...(positioned && {\n        position: \"fixed\" as const,\n        top: \"4\" as const,\n        right: \"4\" as const,\n        style: { zIndex: TOOLBAR_Z_INDEX },\n      })}\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    >\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","positioned","React","Button","position","top","right","style","zIndex","TOOLBAR_Z_INDEX","left","transform"],"mappings":";;;;AAUO,MAAMA,IAAcA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,YAAAA,IAAa;AAAY,MAE3DC,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAAAH,GACKC,GAAAA,KAAc;AAAA,EACjBG,UAAU;AAAA,EACVC,KAAK;AAAA,EACLC,OAAO;AAAA,EACPC,OAAO;AAAA,IAAEC,QAAQC;AAAAA,EAAAA;AAAgB,GAEnC,IAAG,aACH,QAAO,KACP,SAAQ,KACR,GAAE,MACF,GAAE,MACF,SAAQ,QACR,wBAAqB,QACrB,cAAW,uBAEX,GAAAP,gBAAAA,EAAA,cAAC,OACC,EAAA,OAAM,MACN,QAAO,MACP,SAAQ,aACR,MAAK,QACL,OAAM,8BACN,OAAO;AAAA,EACLE,UAAU;AAAA,EACVC,KAAK;AAAA,EACLK,MAAM;AAAA,EACNC,WAAW;AAAA,KAGbT,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/V2/DragHandle.mjs

@@ -0,0 +1,20 @@
+import { Icon as o } from "@telegraph/icon";
+import { Box as a } from "@telegraph/layout";
+import { GripVertical as i } from "lucide-react";
+import r from "react";
+const n = 16, s = ({
+  onPointerDown: e,
+  isDragging: t
+}) => /* @__PURE__ */ r.createElement(a, { "data-tgph-appearance": "dark", onPointerDown: e, borderRadius: "2", position: "absolute", style: {
+  top: "9px",
+  right: `-${n}px`,
+  height: "24px",
+  cursor: t ? "grabbing" : "grab",
+  touchAction: "none",
+  userSelect: "none"
+} }, /* @__PURE__ */ r.createElement(o, { color: "gray", size: "1", icon: i, "aria-hidden": !0 }));
+export {
+  n as DRAG_HANDLE_OVERHANG,
+  s as DragHandle
+};
+//# sourceMappingURL=DragHandle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/DragHandle.tsx"],"sourcesContent":["import { Icon } from \"@telegraph/icon\";\nimport { Box } from \"@telegraph/layout\";\nimport { GripVertical } from \"lucide-react\";\nimport React from \"react\";\n\n// How far the drag handle protrudes beyond the toolbar's right edge (px)\nexport const DRAG_HANDLE_OVERHANG = 16;\n\ntype DragHandleProps = {\n  onPointerDown: (e: React.PointerEvent) => void;\n  isDragging: boolean;\n};\n\nexport const DragHandle = ({ onPointerDown, isDragging }: DragHandleProps) => {\n  return (\n    <Box\n      data-tgph-appearance=\"dark\"\n      onPointerDown={onPointerDown}\n      borderRadius=\"2\"\n      position=\"absolute\"\n      style={{\n        top: \"9px\",\n        right: `-${DRAG_HANDLE_OVERHANG}px`,\n        height: \"24px\",\n        cursor: isDragging ? \"grabbing\" : \"grab\",\n        touchAction: \"none\",\n        userSelect: \"none\",\n      }}\n    >\n      <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n    </Box>\n  );\n};\n"],"names":["DRAG_HANDLE_OVERHANG","DragHandle","onPointerDown","isDragging","React","Box","top","right","height","cursor","touchAction","userSelect","Icon","GripVertical"],"mappings":";;;;AAMO,MAAMA,IAAuB,IAOvBC,IAAaA,CAAC;AAAA,EAAEC,eAAAA;AAAAA,EAAeC,YAAAA;AAA4B,MAEpEC,gBAAAA,EAAA,cAACC,KACC,wBAAqB,QACrB,eAAAH,GACA,cAAa,KACb,UAAS,YACT,OAAO;AAAA,EACLI,KAAK;AAAA,EACLC,OAAO,IAAIP,CAAoB;AAAA,EAC/BQ,QAAQ;AAAA,EACRC,QAAQN,IAAa,aAAa;AAAA,EAClCO,aAAa;AAAA,EACbC,YAAY;AACd,EAAA,GAECP,gBAAAA,EAAA,cAAAQ,GAAA,EAAK,OAAM,QAAO,MAAK,KAAI,MAAMC,GAAc,eAAW,GAAA,CAAA,CAC7D;"}

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

@@ -1,27 +1,42 @@
-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 { useGuideContext as E, useStore as y } from "@knocklabs/react-core";
+import { Button as s } from "@telegraph/button";
+import { Icon as m } from "@telegraph/icon";
+import { Stack as t, Box as g } from "@telegraph/layout";
+import { Tooltip as p } from "@telegraph/tooltip";
+import { Text as n } from "@telegraph/typography";
+import { ChevronDown as f, ChevronRight as x, Info as d } from "lucide-react";
 import * as e from "react";
-const z = () => {
+const C = () => {
   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: {
+  } = E(), [l, u] = e.useState(!1), {
+    defaultGroup: o,
+    debugSettings: r
+  } = y(a.store, (i) => ({
+    defaultGroup: i.guideGroups[0],
+    debugSettings: i.debug || {}
+  })), c = (o == null ? void 0 : o.display_interval) ?? null;
+  return /* @__PURE__ */ e.createElement(t, { direction: "column", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { 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: {
+  }, onClick: () => u((i) => !i) }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "More"), l ? /* @__PURE__ */ e.createElement(f, { size: 12 }) : /* @__PURE__ */ e.createElement(x, { size: 12 })), l && /* @__PURE__ */ e.createElement(t, { direction: "column" }, /* @__PURE__ */ e.createElement(t, { align: "center", justify: "space-between", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { align: "center", gap: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "Client-only engagement"), /* @__PURE__ */ e.createElement(p, { label: "Contain engagement actions to the client side only while in preview without sending engagement events to the API" }, /* @__PURE__ */ e.createElement(m, { icon: d, size: "0", color: "gray", "aria-hidden": !0 }))), /* @__PURE__ */ e.createElement(s, { size: "0", variant: "soft", color: r.skipEngagementTracking ? "green" : "gray", onClick: () => a.setDebug({
+    ...r,
+    skipEngagementTracking: !r.skipEngagementTracking
+  }) }, r.skipEngagementTracking ? "On" : "Off")), /* @__PURE__ */ e.createElement(t, { direction: "column", py: "1", px: "2" }, /* @__PURE__ */ e.createElement(t, { align: "center", justify: "space-between" }, /* @__PURE__ */ e.createElement(t, { align: "center", gap: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "Suspend throttling"), /* @__PURE__ */ e.createElement(p, { label: "Suspend throttling during preview, and show next guide immediately" }, /* @__PURE__ */ e.createElement(m, { icon: d, size: "0", color: "gray", "aria-hidden": !0 }))), /* @__PURE__ */ e.createElement(s, { size: "0", variant: "soft", color: r.ignoreDisplayInterval ? "green" : "gray", onClick: () => a.setDebug({
+    ...r,
+    ignoreDisplayInterval: !r.ignoreDisplayInterval
+  }) }, r.ignoreDisplayInterval ? "On" : "Off")), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "0_5", py: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", color: "gray" }, "Throttle:", " ", r.ignoreDisplayInterval ? "(ignored)" : c === null ? "(none)" : `Every ${c}s`))), /* @__PURE__ */ e.createElement(t, { direction: "column", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "Target params"), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "0_5", mt: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", color: "gray" }, "Tenant"), /* @__PURE__ */ e.createElement(n, { as: "code", size: "0" }, a.targetParams.tenant ? /* @__PURE__ */ e.createElement(g, { 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: {
+  } }, /* @__PURE__ */ e.createElement("code", null, a.targetParams.tenant))) : /* @__PURE__ */ e.createElement(n, { as: "code", size: "0" }, "-"))), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "0_5" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", color: "gray" }, "Data"), a.targetParams.data ? /* @__PURE__ */ e.createElement(g, { 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" }, "-")))));
+  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(a.targetParams.data, null, 2)))) : /* @__PURE__ */ e.createElement(n, { as: "code", size: "0" }, "-")))));
 };
 export {
-  z as GuideContextDetails
+  C as GuideContextDetails
 };
 //# sourceMappingURL=GuideContextDetails.mjs.map

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

@@ -1 +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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"}
+{"version":3,"file":"GuideContextDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronDown, ChevronRight, Info } 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, debugSettings } = useStore(client.store, (state) => {\n    return {\n      defaultGroup: state.guideGroups[0],\n      debugSettings: state.debug || {},\n    };\n  });\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          More\n        </Text>\n        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}\n      </Stack>\n\n      {isExpanded && (\n        <Stack direction=\"column\">\n          <Stack\n            align=\"center\"\n            justify=\"space-between\"\n            py=\"1\"\n            px=\"2\"\n            borderTop=\"px\"\n          >\n            <Stack align=\"center\" gap=\"1\">\n              <Text as=\"span\" size=\"0\" weight=\"medium\">\n                Client-only engagement\n              </Text>\n              <Tooltip label=\"Contain engagement actions to the client side only while in preview without sending engagement events to the API\">\n                <Icon icon={Info} size=\"0\" color=\"gray\" aria-hidden />\n              </Tooltip>\n            </Stack>\n            <Button\n              size=\"0\"\n              variant=\"soft\"\n              color={debugSettings.skipEngagementTracking ? \"green\" : \"gray\"}\n              onClick={() =>\n                client.setDebug({\n                  ...debugSettings,\n                  skipEngagementTracking: !debugSettings.skipEngagementTracking,\n                })\n              }\n            >\n              {debugSettings.skipEngagementTracking ? \"On\" : \"Off\"}\n            </Button>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\">\n            <Stack align=\"center\" justify=\"space-between\">\n              <Stack align=\"center\" gap=\"1\">\n                <Text as=\"span\" size=\"0\" weight=\"medium\">\n                  Suspend throttling\n                </Text>\n                <Tooltip label=\"Suspend throttling during preview, and show next guide immediately\">\n                  <Icon icon={Info} size=\"0\" color=\"gray\" aria-hidden />\n                </Tooltip>\n              </Stack>\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color={debugSettings.ignoreDisplayInterval ? \"green\" : \"gray\"}\n                onClick={() =>\n                  client.setDebug({\n                    ...debugSettings,\n                    ignoreDisplayInterval: !debugSettings.ignoreDisplayInterval,\n                  })\n                }\n              >\n                {debugSettings.ignoreDisplayInterval ? \"On\" : \"Off\"}\n              </Button>\n            </Stack>\n            <Stack direction=\"row\" gap=\"0_5\" py=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Throttle:{\" \"}\n                {debugSettings.ignoreDisplayInterval\n                  ? \"(ignored)\"\n                  : displayInterval === null\n                    ? \"(none)\"\n                    : `Every ${displayInterval}s`}\n              </Text>\n            </Stack>\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","debugSettings","useStore","store","state","guideGroups","debug","displayInterval","display_interval","Stack","cursor","prev","Text","ChevronDown","ChevronRight","Tooltip","Icon","Info","Button","skipEngagementTracking","setDebug","ignoreDisplayInterval","targetParams","tenant","Box","maxHeight","fontSize","margin","data","JSON","stringify"],"mappings":"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"}

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

@@ -1,27 +1,57 @@
 import * as t from "@radix-ui/react-hover-card";
-import { Stack as n, Box as l } from "@telegraph/layout";
+import { Button as a } from "@telegraph/button";
+import { Stack as o, Box as i } from "@telegraph/layout";
+import { RotateCcw as c, ExternalLink as m } from "lucide-react";
 import * as e from "react";
-import { isUnknownGuide as i } from "./useInspectGuideClientStore.mjs";
-const f = ({
-  children: r,
-  guide: o
+import { isUnknownGuide as s } from "./useInspectGuideClientStore.mjs";
+const v = ({
+  children: n,
+  guide: r
 }) => {
-  if (i(o))
-    return /* @__PURE__ */ e.createElement(n, { align: "center" }, r);
+  if (s(r))
+    return /* @__PURE__ */ e.createElement(o, { align: "center" }, n);
   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: {
+    annotation: d,
+    activation_location_rules: f,
+    priority: u,
+    ...l
+  } = r;
+  return /* @__PURE__ */ e.createElement(t.Root, null, /* @__PURE__ */ e.createElement(t.Trigger, null, /* @__PURE__ */ e.createElement(o, { align: "center" }, n)), /* @__PURE__ */ e.createElement(t.Portal, null, /* @__PURE__ */ e.createElement(t.Content, { sideOffset: 16, side: "left" }, /* @__PURE__ */ e.createElement(i, { px: "2", shadow: "2", rounded: "3", border: "px", overflow: "auto", backgroundColor: "surface-2", style: {
     width: "450px",
     maxHeight: "600px"
-  } }, /* @__PURE__ */ e.createElement("pre", { style: {
+  } }, /* @__PURE__ */ e.createElement(o, { justify: "flex-end", gap: "1", pt: "2" }, /* @__PURE__ */ e.createElement(
+    a,
+    {
+      size: "0",
+      variant: "soft",
+      color: "default",
+      leadingIcon: {
+        icon: c,
+        alt: "Reset engagement"
+      },
+      onClick: () => {
+      }
+    },
+    "Reset engagement"
+  ), /* @__PURE__ */ e.createElement(
+    a,
+    {
+      size: "0",
+      variant: "soft",
+      color: "default",
+      leadingIcon: {
+        icon: m,
+        alt: "Go to dashboard"
+      },
+      onClick: () => {
+      }
+    },
+    "Go to dashboard"
+  )), /* @__PURE__ */ e.createElement("pre", { style: {
     fontSize: "11px"
-  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(a, null, 2)))), /* @__PURE__ */ e.createElement(t.Arrow, null))));
+  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(l, null, 2)))), /* @__PURE__ */ e.createElement(t.Arrow, null))));
 };
 export {
-  f as GuideHoverCard
+  v as GuideHoverCard
 };
 //# sourceMappingURL=GuideHoverCard.mjs.map

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

@@ -1 +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;"}
+{"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 { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { ExternalLink, RotateCcw } from \"lucide-react\";\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            <Stack justify=\"flex-end\" gap=\"1\" pt=\"2\">\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color=\"default\"\n                leadingIcon={{ icon: RotateCcw, alt: \"Reset engagement\" }}\n                // TODO(KNO-11468): Placeholder button\n                onClick={() => {}}\n              >\n                Reset engagement\n              </Button>\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color=\"default\"\n                leadingIcon={{ icon: ExternalLink, alt: \"Go to dashboard\" }}\n                // TODO(KNO-11819): Placeholder button\n                onClick={() => {}}\n              >\n                Go to dashboard\n              </Button>\n            </Stack>\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","Button","icon","RotateCcw","alt","ExternalLink","fontSize","JSON","stringify"],"mappings":";;;;;;AAgBO,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,mCAECX,GAAM,EAAA,SAAQ,YAAW,KAAI,KAAI,IAAG,IACnC,GAAA,gBAAAD,EAAA;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,aAAa;AAAA,QAAEC,MAAMC;AAAAA,QAAWC,KAAK;AAAA,MAAmB;AAAA,MAExD,SAAS,MAAM;AAAA,MAAA;AAAA,IAAC;AAAA,IAAE;AAAA,EAIpB,GAAA,gBAAAhB,EAAA;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,aAAa;AAAA,QAAEC,MAAMG;AAAAA,QAAcD,KAAK;AAAA,MAAkB;AAAA,MAE1D,SAAS,MAAM;AAAA,MAAA;AAAA,IAAC;AAAA,IAAE;AAAA,EAItB,CAAA,GACC,gBAAAhB,EAAA,cAAA,OAAA,EACC,OAAO;AAAA,IACLkB,UAAU;AAAA,EAAA,KAGX,gBAAAlB,EAAA,cAAA,QAAA,MAAMmB,KAAKC,UAAUZ,GAAM,MAAM,CAAC,CAAE,CACvC,CACF,GACC,gBAAAR,EAAA,cAAAS,EAAU,OAAV,IAAe,CAClB,CACF,CACF;AAEJ;"}