@knocklabs/react 0.12.1 → 0.13.1

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

@@ -1,172 +1,192 @@
-import { useGuide as V } from "@knocklabs/react-core";
-import * as d from "@radix-ui/react-dialog";
-import a from "react";
-import { cx as n } from "../../../core/cx/index.mjs";
-import { isValidHttpUrl as v, maybeNavigateToUrlWithDelay as h } from "../helpers.mjs";
-/* empty css            */
-const x = "modal", u = ({
-  children: e,
-  onOpenChange: t,
-  ...l
-}) => /* @__PURE__ */ a.createElement(d.Root, { defaultOpen: !0, onOpenChange: t, ...l }, /* @__PURE__ */ a.createElement(d.Portal, null, e));
-u.displayName = "ModalView.Root";
-const y = a.forwardRef(({
-  className: e,
-  ...t
-}, l) => /* @__PURE__ */ a.createElement(d.Overlay, { className: n("knock-guide-modal__overlay", e), ref: l, ...t }));
-y.displayName = "ModalView.Overlay";
-const _ = a.forwardRef(({
-  children: e,
-  className: t,
-  ...l
-}, r) => /* @__PURE__ */ a.createElement(d.Content, { className: n("knock-guide-modal", t), ref: r, ...l }, e));
-_.displayName = "ModalView.Content";
-const M = ({
-  children: e,
-  className: t,
-  ...l
-}) => /* @__PURE__ */ a.createElement("div", { className: n("knock-guide-modal__header", t), ...l }, e);
-M.displayName = "ModalView.Header";
-const p = ({
-  title: e,
-  className: t,
-  ...l
-}) => /* @__PURE__ */ a.createElement(d.Title, { className: n("knock-guide-modal__title", t), ...l }, e);
+import { cx as e } from "../../../core/cx/index.mjs";
+import { isValidHttpUrl as t, maybeNavigateToUrlWithDelay as n } from "../helpers.mjs";
+/* empty css        */
+import { useGuide as r } from "@knocklabs/react-core";
+import i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-dialog";
+//#region src/modules/guide/components/Modal/Modal.tsx
+var c = "modal", l = ({ children: e, onOpenChange: t, ...n }) => /* @__PURE__ */ a(s.Root, {
+	defaultOpen: !0,
+	onOpenChange: t,
+	...n,
+	children: /* @__PURE__ */ a(s.Portal, { children: e })
+});
+l.displayName = "ModalView.Root";
+var u = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.Overlay, {
+	className: e("knock-guide-modal__overlay", t),
+	ref: r,
+	...n
+}));
+u.displayName = "ModalView.Overlay";
+var d = i.forwardRef(({ children: t, className: n, ...r }, i) => /* @__PURE__ */ a(s.Content, {
+	className: e("knock-guide-modal", n),
+	ref: i,
+	...r,
+	children: t
+}));
+d.displayName = "ModalView.Content";
+var f = ({ children: t, className: n, ...r }) => /* @__PURE__ */ a("div", {
+	className: e("knock-guide-modal__header", n),
+	...r,
+	children: t
+});
+f.displayName = "ModalView.Header";
+var p = ({ title: t, className: n, ...r }) => /* @__PURE__ */ a(s.Title, {
+	className: e("knock-guide-modal__title", n),
+	...r,
+	children: t
+});
 p.displayName = "ModalView.Title";
