@knocklabs/react 0.11.0 → 0.11.1

package/dist/types/modules/guide/components/Toolbar/V2/GuideRow.d.ts

@@ -0,0 +1,8 @@
+import { AnnotatedGuide, UnknownGuide } from './useInspectGuideClientStore';
+type Props = {
+    guide: UnknownGuide | AnnotatedGuide;
+    orderIndex: number;
+};
+export declare const GuideRow: ({ guide, orderIndex }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GuideRow.d.ts.map

package/dist/types/modules/guide/components/Toolbar/V2/GuideRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuideRow.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,cAAc,EACd,YAAY,EAEb,MAAM,8BAA8B,CAAC;AAQtC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,YAAY,GAAG,cAAc,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,uBAAuB,KAAK,4CAuGpD,CAAC"}

package/dist/types/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.d.ts

@@ -0,0 +1,8 @@
+export type DisplayOption = "current-page" | "all-eligible" | "all-guides";
+type Props = {
+    value: DisplayOption;
+    onChange: (option: DisplayOption) => void;
+};
+export declare const GuidesListDisplaySelect: ({ value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GuidesListDisplaySelect.d.ts.map

package/dist/types/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuidesListDisplaySelect.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,YAAY,CAAC;AAE3E,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,qBAAqB,KAAK,4CAwBjE,CAAC"}

package/dist/types/modules/guide/components/Toolbar/V2/V2.d.ts

@@ -0,0 +1,2 @@
+export declare const V2: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=V2.d.ts.map

package/dist/types/modules/guide/components/Toolbar/V2/V2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"V2.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"names":[],"mappings":"AAQA,OAAO,eAAe,CAAC;AAmCvB,eAAO,MAAM,EAAE,sDAmFd,CAAC"}

package/dist/types/modules/guide/components/Toolbar/V2/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const detectToolbarParam: () => boolean;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/types/modules/guide/components/Toolbar/V2/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/helpers.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,eAU9B,CAAC"}

package/dist/types/modules/guide/components/Toolbar/V2/index.d.ts

@@ -0,0 +1,2 @@
+export { V2 as ToolbarV2 } from './V2';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/guide/components/Toolbar/V2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC"}

package/dist/types/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.d.ts

@@ -0,0 +1,59 @@
+import { KnockGuide } from '@knocklabs/client';
+/**
+ * This is the main module that will house core logic for the toolbar. It hooks
+ * into the guide client state store, extracts relevant data for debugging, and
+ * transforms it into easily consumable data for the toolbar - namely
+ * "annotating" guides for its various statuses to display.
+ */
+type ActiveStatus = {
+    status: boolean;
+};
+type TargetableStatusTrue = {
+    status: true;
+};
+type TargetableStatusFalse = {
+    status: false;
+    reason: string;
+    message: string;
+};
+type TargetableStatus = TargetableStatusTrue | TargetableStatusFalse;
+type ActivatableStatus = {
+    status: boolean;
+};
+type ArchivedStatus = {
+    status: boolean;
+};
+type AnnotatedStatuses = {
+    active: ActiveStatus;
+    targetable: TargetableStatus;
+    archived: ArchivedStatus;
+    activatable: ActivatableStatus;
+};
+type GuideAnnotation = AnnotatedStatuses & {
+    isEligible: boolean;
+    isQualified: boolean;
+};
+export type AnnotatedGuide = KnockGuide & {
+    annotation: GuideAnnotation;
+    activation_location_rules?: KnockGuide["activation_url_patterns"];
+    priority?: number;
+};
+export type UnknownGuide = {
+    __typename: "UnknownGuide";
+    key: KnockGuide["key"];
+    active: false;
+    bypass_global_group_limit: false;
+    annotation: {
+        isEligible: false;
+        isQualified: false;
+    };
+};
+export type InspectionResult = {
+    guides: (AnnotatedGuide | UnknownGuide)[];
+    error?: "no_guide_group";
+};
+export declare const resolveIsQualified: ({ activatable }: AnnotatedStatuses) => boolean;
+export declare const useInspectGuideClientStore: () => InspectionResult | undefined;
+export declare const isUnknownGuide: (input: unknown) => input is UnknownGuide;
+export {};
+//# sourceMappingURL=useInspectGuideClientStore.d.ts.map

package/dist/types/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInspectGuideClientStore.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIX,MAAM,mBAAmB,CAAC;AAG3B;;;;;GAKG;AAGH,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAGF,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,IAAI,CAAC;CACd,CAAC;AACF,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,qBAAqB,CAAC;AAErE,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAGF,KAAK,cAAc,GAAG;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IAEvB,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,cAAc,CAAC;IAEzB,WAAW,EAAE,iBAAiB,CAAC;CAChC,CAAC;AAEF,KAAK,eAAe,GAAG,iBAAiB,GAAG;IAGzC,UAAU,EAAE,OAAO,CAAC;IAIpB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACxC,UAAU,EAAE,eAAe,CAAC;IAG5B,yBAAyB,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAKF,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC;IACd,yBAAyB,EAAE,KAAK,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC;QAClB,WAAW,EAAE,KAAK,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,CAAC,cAAc,GAAG,YAAY,CAAC,EAAE,CAAC;IAC1C,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AA8CF,eAAO,MAAM,kBAAkB,GAAI,iBAAiB,iBAAiB,YAGpE,CAAC;AAgDF,eAAO,MAAM,0BAA0B,QAAO,gBAAgB,GAAG,SA2ChE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,YAIF,CAAC"}

package/dist/types/modules/guide/components/Toolbar/index.d.ts

@@ -0,0 +1,3 @@
+export { ToolbarV1 } from './V1';
+export { ToolbarV2 } from './V2';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/guide/components/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/Toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC"}

package/dist/types/modules/guide/components/Toolbar/shared.d.ts

@@ -0,0 +1,2 @@
+export declare const TOOLBAR_Z_INDEX = "var(--tgph-zIndex-tooltip)";
+//# sourceMappingURL=shared.d.ts.map

package/dist/types/modules/guide/components/Toolbar/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/Toolbar/shared.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,+BAA+B,CAAC"}

package/dist/types/modules/guide/components/index.d.ts

@@ -1,5 +1,5 @@
 export { Banner, BannerView } from './Banner';
 export { Card, CardView } from './Card';
-export { GuideToolbar } from './GuideToolbar';
+export { ToolbarV1, ToolbarV2 } from './Toolbar';
 export { Modal, ModalView } from './Modal';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/modules/guide/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/modules/guide/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/modules/guide/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1,3 +1,3 @@
-export { Banner, BannerView, Card, CardView, Modal, ModalView, GuideToolbar, } from './components';
+export { Banner, BannerView, Card, CardView, Modal, ModalView, ToolbarV1, ToolbarV2, } from './components';
 export { KnockGuideProvider } from './providers';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/guide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,YAAY,GACb,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/guide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC"}

package/dist/types/modules/guide/providers/KnockGuideProvider.d.ts

@@ -1,4 +1,8 @@
 import { KnockGuideProviderProps } from '@knocklabs/react-core';
 import { default as React } from 'react';
-export declare const KnockGuideProvider: React.FC<React.PropsWithChildren<KnockGuideProviderProps>>;
+type Props = KnockGuideProviderProps & {
+    toolbar?: "v1" | "v2";
+};
+export declare const KnockGuideProvider: React.FC<React.PropsWithChildren<Props>>;
+export {};
 //# sourceMappingURL=KnockGuideProvider.d.ts.map

package/dist/types/modules/guide/providers/KnockGuideProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KnockGuideProvider.d.ts","sourceRoot":"","sources":["../../../../../src/modules/guide/providers/KnockGuideProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAQjD,CAAC"}
+{"version":3,"file":"KnockGuideProvider.d.ts","sourceRoot":"","sources":["../../../../../src/modules/guide/providers/KnockGuideProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,KAAK,GAAG,uBAAuB,GAAG;IACrC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACvB,CAAC;AAKF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAevE,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@knocklabs/react",
   "description": "A set of React components to build notification experiences powered by Knock",
   "author": "@knocklabs",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",
@@ -72,14 +72,16 @@
     }
   },
   "dependencies": {
-    "@knocklabs/client": "^0.21.0",
-    "@knocklabs/react-core": "^0.13.0",
+    "@knocklabs/client": "^0.21.1",
+    "@knocklabs/react-core": "^0.13.1",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@telegraph/combobox": "^0.1.16",
     "@telegraph/icon": "^0.2.7",
     "@telegraph/layout": "^0.2.3",
     "@telegraph/tokens": "^0.1.2",
+    "@telegraph/tooltip": "0.0.61",
     "@telegraph/typography": "^0.1.25",
     "clsx": "^2.1.1",
     "lodash.debounce": "^4.0.8"
@@ -112,7 +114,7 @@
     "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-no-bundle": "^4.0.0",
-    "vitest": "^3.1.1",
+    "vitest": "^3.2.4",
     "vitest-axe": "^0.1.0"
   }
 }

package/dist/cjs/modules/guide/components/GuideToolbar/GuideToolbar.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),l=require("@knocklabs/react-core"),o=require("@telegraph/button"),d=require("@telegraph/layout"),g=require("@telegraph/tag"),h=require("@telegraph/typography"),n=require("lucide-react");;/* empty css            */const m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=m(s),c=2147483647,E=()=>{const[t,u]=s.useState(!1),{client:r}=l.useGuideContext(),a=l.useStore(r.store,p=>p.debug);if(!(a!=null&&a.forcedGuideKey))return null;const f=()=>{r.exitDebugMode()},i=()=>{u(!t)};return t?e.default.createElement(o.Button,{onClick:i,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:c}},e.default.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%)"}},e.default.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"}),e.default.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"}))):e.default.createElement(d.Stack,{gap:"2",align:"center",position:"fixed",top:"4",right:"4",backgroundColor:"surface-2",bg:"surface-2",shadow:"3",rounded:"3",py:"2",px:"3","data-tgph-appearance":"dark",style:{zIndex:c}},e.default.createElement(d.Stack,{gap:"2",align:"center",direction:"row"},e.default.createElement(g.Tag,{color:"green",variant:"soft",icon:{icon:n.Wrench,"aria-hidden":!0}},"Debug"),e.default.createElement(h.Text,{as:"div",size:"1",weight:"medium",w:"full",maxWidth:"40",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},a.forcedGuideKey),e.default.createElement(o.Button,{onClick:f,size:"1",variant:"soft",trailingIcon:{icon:n.Undo2,"aria-hidden":!0}},"Exit"),e.default.createElement(o.Button,{onClick:i,size:"1",variant:"soft",leadingIcon:{icon:n.Minimize2,alt:"Collapse guide toolbar"}})))};exports.GuideToolbar=E;
-//# sourceMappingURL=GuideToolbar.js.map

