@knocklabs/react 0.11.11 → 0.11.13

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 "@knocklabs/client";
 import "@telegraph/icon";
 import "@telegraph/segmented-control";
 import "@telegraph/tooltip";
-import "@knocklabs/client";
-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 "@telegraph/toggle";
+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/V2/FocusChin.mjs

@@ -0,0 +1,80 @@
+import { useGuideContext as h, useStore as y } from "@knocklabs/react-core";
+import { Button as d } from "@telegraph/button";
+import { Box as x, Stack as f } from "@telegraph/layout";
+import { Tooltip as m } from "@telegraph/tooltip";
+import { Text as E } from "@telegraph/typography";
+import { ChevronLeft as v, ChevronRight as k, X as C } from "lucide-react";
+import * as t from "react";
+import { GUIDE_ROW_DATA_SELECTOR as T } from "./GuideRow.mjs";
+import { sharedTooltipProps as p } from "./helpers.mjs";
+const b = 60, g = (o, i) => {
+  requestAnimationFrame(() => {
+    const r = o.querySelector(`[${T}="${CSS.escape(i)}"]`);
+    if (!r || !(r instanceof HTMLElement)) return;
+    const e = o.getBoundingClientRect(), c = r.getBoundingClientRect();
+    c.top < e.top ? o.scrollTo({
+      top: o.scrollTop - (e.top - c.top) - b,
+      behavior: "smooth"
+    }) : c.bottom > e.bottom && o.scrollTo({
+      top: o.scrollTop + (c.bottom - e.bottom) + b,
+      behavior: "smooth"
+    });
+  });
+}, z = ({
+  guides: o,
+  guideListRef: i
+}) => {
+  const {
+    client: r
+  } = h(), {
+    debugSettings: e
+  } = y(r.store, (n) => ({
+    debugSettings: n.debug
+  })), c = Object.keys((e == null ? void 0 : e.focusedGuideKeys) || {});
+  if (!(c.length > 0))
+    return null;
+  const a = c[0];
+  return /* @__PURE__ */ t.createElement(x, { borderTop: "px", px: "3", py: "1", overflow: "hidden", backgroundColor: "blue-2" }, /* @__PURE__ */ t.createElement(f, { align: "center", justify: "space-between", gap: "4" }, /* @__PURE__ */ t.createElement(E, { as: "span", size: "1", weight: "medium", color: "blue", style: {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0
+  } }, "Focus mode: ", a), /* @__PURE__ */ t.createElement(f, { align: "center", gap: "1", style: {
+    flexShrink: 0
+  } }, /* @__PURE__ */ t.createElement(m, { label: "Focus previous guide", ...p }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    icon: v,
+    alt: "Previous guide"
+  }, onClick: () => {
+    const n = o.filter((s) => !!s.annotation.selectable.status), u = n.findIndex((s) => s.key === a), l = u <= 0 ? void 0 : n[u - 1];
+    l && (r.setDebug({
+      ...e,
+      focusedGuideKeys: {
+        [l.key]: !0
+      }
+    }), i.current && g(i.current, l.key));
+  } })), /* @__PURE__ */ t.createElement(m, { label: "Focus next guide", ...p }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    icon: k,
+    alt: "Next guide"
+  }, onClick: () => {
+    const n = o.filter((s) => !!s.annotation.selectable.status), u = n.findIndex((s) => s.key === a), l = u < 0 || u + 1 > n.length - 1 ? void 0 : n[u + 1];
+    l && (r.setDebug({
+      ...e,
+      focusedGuideKeys: {
+        [l.key]: !0
+      }
+    }), i.current && g(i.current, l.key));
+  } })), /* @__PURE__ */ t.createElement(m, { label: "Exit focus mode", ...p }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    icon: C,
+    alt: "Clear focus"
+  }, onClick: () => {
+    r.setDebug({
+      ...e,
+      focusedGuideKeys: {}
+    });
+  } })))));
+};
+export {
+  z as FocusChin
+};
+//# sourceMappingURL=FocusChin.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusChin.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/FocusChin.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GUIDE_ROW_DATA_SELECTOR } from \"./GuideRow\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport { InspectionResultOk } from \"./useInspectGuideClientStore\";\n\n// Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,\n// reducing how often consecutive next/prev clicks trigger a scroll.\nconst SCROLL_OVERSHOOT = 60;\n\nconst maybeScrollGuideIntoView = (container: HTMLElement, guideKey: string) => {\n  requestAnimationFrame(() => {\n    const el = container.querySelector(\n      `[${GUIDE_ROW_DATA_SELECTOR}=\"${CSS.escape(guideKey)}\"]`,\n    );\n    if (!el || !(el instanceof HTMLElement)) return;\n\n    const containerRect = container.getBoundingClientRect();\n    const elRect = el.getBoundingClientRect();\n\n    if (elRect.top < containerRect.top) {\n      container.scrollTo({\n        top:\n          container.scrollTop -\n          (containerRect.top - elRect.top) -\n          SCROLL_OVERSHOOT,\n        behavior: \"smooth\",\n      });\n    } else if (elRect.bottom > containerRect.bottom) {\n      container.scrollTo({\n        top:\n          container.scrollTop +\n          (elRect.bottom - containerRect.bottom) +\n          SCROLL_OVERSHOOT,\n        behavior: \"smooth\",\n      });\n    }\n  });\n};\n\ntype Props = {\n  guides: InspectionResultOk[\"guides\"];\n  guideListRef: React.RefObject<HTMLDivElement | null>;\n};\n\nexport const FocusChin = ({ guides, guideListRef }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug,\n  }));\n\n  const focusedKeys = Object.keys(debugSettings?.focusedGuideKeys || {});\n\n  const isFocused = focusedKeys.length > 0;\n  if (!isFocused) {\n    return null;\n  }\n\n  const currentKey = focusedKeys[0]!;\n\n  return (\n    <Box\n      borderTop=\"px\"\n      px=\"3\"\n      py=\"1\"\n      overflow=\"hidden\"\n      backgroundColor=\"blue-2\"\n    >\n      <Stack align=\"center\" justify=\"space-between\" gap=\"4\">\n        <Text\n          as=\"span\"\n          size=\"1\"\n          weight=\"medium\"\n          color=\"blue\"\n          style={{\n            display: \"block\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            minWidth: 0,\n          }}\n        >\n          Focus mode: {currentKey}\n        </Text>\n        <Stack align=\"center\" gap=\"1\" style={{ flexShrink: 0 }}>\n          <Tooltip label=\"Focus previous guide\" {...sharedTooltipProps}>\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n              onClick={() => {\n                const selectableGuides = guides.filter(\n                  (g) => !!g.annotation.selectable.status,\n                );\n                const currIndex = selectableGuides.findIndex(\n                  (g) => g.key === currentKey,\n                );\n                const prevGuide =\n                  currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n\n                if (!prevGuide) return;\n\n                client.setDebug({\n                  ...debugSettings,\n                  focusedGuideKeys: { [prevGuide.key]: true },\n                });\n\n                if (guideListRef.current) {\n                  maybeScrollGuideIntoView(guideListRef.current, prevGuide.key);\n                }\n              }}\n            />\n          </Tooltip>\n          <Tooltip label=\"Focus next guide\" {...sharedTooltipProps}>\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n              onClick={() => {\n                const selectableGuides = guides.filter(\n                  (g) => !!g.annotation.selectable.status,\n                );\n                const currIndex = selectableGuides.findIndex(\n                  (g) => g.key === currentKey,\n                );\n                const nextGuide =\n                  currIndex < 0 || currIndex + 1 > selectableGuides.length - 1\n                    ? undefined\n                    : selectableGuides[currIndex + 1];\n\n                if (!nextGuide) return;\n\n                client.setDebug({\n                  ...debugSettings,\n                  focusedGuideKeys: { [nextGuide.key]: true },\n                });\n\n                if (guideListRef.current) {\n                  maybeScrollGuideIntoView(guideListRef.current, nextGuide.key);\n                }\n              }}\n            />\n          </Tooltip>\n          <Tooltip label=\"Exit focus mode\" {...sharedTooltipProps}>\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: X, alt: \"Clear focus\" }}\n              onClick={() => {\n                client.setDebug({ ...debugSettings, focusedGuideKeys: {} });\n              }}\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n"],"names":["SCROLL_OVERSHOOT","maybeScrollGuideIntoView","container","guideKey","requestAnimationFrame","el","querySelector","GUIDE_ROW_DATA_SELECTOR","CSS","escape","HTMLElement","containerRect","getBoundingClientRect","elRect","top","scrollTo","scrollTop","behavior","bottom","FocusChin","guides","guideListRef","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedKeys","Object","keys","focusedGuideKeys","length","currentKey","React","Box","Stack","Text","display","overflow","textOverflow","whiteSpace","minWidth","flexShrink","Tooltip","sharedTooltipProps","Button","icon","ChevronLeft","alt","selectableGuides","filter","g","annotation","selectable","status","currIndex","findIndex","key","prevGuide","undefined","setDebug","current","ChevronRight","nextGuide","X"],"mappings":"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"}

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