-const E = ({
-  body: e,
-  className: t,
-  ...l
-}) => /* @__PURE__ */ a.createElement(d.Description, { className: n("knock-guide-modal__body", t), dangerouslySetInnerHTML: {
-  __html: e
-}, ...l });
-E.displayName = "ModalView.Body";
-const g = ({
-  children: e,
-  className: t,
-  alt: l,
-  ...r
-}) => /* @__PURE__ */ a.createElement("img", { className: n("knock-guide-modal__img", t), alt: l || "", ...r }, e);
-g.displayName = "ModalView.Img";
-const k = ({
-  children: e,
-  className: t,
-  ...l
-}) => /* @__PURE__ */ a.createElement("div", { className: n("knock-guide-modal__actions", t), ...l }, e);
-k.displayName = "ModalView.Actions";
-const f = ({
-  text: e,
-  action: t,
-  className: l,
-  ...r
-}) => /* @__PURE__ */ a.createElement("button", { className: n("knock-guide-modal__action", l), ...r }, e);
-f.displayName = "ModalView.PrimaryButton";
-const N = ({
-  text: e,
-  action: t,
-  className: l,
-  ...r
-}) => /* @__PURE__ */ a.createElement("button", { className: n("knock-guide-modal__action knock-guide-modal__action--secondary", l), ...r }, e);
-N.displayName = "ModalView.SecondaryButton";
-const w = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ a.createElement(d.Close, { className: n("knock-guide-modal__close", e), ...t }, /* @__PURE__ */ a.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ a.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ a.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" }), /* @__PURE__ */ a.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" }))));
-w.displayName = "ModalView.Close";
-const b = ({
-  content: e,
-  colorMode: t = "light",
-  onOpenChange: l,
-  onDismiss: r,
-  onButtonClick: o,
-  onImageClick: s
-}) => /* @__PURE__ */ a.createElement(u, { onOpenChange: l }, /* @__PURE__ */ a.createElement(y, null), /* @__PURE__ */ a.createElement(_, { "data-knock-color-mode": t, onPointerDownOutside: r }, /* @__PURE__ */ a.createElement(M, null, /* @__PURE__ */ a.createElement(p, { title: e.title }), e.dismissible && /* @__PURE__ */ a.createElement(w, { onClick: r })), /* @__PURE__ */ a.createElement(E, { body: e.body }), e.image && /* @__PURE__ */ a.createElement("a", { href: v(e.image.action) ? e.image.action : void 0, target: "_blank" }, /* @__PURE__ */ a.createElement(g, { src: e.image.url, alt: e.image.alt, onClick: (m) => {
-  s && s(m, e.image);
-} })), (e.primary_button || e.secondary_button) && /* @__PURE__ */ a.createElement(k, null, e.secondary_button && /* @__PURE__ */ a.createElement(N, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (m) => {
-  if (o) {
-    const {
-      text: i,
-      action: c
-    } = e.secondary_button;
-    o(m, {
-      name: "secondary_button",
-      text: i,
-      action: c
-    });
-  }
-} }), e.primary_button && /* @__PURE__ */ a.createElement(f, { text: e.primary_button.text, action: e.primary_button.action, onClick: (m) => {
-  if (o) {
-    const {
-      text: i,
-      action: c
-    } = e.primary_button;
-    o(m, {
-      name: "primary_button",
-      text: i,
-      action: c
-    });
-  }
-} }))));
+var m = ({ body: t, className: n, ...r }) => /* @__PURE__ */ a(s.Description, {
+	className: e("knock-guide-modal__body", n),
+	dangerouslySetInnerHTML: { __html: t },
+	...r
+});
+m.displayName = "ModalView.Body";
+var h = ({ children: t, className: n, alt: r, ...i }) => /* @__PURE__ */ a("img", {
+	className: e("knock-guide-modal__img", n),
+	alt: r || "",
+	...i,
+	children: t
+});
+h.displayName = "ModalView.Img";
+var g = ({ children: t, className: n, ...r }) => /* @__PURE__ */ a("div", {
+	className: e("knock-guide-modal__actions", n),
+	...r,
+	children: t
+});
+g.displayName = "ModalView.Actions";
+var _ = ({ text: t, action: n, className: r, ...i }) => /* @__PURE__ */ a("button", {
+	className: e("knock-guide-modal__action", r),
+	...i,
+	children: t
+});
+_.displayName = "ModalView.PrimaryButton";
+var v = ({ text: t, action: n, className: r, ...i }) => /* @__PURE__ */ a("button", {
+	className: e("knock-guide-modal__action knock-guide-modal__action--secondary", r),
+	...i,
+	children: t
+});
+v.displayName = "ModalView.SecondaryButton";
+var y = ({ className: t, ...n }) => /* @__PURE__ */ a(s.Close, {
+	className: e("knock-guide-modal__close", t),
+	...n,
+	children: /* @__PURE__ */ a("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "18",
+		fill: "none",
+		children: /* @__PURE__ */ o("g", {
+			fill: "#60646C",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			children: [/* @__PURE__ */ a("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" }), /* @__PURE__ */ a("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" })]
+		})
+	})
+});
+y.displayName = "ModalView.Close";
+var b = ({ content: e, colorMode: n = "light", onOpenChange: r, onDismiss: i, onButtonClick: s, onImageClick: c }) => /* @__PURE__ */ o(l, {
+	onOpenChange: r,
+	children: [/* @__PURE__ */ a(u, {}), /* @__PURE__ */ o(d, {
+		"data-knock-color-mode": n,
+		onPointerDownOutside: i,
+		children: [
+			/* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(p, { title: e.title }), e.dismissible && /* @__PURE__ */ a(y, { onClick: i })] }),
+			/* @__PURE__ */ a(m, { body: e.body }),
+			e.image && /* @__PURE__ */ a("a", {
+				href: t(e.image.action) ? e.image.action : void 0,
+				target: "_blank",
+				children: /* @__PURE__ */ a(h, {
+					src: e.image.url,
+					alt: e.image.alt,
+					onClick: (t) => {
+						c && c(t, e.image);
+					}
+				})
+			}),
+			(e.primary_button || e.secondary_button) && /* @__PURE__ */ o(g, { children: [e.secondary_button && /* @__PURE__ */ a(v, {
+				text: e.secondary_button.text,
+				action: e.secondary_button.action,
+				onClick: (t) => {
+					if (s) {
+						let { text: n, action: r } = e.secondary_button;
+						s(t, {
+							name: "secondary_button",
+							text: n,
+							action: r
+						});
+					}
+				}
+			}), e.primary_button && /* @__PURE__ */ a(_, {
+				text: e.primary_button.text,
+				action: e.primary_button.action,
+				onClick: (t) => {
+					if (s) {
+						let { text: n, action: r } = e.primary_button;
+						s(t, {
+							name: "primary_button",
+							text: n,
+							action: r
+						});
+					}
+				}
+			})] })
+		]
+	})]
+});
 b.displayName = "ModalView.Default";
