@knocklabs/react 0.12.1 → 0.13.0

package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@knocklabs/react-core"),g=require("@popperjs/core"),a=require("react"),E=require("../../../core/hooks/useComponentVisible.js"),F=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");;/* empty css                              */;/* empty css            */const N=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=N(a),_=({store:e,feedClient:t})=>{e.metadata.unseen_count>0&&t.markAllAsSeen()},C=({isVisible:e,onOpen:t=_,onClose:l,buttonRef:r,closeOnClickOutside:p=!0,placement:c="bottom-end",...m})=>{const{t:q}=d.useTranslations(),{colorMode:v,feedClient:f,useFeedStore:y}=d.useKnockFeed(),s=y(),{ref:n}=E(e,o=>{var u;o.target instanceof Element&&((u=r.current)!=null&&u.contains(o.target))||l(o)},{closeOnClickOutside:p});return a.useEffect(()=>{e&&t&&t({store:s,feedClient:f})},[e,t,s,f]),a.useEffect(()=>{if(r.current&&n.current){const o=g.createPopper(r.current,n.current,{strategy:"fixed",placement:c,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return()=>{o.destroy()}}},[r,n,c]),i.default.createElement("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${v}`,style:{visibility:e?"visible":"hidden",opacity:e?1:0},ref:n,role:"dialog","aria-label":q("notifications"),tabIndex:-1},i.default.createElement("div",{className:"rnf-notification-feed-popover__inner"},i.default.createElement(F.NotificationFeed,{...m})))};exports.NotificationFeedPopover=C;
-//# sourceMappingURL=NotificationFeedPopover.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/index.js");const n=require("../../../core/hooks/useComponentVisible.js");;/* empty css        */let r=require("@knocklabs/react-core"),i=require("react");i=e.__toESM(i);let a=require("react/jsx-runtime"),o=require("@popperjs/core");var s=({store:e,feedClient:t})=>{e.metadata.unseen_count>0&&t.markAllAsSeen()},c=({isVisible:e,onOpen:c=s,onClose:l,buttonRef:u,closeOnClickOutside:d=!0,placement:f=`bottom-end`,...p})=>{let{t:m}=(0,r.useTranslations)(),{colorMode:h,feedClient:g,useFeedStore:_}=(0,r.useKnockFeed)(),v=_(),{ref:y}=n.default(e,e=>{e.target instanceof Element&&u.current?.contains(e.target)||l(e)},{closeOnClickOutside:d});return(0,i.useEffect)(()=>{e&&c&&c({store:v,feedClient:g})},[e,c,v,g]),(0,i.useEffect)(()=>{if(u.current&&y.current){let e=(0,o.createPopper)(u.current,y.current,{strategy:`fixed`,placement:f,modifiers:[{name:`offset`,options:{offset:[0,8]}}]});return()=>{e.destroy()}}},[u,y,f]),(0,a.jsx)(`div`,{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${h}`,style:{visibility:e?`visible`:`hidden`,opacity:+!!e},ref:y,role:`dialog`,"aria-label":m(`notifications`),tabIndex:-1,children:(0,a.jsx)(`div`,{className:`rnf-notification-feed-popover__inner`,children:(0,a.jsx)(t.NotificationFeed,{...p})})})};exports.NotificationFeedPopover=c;
+//# sourceMappingURL=NotificationFeedPopover.js.map

package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n  store: FeedStoreState;\n  feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n  if (store.metadata.unseen_count > 0) {\n    feedClient.markAllAsSeen();\n  }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n  isVisible: boolean;\n  onOpen?: (arg: OnOpenOptions) => void;\n  onClose: (e: Event) => void;\n  buttonRef: RefObject<HTMLElement | null>;\n  closeOnClickOutside?: boolean;\n  placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n  NotificationFeedPopoverProps\n> = ({\n  isVisible,\n  onOpen = defaultOnOpen,\n  onClose,\n  buttonRef,\n  closeOnClickOutside = true,\n  placement = \"bottom-end\",\n  ...feedProps\n}) => {\n  const { t } = useTranslations();\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(\n    isVisible,\n    (event) => {\n      // If the button is clicked, let that onClick handler handle the close\n      if (\n        event.target instanceof Element &&\n        buttonRef.current?.contains(event.target)\n      ) {\n        return;\n      }\n      onClose(event);\n    },\n    {\n      closeOnClickOutside,\n    },\n  );\n\n  useEffect(() => {\n    // Whenever the feed is opened, we want to invoke the `onOpen` callback\n    // function to handle any side effects.\n    if (isVisible && onOpen) {\n      onOpen({ store, feedClient });\n    }\n  }, [isVisible, onOpen, store, feedClient]);\n\n  useEffect(() => {\n    if (buttonRef.current && popperRef.current) {\n      const popperInstance = createPopper(\n        buttonRef.current,\n        popperRef.current,\n        {\n          strategy: \"fixed\",\n          placement,\n          modifiers: [\n            {\n              name: \"offset\",\n              options: {\n                offset: [0, 8],\n              },\n            },\n          ],\n        },\n      );\n\n      // Cleanup\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [buttonRef, popperRef, placement]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      role=\"dialog\"\n      aria-label={t(\"notifications\")}\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","event","target","Element","current","contains","useEffect","popperInstance","createPopper","strategy","modifiers","name","options","offset","destroy","visibility","opacity","React","NotificationFeed"],"mappings":"2dAeMA,EAAgBA,CAAC,CAAEC,MAAAA,EAAOC,WAAAA,CAA0B,IAAM,CAC1DD,EAAME,SAASC,aAAe,GAChCF,EAAWG,cAAc,CAE7B,EAWaC,EAETA,CAAC,CACHC,UAAAA,EACAC,OAAAA,EAASR,EACTS,QAAAA,EACAC,UAAAA,EACAC,oBAAAA,EAAsB,GACtBC,UAAAA,EAAY,aACZ,GAAGC,CACL,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAAEC,UAAAA,EAAWd,WAAAA,EAAYe,aAAAA,GAAiBC,eAAa,EACvDjB,EAAQgB,EAAa,EAErB,CAAEE,IAAKC,CAAAA,EAAcC,EACzBd,EACWe,GAAA,OAGPA,EAAMC,kBAAkBC,WACxBd,EAAAA,EAAUe,UAAVf,MAAAA,EAAmBgB,SAASJ,EAAMC,UAIpCd,EAAQa,CAAK,CAAA,EAEf,CACEX,oBAAAA,CAAAA,CAEJ,EAEAgB,OAAAA,EAAAA,UAAU,IAAM,CAGVpB,GAAaC,GACRA,EAAA,CAAEP,MAAAA,EAAOC,WAAAA,CAAAA,CAAY,GAE7B,CAACK,EAAWC,EAAQP,EAAOC,CAAU,CAAC,EAEzCyB,EAAAA,UAAU,IAAM,CACVjB,GAAAA,EAAUe,SAAWL,EAAUK,QAAS,CAC1C,MAAMG,EAAiBC,EAAAA,aACrBnB,EAAUe,QACVL,EAAUK,QACV,CACEK,SAAU,QACVlB,UAAAA,EACAmB,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,CAAC,CAAA,CAEhB,CAAA,CAAA,CAGP,EAGA,MAAO,IAAM,CACXN,EAAeO,QAAQ,CACzB,CAAA,CAED,EAAA,CAACzB,EAAWU,EAAWR,CAAS,CAAC,0BAGjC,MACC,CAAA,UAAW,gEAAgEI,CAAS,GACpF,MAAO,CACLoB,WAAY7B,EAAY,UAAY,SACpC8B,QAAS9B,EAAY,EAAI,CAC3B,EACA,IAAKa,EACL,KAAK,SACL,aAAYN,EAAE,eAAe,EAC7B,SAAU,IAETwB,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,wCACbA,EAAAA,QAAA,cAACC,oBAAiB,GAAI1B,CAAAA,CAAU,CAClC,CACF,CAEJ"}
+{"version":3,"file":"NotificationFeedPopover.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n  store: FeedStoreState;\n  feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n  if (store.metadata.unseen_count > 0) {\n    feedClient.markAllAsSeen();\n  }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n  isVisible: boolean;\n  onOpen?: (arg: OnOpenOptions) => void;\n  onClose: (e: Event) => void;\n  buttonRef: RefObject<HTMLElement | null>;\n  closeOnClickOutside?: boolean;\n  placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n  NotificationFeedPopoverProps\n> = ({\n  isVisible,\n  onOpen = defaultOnOpen,\n  onClose,\n  buttonRef,\n  closeOnClickOutside = true,\n  placement = \"bottom-end\",\n  ...feedProps\n}) => {\n  const { t } = useTranslations();\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(\n    isVisible,\n    (event) => {\n      // If the button is clicked, let that onClick handler handle the close\n      if (\n        event.target instanceof Element &&\n        buttonRef.current?.contains(event.target)\n      ) {\n        return;\n      }\n      onClose(event);\n    },\n    {\n      closeOnClickOutside,\n    },\n  );\n\n  useEffect(() => {\n    // Whenever the feed is opened, we want to invoke the `onOpen` callback\n    // function to handle any side effects.\n    if (isVisible && onOpen) {\n      onOpen({ store, feedClient });\n    }\n  }, [isVisible, onOpen, store, feedClient]);\n\n  useEffect(() => {\n    if (buttonRef.current && popperRef.current) {\n      const popperInstance = createPopper(\n        buttonRef.current,\n        popperRef.current,\n        {\n          strategy: \"fixed\",\n          placement,\n          modifiers: [\n            {\n              name: \"offset\",\n              options: {\n                offset: [0, 8],\n              },\n            },\n          ],\n        },\n      );\n\n      // Cleanup\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [buttonRef, popperRef, placement]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      role=\"dialog\"\n      aria-label={t(\"notifications\")}\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"mappings":"oYAeA,IAAM,GAAiB,CAAE,QAAO,gBAAgC,CAC1D,EAAM,SAAS,aAAe,GAChC,EAAW,cAAc,CAE7B,EAWa,GAER,CACH,YACA,SAAS,EACT,UACA,YACA,sBAAsB,GACtB,YAAY,aACZ,GAAG,KACC,CACJ,GAAM,CAAE,MAAA,EAAA,EAAA,gBAAA,CAAsB,EACxB,CAAE,YAAW,aAAY,iBAAA,EAAA,EAAA,aAAA,CAA8B,EACvD,EAAQ,EAAa,EAErB,CAAE,IAAK,GAAc,EAAA,QACzB,EACC,GAAU,CAGP,EAAM,kBAAkB,SACxB,EAAU,SAAS,SAAS,EAAM,MAAM,GAI1C,EAAQ,CAAK,CACf,EACA,CACE,qBACF,CACF,EAoCA,OAlCA,EAAA,EAAA,UAAA,KAAgB,CAGV,GAAa,GACf,EAAO,CAAE,QAAO,YAAW,CAAC,CAEhC,EAAG,CAAC,EAAW,EAAQ,EAAO,CAAU,CAAC,GAEzC,EAAA,EAAA,UAAA,KAAgB,CACd,GAAI,EAAU,SAAW,EAAU,QAAS,CAC1C,IAAM,GAAA,EAAA,EAAA,aAAA,CACJ,EAAU,QACV,EAAU,QACV,CACE,SAAU,QACV,YACA,UAAW,CACT,CACE,KAAM,SACN,QAAS,CACP,OAAQ,CAAC,EAAG,CAAC,CACf,CACF,CACF,CACF,CACF,EAGA,UAAa,CACX,EAAe,QAAQ,CACzB,CACF,CACF,EAAG,CAAC,EAAW,EAAW,CAAS,CAAC,GAGlC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,UAAW,gEAAgE,IAC3E,MAAO,CACL,WAAY,EAAY,UAAY,SACpC,QAAS,IACX,EACA,IAAK,EACL,KAAK,SACL,aAAY,EAAE,eAAe,EAC7B,SAAU,aAEV,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iDACb,EAAA,EAAA,IAAA,CAAC,EAAA,iBAAD,CAAkB,GAAI,CAAY,CAAA,CAC/B,CAAA,CACF,CAAA,CAET"}

package/dist/cjs/modules/feed/components/NotificationFeedPopover/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./NotificationFeedPopover.js");exports.NotificationFeedPopover=e.NotificationFeedPopover;

package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@knocklabs/react-core"),i=require("react"),r=require("../../../core/components/Icons/Bell.js"),u=require("../UnseenBadge/UnseenBadge.js");;/* empty css            */const l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(i),f=t.default.forwardRef(({onClick:e,badgeCountType:n},o)=>{const{colorMode:a}=c.useKnockFeed();return t.default.createElement("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${a}`,"aria-label":"Open notification feed",ref:o,onClick:e},t.default.createElement(r.BellIcon,{"aria-hidden":!0}),t.default.createElement(u.UnseenBadge,{badgeCountType:n}))});exports.NotificationIconButton=f;
-//# sourceMappingURL=NotificationIconButton.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../../../core/components/Icons/Bell.js");require("../../../core/components/Icons/index.js");const n=require("../UnseenBadge/UnseenBadge.js");require("../UnseenBadge/index.js");/* empty css         */let r=require("@knocklabs/react-core"),i=require("react");i=e.__toESM(i);let a=require("react/jsx-runtime");var o=i.default.forwardRef(({onClick:e,badgeCountType:i},o)=>{let{colorMode:s}=(0,r.useKnockFeed)();return(0,a.jsxs)(`button`,{className:`rnf-notification-icon-button rnf-notification-icon-button--${s}`,"aria-label":`Open notification feed`,ref:o,onClick:e,children:[(0,a.jsx)(t.BellIcon,{"aria-hidden":!0}),(0,a.jsx)(n.UnseenBadge,{badgeCountType:i})]})});exports.NotificationIconButton=o;
+//# sourceMappingURL=NotificationIconButton.js.map

package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationIconButton.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { type BadgeCountType, useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon aria-hidden />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":"2UAcaA,EAAyBC,EAAAA,QAAMC,WAG1C,CAAC,CAAEC,QAAAA,EAASC,eAAAA,CAAe,EAAGC,IAAQ,CAChC,KAAA,CAAEC,UAAAA,GAAcC,eAAa,EAEnC,+BACG,SACC,CAAA,UAAW,8DAA8DD,CAAS,GAClF,aAAW,yBACX,IAAAD,EACA,QAAAF,GAEAF,EAAAA,QAAA,cAACO,YAAS,cAAW,EAAA,CAAA,EACpBP,EAAAA,QAAA,cAAAQ,EAAAA,YAAA,CAAY,eAAAL,CAA+B,CAAA,CAC9C,CAEJ,CAAC"}
+{"version":3,"file":"NotificationIconButton.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { type BadgeCountType, useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon aria-hidden />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"mappings":"wYAcA,IAAa,EAAyB,EAAA,QAAM,YAGzC,CAAE,UAAS,kBAAkB,IAAQ,CACtC,GAAM,CAAE,cAAA,EAAA,EAAA,aAAA,CAA2B,EAEnC,OACE,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,UAAW,8DAA8D,IACzE,aAAW,yBACN,MACI,mBAJX,EAME,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CAAU,cAAA,EAAa,CAAA,GACvB,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CAA6B,gBAAiB,CAAA,CACxC,GAEZ,CAAC"}

package/dist/cjs/modules/feed/components/NotificationIconButton/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./NotificationIconButton.js");exports.NotificationIconButton=e.NotificationIconButton;

package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@knocklabs/react-core"),s=require("react");;/* empty css            */const c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=c(s);function o(e,t){switch(e){case"all":return t.total_count;case"unread":return t.unread_count;case"unseen":return t.unseen_count}}const l=({badgeCountType:e="unseen"})=>{const{useFeedStore:t}=a.useKnockFeed(),n=t(r=>o(e,r.metadata));return n!==0?u.default.createElement("div",{className:"rnf-unseen-badge",role:"status","aria-label":a.getBadgeAriaLabel(n,e)},u.default.createElement("span",{className:"rnf-unseen-badge__count","aria-hidden":"true"},a.formatBadgeCount(n))):null};exports.UnseenBadge=l;
-//# sourceMappingURL=UnseenBadge.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js");;/* empty css        */let t=require("@knocklabs/react-core"),n=require("react");n=e.__toESM(n);let r=require("react/jsx-runtime");function i(e,t){switch(e){case`all`:return t.total_count;case`unread`:return t.unread_count;case`unseen`:return t.unseen_count}}var a=({badgeCountType:e=`unseen`})=>{let{useFeedStore:n}=(0,t.useKnockFeed)(),a=n(t=>i(e,t.metadata));return a===0?null:(0,r.jsx)(`div`,{className:`rnf-unseen-badge`,role:`status`,"aria-label":(0,t.getBadgeAriaLabel)(a,e),children:(0,r.jsx)(`span`,{className:`rnf-unseen-badge__count`,"aria-hidden":`true`,children:(0,t.formatBadgeCount)(a)})})};exports.UnseenBadge=a;
+//# sourceMappingURL=UnseenBadge.js.map

package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnseenBadge.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport {\n  type BadgeCountType,\n  formatBadgeCount,\n  getBadgeAriaLabel,\n  useKnockFeed,\n} from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n): number {\n  switch (badgeCountType) {\n    case \"all\":\n      return metadata.total_count;\n    case \"unread\":\n      return metadata.unread_count;\n    case \"unseen\":\n      return metadata.unseen_count;\n  }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n  badgeCountType = \"unseen\",\n}) => {\n  const { useFeedStore } = useKnockFeed();\n  const badgeCountValue = useFeedStore((state) =>\n    selectBadgeCount(badgeCountType, state.metadata),\n  );\n\n  return badgeCountValue !== 0 ? (\n    <div\n      className=\"rnf-unseen-badge\"\n      role=\"status\"\n      aria-label={getBadgeAriaLabel(badgeCountValue, badgeCountType)}\n    >\n      <span className=\"rnf-unseen-badge__count\" aria-hidden=\"true\">\n        {formatBadgeCount(badgeCountValue)}\n      </span>\n    </div>\n  ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","getBadgeAriaLabel","formatBadgeCount"],"mappings":"4OAeA,SAASA,EACPC,EACAC,EACQ,CACR,OAAQD,EAAc,CACpB,IAAK,MACH,OAAOC,EAASC,YAClB,IAAK,SACH,OAAOD,EAASE,aAClB,IAAK,SACH,OAAOF,EAASG,YAAAA,CAEtB,CAEO,MAAMC,EAA0CA,CAAC,CACtDL,eAAAA,EAAiB,QACnB,IAAM,CACE,KAAA,CAAEM,aAAAA,GAAiBC,eAAa,EAChCC,EAAkBF,EAAcG,GACpCV,EAAiBC,EAAgBS,EAAMR,QAAQ,CACjD,EAEOO,OAAAA,IAAoB,EACxBE,UAAA,cAAA,MAAA,CACC,UAAU,mBACV,KAAK,SACL,aAAYC,EAAkBH,kBAAAA,EAAiBR,CAAc,CAE7D,EAAAU,EAAAA,QAAA,cAAC,OAAK,CAAA,UAAU,0BAA0B,cAAY,QACnDE,EAAAA,iBAAiBJ,CAAe,CACnC,CACF,EACE,IACN"}
+{"version":3,"file":"UnseenBadge.js","names":[],"sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport {\n  type BadgeCountType,\n  formatBadgeCount,\n  getBadgeAriaLabel,\n  useKnockFeed,\n} from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n): number {\n  switch (badgeCountType) {\n    case \"all\":\n      return metadata.total_count;\n    case \"unread\":\n      return metadata.unread_count;\n    case \"unseen\":\n      return metadata.unseen_count;\n  }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n  badgeCountType = \"unseen\",\n}) => {\n  const { useFeedStore } = useKnockFeed();\n  const badgeCountValue = useFeedStore((state) =>\n    selectBadgeCount(badgeCountType, state.metadata),\n  );\n\n  return badgeCountValue !== 0 ? (\n    <div\n      className=\"rnf-unseen-badge\"\n      role=\"status\"\n      aria-label={getBadgeAriaLabel(badgeCountValue, badgeCountType)}\n    >\n      <span className=\"rnf-unseen-badge__count\" aria-hidden=\"true\">\n        {formatBadgeCount(badgeCountValue)}\n      </span>\n    </div>\n  ) : null;\n};\n"],"mappings":"6MAeA,SAAS,EACP,EACA,EACQ,CACR,OAAQ,EAAR,CACE,IAAK,MACH,OAAO,EAAS,YAClB,IAAK,SACH,OAAO,EAAS,aAClB,IAAK,SACH,OAAO,EAAS,YACpB,CACF,CAEA,IAAa,GAA2C,CACtD,iBAAiB,YACb,CACJ,GAAM,CAAE,iBAAA,EAAA,EAAA,aAAA,CAA8B,EAChC,EAAkB,EAAc,GACpC,EAAiB,EAAgB,EAAM,QAAQ,CACjD,EAEA,OAAO,IAAoB,EAUvB,MATF,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,UAAU,mBACV,KAAK,SACL,cAAA,EAAA,EAAA,kBAAA,CAA8B,EAAiB,CAAc,YAE7D,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,0BAA0B,cAAY,uCAClC,CAAe,CAC7B,CAAA,CACH,CAAA,CAET"}

package/dist/cjs/modules/feed/components/UnseenBadge/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./UnseenBadge.js");exports.UnseenBadge=e.UnseenBadge;

package/dist/cjs/modules/feed/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./components/EmptyFeed/EmptyFeed.js");require("./components/EmptyFeed/index.js");const t=require("./components/NotificationCell/Avatar.js"),n=require("./components/NotificationCell/NotificationCell.js");require("./components/NotificationCell/index.js");const r=require("./components/NotificationFeed/MarkAsRead.js"),i=require("./components/NotificationFeed/NotificationFeedHeader.js"),a=require("./components/NotificationFeed/NotificationFeed.js");require("./components/NotificationFeed/index.js");const o=require("./components/NotificationFeedContainer/NotificationFeedContainer.js");require("./components/NotificationFeedContainer/index.js");const s=require("./components/NotificationFeedPopover/NotificationFeedPopover.js");require("./components/NotificationFeedPopover/index.js");const c=require("./components/UnseenBadge/UnseenBadge.js");require("./components/UnseenBadge/index.js");const l=require("./components/NotificationIconButton/NotificationIconButton.js");require("./components/NotificationIconButton/index.js"),exports.Avatar=t.Avatar,exports.EmptyFeed=e.EmptyFeed,exports.MarkAsRead=r.MarkAsRead,exports.NotificationCell=n.NotificationCell,exports.NotificationFeed=a.NotificationFeed,exports.NotificationFeedContainer=o.NotificationFeedContainer,exports.NotificationFeedHeader=i.NotificationFeedHeader,exports.NotificationFeedPopover=s.NotificationFeedPopover,exports.NotificationIconButton=l.NotificationIconButton,exports.UnseenBadge=c.UnseenBadge;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("@knocklabs/react-core"),N=require("react"),l=require("../../../core/cx/index.js"),w=require("../helpers.js");;/* empty css            */const x=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=x(N),v="banner",s=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner",a),...n},e);s.displayName="BannerView.Root";const u=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__message",a),...n},e);u.displayName="BannerView.Content";const d=({title:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__title",a),...n},e);d.displayName="BannerView.Title";const m=({body:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__body",a),dangerouslySetInnerHTML:{__html:e},...n});m.displayName="BannerView.Body";const f=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__actions",a),...n},e);f.displayName="BannerView.Actions";const y=({text:e,action:a,className:n,...r})=>t.default.createElement("button",{className:l.cx("knock-guide-banner__action",n),...r},e);y.displayName="BannerView.PrimaryButton";const _=({text:e,action:a,className:n,...r})=>t.default.createElement("button",{className:l.cx("knock-guide-banner__action knock-guide-banner__action--secondary",n),...r},e);_.displayName="BannerView.SecondaryButton";const b=({className:e,...a})=>t.default.createElement("button",{className:l.cx("knock-guide-banner__close",e),...a},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));b.displayName="BannerView.DismissButton";const p=({content:e,colorMode:a="light",onDismiss:n,onButtonClick:r})=>t.default.createElement(s,{"data-knock-color-mode":a},t.default.createElement(u,null,t.default.createElement(d,{title:e.title}),t.default.createElement(m,{body:e.body})),t.default.createElement(f,null,e.secondary_button&&t.default.createElement(_,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:c=>{if(r){const{text:o,action:i}=e.secondary_button;r(c,{name:"secondary_button",text:o,action:i})}}}),e.primary_button&&t.default.createElement(y,{text:e.primary_button.text,action:e.primary_button.action,onClick:c=>{if(r){const{text:o,action:i}=e.primary_button;r(c,{name:"primary_button",text:o,action:i})}}}),e.dismissible&&t.default.createElement(b,{onClick:n})));p.displayName="BannerView.Default";const k=({guideKey:e,onButtonClick:a})=>{const{guide:n,step:r,colorMode:c}=B.useGuide({key:e,type:v});return t.default.useEffect(()=>{r&&r.markAsSeen()},[r]),!n||!r?null:t.default.createElement(p,{content:r.content,colorMode:c,onDismiss:()=>r.markAsArchived(),onButtonClick:(o,i)=>{const g={...i,type:"button_click"};return r.markAsInteracted({metadata:g}),a?a(o,{button:i,step:r,guide:n}):w.maybeNavigateToUrlWithDelay(i.action)}})};k.displayName="Banner";const E={};Object.assign(E,{Default:p,Root:s,Content:u,Title:d,Body:m,Actions:f,PrimaryButton:y,SecondaryButton:_,DismissButton:b});exports.Banner=k;exports.BannerView=E;
-//# sourceMappingURL=Banner.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../../../core/cx/index.js"),n=require("../helpers.js");;/* empty css        */let r=require("@knocklabs/react-core"),i=require("react");i=e.__toESM(i);let a=require("react/jsx-runtime");var o=`banner`,s=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-banner`,n),...r,children:e});s.displayName=`BannerView.Root`;var c=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-banner__message`,n),...r,children:e});c.displayName=`BannerView.Content`;var l=({title:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-banner__title`,n),...r,children:e});l.displayName=`BannerView.Title`;var u=({body:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-banner__body`,n),dangerouslySetInnerHTML:{__html:e},...r});u.displayName=`BannerView.Body`;var d=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-banner__actions`,n),...r,children:e});d.displayName=`BannerView.Actions`;var f=({text:e,action:n,className:r,...i})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-banner__action`,r),...i,children:e});f.displayName=`BannerView.PrimaryButton`;var p=({text:e,action:n,className:r,...i})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-banner__action knock-guide-banner__action--secondary`,r),...i,children:e});p.displayName=`BannerView.SecondaryButton`;var m=({className:e,...n})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-banner__close`,e),...n,children:(0,a.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`18`,height:`18`,fill:`none`,children:(0,a.jsxs)(`g`,{fill:`#60646C`,fillRule:`evenodd`,clipRule:`evenodd`,children:[(0,a.jsx)(`path`,{d:`M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z`}),(0,a.jsx)(`path`,{d:`M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z`})]})})});m.displayName=`BannerView.DismissButton`;var h=({content:e,colorMode:t=`light`,onDismiss:n,onButtonClick:r})=>(0,a.jsxs)(s,{"data-knock-color-mode":t,children:[(0,a.jsxs)(c,{children:[(0,a.jsx)(l,{title:e.title}),(0,a.jsx)(u,{body:e.body})]}),(0,a.jsxs)(d,{children:[e.secondary_button&&(0,a.jsx)(p,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:t=>{if(r){let{text:n,action:i}=e.secondary_button;r(t,{name:`secondary_button`,text:n,action:i})}}}),e.primary_button&&(0,a.jsx)(f,{text:e.primary_button.text,action:e.primary_button.action,onClick:t=>{if(r){let{text:n,action:i}=e.primary_button;r(t,{name:`primary_button`,text:n,action:i})}}}),e.dismissible&&(0,a.jsx)(m,{onClick:n})]})]});h.displayName=`BannerView.Default`;var g=({guideKey:e,onButtonClick:t})=>{let{guide:s,step:c,colorMode:l}=(0,r.useGuide)({key:e,type:o});return i.default.useEffect(()=>{c&&c.markAsSeen()},[c]),!s||!c?null:(0,a.jsx)(h,{content:c.content,colorMode:l,onDismiss:()=>c.markAsArchived(),onButtonClick:(e,r)=>{let i={...r,type:`button_click`};return c.markAsInteracted({metadata:i}),t?t(e,{button:r,step:c,guide:s}):n.maybeNavigateToUrlWithDelay(r.action)}})};g.displayName=`Banner`;var _={};Object.assign(_,{Default:h,Root:s,Content:c,Title:l,Body:u,Actions:d,PrimaryButton:f,SecondaryButton:p,DismissButton:m}),exports.Banner=g,exports.BannerView=_;
+//# sourceMappingURL=Banner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport { ButtonContent, TargetButton, TargetButtonWithGuide } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cx(\"knock-guide-banner__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-banner__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={cx(\"knock-guide-banner__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as BannerContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","cx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":[],"sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport { ButtonContent, TargetButton, TargetButtonWithGuide } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cx(\"knock-guide-banner__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-banner__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={cx(\"knock-guide-banner__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as BannerContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Banner/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./Banner.js");exports.Banner=e.Banner,exports.BannerView=e.BannerView;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("@knocklabs/react-core"),v=require("react"),i=require("../../../core/cx/index.js"),b=require("../helpers.js");;/* empty css            */const A=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=A(v),D="card",o=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card",t),...r},e);o.displayName="CardView.Root";const m=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__message",t),...r},e);m.displayName="CardView.Content";const C=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__header",t),...r},e);C.displayName="CardView.Header";const w=({headline:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__headline",t),...r},e);w.displayName="CardView.Headline";const f=({title:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__title",t),...r},e);f.displayName="CardView.Title";const y=({body:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__body",t),dangerouslySetInnerHTML:{__html:e},...r});y.displayName="CardView.Body";const _=({children:e,className:t,alt:r,...l})=>a.default.createElement("img",{className:i.cx("knock-guide-card__img",t),alt:r||"",...l},e);_.displayName="CardView.Img";const g=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__actions",t),...r},e);g.displayName="CardView.Actions";const k=({text:e,action:t,className:r,...l})=>a.default.createElement("button",{className:i.cx("knock-guide-card__action",r),...l},e);k.displayName="CardView.PrimaryButton";const p=({text:e,action:t,className:r,...l})=>a.default.createElement("button",{className:i.cx("knock-guide-card__action knock-guide-card__action--secondary",r),...l},e);p.displayName="CardView.SecondaryButton";const E=({className:e,...t})=>a.default.createElement("button",{className:i.cx("knock-guide-card__close",e),...t},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},a.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},a.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),a.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));E.displayName="CardView.DismissButton";const N=({content:e,colorMode:t="light",onDismiss:r,onButtonClick:l,onImageClick:d})=>a.default.createElement(o,{"data-knock-color-mode":t},a.default.createElement(m,null,a.default.createElement(C,null,a.default.createElement(w,{headline:e.headline}),e.dismissible&&a.default.createElement(E,{onClick:r})),a.default.createElement(f,{title:e.title}),a.default.createElement(y,{body:e.body})),e.image&&a.default.createElement("a",{href:b.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},a.default.createElement(_,{src:e.image.url,alt:e.image.alt,onClick:n=>{d&&d(n,e.image)}})),(e.primary_button||e.secondary_button)&&a.default.createElement(g,null,e.primary_button&&a.default.createElement(k,{text:e.primary_button.text,action:e.primary_button.action,onClick:n=>{if(l){const{text:s,action:c}=e.primary_button;l(n,{name:"primary_button",text:s,action:c})}}}),e.secondary_button&&a.default.createElement(p,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:n=>{if(l){const{text:s,action:c}=e.secondary_button;l(n,{name:"secondary_button",text:s,action:c})}}})));N.displayName="CardView.Default";const x=({guideKey:e,onButtonClick:t,onImageClick:r})=>{const{guide:l,step:d,colorMode:n}=V.useGuide({key:e,type:D});return a.default.useEffect(()=>{d&&d.markAsSeen()},[d]),!l||!d?null:a.default.createElement(N,{content:d.content,colorMode:n,onDismiss:()=>d.markAsArchived(),onButtonClick:(s,c)=>{const u={...c,type:"button_click"};return d.markAsInteracted({metadata:u}),t?t(s,{button:c,step:d,guide:l}):b.maybeNavigateToUrlWithDelay(c.action)},onImageClick:(s,c)=>{const u={...c,type:"image_click"};if(d.markAsInteracted({metadata:u}),r)return r(s,{image:c,step:d,guide:l})}})};x.displayName="Card";const h={};Object.assign(h,{Default:N,Root:o,Content:m,Title:f,Body:y,Img:_,Actions:g,PrimaryButton:k,SecondaryButton:p,DismissButton:E});exports.Card=x;exports.CardView=h;
-//# sourceMappingURL=Card.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../../../core/cx/index.js"),n=require("../helpers.js");;/* empty css        */let r=require("@knocklabs/react-core"),i=require("react");i=e.__toESM(i);let a=require("react/jsx-runtime");var o=`card`,s=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-card`,n),...r,children:e});s.displayName=`CardView.Root`;var c=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-card__message`,n),...r,children:e});c.displayName=`CardView.Content`;var l=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-card__header`,n),...r,children:e});l.displayName=`CardView.Header`;var u=({headline:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-card__headline`,n),...r,children:e});u.displayName=`CardView.Headline`;var d=({title:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-card__title`,n),...r,children:e});d.displayName=`CardView.Title`;var f=({body:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-card__body`,n),dangerouslySetInnerHTML:{__html:e},...r});f.displayName=`CardView.Body`;var p=({children:e,className:n,alt:r,...i})=>(0,a.jsx)(`img`,{className:t.cx(`knock-guide-card__img`,n),alt:r||``,...i,children:e});p.displayName=`CardView.Img`;var m=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-card__actions`,n),...r,children:e});m.displayName=`CardView.Actions`;var h=({text:e,action:n,className:r,...i})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-card__action`,r),...i,children:e});h.displayName=`CardView.PrimaryButton`;var g=({text:e,action:n,className:r,...i})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-card__action knock-guide-card__action--secondary`,r),...i,children:e});g.displayName=`CardView.SecondaryButton`;var _=({className:e,...n})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-card__close`,e),...n,children:(0,a.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`18`,height:`18`,fill:`none`,children:(0,a.jsxs)(`g`,{fill:`#60646C`,fillRule:`evenodd`,clipRule:`evenodd`,children:[(0,a.jsx)(`path`,{d:`M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z`}),(0,a.jsx)(`path`,{d:`M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z`})]})})});_.displayName=`CardView.DismissButton`;var v=({content:e,colorMode:t=`light`,onDismiss:r,onButtonClick:i,onImageClick:o})=>(0,a.jsxs)(s,{"data-knock-color-mode":t,children:[(0,a.jsxs)(c,{children:[(0,a.jsxs)(l,{children:[(0,a.jsx)(u,{headline:e.headline}),e.dismissible&&(0,a.jsx)(_,{onClick:r})]}),(0,a.jsx)(d,{title:e.title}),(0,a.jsx)(f,{body:e.body})]}),e.image&&(0,a.jsx)(`a`,{href:n.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:`_blank`,children:(0,a.jsx)(p,{src:e.image.url,alt:e.image.alt,onClick:t=>{o&&o(t,e.image)}})}),(e.primary_button||e.secondary_button)&&(0,a.jsxs)(m,{children:[e.primary_button&&(0,a.jsx)(h,{text:e.primary_button.text,action:e.primary_button.action,onClick:t=>{if(i){let{text:n,action:r}=e.primary_button;i(t,{name:`primary_button`,text:n,action:r})}}}),e.secondary_button&&(0,a.jsx)(g,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:t=>{if(i){let{text:n,action:r}=e.secondary_button;i(t,{name:`secondary_button`,text:n,action:r})}}})]})]});v.displayName=`CardView.Default`;var y=({guideKey:e,onButtonClick:t,onImageClick:s})=>{let{guide:c,step:l,colorMode:u}=(0,r.useGuide)({key:e,type:o});return i.default.useEffect(()=>{l&&l.markAsSeen()},[l]),!c||!l?null:(0,a.jsx)(v,{content:l.content,colorMode:u,onDismiss:()=>l.markAsArchived(),onButtonClick:(e,r)=>{let i={...r,type:`button_click`};return l.markAsInteracted({metadata:i}),t?t(e,{button:r,step:l,guide:c}):n.maybeNavigateToUrlWithDelay(r.action)},onImageClick:(e,t)=>{let n={...t,type:`image_click`};if(l.markAsInteracted({metadata:n}),s)return s(e,{image:t,step:l,guide:c})}})};y.displayName=`Card`;var b={};Object.assign(b,{Default:v,Root:s,Content:c,Title:d,Body:f,Img:p,Actions:m,PrimaryButton:h,SecondaryButton:g,DismissButton:_}),exports.Card=y,exports.CardView=b;
+//# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n  { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__headline\", className)} {...props}>\n      {headline}\n    </div>\n  );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cx(\"knock-guide-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={cx(\"knock-guide-card__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"CardView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-card__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-card__action knock-guide-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={cx(\"knock-guide-card__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n  headline: string;\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Header>\n          <Headline headline={content.headline} />\n          {content.dismissible && <DismissButton onClick={onDismiss} />}\n        </Header>\n\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      {content.image && (\n        <a\n          href={\n            isValidHttpUrl(content.image.action)\n              ? content.image.action\n              : undefined\n          }\n          target=\"_blank\"\n        >\n          <Img\n            src={content.image.url}\n            alt={content.image.alt}\n            onClick={(e) => {\n              if (onImageClick) {\n                onImageClick(e, content.image!);\n              }\n            }}\n          />\n        </a>\n      )}\n      {(content.primary_button || content.secondary_button) && (\n        <Actions>\n          {content.primary_button && (\n            <PrimaryButton\n              text={content.primary_button.text}\n              action={content.primary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.primary_button!;\n                  onButtonClick(e, { name: \"primary_button\", text, action });\n                }\n              }}\n            />\n          )}\n          {content.secondary_button && (\n            <SecondaryButton\n              text={content.secondary_button.text}\n              action={content.secondary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.secondary_button!;\n                  onButtonClick(e, { name: \"secondary_button\", text, action });\n                }\n              }}\n            />\n          )}\n        </Actions>\n      )}\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as CardContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Headline: typeof Headline;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","cx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n  { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__headline\", className)} {...props}>\n      {headline}\n    </div>\n  );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cx(\"knock-guide-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={cx(\"knock-guide-card__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"CardView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-card__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-card__action knock-guide-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={cx(\"knock-guide-card__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n  headline: string;\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Header>\n          <Headline headline={content.headline} />\n          {content.dismissible && <DismissButton onClick={onDismiss} />}\n        </Header>\n\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      {content.image && (\n        <a\n          href={\n            isValidHttpUrl(content.image.action)\n              ? content.image.action\n              : undefined\n          }\n          target=\"_blank\"\n        >\n          <Img\n            src={content.image.url}\n            alt={content.image.alt}\n            onClick={(e) => {\n              if (onImageClick) {\n                onImageClick(e, content.image!);\n              }\n            }}\n          />\n        </a>\n      )}\n      {(content.primary_button || content.secondary_button) && (\n        <Actions>\n          {content.primary_button && (\n            <PrimaryButton\n              text={content.primary_button.text}\n              action={content.primary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.primary_button!;\n                  onButtonClick(e, { name: \"primary_button\", text, action });\n                }\n              }}\n            />\n          )}\n          {content.secondary_button && (\n            <SecondaryButton\n              text={content.secondary_button.text}\n              action={content.secondary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.secondary_button!;\n                  onButtonClick(e, { name: \"secondary_button\", text, action });\n                }\n              }}\n            />\n          )}\n        </Actions>\n      )}\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as CardContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Headline: typeof Headline;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Card/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./Card.js");exports.Card=e.Card,exports.CardView=e.CardView;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@knocklabs/react-core"),O=require("@radix-ui/react-dialog"),C=require("react"),d=require("../../../core/cx/index.js"),M=require("../helpers.js");;/* empty css            */const D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function S(e){if(e&&typeof e=="object"&&"default"in e)return e;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return l.default=e,Object.freeze(l)}const u=S(O),t=D(C),R="modal",m=({children:e,onOpenChange:l,...a})=>t.default.createElement(u.Root,{defaultOpen:!0,onOpenChange:l,...a},t.default.createElement(u.Portal,null,e));m.displayName="ModalView.Root";const f=t.default.forwardRef(({className:e,...l},a)=>t.default.createElement(u.Overlay,{className:d.cx("knock-guide-modal__overlay",e),ref:a,...l}));f.displayName="ModalView.Overlay";const y=t.default.forwardRef(({children:e,className:l,...a},o)=>t.default.createElement(u.Content,{className:d.cx("knock-guide-modal",l),ref:o,...a},e));y.displayName="ModalView.Content";const x=({children:e,className:l,...a})=>t.default.createElement("div",{className:d.cx("knock-guide-modal__header",l),...a},e);x.displayName="ModalView.Header";const _=({title:e,className:l,...a})=>t.default.createElement(u.Title,{className:d.cx("knock-guide-modal__title",l),...a},e);_.displayName="ModalView.Title";const p=({body:e,className:l,...a})=>t.default.createElement(u.Description,{className:d.cx("knock-guide-modal__body",l),dangerouslySetInnerHTML:{__html:e},...a});p.displayName="ModalView.Body";const g=({children:e,className:l,alt:a,...o})=>t.default.createElement("img",{className:d.cx("knock-guide-modal__img",l),alt:a||"",...o},e);g.displayName="ModalView.Img";const k=({children:e,className:l,...a})=>t.default.createElement("div",{className:d.cx("knock-guide-modal__actions",l),...a},e);k.displayName="ModalView.Actions";const E=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:d.cx("knock-guide-modal__action",a),...o},e);E.displayName="ModalView.PrimaryButton";const b=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:d.cx("knock-guide-modal__action knock-guide-modal__action--secondary",a),...o},e);b.displayName="ModalView.SecondaryButton";const N=({className:e,...l})=>t.default.createElement(u.Close,{className:d.cx("knock-guide-modal__close",e),...l},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));N.displayName="ModalView.Close";const w=({content:e,colorMode:l="light",onOpenChange:a,onDismiss:o,onButtonClick:r,onImageClick:s})=>t.default.createElement(m,{onOpenChange:a},t.default.createElement(f,null),t.default.createElement(y,{"data-knock-color-mode":l,onPointerDownOutside:o},t.default.createElement(x,null,t.default.createElement(_,{title:e.title}),e.dismissible&&t.default.createElement(N,{onClick:o})),t.default.createElement(p,{body:e.body}),e.image&&t.default.createElement("a",{href:M.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},t.default.createElement(g,{src:e.image.url,alt:e.image.alt,onClick:i=>{s&&s(i,e.image)}})),(e.primary_button||e.secondary_button)&&t.default.createElement(k,null,e.secondary_button&&t.default.createElement(b,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:i=>{if(r){const{text:n,action:c}=e.secondary_button;r(i,{name:"secondary_button",text:n,action:c})}}}),e.primary_button&&t.default.createElement(E,{text:e.primary_button.text,action:e.primary_button.action,onClick:i=>{if(r){const{text:n,action:c}=e.primary_button;r(i,{name:"primary_button",text:n,action:c})}}}))));w.displayName="ModalView.Default";const V=({guideKey:e,onButtonClick:l,onImageClick:a})=>{const{guide:o,step:r,colorMode:s}=h.useGuide({key:e,type:R});return t.default.useEffect(()=>{r&&r.markAsSeen()},[r]),!o||!r?null:t.default.createElement(w,{content:r.content,colorMode:s,onDismiss:()=>r.markAsArchived(),onButtonClick:(i,n)=>{const c={...n,type:"button_click"};return r.markAsInteracted({metadata:c}),l?l(i,{button:n,step:r,guide:o}):M.maybeNavigateToUrlWithDelay(n.action)},onImageClick:(i,n)=>{const c={...n,type:"image_click"};if(r.markAsInteracted({metadata:c}),a)return a(i,{image:n,step:r,guide:o})}})};V.displayName="Modal";const v={};Object.assign(v,{Default:w,Root:m,Overlay:f,Content:y,Title:_,Body:p,Img:g,Actions:k,PrimaryButton:E,SecondaryButton:b,Close:N});exports.Modal=V;exports.ModalView=v;
-//# sourceMappingURL=Modal.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../../../core/cx/index.js"),n=require("../helpers.js");;/* empty css        */let r=require("@knocklabs/react-core"),i=require("react");i=e.__toESM(i);let a=require("react/jsx-runtime"),o=require("@radix-ui/react-dialog");o=e.__toESM(o);var s=`modal`,c=({children:e,onOpenChange:t,...n})=>(0,a.jsx)(o.Root,{defaultOpen:!0,onOpenChange:t,...n,children:(0,a.jsx)(o.Portal,{children:e})});c.displayName=`ModalView.Root`;var l=i.default.forwardRef(({className:e,...n},r)=>(0,a.jsx)(o.Overlay,{className:t.cx(`knock-guide-modal__overlay`,e),ref:r,...n}));l.displayName=`ModalView.Overlay`;var u=i.default.forwardRef(({children:e,className:n,...r},i)=>(0,a.jsx)(o.Content,{className:t.cx(`knock-guide-modal`,n),ref:i,...r,children:e}));u.displayName=`ModalView.Content`;var d=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-modal__header`,n),...r,children:e});d.displayName=`ModalView.Header`;var f=({title:e,className:n,...r})=>(0,a.jsx)(o.Title,{className:t.cx(`knock-guide-modal__title`,n),...r,children:e});f.displayName=`ModalView.Title`;var p=({body:e,className:n,...r})=>(0,a.jsx)(o.Description,{className:t.cx(`knock-guide-modal__body`,n),dangerouslySetInnerHTML:{__html:e},...r});p.displayName=`ModalView.Body`;var m=({children:e,className:n,alt:r,...i})=>(0,a.jsx)(`img`,{className:t.cx(`knock-guide-modal__img`,n),alt:r||``,...i,children:e});m.displayName=`ModalView.Img`;var h=({children:e,className:n,...r})=>(0,a.jsx)(`div`,{className:t.cx(`knock-guide-modal__actions`,n),...r,children:e});h.displayName=`ModalView.Actions`;var g=({text:e,action:n,className:r,...i})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-modal__action`,r),...i,children:e});g.displayName=`ModalView.PrimaryButton`;var _=({text:e,action:n,className:r,...i})=>(0,a.jsx)(`button`,{className:t.cx(`knock-guide-modal__action knock-guide-modal__action--secondary`,r),...i,children:e});_.displayName=`ModalView.SecondaryButton`;var v=({className:e,...n})=>(0,a.jsx)(o.Close,{className:t.cx(`knock-guide-modal__close`,e),...n,children:(0,a.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`18`,height:`18`,fill:`none`,children:(0,a.jsxs)(`g`,{fill:`#60646C`,fillRule:`evenodd`,clipRule:`evenodd`,children:[(0,a.jsx)(`path`,{d:`M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z`}),(0,a.jsx)(`path`,{d:`M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z`})]})})});v.displayName=`ModalView.Close`;var y=({content:e,colorMode:t=`light`,onOpenChange:r,onDismiss:i,onButtonClick:o,onImageClick:s})=>(0,a.jsxs)(c,{onOpenChange:r,children:[(0,a.jsx)(l,{}),(0,a.jsxs)(u,{"data-knock-color-mode":t,onPointerDownOutside:i,children:[(0,a.jsxs)(d,{children:[(0,a.jsx)(f,{title:e.title}),e.dismissible&&(0,a.jsx)(v,{onClick:i})]}),(0,a.jsx)(p,{body:e.body}),e.image&&(0,a.jsx)(`a`,{href:n.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:`_blank`,children:(0,a.jsx)(m,{src:e.image.url,alt:e.image.alt,onClick:t=>{s&&s(t,e.image)}})}),(e.primary_button||e.secondary_button)&&(0,a.jsxs)(h,{children:[e.secondary_button&&(0,a.jsx)(_,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:t=>{if(o){let{text:n,action:r}=e.secondary_button;o(t,{name:`secondary_button`,text:n,action:r})}}}),e.primary_button&&(0,a.jsx)(g,{text:e.primary_button.text,action:e.primary_button.action,onClick:t=>{if(o){let{text:n,action:r}=e.primary_button;o(t,{name:`primary_button`,text:n,action:r})}}})]})]})]});y.displayName=`ModalView.Default`;var b=({guideKey:e,onButtonClick:t,onImageClick:o})=>{let{guide:c,step:l,colorMode:u}=(0,r.useGuide)({key:e,type:s});return i.default.useEffect(()=>{l&&l.markAsSeen()},[l]),!c||!l?null:(0,a.jsx)(y,{content:l.content,colorMode:u,onDismiss:()=>l.markAsArchived(),onButtonClick:(e,r)=>{let i={...r,type:`button_click`};return l.markAsInteracted({metadata:i}),t?t(e,{button:r,step:l,guide:c}):n.maybeNavigateToUrlWithDelay(r.action)},onImageClick:(e,t)=>{let n={...t,type:`image_click`};if(l.markAsInteracted({metadata:n}),o)return o(e,{image:t,step:l,guide:c})}})};b.displayName=`Modal`;var x={};Object.assign(x,{Default:y,Root:c,Overlay:l,Content:u,Title:f,Body:p,Img:m,Actions:h,PrimaryButton:g,SecondaryButton:_,Close:v}),exports.Modal=b,exports.ModalView=x;
+//# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n  \"modal\"\n> &\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n  return (\n    <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n      <Dialog.Portal>{children}</Dialog.Portal>\n    </Dialog.Root>\n  );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n  React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Overlay\n        className={cx(\"knock-guide-modal__overlay\", className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n  React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content\n        className={cx(\"knock-guide-modal\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {children}\n      </Dialog.Content>\n    );\n  },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-modal__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n  React.ComponentPropsWithRef<\"div\"> & {\n    title: string;\n  };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n  return (\n    <Dialog.Title\n      className={cx(\"knock-guide-modal__title\", className)}\n      {...props}\n    >\n      {title}\n    </Dialog.Title>\n  );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <Dialog.Description\n      className={cx(\"knock-guide-modal__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={cx(\"knock-guide-modal__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"ModalView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-modal__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-modal__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n  React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n  return (\n    <Dialog.Close\n      className={cx(\"knock-guide-modal__close\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </Dialog.Close>\n  );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: ModalContent;\n  colorMode?: ColorMode;\n  onOpenChange?: (open: boolean) => void;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onOpenChange,\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root onOpenChange={onOpenChange}>\n      <Overlay />\n      {/* Must pass color mode to content for css variables to be set properly */}\n      <Content\n        data-knock-color-mode={colorMode}\n        onPointerDownOutside={onDismiss}\n      >\n        <Header>\n          <Title title={content.title} />\n          {content.dismissible && <Close onClick={onDismiss} />}\n        </Header>\n\n        <Body body={content.body} />\n\n        {content.image && (\n          <a\n            href={\n              isValidHttpUrl(content.image.action)\n                ? content.image.action\n                : undefined\n            }\n            target=\"_blank\"\n          >\n            <Img\n              src={content.image.url}\n              alt={content.image.alt}\n              onClick={(e) => {\n                if (onImageClick) {\n                  onImageClick(e, content.image!);\n                }\n              }}\n            />\n          </a>\n        )}\n\n        {(content.primary_button || content.secondary_button) && (\n          <Actions>\n            {content.secondary_button && (\n              <SecondaryButton\n                text={content.secondary_button.text}\n                action={content.secondary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.secondary_button!;\n                    onButtonClick(e, {\n                      name: \"secondary_button\",\n                      text,\n                      action,\n                    });\n                  }\n                }}\n              />\n            )}\n            {content.primary_button && (\n              <PrimaryButton\n                text={content.primary_button.text}\n                action={content.primary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.primary_button!;\n                    onButtonClick(e, { name: \"primary_button\", text, action });\n                  }\n                }}\n              />\n            )}\n          </Actions>\n        )}\n      </Content>\n    </Root>\n  );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as ModalContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Overlay: typeof Overlay;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n  Default: DefaultView,\n  Root,\n  Overlay,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  Close,\n});\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","cx","Content","Header","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","Close","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Modal","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","ModalView","Object","assign","Default"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":[],"sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n  \"modal\"\n> &\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n  return (\n    <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n      <Dialog.Portal>{children}</Dialog.Portal>\n    </Dialog.Root>\n  );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n  React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Overlay\n        className={cx(\"knock-guide-modal__overlay\", className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n  React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content\n        className={cx(\"knock-guide-modal\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {children}\n      </Dialog.Content>\n    );\n  },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-modal__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n  React.ComponentPropsWithRef<\"div\"> & {\n    title: string;\n  };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n  return (\n    <Dialog.Title\n      className={cx(\"knock-guide-modal__title\", className)}\n      {...props}\n    >\n      {title}\n    </Dialog.Title>\n  );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <Dialog.Description\n      className={cx(\"knock-guide-modal__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={cx(\"knock-guide-modal__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"ModalView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-modal__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-modal__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n  React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n  return (\n    <Dialog.Close\n      className={cx(\"knock-guide-modal__close\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </Dialog.Close>\n  );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: ModalContent;\n  colorMode?: ColorMode;\n  onOpenChange?: (open: boolean) => void;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onOpenChange,\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root onOpenChange={onOpenChange}>\n      <Overlay />\n      {/* Must pass color mode to content for css variables to be set properly */}\n      <Content\n        data-knock-color-mode={colorMode}\n        onPointerDownOutside={onDismiss}\n      >\n        <Header>\n          <Title title={content.title} />\n          {content.dismissible && <Close onClick={onDismiss} />}\n        </Header>\n\n        <Body body={content.body} />\n\n        {content.image && (\n          <a\n            href={\n              isValidHttpUrl(content.image.action)\n                ? content.image.action\n                : undefined\n            }\n            target=\"_blank\"\n          >\n            <Img\n              src={content.image.url}\n              alt={content.image.alt}\n              onClick={(e) => {\n                if (onImageClick) {\n                  onImageClick(e, content.image!);\n                }\n              }}\n            />\n          </a>\n        )}\n\n        {(content.primary_button || content.secondary_button) && (\n          <Actions>\n            {content.secondary_button && (\n              <SecondaryButton\n                text={content.secondary_button.text}\n                action={content.secondary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.secondary_button!;\n                    onButtonClick(e, {\n                      name: \"secondary_button\",\n                      text,\n                      action,\n                    });\n                  }\n                }}\n              />\n            )}\n            {content.primary_button && (\n              <PrimaryButton\n                text={content.primary_button.text}\n                action={content.primary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.primary_button!;\n                    onButtonClick(e, { name: \"primary_button\", text, action });\n                  }\n                }}\n              />\n            )}\n          </Actions>\n        )}\n      </Content>\n    </Root>\n  );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as ModalContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Overlay: typeof Overlay;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n  Default: DefaultView,\n  Root,\n  Overlay,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  Close,\n});\n"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Modal/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./Modal.js");exports.Modal=e.Modal,exports.ModalView=e.ModalView;