@@ -1,18 +1,19 @@
 import e from "react";
 import { Stack as i } from "@telegraph/layout";
 import { Tooltip as a } from "@telegraph/tooltip";
-const l = {
+import { sharedTooltipProps as l } from "./helpers.mjs";
+const o = {
   blue: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "4", cy: "4", r: "4", fill: "var(--tgph-blue-9)" })),
   yellow: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("polygon", { points: "4,0.5 7.5,7.5 0.5,7.5", fill: "var(--tgph-yellow-9)" })),
   gray: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "4", cy: "4", r: "2.75", fill: "none", stroke: "var(--tgph-gray-9)", strokeWidth: "2.5" })),
   red: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("line", { x1: "1.5", y1: "1.5", x2: "6.5", y2: "6.5", stroke: "var(--tgph-red-9)", strokeWidth: "2", strokeLinecap: "round" }), /* @__PURE__ */ e.createElement("line", { x1: "6.5", y1: "1.5", x2: "1.5", y2: "6.5", stroke: "var(--tgph-red-9)", strokeWidth: "2", strokeLinecap: "round" }))
-}, h = ({
+}, s = ({
   color: t,
   tooltip: r
-}) => /* @__PURE__ */ e.createElement(a, { label: r }, /* @__PURE__ */ e.createElement(i, { as: "span", align: "center", justify: "center", display: "inline-flex", p: "0_5", style: {
+}) => /* @__PURE__ */ e.createElement(a, { label: r, ...l }, /* @__PURE__ */ e.createElement(i, { as: "span", align: "center", justify: "center", display: "inline-flex", p: "0_5", style: {
   flexShrink: 0
-} }, l[t]));
+} }, o[t]));
 export {
-  h as GuideAnnotatedStatusDot
+  s as GuideAnnotatedStatusDot
 };
 //# sourceMappingURL=GuideAnnotatedStatusDot.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"GuideAnnotatedStatusDot.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx"],"sourcesContent":["import { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\n\nexport type StatusColor = \"blue\" | \"red\" | \"yellow\" | \"gray\";\n\n// Directly copied from the design prototype.\nconst STATUS_SHAPES: Record<StatusColor, React.ReactNode> = {\n  blue: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"var(--tgph-blue-9)\" />\n    </svg>\n  ),\n  yellow: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <polygon points=\"4,0.5 7.5,7.5 0.5,7.5\" fill=\"var(--tgph-yellow-9)\" />\n    </svg>\n  ),\n  gray: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle\n        cx=\"4\"\n        cy=\"4\"\n        r=\"2.75\"\n        fill=\"none\"\n        stroke=\"var(--tgph-gray-9)\"\n        strokeWidth=\"2.5\"\n      />\n    </svg>\n  ),\n  red: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <line\n        x1=\"1.5\"\n        y1=\"1.5\"\n        x2=\"6.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n      <line\n        x1=\"6.5\"\n        y1=\"1.5\"\n        x2=\"1.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n};\n\nexport const GuideAnnotatedStatusDot = ({\n  color,\n  tooltip,\n}: {\n  color: StatusColor;\n  tooltip: string;\n}) => {\n  return (\n    <Tooltip label={tooltip}>\n      <Stack\n        as=\"span\"\n        align=\"center\"\n        justify=\"center\"\n        display=\"inline-flex\"\n        p=\"0_5\"\n        style={{ flexShrink: 0 }}\n      >\n        {STATUS_SHAPES[color]}\n      </Stack>\n    </Tooltip>\n  );\n};\n"],"names":["STATUS_SHAPES","blue","React","yellow","gray","red","GuideAnnotatedStatusDot","color","tooltip","Tooltip","Stack","flexShrink"],"mappings":";;;AAMA,MAAMA,IAAsD;AAAA,EAC1DC,sCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDC,gBAAAA,EAAA,cAAA,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,qBAAoB,CAAA,CACvD;AAAA,EAEFC,QACGD,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDA,gBAAAA,EAAA,cAAA,WAAA,EAAQ,QAAO,yBAAwB,MAAK,wBAAsB,CACrE;AAAA,EAEFE,MACGF,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,GACrD,GAAAA,gBAAAA,EAAA,cAAC,YACC,IAAG,KACH,IAAG,KACH,GAAE,QACF,MAAK,QACL,QAAO,sBACP,aAAY,MAAK,CAAA,CAErB;AAAA,EAEFG,qCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDH,gBAAAA,EAAA,cAAA,QAAA,EACC,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,QAAO,CAAA,mCAEtB,QACC,EAAA,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,SAAO,CAEzB;AAEJ,GAEaI,IAA0BA,CAAC;AAAA,EACtCC,OAAAA;AAAAA,EACAC,SAAAA;AAIF,sCAEKC,GAAQ,EAAA,OAAOD,KACdN,gBAAAA,EAAA,cAACQ,KACC,IAAG,QACH,OAAM,UACN,SAAQ,UACR,SAAQ,eACR,GAAE,OACF,OAAO;AAAA,EAAEC,YAAY;AAAA,KAEpBX,EAAcO,CAAK,CACtB,CACF;"}