-const A = ({
-  guideKey: e,
-  onButtonClick: t,
-  onImageClick: l
-}) => {
-  const {
-    guide: r,
-    step: o,
-    colorMode: s
-  } = V({
-    key: e,
-    type: x
-  });
-  return a.useEffect(() => {
-    o && o.markAsSeen();
-  }, [o]), !r || !o ? null : /* @__PURE__ */ a.createElement(b, { content: o.content, colorMode: s, onDismiss: () => o.markAsArchived(), onButtonClick: (m, i) => {
-    const c = {
-      ...i,
-      type: "button_click"
-    };
-    return o.markAsInteracted({
-      metadata: c
-    }), t ? t(m, {
-      button: i,
-      step: o,
-      guide: r
-    }) : h(i.action);
-  }, onImageClick: (m, i) => {
-    const c = {
-      ...i,
-      type: "image_click"
-    };
-    if (o.markAsInteracted({
-      metadata: c
-    }), l)
-      return l(m, {
-        image: i,
-        step: o,
-        guide: r
-      });
-  } });
+var x = ({ guideKey: e, onButtonClick: t, onImageClick: o }) => {
+	let { guide: s, step: l, colorMode: u } = r({
+		key: e,
+		type: c
+	});
+	return i.useEffect(() => {
+		l && l.markAsSeen();
+	}, [l]), !s || !l ? null : /* @__PURE__ */ a(b, {
+		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: s
+			}) : n(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: s
+			});
+		}
+	});
 };