package/dist/cjs/modules/guide/components/Toolbar/KnockButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),n=require("@telegraph/button"),r=require("./shared.js");;/* empty css            */const l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=l(o),u=({onClick:t,positioned:a=!0})=>e.default.createElement(n.Button,{onClick:t,...a&&{position:"fixed",top:"4",right:"4",style:{zIndex:r.TOOLBAR_Z_INDEX}},bg:"surface-2",shadow:"3",rounded:"3",w:"10",h:"10",variant:"soft","data-tgph-appearance":"dark","aria-label":"Expand guide toolbar"},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"})));exports.KnockButton=u;
-//# sourceMappingURL=KnockButton.js.map
+"use strict";require("./shared.js");/* empty css         */let e=require("react/jsx-runtime"),t=require("@telegraph/button");var n=({onClick:n,positioned:r=!0})=>(0,e.jsx)(t.Button,{onClick:n,...r&&{position:`fixed`,top:`4`,right:`4`,style:{zIndex:`var(--tgph-zIndex-tooltip)`}},bg:`surface-2`,shadow:`3`,rounded:`3`,w:`10`,h:`10`,variant:`soft`,"data-tgph-appearance":`dark`,"aria-label":`Expand guide toolbar`,children:(0,e.jsxs)(`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%)`},children:[(0,e.jsx)(`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`}),(0,e.jsx)(`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`})]})});exports.KnockButton=n;
+//# sourceMappingURL=KnockButton.js.map