+{"version":3,"file":"GuideAnnotatedStatusDot.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx"],"sourcesContent":["import { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\n\nimport { sharedTooltipProps } from \"./helpers\";\n\nexport type StatusColor = \"blue\" | \"red\" | \"yellow\" | \"gray\";\n\n// Directly copied from the design prototype.\nconst STATUS_SHAPES: Record<StatusColor, React.ReactNode> = {\n  blue: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"var(--tgph-blue-9)\" />\n    </svg>\n  ),\n  yellow: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <polygon points=\"4,0.5 7.5,7.5 0.5,7.5\" fill=\"var(--tgph-yellow-9)\" />\n    </svg>\n  ),\n  gray: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle\n        cx=\"4\"\n        cy=\"4\"\n        r=\"2.75\"\n        fill=\"none\"\n        stroke=\"var(--tgph-gray-9)\"\n        strokeWidth=\"2.5\"\n      />\n    </svg>\n  ),\n  red: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <line\n        x1=\"1.5\"\n        y1=\"1.5\"\n        x2=\"6.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n      <line\n        x1=\"6.5\"\n        y1=\"1.5\"\n        x2=\"1.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n};\n\nexport const GuideAnnotatedStatusDot = ({\n  color,\n  tooltip,\n}: {\n  color: StatusColor;\n  tooltip: string;\n}) => {\n  return (\n    <Tooltip label={tooltip} {...sharedTooltipProps}>\n      <Stack\n        as=\"span\"\n        align=\"center\"\n        justify=\"center\"\n        display=\"inline-flex\"\n        p=\"0_5\"\n        style={{ flexShrink: 0 }}\n      >\n        {STATUS_SHAPES[color]}\n      </Stack>\n    </Tooltip>\n  );\n};\n"],"names":["STATUS_SHAPES","blue","React","yellow","gray","red","GuideAnnotatedStatusDot","color","tooltip","Tooltip","sharedTooltipProps","Stack","flexShrink"],"mappings":";;;;AAQA,MAAMA,IAAsD;AAAA,EAC1DC,sCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDC,gBAAAA,EAAA,cAAA,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,qBAAoB,CAAA,CACvD;AAAA,EAEFC,QACGD,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDA,gBAAAA,EAAA,cAAA,WAAA,EAAQ,QAAO,yBAAwB,MAAK,wBAAsB,CACrE;AAAA,EAEFE,MACGF,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,GACrD,GAAAA,gBAAAA,EAAA,cAAC,YACC,IAAG,KACH,IAAG,KACH,GAAE,QACF,MAAK,QACL,QAAO,sBACP,aAAY,MAAK,CAAA,CAErB;AAAA,EAEFG,qCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDH,gBAAAA,EAAA,cAAA,QAAA,EACC,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,QAAO,CAAA,mCAEtB,QACC,EAAA,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,SAAO,CAEzB;AAEJ,GAEaI,IAA0BA,CAAC;AAAA,EACtCC,OAAAA;AAAAA,EACAC,SAAAA;AAIF,sCAEKC,GAAQ,EAAA,OAAOD,GAAaE,GAAAA,EAAAA,mCAC1BC,GACC,EAAA,IAAG,QACH,OAAM,UACN,SAAQ,UACR,SAAQ,eACR,GAAE,OACF,OAAO;AAAA,EAAEC,YAAY;AAAA,KAEpBZ,EAAcO,CAAK,CACtB,CACF;"}

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