package/dist/cjs/modules/guide/components/GuideToolbar/GuideToolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GuideToolbar.js","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2, Wrench } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport \"./styles.css\";\n\n// 'max' z index based on max value of a signed 32-bit int\n// Ref: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index/25461690#25461690\nconst MAX_Z_INDEX = 2147483647;\n\nexport const GuideToolbar = () => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const { client } = useGuideContext();\n  const debugState = useStore(client.store, (state) => state.debug);\n\n  if (!debugState?.forcedGuideKey) {\n    return null;\n  }\n\n  const handleExit = () => {\n    client.exitDebugMode();\n  };\n\n  const handleToggleCollapse = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  if (isCollapsed) {\n    return (\n      <Button\n        onClick={handleToggleCollapse}\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: MAX_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\n  return (\n    <Stack\n      gap=\"2\"\n      align=\"center\"\n      position=\"fixed\"\n      top=\"4\"\n      right=\"4\"\n      backgroundColor=\"surface-2\"\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      py=\"2\"\n      px=\"3\"\n      data-tgph-appearance=\"dark\"\n      style={{ zIndex: MAX_Z_INDEX }}\n    >\n      <Stack gap=\"2\" align=\"center\" direction=\"row\">\n        <Tag\n          color=\"green\"\n          variant=\"soft\"\n          icon={{ icon: Wrench, \"aria-hidden\": true }}\n        >\n          Debug\n        </Tag>\n\n        <Text\n          as=\"div\"\n          size=\"1\"\n          weight=\"medium\"\n          w=\"full\"\n          maxWidth=\"40\"\n          style={{\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {debugState.forcedGuideKey}\n        </Text>\n\n        <Button\n          onClick={handleExit}\n          size=\"1\"\n          variant=\"soft\"\n          trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n        >\n          Exit\n        </Button>\n\n        <Button\n          onClick={handleToggleCollapse}\n          size=\"1\"\n          variant=\"soft\"\n          leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["MAX_Z_INDEX","GuideToolbar","isCollapsed","setIsCollapsed","useState","client","useGuideContext","debugState","useStore","store","state","debug","forcedGuideKey","handleExit","exitDebugMode","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":"mYAYMA,EAAc,WAEPC,EAAeA,IAAM,CAChC,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAE9C,CAAEC,OAAAA,GAAWC,kBAAgB,EAC7BC,EAAaC,EAAAA,SAASH,EAAOI,MAAQC,GAAUA,EAAMC,KAAK,EAE5D,GAAA,EAACJ,GAAAA,MAAAA,EAAYK,gBACR,OAAA,KAGT,MAAMC,EAAaA,IAAM,CACvBR,EAAOS,cAAc,CACvB,EAEMC,EAAuBA,IAAM,CACjCZ,EAAe,CAACD,CAAW,CAC7B,EAEA,OAAIA,EAEAc,EAAA,QAAA,cAACC,EACC,OAAA,CAAA,QAASF,EACT,SAAS,QACT,IAAI,IACJ,MAAM,IACN,GAAG,YACH,OAAO,IACP,QAAQ,IACR,EAAE,KACF,EAAE,KACF,QAAQ,OACR,uBAAqB,OACrB,aAAW,uBACX,MAAO,CAAEG,OAAQlB,CAAAA,CAEjB,EAAAgB,EAAA,QAAA,cAAC,MACC,CAAA,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAO,CACLG,SAAU,WACVC,IAAK,MACLC,KAAM,MACNC,UAAW,uBAAA,GAGbN,EAAAA,QAAA,cAAC,OACC,CAAA,EAAE,0JACF,KAAK,SAAS,CAAA,EAEhBA,EAAAA,QAAA,cAAC,QACC,EAAE,uKACF,KAAK,SAAS,CAAA,CAElB,CACF,EAKFA,EAAA,QAAA,cAACO,EACC,MAAA,CAAA,IAAI,IACJ,MAAM,SACN,SAAS,QACT,IAAI,IACJ,MAAM,IACN,gBAAgB,YAChB,GAAG,YACH,OAAO,IACP,QAAQ,IACR,GAAG,IACH,GAAG,IACH,uBAAqB,OACrB,MAAO,CAAEL,OAAQlB,CAAAA,GAEjBgB,EAAAA,QAAA,cAACO,EAAM,MAAA,CAAA,IAAI,IAAI,MAAM,SAAS,UAAU,KAAA,0BACrCC,MACC,CAAA,MAAM,QACN,QAAQ,OACR,KAAM,CAAEC,KAAMC,EAAAA,OAAQ,cAAe,EAAA,CAAO,EAAA,OAG9C,EAEAV,EAAA,QAAA,cAACW,QACC,GAAG,MACH,KAAK,IACL,OAAO,SACP,EAAE,OACF,SAAS,KACT,MAAO,CACLC,SAAU,SACVC,aAAc,WACdC,WAAY,QAGbvB,CAAAA,EAAAA,EAAWK,cACd,EAECI,EAAA,QAAA,cAAAC,EAAA,OAAA,CACC,QAASJ,EACT,KAAK,IACL,QAAQ,OACR,aAAc,CAAEY,KAAMM,EAAAA,MAAO,cAAe,EAAK,CAAA,EAAE,MAGrD,EAECf,UAAA,cAAAC,EAAAA,OAAA,CACC,QAASF,EACT,KAAK,IACL,QAAQ,OACR,YAAa,CAAEU,KAAMO,EAAAA,UAAWC,IAAK,wBAAyB,CAAA,CAAE,CAEpE,CACF,CAEJ"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"GuideToolbar.mjs","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2, Wrench } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport \"./styles.css\";\n\n// 'max' z index based on max value of a signed 32-bit int\n// Ref: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index/25461690#25461690\nconst MAX_Z_INDEX = 2147483647;\n\nexport const GuideToolbar = () => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const { client } = useGuideContext();\n  const debugState = useStore(client.store, (state) => state.debug);\n\n  if (!debugState?.forcedGuideKey) {\n    return null;\n  }\n\n  const handleExit = () => {\n    client.exitDebugMode();\n  };\n\n  const handleToggleCollapse = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  if (isCollapsed) {\n    return (\n      <Button\n        onClick={handleToggleCollapse}\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: MAX_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\n  return (\n    <Stack\n      gap=\"2\"\n      align=\"center\"\n      position=\"fixed\"\n      top=\"4\"\n      right=\"4\"\n      backgroundColor=\"surface-2\"\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      py=\"2\"\n      px=\"3\"\n      data-tgph-appearance=\"dark\"\n      style={{ zIndex: MAX_Z_INDEX }}\n    >\n      <Stack gap=\"2\" align=\"center\" direction=\"row\">\n        <Tag\n          color=\"green\"\n          variant=\"soft\"\n          icon={{ icon: Wrench, \"aria-hidden\": true }}\n        >\n          Debug\n        </Tag>\n\n        <Text\n          as=\"div\"\n          size=\"1\"\n          weight=\"medium\"\n          w=\"full\"\n          maxWidth=\"40\"\n          style={{\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {debugState.forcedGuideKey}\n        </Text>\n\n        <Button\n          onClick={handleExit}\n          size=\"1\"\n          variant=\"soft\"\n          trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n        >\n          Exit\n        </Button>\n\n        <Button\n          onClick={handleToggleCollapse}\n          size=\"1\"\n          variant=\"soft\"\n          leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["MAX_Z_INDEX","GuideToolbar","isCollapsed","setIsCollapsed","useState","client","useGuideContext","debugState","useStore","store","state","debug","forcedGuideKey","handleExit","exitDebugMode","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":";;;;;;;;AAYA,MAAMA,IAAc,YAEPC,IAAeA,MAAM;AAChC,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9C;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAC7BC,IAAaC,EAASH,EAAOI,OAAQC,CAAAA,MAAUA,EAAMC,KAAK;AAE5D,MAAA,EAACJ,KAAAA,QAAAA,EAAYK;AACR,WAAA;AAGT,QAAMC,IAAaA,MAAM;AACvBR,IAAAA,EAAOS,cAAc;AAAA,EACvB,GAEMC,IAAuBA,MAAM;AACjCZ,IAAAA,EAAe,CAACD,CAAW;AAAA,EAC7B;AAEA,SAAIA,IAEAc,gBAAAA,EAAA,cAACC,GACC,EAAA,SAASF,GACT,UAAS,SACT,KAAI,KACJ,OAAM,KACN,IAAG,aACH,QAAO,KACP,SAAQ,KACR,GAAE,MACF,GAAE,MACF,SAAQ,QACR,wBAAqB,QACrB,cAAW,wBACX,OAAO;AAAA,IAAEG,QAAQlB;AAAAA,EAAAA,EAEjB,GAAAgB,gBAAAA,EAAA,cAAC,OACC,EAAA,OAAM,MACN,QAAO,MACP,SAAQ,aACR,MAAK,QACL,OAAM,8BACN,OAAO;AAAA,IACLG,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,MAAM;AAAA,IACNC,WAAW;AAAA,EAAA,KAGbN,gBAAAA,EAAA,cAAC,QACC,EAAA,GAAE,2JACF,MAAK,UAAS,CAAA,GAEhBA,gBAAAA,EAAA,cAAC,UACC,GAAE,wKACF,MAAK,UAAS,CAAA,CAElB,CACF,IAKFA,gBAAAA,EAAA,cAACO,GACC,EAAA,KAAI,KACJ,OAAM,UACN,UAAS,SACT,KAAI,KACJ,OAAM,KACN,iBAAgB,aAChB,IAAG,aACH,QAAO,KACP,SAAQ,KACR,IAAG,KACH,IAAG,KACH,wBAAqB,QACrB,OAAO;AAAA,IAAEL,QAAQlB;AAAAA,EAAAA,KAEjBgB,gBAAAA,EAAA,cAACO,GAAM,EAAA,KAAI,KAAI,OAAM,UAAS,WAAU,MAAA,mCACrCC,GACC,EAAA,OAAM,SACN,SAAQ,QACR,MAAM;AAAA,IAAEC,MAAMC;AAAAA,IAAQ,eAAe;AAAA,EAAA,EAAO,GAAA,OAG9C,GAEAV,gBAAAA,EAAA,cAACW,KACC,IAAG,OACH,MAAK,KACL,QAAO,UACP,GAAE,QACF,UAAS,MACT,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EAGbvB,EAAAA,GAAAA,EAAWK,cACd,GAECI,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAASJ,GACT,MAAK,KACL,SAAQ,QACR,cAAc;AAAA,IAAEY,MAAMM;AAAAA,IAAO,eAAe;AAAA,EAAK,EAAA,GAAE,MAGrD,GAECf,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAASF,GACT,MAAK,KACL,SAAQ,QACR,aAAa;AAAA,IAAEU,MAAMO;AAAAA,IAAWC,KAAK;AAAA,EAAyB,EAAA,CAAE,CAEpE,CACF;AAEJ;"}

package/dist/types/modules/guide/components/GuideToolbar/GuideToolbar.d.ts

@@ -1,2 +0,0 @@
-export declare const GuideToolbar: () => import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=GuideToolbar.d.ts.map

package/dist/types/modules/guide/components/GuideToolbar/GuideToolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GuideToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,YAAY,sDAuHxB,CAAC"}

package/dist/types/modules/guide/components/GuideToolbar/index.d.ts

@@ -1,2 +0,0 @@
-export { GuideToolbar } from './GuideToolbar';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/modules/guide/components/GuideToolbar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/GuideToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}