package/dist/cjs/modules/guide/components/Toolbar/KnockButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"KnockButton.js","sources":["../../../../../../src/modules/guide/components/Toolbar/KnockButton.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\n\nimport { TOOLBAR_Z_INDEX } from \"./shared\";\nimport \"./styles.css\";\n\ntype Props = {\n  onClick: () => void;\n  positioned?: boolean;\n};\n\nexport const KnockButton = ({ onClick, positioned = true }: Props) => {\n  return (\n    <Button\n      onClick={onClick}\n      {...(positioned && {\n        position: \"fixed\" as const,\n        top: \"4\" as const,\n        right: \"4\" as const,\n        style: { zIndex: TOOLBAR_Z_INDEX },\n      })}\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      w=\"10\"\n      h=\"10\"\n      variant=\"soft\"\n      data-tgph-appearance=\"dark\"\n      aria-label=\"Expand guide toolbar\"\n    >\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          position: \"absolute\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n        }}\n      >\n        <path\n          d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n          fill=\"#EDEEEF\"\n        />\n        <path\n          d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n          fill=\"#FF573A\"\n        />\n      </svg>\n    </Button>\n  );\n};\n"],"names":["KnockButton","onClick","positioned","React","Button","position","top","right","style","zIndex","TOOLBAR_Z_INDEX","left","transform"],"mappings":"iQAUaA,EAAcA,CAAC,CAAEC,QAAAA,EAASC,WAAAA,EAAa,EAAY,IAE3DC,EAAAA,QAAA,cAAAC,EAAAA,OAAA,CACC,QAAAH,EACKC,GAAAA,GAAc,CACjBG,SAAU,QACVC,IAAK,IACLC,MAAO,IACPC,MAAO,CAAEC,OAAQC,EAAAA,eAAAA,CAAgB,EAEnC,GAAG,YACH,OAAO,IACP,QAAQ,IACR,EAAE,KACF,EAAE,KACF,QAAQ,OACR,uBAAqB,OACrB,aAAW,sBAEX,EAAAP,EAAAA,QAAA,cAAC,MACC,CAAA,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAO,CACLE,SAAU,WACVC,IAAK,MACLK,KAAM,MACNC,UAAW,uBAAA,GAGbT,EAAAA,QAAA,cAAC,OACC,CAAA,EAAE,0JACF,KAAK,SAAS,CAAA,EAEhBA,EAAAA,QAAA,cAAC,QACC,EAAE,uKACF,KAAK,SAAS,CAAA,CAElB,CACF"}
+{"version":3,"file":"KnockButton.js","names":[],"sources":["../../../../../../src/modules/guide/components/Toolbar/KnockButton.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\n\nimport { TOOLBAR_Z_INDEX } from \"./shared\";\nimport \"./styles.css\";\n\ntype Props = {\n  onClick: () => void;\n  positioned?: boolean;\n};\n\nexport const KnockButton = ({ onClick, positioned = true }: Props) => {\n  return (\n    <Button\n      onClick={onClick}\n      {...(positioned && {\n        position: \"fixed\" as const,\n        top: \"4\" as const,\n        right: \"4\" as const,\n        style: { zIndex: TOOLBAR_Z_INDEX },\n      })}\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      w=\"10\"\n      h=\"10\"\n      variant=\"soft\"\n      data-tgph-appearance=\"dark\"\n      aria-label=\"Expand guide toolbar\"\n    >\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          position: \"absolute\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n        }}\n      >\n        <path\n          d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n          fill=\"#EDEEEF\"\n        />\n        <path\n          d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n          fill=\"#FF573A\"\n        />\n      </svg>\n    </Button>\n  );\n};\n"],"mappings":"6HAUA,IAAa,GAAe,CAAE,UAAS,aAAa,OAEhD,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CACW,UACT,GAAK,GAAc,CACjB,SAAU,QACV,IAAK,IACL,MAAO,IACP,MAAO,CAAE,OAAA,4BAAwB,CACnC,EACA,GAAG,YACH,OAAO,IACP,QAAQ,IACR,EAAE,KACF,EAAE,KACF,QAAQ,OACR,uBAAqB,OACrB,aAAW,iCAEX,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAO,CACL,SAAU,WACV,IAAK,MACL,KAAM,MACN,UAAW,uBACb,WAXF,EAaE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,EAAE,0JACF,KAAK,SACN,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,EAAE,uKACF,KAAK,SACN,CAAA,CACE,GACC,CAAA"}