-A.displayName = "Modal";
-const R = {};
-Object.assign(R, {
-  Default: b,
-  Root: u,
-  Overlay: y,
-  Content: _,
-  Title: p,
-  Body: E,
-  Img: g,
-  Actions: k,
-  PrimaryButton: f,
-  SecondaryButton: N,
-  Close: w
+x.displayName = "Modal";
+var S = {};
+Object.assign(S, {
+	Default: b,
+	Root: l,
+	Overlay: u,
+	Content: d,
+	Title: p,
+	Body: m,
+	Img: h,
+	Actions: g,
+	PrimaryButton: _,
+	SecondaryButton: v,
+	Close: y
 });
-export {
-  A as Modal,
-  R as ModalView
-};
-//# sourceMappingURL=Modal.mjs.map
+//#endregion
+export { x as Modal, S as ModalView };
+
+//# sourceMappingURL=Modal.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","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.mjs","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/esm/modules/guide/components/Modal/index.mjs

@@ -0,0 +1,2 @@
+import { Modal as e, ModalView as t } from "./Modal.mjs";
+export { e as Modal, t as ModalView };

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

@@ -1,24 +1,46 @@
-import t from "react";
-import { Button as a } from "@telegraph/button";
-import { TOOLBAR_Z_INDEX as r } from "./shared.mjs";
-/* empty css            */
-const s = ({
-  onClick: e,
-  positioned: o = !0
-}) => /* @__PURE__ */ t.createElement(a, { onClick: e, ...o && {
-  position: "fixed",
-  top: "4",
-  right: "4",
-  style: {
-    zIndex: r
-  }
-}, bg: "surface-2", shadow: "3", rounded: "3", w: "10", h: "10", variant: "soft", "data-tgph-appearance": "dark", "aria-label": "Expand guide toolbar" }, /* @__PURE__ */ t.createElement("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)"
-} }, /* @__PURE__ */ t.createElement("path", { d: "M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z", fill: "#EDEEEF" }), /* @__PURE__ */ t.createElement("path", { d: "M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z", fill: "#FF573A" })));
-export {
-  s as KnockButton
-};
-//# sourceMappingURL=KnockButton.mjs.map
+import "./shared.mjs";
+/* empty css        */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Button as n } from "@telegraph/button";
+//#region src/modules/guide/components/Toolbar/KnockButton.tsx
+var r = ({ onClick: r, positioned: i = !0 }) => /* @__PURE__ */ e(n, {
+	onClick: r,
+	...i && {
+		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: /* @__PURE__ */ t("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: [/* @__PURE__ */ e("path", {
+			d: "M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z",
+			fill: "#EDEEEF"
+		}), /* @__PURE__ */ e("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"
+		})]
+	})
+});
+//#endregion
+export { r as KnockButton };
+
+//# sourceMappingURL=KnockButton.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"KnockButton.mjs","sources":["../../../../../../src/modules/guide/components/Toolbar/KnockButton.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\n\nimport { TOOLBAR_Z_INDEX } from \"./shared\";\nimport \"./styles.css\";\n\ntype Props = {\n  onClick: () => void;\n  positioned?: boolean;\n};\n\nexport const KnockButton = ({ onClick, positioned = true }: Props) => {\n  return (\n    <Button\n      onClick={onClick}\n      {...(positioned && {\n        position: \"fixed\" as const,\n        top: \"4\" as const,\n        right: \"4\" as const,\n        style: { zIndex: TOOLBAR_Z_INDEX },\n      })}\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      w=\"10\"\n      h=\"10\"\n      variant=\"soft\"\n      data-tgph-appearance=\"dark\"\n      aria-label=\"Expand guide toolbar\"\n    >\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          position: \"absolute\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n        }}\n      >\n        <path\n          d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n          fill=\"#EDEEEF\"\n        />\n        <path\n          d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n          fill=\"#FF573A\"\n        />\n      </svg>\n    </Button>\n  );\n};\n"],"names":["KnockButton","onClick","positioned","React","Button","position","top","right","style","zIndex","TOOLBAR_Z_INDEX","left","transform"],"mappings":";;;;AAUO,MAAMA,IAAcA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,YAAAA,IAAa;AAAY,MAE3DC,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAAAH,GACKC,GAAAA,KAAc;AAAA,EACjBG,UAAU;AAAA,EACVC,KAAK;AAAA,EACLC,OAAO;AAAA,EACPC,OAAO;AAAA,IAAEC,QAAQC;AAAAA,EAAAA;AAAgB,GAEnC,IAAG,aACH,QAAO,KACP,SAAQ,KACR,GAAE,MACF,GAAE,MACF,SAAQ,QACR,wBAAqB,QACrB,cAAW,uBAEX,GAAAP,gBAAAA,EAAA,cAAC,OACC,EAAA,OAAM,MACN,QAAO,MACP,SAAQ,aACR,MAAK,QACL,OAAM,8BACN,OAAO;AAAA,EACLE,UAAU;AAAA,EACVC,KAAK;AAAA,EACLK,MAAM;AAAA,EACNC,WAAW;AAAA,KAGbT,gBAAAA,EAAA,cAAC,QACC,EAAA,GAAE,2JACF,MAAK,UAAS,CAAA,GAEhBA,gBAAAA,EAAA,cAAC,UACC,GAAE,wKACF,MAAK,UAAS,CAAA,CAElB,CACF;"}
+{"version":3,"file":"KnockButton.mjs","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":";;;;;AAUA,IAAa,KAAe,EAAE,YAAS,gBAAa,SAEhD,kBAAC,GAAD;CACW;CACT,GAAK,KAAc;EACjB,UAAU;EACV,KAAK;EACL,OAAO;EACP,OAAO,EAAE,QAAA,6BAAwB;CACnC;CACA,IAAG;CACH,QAAO;CACP,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,wBAAqB;CACrB,cAAW;WAEX,kBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;EACN,OAAO;GACL,UAAU;GACV,KAAK;GACL,MAAM;GACN,WAAW;EACb;YAXF,CAaE,kBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA,GACD,kBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA,CACE;;AACC,CAAA"}