@knocklabs/react 0.8.7 → 0.8.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.8.9
+
+### Patch Changes
+
+- Updated dependencies [49df373]
+  - @knocklabs/client@0.18.6
+  - @knocklabs/react-core@0.10.6
+
+## 0.8.8
+
+### Patch Changes
+
+- bf7677a: feat: persist guide debug state in local storage
+- Updated dependencies [bf7677a]
+- Updated dependencies [9eba682]
+  - @knocklabs/client@0.18.5
+  - @knocklabs/react-core@0.10.5
+
 ## 0.8.7
 
 ### Patch Changes

package/dist/cjs/modules/core/utils.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=e=>{const n=window.screenLeft??window.screenX,t=window.screenTop??window.screenY,o=window.innerWidth??document.documentElement.clientWidth??screen.width,i=window.innerHeight??document.documentElement.clientHeight??screen.height,c=o/2-600/2+n,d=`width=600,height=800,top=${i/2-800/2+t},left=${c}`;window.open(e,"_blank",d)},h=()=>{if(typeof window<"u")return window};exports.checkForWindow=h;exports.openPopupWindow=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=e=>{const n=window.screenLeft??window.screenX,t=window.screenTop??window.screenY,o=window.innerWidth??document.documentElement.clientWidth??screen.width,i=window.innerHeight??document.documentElement.clientHeight??screen.height,c=o/2-600/2+n,d=`width=600,height=800,top=${i/2-800/2+t},left=${c}`;window.open(e,"_blank",d)};exports.openPopupWindow=h;
 //# sourceMappingURL=utils.js.map