package/dist/cjs/modules/guide/components/Toolbar/V2/FocusChin.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@knocklabs/react-core"),f=require("@telegraph/button"),d=require("@telegraph/layout"),b=require("@telegraph/tooltip"),m=require("@telegraph/typography"),g=require("lucide-react"),C=require("react"),S=require("./GuideRow.js"),p=require("./Kbd.js"),y=require("./helpers.js");function x(t){if(t&&typeof t=="object"&&"default"in t)return t;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,e.get?e:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const o=x(C),k=60,O=",",w="/",R=(t,r)=>{requestAnimationFrame(()=>{const n=t.querySelector(`[${S.GUIDE_ROW_DATA_SELECTOR}="${CSS.escape(r)}"]`);if(!n||!(n instanceof HTMLElement))return;const e=t.getBoundingClientRect(),c=n.getBoundingClientRect();c.top<e.top?t.scrollTo({top:t.scrollTop-(e.top-c.top)-k,behavior:"smooth"}):c.bottom>e.bottom&&t.scrollTo({top:t.scrollTop+(c.bottom-e.bottom)+k,behavior:"smooth"})})},v=({guides:t,currentKey:r,focusGuide:n})=>{const e=t.filter(l=>!!l.annotation.selectable.status);if(e.length===0)return;if(!r){n(e[e.length-1].key);return}const c=e.findIndex(l=>l.key===r),s=c<=0?void 0:e[c-1];s&&n(s.key)},T=({guides:t,currentKey:r,focusGuide:n})=>{const e=t.filter(l=>!!l.annotation.selectable.status);if(e.length===0)return;if(!r){n(e[0].key);return}const c=e.findIndex(l=>l.key===r),s=c<0||c+1>e.length-1?void 0:e[c+1];s&&n(s.key)},q=({guides:t,guideListRef:r})=>{const{client:n}=h.useGuideContext(),{debugSettings:e}=h.useStore(n.store,i=>({debugSettings:i.debug})),c=Object.keys((e==null?void 0:e.focusedGuideKeys)||{}),s=c.length>0,l=c[0],E=o.useCallback(i=>{n.setDebug({...n.store.state.debug,focusedGuideKeys:{[i]:!0}}),r.current&&R(r.current,i)},[n,r]),a=o.useRef({guides:t,currentKey:l,focusGuide:E});return o.useEffect(()=>{a.current={guides:t,currentKey:l,focusGuide:E}}),o.useEffect(()=>{const i=u=>{!u.ctrlKey||u.repeat||(u.key===O?(u.preventDefault(),v(a.current)):u.key===w&&(u.preventDefault(),T(a.current)))};return window.addEventListener("keydown",i),()=>{window.removeEventListener("keydown",i)}},[]),s?o.createElement(d.Box,{borderTop:"px",px:"3",py:"1",overflow:"hidden",backgroundColor:"blue-2"},o.createElement(d.Stack,{align:"center",justify:"space-between",gap:"4"},o.createElement(m.Text,{as:"span",size:"1",weight:"medium",color:"blue",style:{display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0}},"Focus mode: ",l),o.createElement(d.Stack,{align:"center",gap:"1",style:{flexShrink:0}},o.createElement(b.Tooltip,{label:o.createElement(m.Text,{as:"span",size:"1"},"Focus previous guide",o.createElement(d.Stack,{display:"inline-block",ml:"3"},o.createElement(p.Kbd,null,"ctrl")," + ",o.createElement(p.Kbd,null,","))),...y.sharedTooltipProps},o.createElement(f.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:g.ChevronLeft,alt:"Previous guide"},onClick:()=>v(a.current)})),o.createElement(b.Tooltip,{label:o.createElement(m.Text,{as:"span",size:"1"},"Focus next guide",o.createElement(d.Stack,{display:"inline-block",ml:"3"},o.createElement(p.Kbd,null,"ctrl")," + ",o.createElement(p.Kbd,null,"/"))),...y.sharedTooltipProps},o.createElement(f.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:g.ChevronRight,alt:"Next guide"},onClick:()=>T(a.current)})),o.createElement(b.Tooltip,{label:"Exit focus mode",...y.sharedTooltipProps},o.createElement(f.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:g.X,alt:"Clear focus"},onClick:()=>{n.setDebug({...e,focusedGuideKeys:{}})}}))))):null};exports.FocusChin=q;
-//# sourceMappingURL=FocusChin.js.map
+"use strict";const e=require("../../../../../_virtual/_rolldown/runtime.js"),t=require("./helpers.js"),n=require("./GuideRow.js"),r=require("./Kbd.js");let i=require("@knocklabs/react-core"),a=require("react");a=e.__toESM(a);let o=require("react/jsx-runtime"),s=require("@telegraph/button"),c=require("@telegraph/layout"),l=require("@telegraph/tooltip"),u=require("@telegraph/typography"),d=require("lucide-react");var f=60,p=`,`,m=`/`,h=(e,t)=>{requestAnimationFrame(()=>{let r=e.querySelector(`[${n.GUIDE_ROW_DATA_SELECTOR}="${CSS.escape(t)}"]`);if(!r||!(r instanceof HTMLElement))return;let i=e.getBoundingClientRect(),a=r.getBoundingClientRect();a.top<i.top?e.scrollTo({top:e.scrollTop-(i.top-a.top)-f,behavior:`smooth`}):a.bottom>i.bottom&&e.scrollTo({top:e.scrollTop+(a.bottom-i.bottom)+f,behavior:`smooth`})})},g=({guides:e,currentKey:t,focusGuide:n})=>{let r=e.filter(e=>!!e.annotation.selectable.status);if(r.length===0)return;if(!t){n(r[r.length-1].key);return}let i=r.findIndex(e=>e.key===t),a=i<=0?void 0:r[i-1];a&&n(a.key)},_=({guides:e,currentKey:t,focusGuide:n})=>{let r=e.filter(e=>!!e.annotation.selectable.status);if(r.length===0)return;if(!t){n(r[0].key);return}let i=r.findIndex(e=>e.key===t),a=i<0||i+1>r.length-1?void 0:r[i+1];a&&n(a.key)},v=({guides:e,guideListRef:n})=>{let{client:f}=(0,i.useGuideContext)(),{debugSettings:v}=(0,i.useStore)(f.store,e=>({debugSettings:e.debug})),y=Object.keys(v?.focusedGuideKeys||{}),b=y.length>0,x=y[0],S=a.useCallback(e=>{f.setDebug({...f.store.state.debug,focusedGuideKeys:{[e]:!0}}),n.current&&h(n.current,e)},[f,n]),C=a.useRef({guides:e,currentKey:x,focusGuide:S});return a.useEffect(()=>{C.current={guides:e,currentKey:x,focusGuide:S}}),a.useEffect(()=>{let e=e=>{!e.ctrlKey||e.repeat||(e.key===p?(e.preventDefault(),g(C.current)):e.key===m&&(e.preventDefault(),_(C.current)))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e)}},[]),b?(0,o.jsx)(c.Box,{borderTop:`px`,px:`3`,py:`1`,overflow:`hidden`,backgroundColor:`blue-2`,children:(0,o.jsxs)(c.Stack,{align:`center`,justify:`space-between`,gap:`4`,children:[(0,o.jsxs)(u.Text,{as:`span`,size:`1`,weight:`medium`,color:`blue`,style:{display:`block`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,minWidth:0},children:[`Focus mode: `,x]}),(0,o.jsxs)(c.Stack,{align:`center`,gap:`1`,style:{flexShrink:0},children:[(0,o.jsx)(l.Tooltip,{label:(0,o.jsxs)(u.Text,{as:`span`,size:`1`,children:[`Focus previous guide`,(0,o.jsxs)(c.Stack,{display:`inline-block`,ml:`3`,children:[(0,o.jsx)(r.Kbd,{children:`ctrl`}),` + `,(0,o.jsx)(r.Kbd,{children:`,`})]})]}),...t.sharedTooltipProps,children:(0,o.jsx)(s.Button,{size:`0`,variant:`ghost`,color:`blue`,leadingIcon:{icon:d.ChevronLeft,alt:`Previous guide`},onClick:()=>g(C.current)})}),(0,o.jsx)(l.Tooltip,{label:(0,o.jsxs)(u.Text,{as:`span`,size:`1`,children:[`Focus next guide`,(0,o.jsxs)(c.Stack,{display:`inline-block`,ml:`3`,children:[(0,o.jsx)(r.Kbd,{children:`ctrl`}),` + `,(0,o.jsx)(r.Kbd,{children:`/`})]})]}),...t.sharedTooltipProps,children:(0,o.jsx)(s.Button,{size:`0`,variant:`ghost`,color:`blue`,leadingIcon:{icon:d.ChevronRight,alt:`Next guide`},onClick:()=>_(C.current)})}),(0,o.jsx)(l.Tooltip,{label:`Exit focus mode`,...t.sharedTooltipProps,children:(0,o.jsx)(s.Button,{size:`0`,variant:`ghost`,color:`blue`,leadingIcon:{icon:d.X,alt:`Clear focus`},onClick:()=>{f.setDebug({...v,focusedGuideKeys:{}})}})})]})]})}):null};exports.FocusChin=v;
+//# sourceMappingURL=FocusChin.js.map