@@ -1,18 +1,38 @@
 import e from "react";
-import { useGuideContext as o } from "@knocklabs/react-core";
-import { Box as r, Stack as a } from "@telegraph/layout";
-import { Text as n } from "@telegraph/typography";
-const d = () => {
+import { useGuideContext as d, useStore as s } from "@knocklabs/react-core";
+import { Box as o, Stack as t } from "@telegraph/layout";
+import { Toggle as c } from "@telegraph/toggle";
+import { Tooltip as l } from "@telegraph/tooltip";
+import { Text as a } from "@telegraph/typography";
+import { sharedTooltipProps as m } from "./helpers.mjs";
+const w = () => {
   const {
-    client: t
-  } = o();
-  return /* @__PURE__ */ e.createElement(r, { py: "3", px: "3" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "1", weight: "medium" }, "Target params"), /* @__PURE__ */ e.createElement(a, { direction: "column", gap: "2", mt: "2" }, /* @__PURE__ */ e.createElement(a, { direction: "row", gap: "2", align: "center" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Tenant"), /* @__PURE__ */ e.createElement(r, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
+    client: r
+  } = d(), {
+    debugSettings: i
+  } = s(r.store, (n) => ({
+    debugSettings: n.debug || {}
+  }));
+  return /* @__PURE__ */ e.createElement(o, { py: "3", px: "3" }, /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", display: "block" }, "Toolbar settings"), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1" }, /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(l, { label: "When enabled, engagement actions are not sent to Knock.", ...m }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Sandbox engagement"))), /* @__PURE__ */ e.createElement(c.Default, { size: "1", pt: "1_5", value: !!i.skipEngagementTracking, onValueChange: (n) => {
+    r.setDebug({
+      ...i,
+      skipEngagementTracking: n
+    });
+  } })), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(l, { label: "Ignore throttle and show next guide immediately", ...m }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Ignore throttle"))), /* @__PURE__ */ e.createElement(c.Default, { size: "1", pt: "1_5", value: !!i.ignoreDisplayInterval, onValueChange: (n) => {
+    r.setDebug({
+      ...i,
+      ignoreDisplayInterval: n
+    });
+  } })))), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(l, { label: /* @__PURE__ */ e.createElement(a, { as: "span", size: "1" }, "The tenant and data payload passed to KnockGuideProvider. Available for use in runtime conditions."), ...m }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", borderBottom: "px", borderStyle: "dashed", mt: "4", style: {
+    whiteSpace: "nowrap",
+    width: "fit-content"
+  } }, "Target params")), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "2" }, /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Tenant"), /* @__PURE__ */ e.createElement(o, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
     flex: 1,
     minWidth: 0
   } }, /* @__PURE__ */ e.createElement("pre", { style: {
     fontSize: "11px",
     margin: 0
-  } }, /* @__PURE__ */ e.createElement("code", null, t.targetParams.tenant || "-")))), /* @__PURE__ */ e.createElement(a, { direction: "row", gap: "2", align: "flex-start" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Data"), /* @__PURE__ */ e.createElement(r, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
+  } }, /* @__PURE__ */ e.createElement("code", null, r.targetParams.tenant || "-")))), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "flex-start" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Data"), /* @__PURE__ */ e.createElement(o, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
     flex: 1,
     minWidth: 0,
     minHeight: "50px",