package/dist/cjs/modules/core/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n  if (typeof window !== \"undefined\") {\n    return window;\n  }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","checkForWindow"],"mappings":"gFAAaA,MAAAA,EAAmBC,GAAgB,CAIxCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAW,4BAHLJ,EAAc,EAAIE,IAAS,EAAIV,CAGgB,SAASW,CAAI,GAEjEE,OAAAA,KAAKjB,EAAK,SAAUgB,CAAQ,CACrC,EAEaE,EAAiBA,IAAM,CAC9B,GAAA,OAAOhB,OAAW,IACbA,OAAAA,MAEX"}
+{"version":3,"file":"utils.js","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n  if (typeof window !== \"undefined\") {\n    return window;\n  }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open"],"mappings":"gFAAaA,MAAAA,EAAmBC,GAAgB,CAIxCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAW,4BAHLJ,EAAc,EAAIE,IAAS,EAAIV,CAGgB,SAASW,CAAI,GAEjEE,OAAAA,KAAKjB,EAAK,SAAUgB,CAAQ,CACrC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),c=require("@knocklabs/client"),s=require("@knocklabs/react-core"),n=require("@telegraph/button"),d=require("@telegraph/layout"),E=require("@telegraph/tag"),m=require("@telegraph/typography"),i=require("lucide-react");;/* empty css                                          */require("lodash.debounce");const w=require("../../../core/utils.js");;/* empty css            */const C=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=C(f),u=2147483647,b=()=>{const[t,p]=f.useState(!1),{client:g}=s.useGuideContext(),o=s.useStore(g.store,a=>a.debug);if(!(o!=null&&o.forcedGuideKey))return null;const h=()=>{const a=w.checkForWindow();if(!a)return;const r=new URL(a.location.href);r.searchParams.delete(c.DEBUG_QUERY_PARAMS.GUIDE_KEY),r.searchParams.delete(c.DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID),a.location.href=r.toString()},l=()=>{p(!t)};return t?e.default.createElement(n.Button,{onClick:l,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:u}},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:u}},e.default.createElement(d.Stack,{gap:"2",align:"center",direction:"row"},e.default.createElement(E.Tag,{color:"green",variant:"soft",icon:{icon:i.Wrench,"aria-hidden":!0}},"Debug"),e.default.createElement(m.Text,{as:"div",size:"1",weight:"medium",w:"full",maxWidth:"40",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},o.forcedGuideKey),e.default.createElement(n.Button,{onClick:h,size:"1",variant:"soft",trailingIcon:{icon:i.Undo2,"aria-hidden":!0}},"Exit"),e.default.createElement(n.Button,{onClick:l,size:"1",variant:"soft",leadingIcon:{icon:i.Minimize2,alt:"Collapse guide toolbar"}})))};exports.GuideToolbar=b;
+"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 +1 @@
-{"version":3,"file":"GuideToolbar.js","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { DEBUG_QUERY_PARAMS } from \"@knocklabs/client\";\nimport { 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 { checkForWindow } from \"../../../core\";\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    const window = checkForWindow();\n    if (!window) {\n      return;\n    }\n\n    const url = new URL(window.location.href);\n    url.searchParams.delete(DEBUG_QUERY_PARAMS.GUIDE_KEY);\n    url.searchParams.delete(DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID);\n    window.location.href = url.toString();\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","window","checkForWindow","url","URL","location","href","searchParams","delete","DEBUG_QUERY_PARAMS","GUIDE_KEY","PREVIEW_SESSION_ID","toString","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":"giBAeMA,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,CACvB,MAAMC,EAASC,EAAAA,eAAe,EAC9B,GAAI,CAACD,EACH,OAGF,MAAME,EAAM,IAAIC,IAAIH,EAAOI,SAASC,IAAI,EACpCC,EAAAA,aAAaC,OAAOC,EAAAA,mBAAmBC,SAAS,EAChDH,EAAAA,aAAaC,OAAOC,EAAAA,mBAAmBE,kBAAkB,EACtDN,EAAAA,SAASC,KAAOH,EAAIS,SAAS,CACtC,EAEMC,EAAuBA,IAAM,CACjCvB,EAAe,CAACD,CAAW,CAC7B,EAEA,OAAIA,EAEAyB,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,OAAQ7B,CAAAA,CAEjB,EAAA2B,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,OAAQ7B,CAAAA,GAEjB2B,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,QAGblC,CAAAA,EAAAA,EAAWK,cACd,EAECe,EAAA,QAAA,cAAAC,EAAA,OAAA,CACC,QAASf,EACT,KAAK,IACL,QAAQ,OACR,aAAc,CAAEuB,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"}
+{"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/core/utils.mjs

@@ -1,12 +1,8 @@
 const r = (e) => {
-  const n = window.screenLeft ?? window.screenX, t = window.screenTop ?? window.screenY, o = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, i = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, c = o / 2 - 600 / 2 + n, d = `width=600,height=800,top=${i / 2 - 800 / 2 + t},left=${c}`;
-  window.open(e, "_blank", d);
-}, p = () => {
-  if (typeof window < "u")
-    return window;
+  const n = window.screenLeft ?? window.screenX, t = window.screenTop ?? window.screenY, o = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, i = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, c = o / 2 - 600 / 2 + n, h = `width=600,height=800,top=${i / 2 - 800 / 2 + t},left=${c}`;
+  window.open(e, "_blank", h);
 };
 export {
-  p as checkForWindow,
   r as openPopupWindow
 };
 //# sourceMappingURL=utils.mjs.map

package/dist/esm/modules/core/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n  if (typeof window !== \"undefined\") {\n    return window;\n  }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","checkForWindow"],"mappings":"AAAaA,MAAAA,IAAkBA,CAACC,MAAgB;AAIxCC,QAAAA,IAAaC,OAAOD,cAAcC,OAAOC,SACzCC,IAAYF,OAAOE,aAAaF,OAAOG,SAEvCC,IACJJ,OAAOI,cAAcC,SAASC,gBAAgBC,eAAeC,OAAOC,OAChEC,IACJV,OAAOU,eACPL,SAASC,gBAAgBK,gBACzBH,OAAOI,QAEHC,IAAOT,IAAa,IAAIK,MAAQ,IAAIV,GAIpCe,IAAW,4BAHLJ,IAAc,IAAIE,MAAS,IAAIV,CAGgB,SAASW,CAAI;AAEjEE,SAAAA,KAAKjB,GAAK,UAAUgB,CAAQ;AACrC,GAEaE,IAAiBA,MAAM;AAC9B,MAAA,OAAOhB,SAAW;AACbA,WAAAA;AAEX;"}
+{"version":3,"file":"utils.mjs","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n  if (typeof window !== \"undefined\") {\n    return window;\n  }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open"],"mappings":"AAAaA,MAAAA,IAAkBA,CAACC,MAAgB;AAIxCC,QAAAA,IAAaC,OAAOD,cAAcC,OAAOC,SACzCC,IAAYF,OAAOE,aAAaF,OAAOG,SAEvCC,IACJJ,OAAOI,cAAcC,SAASC,gBAAgBC,eAAeC,OAAOC,OAChEC,IACJV,OAAOU,eACPL,SAASC,gBAAgBK,gBACzBH,OAAOI,QAEHC,IAAOT,IAAa,IAAIK,MAAQ,IAAIV,GAIpCe,IAAW,4BAHLJ,IAAc,IAAIE,MAAS,IAAIV,CAGgB,SAASW,CAAI;AAEjEE,SAAAA,KAAKjB,GAAK,UAAUgB,CAAQ;AACrC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"GuideToolbar.mjs","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { DEBUG_QUERY_PARAMS } from \"@knocklabs/client\";\nimport { 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 { checkForWindow } from \"../../../core\";\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    const window = checkForWindow();\n    if (!window) {\n      return;\n    }\n\n    const url = new URL(window.location.href);\n    url.searchParams.delete(DEBUG_QUERY_PARAMS.GUIDE_KEY);\n    url.searchParams.delete(DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID);\n    window.location.href = url.toString();\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","window","checkForWindow","url","URL","location","href","searchParams","delete","DEBUG_QUERY_PARAMS","GUIDE_KEY","PREVIEW_SESSION_ID","toString","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":";;;;;;;;;;;;AAeA,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;AACvB,UAAMC,IAASC,EAAe;AAC9B,QAAI,CAACD;AACH;AAGF,UAAME,IAAM,IAAIC,IAAIH,EAAOI,SAASC,IAAI;AACpCC,IAAAA,EAAAA,aAAaC,OAAOC,EAAmBC,SAAS,GAChDH,EAAAA,aAAaC,OAAOC,EAAmBE,kBAAkB,GACtDN,EAAAA,SAASC,OAAOH,EAAIS,SAAS;AAAA,EACtC,GAEMC,IAAuBA,MAAM;AACjCvB,IAAAA,EAAe,CAACD,CAAW;AAAA,EAC7B;AAEA,SAAIA,IAEAyB,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,QAAQ7B;AAAAA,EAAAA,EAEjB,GAAA2B,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,QAAQ7B;AAAAA,EAAAA,KAEjB2B,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,EAGblC,EAAAA,GAAAA,EAAWK,cACd,GAECe,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAASf,GACT,MAAK,KACL,SAAQ,QACR,cAAc;AAAA,IAAEuB,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;"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"GuideToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"names":[],"mappings":"AAWA,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,YAAY,sDA+HxB,CAAC"}
+{"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/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.8.7",
+  "version": "0.8.9",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",
@@ -50,8 +50,8 @@
     "react-dom": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@knocklabs/client": "^0.18.4",
-    "@knocklabs/react-core": "^0.10.4",
+    "@knocklabs/client": "^0.18.6",
+    "@knocklabs/react-core": "^0.10.6",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dialog": "^1.1.14",
     "@telegraph/combobox": "^0.1.8",
@@ -79,7 +79,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.14",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",