@@ -20,9 +40,9 @@ const d = () => {
   } }, /* @__PURE__ */ e.createElement("pre", { style: {
     fontSize: "11px",
     margin: 0
-  } }, /* @__PURE__ */ e.createElement("code", null, t.targetParams.data ? JSON.stringify(t.targetParams.data, null, 2) : "-"))))));
+  } }, /* @__PURE__ */ e.createElement("code", null, r.targetParams.data ? JSON.stringify(r.targetParams.data, null, 2) : "-")))))));
 };
 export {
-  d as GuideContextDetails
+  w 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 } from \"@knocklabs/react-core\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n\n  return (\n    <Box py=\"3\" px=\"3\">\n      <Text as=\"span\" size=\"1\" weight=\"medium\">\n        Target params\n      </Text>\n      <Stack direction=\"column\" gap=\"2\" mt=\"2\">\n        <Stack direction=\"row\" gap=\"2\" align=\"center\">\n          <Text\n            as=\"span\"\n            size=\"1\"\n            weight=\"medium\"\n            color=\"gray\"\n            width=\"36\"\n            mt=\"1\"\n          >\n            Tenant\n          </Text>\n          <Box\n            rounded=\"2\"\n            overflow=\"auto\"\n            backgroundColor=\"surface-2\"\n            border=\"px\"\n            p=\"1\"\n            style={{ flex: 1, minWidth: 0 }}\n          >\n            <pre style={{ fontSize: \"11px\", margin: 0 }}>\n              <code>{client.targetParams.tenant || \"-\"}</code>\n            </pre>\n          </Box>\n        </Stack>\n        <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n          <Text\n            as=\"span\"\n            size=\"1\"\n            weight=\"medium\"\n            color=\"gray\"\n            width=\"36\"\n            mt=\"1\"\n          >\n            Data\n          </Text>\n          <Box\n            rounded=\"2\"\n            overflow=\"auto\"\n            backgroundColor=\"surface-2\"\n            border=\"px\"\n            p=\"1\"\n            style={{\n              flex: 1,\n              minWidth: 0,\n              minHeight: \"50px\",\n              maxHeight: \"200px\",\n            }}\n          >\n            <pre style={{ fontSize: \"11px\", margin: 0 }}>\n              <code>\n                {client.targetParams.data\n                  ? JSON.stringify(client.targetParams.data, null, 2)\n                  : \"-\"}\n              </code>\n            </pre>\n          </Box>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","React","Box","Text","Stack","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","data","JSON","stringify"],"mappings":";;;;AAIO,MAAMA,IAAsBA,MAAM;AACjC,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB;AAEnC,SACGC,gBAAAA,EAAA,cAAAC,GAAA,EAAI,IAAG,KAAI,IAAG,IAAA,GACZD,gBAAAA,EAAA,cAAAE,GAAA,EAAK,IAAG,QAAO,MAAK,KAAI,QAAO,SAAA,GAAQ,eAExC,GACCF,gBAAAA,EAAA,cAAAG,GAAA,EAAM,WAAU,UAAS,KAAI,KAAI,IAAG,OAClCH,gBAAAA,EAAA,cAAAG,GAAA,EAAM,WAAU,OAAM,KAAI,KAAI,OAAM,SAAA,GAClCH,gBAAAA,EAAA,cAAAE,GAAA,EACC,IAAG,QACH,MAAK,KACL,QAAO,UACP,OAAM,QACN,OAAM,MACN,IAAG,IAAA,GAAG,QAGR,GACCF,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAAQ,KACR,UAAS,QACT,iBAAgB,aAChB,QAAO,MACP,GAAE,KACF,OAAO;AAAA,IAAEG,MAAM;AAAA,IAAGC,UAAU;AAAA,EAAE,EAAA,GAE7BL,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAO;AAAA,IAAEM,UAAU;AAAA,IAAQC,QAAQ;AAAA,EAAE,EAAA,mCACvC,QAAMT,MAAAA,EAAOU,aAAaC,UAAU,GAAI,CAC3C,CACF,CACF,GACCT,gBAAAA,EAAA,cAAAG,GAAA,EAAM,WAAU,OAAM,KAAI,KAAI,OAAM,aAAA,GAClCH,gBAAAA,EAAA,cAAAE,GAAA,EACC,IAAG,QACH,MAAK,KACL,QAAO,UACP,OAAM,QACN,OAAM,MACN,IAAG,OAAG,MAGR,GACAF,gBAAAA,EAAA,cAACC,KACC,SAAQ,KACR,UAAS,QACT,iBAAgB,aAChB,QAAO,MACP,GAAE,KACF,OAAO;AAAA,IACLG,MAAM;AAAA,IACNC,UAAU;AAAA,IACVK,WAAW;AAAA,IACXC,WAAW;AAAA,EACb,EAAA,GAECX,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAO;AAAA,IAAEM,UAAU;AAAA,IAAQC,QAAQ;AAAA,EAAA,KACrCP,gBAAAA,EAAA,cAAA,QAAA,MACEF,EAAOU,aAAaI,OACjBC,KAAKC,UAAUhB,EAAOU,aAAaI,MAAM,MAAM,CAAC,IAChD,GACN,CACF,CACF,CACF,CACF,CACF;AAEJ;"}
+{"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 { Toggle } from \"@telegraph/toggle\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { sharedTooltipProps } from \"./helpers\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  return (\n    <Box py=\"3\" px=\"3\">\n      <Stack direction=\"column\" gap=\"1\" width=\"full\">\n        <Text as=\"span\" size=\"1\" weight=\"medium\" display=\"block\">\n          Toolbar settings\n        </Text>\n        <Stack direction=\"column\" gap=\"1\">\n          <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n            <Tooltip\n              label=\"When enabled, engagement actions are not sent to Knock.\"\n              {...sharedTooltipProps}\n            >\n              <Box width=\"36\" mt=\"1\">\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color=\"gray\"\n                  borderBottom=\"px\"\n                  borderStyle=\"dashed\"\n                >\n                  Sandbox engagement\n                </Text>\n              </Box>\n            </Tooltip>\n            <Toggle.Default\n              size=\"1\"\n              pt=\"1_5\"\n              value={!!debugSettings.skipEngagementTracking}\n              onValueChange={(value: boolean) => {\n                client.setDebug({\n                  ...debugSettings,\n                  skipEngagementTracking: value,\n                });\n              }}\n            />\n          </Stack>\n          <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n            <Tooltip\n              label=\"Ignore throttle and show next guide immediately\"\n              {...sharedTooltipProps}\n            >\n              <Box width=\"36\" mt=\"1\">\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color=\"gray\"\n                  borderBottom=\"px\"\n                  borderStyle=\"dashed\"\n                >\n                  Ignore throttle\n                </Text>\n              </Box>\n            </Tooltip>\n            <Toggle.Default\n              size=\"1\"\n              pt=\"1_5\"\n              value={!!debugSettings.ignoreDisplayInterval}\n              onValueChange={(value: boolean) => {\n                client.setDebug({\n                  ...debugSettings,\n                  ignoreDisplayInterval: value,\n                });\n              }}\n            />\n          </Stack>\n        </Stack>\n      </Stack>\n      <Stack direction=\"column\" gap=\"1\" width=\"full\">\n        <Tooltip\n          label={\n            <Text as=\"span\" size=\"1\">\n              The tenant and data payload passed to KnockGuideProvider.\n              Available for use in runtime conditions.\n            </Text>\n          }\n          {...sharedTooltipProps}\n        >\n          <Text\n            as=\"span\"\n            size=\"1\"\n            weight=\"medium\"\n            borderBottom=\"px\"\n            borderStyle=\"dashed\"\n            mt=\"4\"\n            style={{\n              whiteSpace: \"nowrap\",\n              width: \"fit-content\",\n            }}\n          >\n            Target params\n          </Text>\n        </Tooltip>\n        <Stack direction=\"column\" gap=\"2\">\n          <Stack direction=\"row\" gap=\"2\" align=\"center\">\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"gray\"\n              width=\"36\"\n              mt=\"1\"\n            >\n              Tenant\n            </Text>\n            <Box\n              rounded=\"2\"\n              overflow=\"auto\"\n              backgroundColor=\"surface-2\"\n              border=\"px\"\n              p=\"1\"\n              style={{ flex: 1, minWidth: 0 }}\n            >\n              <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                <code>{client.targetParams.tenant || \"-\"}</code>\n              </pre>\n            </Box>\n          </Stack>\n          <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"gray\"\n              width=\"36\"\n              mt=\"1\"\n            >\n              Data\n            </Text>\n            <Box\n              rounded=\"2\"\n              overflow=\"auto\"\n              backgroundColor=\"surface-2\"\n              border=\"px\"\n              p=\"1\"\n              style={{\n                flex: 1,\n                minWidth: 0,\n                minHeight: \"50px\",\n                maxHeight: \"200px\",\n              }}\n            >\n              <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                <code>\n                  {client.targetParams.data\n                    ? JSON.stringify(client.targetParams.data, null, 2)\n                    : \"-\"}\n                </code>\n              </pre>\n            </Box>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","debugSettings","useStore","store","state","debug","Box","Stack","Text","React","Tooltip","sharedTooltipProps","Toggle","skipEngagementTracking","value","setDebug","ignoreDisplayInterval","whiteSpace","width","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","data","JSON","stringify"],"mappings":"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"}