@knocklabs/react 0.12.1 → 0.13.0

package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UnseenBadge.mjs","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":";;;AAeA,SAASA,EACPC,GACAC,GACQ;AACR,UAAQD,GAAc;AAAA,IACpB,KAAK;AACH,aAAOC,EAASC;AAAAA,IAClB,KAAK;AACH,aAAOD,EAASE;AAAAA,IAClB,KAAK;AACH,aAAOF,EAASG;AAAAA,EAAAA;AAEtB;AAEO,MAAMC,IAA0CA,CAAC;AAAA,EACtDL,gBAAAA,IAAiB;AACnB,MAAM;AACE,QAAA;AAAA,IAAEM,cAAAA;AAAAA,MAAiBC,EAAa,GAChCC,IAAkBF,EAAcG,CAAAA,MACpCV,EAAiBC,GAAgBS,EAAMR,QAAQ,CACjD;AAEOO,SAAAA,MAAoB,IACxBE,gBAAAA,EAAA,cAAA,OAAA,EACC,WAAU,oBACV,MAAK,UACL,cAAYC,EAAkBH,GAAiBR,CAAc,EAE7D,GAAAU,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,2BAA0B,eAAY,UACnDE,EAAiBJ,CAAe,CACnC,CACF,IACE;AACN;"}
+{"version":3,"file":"UnseenBadge.mjs","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":";;;;;AAeA,SAAS,EACP,GACA,GACQ;CACR,QAAQ,GAAR;EACE,KAAK,OACH,OAAO,EAAS;EAClB,KAAK,UACH,OAAO,EAAS;EAClB,KAAK,UACH,OAAO,EAAS;CACpB;AACF;AAEA,IAAa,KAA2C,EACtD,oBAAiB,eACb;CACJ,IAAM,EAAE,oBAAiB,EAAa,GAChC,IAAkB,GAAc,MACpC,EAAiB,GAAgB,EAAM,QAAQ,CACjD;CAEA,OAAO,MAAoB,IAUvB,OATF,kBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,cAAY,EAAkB,GAAiB,CAAc;YAE7D,kBAAC,QAAD;GAAM,WAAU;GAA0B,eAAY;aACnD,EAAiB,CAAe;EAC7B,CAAA;CACH,CAAA;AAET"}

package/dist/esm/modules/feed/components/UnseenBadge/index.mjs

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

package/dist/esm/modules/feed/index.mjs

@@ -0,0 +1,18 @@
+import { EmptyFeed as e } from "./components/EmptyFeed/EmptyFeed.mjs";
+import "./components/EmptyFeed/index.mjs";
+import { Avatar as t } from "./components/NotificationCell/Avatar.mjs";
+import { NotificationCell as n } from "./components/NotificationCell/NotificationCell.mjs";
+import "./components/NotificationCell/index.mjs";
+import { MarkAsRead as r } from "./components/NotificationFeed/MarkAsRead.mjs";
+import { NotificationFeedHeader as i } from "./components/NotificationFeed/NotificationFeedHeader.mjs";
+import { NotificationFeed as a } from "./components/NotificationFeed/NotificationFeed.mjs";
+import "./components/NotificationFeed/index.mjs";
+import { NotificationFeedContainer as o } from "./components/NotificationFeedContainer/NotificationFeedContainer.mjs";
+import "./components/NotificationFeedContainer/index.mjs";
+import { NotificationFeedPopover as s } from "./components/NotificationFeedPopover/NotificationFeedPopover.mjs";
+import "./components/NotificationFeedPopover/index.mjs";
+import { UnseenBadge as c } from "./components/UnseenBadge/UnseenBadge.mjs";
+import "./components/UnseenBadge/index.mjs";
+import { NotificationIconButton as l } from "./components/NotificationIconButton/NotificationIconButton.mjs";
+import "./components/NotificationIconButton/index.mjs";
+export { t as Avatar, e as EmptyFeed, r as MarkAsRead, n as NotificationCell, a as NotificationFeed, o as NotificationFeedContainer, i as NotificationFeedHeader, s as NotificationFeedPopover, l as NotificationIconButton, c as UnseenBadge };

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

@@ -1,133 +1,142 @@
-import { useGuide as g } from "@knocklabs/react-core";
-import t from "react";
-import { cx as i } from "../../../core/cx/index.mjs";
-import { maybeNavigateToUrlWithDelay as N } from "../helpers.mjs";
-/* empty css            */
-const f = "banner", s = ({
-  children: e,
-  className: n,
-  ...a
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner", n), ...a }, e);
+import { cx as e } from "../../../core/cx/index.mjs";
+import { maybeNavigateToUrlWithDelay as t } from "../helpers.mjs";
+/* empty css        */
+import { useGuide as n } from "@knocklabs/react-core";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/modules/guide/components/Banner/Banner.tsx
+var o = "banner", s = ({ children: t, className: n, ...r }) => /* @__PURE__ */ i("div", {
+	className: e("knock-guide-banner", n),
+	...r,
+	children: t
+});
 s.displayName = "BannerView.Root";
-const m = ({
-  children: e,
-  className: n,
-  ...a
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__message", n), ...a }, e);
-m.displayName = "BannerView.Content";
-const d = ({
-  title: e,
-  className: n,
-  ...a
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__title", n), ...a }, e);
-d.displayName = "BannerView.Title";
-const u = ({
-  body: e,
-  className: n,
-  ...a
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__body", n), dangerouslySetInnerHTML: {
-  __html: e
-}, ...a });
+var c = ({ children: t, className: n, ...r }) => /* @__PURE__ */ i("div", {
+	className: e("knock-guide-banner__message", n),
+	...r,
+	children: t
+});
+c.displayName = "BannerView.Content";
+var l = ({ title: t, className: n, ...r }) => /* @__PURE__ */ i("div", {
+	className: e("knock-guide-banner__title", n),
+	...r,
+	children: t
+});
+l.displayName = "BannerView.Title";
+var u = ({ body: t, className: n, ...r }) => /* @__PURE__ */ i("div", {
+	className: e("knock-guide-banner__body", n),
+	dangerouslySetInnerHTML: { __html: t },
+	...r
+});
 u.displayName = "BannerView.Body";
-const y = ({
-  children: e,
-  className: n,
-  ...a
-}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__actions", n), ...a }, e);
-y.displayName = "BannerView.Actions";
-const _ = ({
-  text: e,
-  action: n,
-  className: a,
-  ...r
-}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__action", a), ...r }, e);
-_.displayName = "BannerView.PrimaryButton";
-const b = ({
-  text: e,
-  action: n,
-  className: a,
-  ...r
-}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__action knock-guide-banner__action--secondary", a), ...r }, e);
-b.displayName = "BannerView.SecondaryButton";
-const p = ({
-  className: e,
-  ...n
-}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__close", e), ...n }, /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ t.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ t.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__ */ t.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" }))));
-p.displayName = "BannerView.DismissButton";
-const k = ({
-  content: e,
-  colorMode: n = "light",
-  onDismiss: a,
-  onButtonClick: r
-}) => /* @__PURE__ */ t.createElement(s, { "data-knock-color-mode": n }, /* @__PURE__ */ t.createElement(m, null, /* @__PURE__ */ t.createElement(d, { title: e.title }), /* @__PURE__ */ t.createElement(u, { body: e.body })), /* @__PURE__ */ t.createElement(y, null, e.secondary_button && /* @__PURE__ */ t.createElement(b, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (c) => {
-  if (r) {
-    const {
-      text: l,
-      action: o
-    } = e.secondary_button;
-    r(c, {
-      name: "secondary_button",
-      text: l,
-      action: o
-    });
-  }
-} }), e.primary_button && /* @__PURE__ */ t.createElement(_, { text: e.primary_button.text, action: e.primary_button.action, onClick: (c) => {
-  if (r) {
-    const {
-      text: l,
-      action: o
-    } = e.primary_button;
-    r(c, {
-      name: "primary_button",
-      text: l,
-      action: o
-    });
-  }
-} }), e.dismissible && /* @__PURE__ */ t.createElement(p, { onClick: a })));
-k.displayName = "BannerView.Default";
-const B = ({
-  guideKey: e,
-  onButtonClick: n
-}) => {
-  const {
-    guide: a,
-    step: r,
-    colorMode: c
-  } = g({
-    key: e,
-    type: f
-  });
-  return t.useEffect(() => {
-    r && r.markAsSeen();
-  }, [r]), !a || !r ? null : /* @__PURE__ */ t.createElement(k, { content: r.content, colorMode: c, onDismiss: () => r.markAsArchived(), onButtonClick: (l, o) => {
-    const E = {
-      ...o,
-      type: "button_click"
-    };
-    return r.markAsInteracted({
-      metadata: E
-    }), n ? n(l, {
-      button: o,
-      step: r,
-      guide: a
-    }) : N(o.action);
-  } });
-};
-B.displayName = "Banner";
-const w = {};
-Object.assign(w, {
-  Default: k,
-  Root: s,
-  Content: m,
-  Title: d,
-  Body: u,
-  Actions: y,
-  PrimaryButton: _,
-  SecondaryButton: b,
-  DismissButton: p
+var d = ({ children: t, className: n, ...r }) => /* @__PURE__ */ i("div", {
+	className: e("knock-guide-banner__actions", n),
+	...r,
+	children: t
 });
-export {
-  B as Banner,
-  w as BannerView
+d.displayName = "BannerView.Actions";
+var f = ({ text: t, action: n, className: r, ...a }) => /* @__PURE__ */ i("button", {
+	className: e("knock-guide-banner__action", r),
+	...a,
+	children: t
+});
+f.displayName = "BannerView.PrimaryButton";
+var p = ({ text: t, action: n, className: r, ...a }) => /* @__PURE__ */ i("button", {
+	className: e("knock-guide-banner__action knock-guide-banner__action--secondary", r),
+	...a,
+	children: t
+});
+p.displayName = "BannerView.SecondaryButton";
+var m = ({ className: t, ...n }) => /* @__PURE__ */ i("button", {
+	className: e("knock-guide-banner__close", t),
+	...n,
+	children: /* @__PURE__ */ i("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "18",
+		fill: "none",
+		children: /* @__PURE__ */ a("g", {
+			fill: "#60646C",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			children: [/* @__PURE__ */ i("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__ */ i("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 }) => /* @__PURE__ */ a(s, {
+	"data-knock-color-mode": t,
+	children: [/* @__PURE__ */ a(c, { children: [/* @__PURE__ */ i(l, { title: e.title }), /* @__PURE__ */ i(u, { body: e.body })] }), /* @__PURE__ */ a(d, { children: [
+		e.secondary_button && /* @__PURE__ */ i(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 && /* @__PURE__ */ i(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 && /* @__PURE__ */ i(m, { onClick: n })
+	] })]
+});
+h.displayName = "BannerView.Default";
+var g = ({ guideKey: e, onButtonClick: a }) => {
+	let { guide: s, step: c, colorMode: l } = n({
+		key: e,
+		type: o
+	});
+	return r.useEffect(() => {
+		c && c.markAsSeen();
+	}, [c]), !s || !c ? null : /* @__PURE__ */ i(h, {
+		content: c.content,
+		colorMode: l,
+		onDismiss: () => c.markAsArchived(),
+		onButtonClick: (e, n) => {
+			let r = {
+				...n,
+				type: "button_click"
+			};
+			return c.markAsInteracted({ metadata: r }), a ? a(e, {
+				button: n,
+				step: c,
+				guide: s
+			}) : t(n.action);
+		}
+	});
 };
-//# sourceMappingURL=Banner.mjs.map
+g.displayName = "Banner";
+var _ = {};
+Object.assign(_, {
+	Default: h,
+	Root: s,
+	Content: c,
+	Title: l,
+	Body: u,
+	Actions: d,
+	PrimaryButton: f,
+	SecondaryButton: p,
+	DismissButton: m
+});
+//#endregion
+export { g as Banner, _ as BannerView };
+
+//# sourceMappingURL=Banner.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.mjs","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.mjs","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":";;;;;;;AASA,IAAM,IAAe,UAEf,KAED,EAAE,aAAU,cAAW,GAAG,QAE3B,kBAAC,OAAD;CAAK,WAAW,EAAG,sBAAsB,CAAS;CAAG,GAAI;CACtD;AACE,CAAA;AAGT,EAAK,cAAc;AAEnB,IAAM,KAED,EAAE,aAAU,cAAW,GAAG,QAE3B,kBAAC,OAAD;CAAK,WAAW,EAAG,+BAA+B,CAAS;CAAG,GAAI;CAC/D;AACE,CAAA;AAGT,EAAQ,cAAc;AAEtB,IAAM,KAED,EAAE,UAAO,cAAW,GAAG,QAExB,kBAAC,OAAD;CAAK,WAAW,EAAG,6BAA6B,CAAS;CAAG,GAAI;WAC7D;AACE,CAAA;AAGT,EAAM,cAAc;AAEpB,IAAM,KAAyE,EAC7E,SACA,cACA,GAAG,QAGD,kBAAC,OAAD;CACE,WAAW,EAAG,4BAA4B,CAAS;CACnD,yBAAyB,EAAE,QAAQ,EAAK;CACxC,GAAI;AACL,CAAA;AAGL,EAAK,cAAc;AAEnB,IAAM,KAED,EAAE,aAAU,cAAW,GAAG,QAE3B,kBAAC,OAAD;CAAK,WAAW,EAAG,+BAA+B,CAAS;CAAG,GAAI;CAC/D;AACE,CAAA;AAGT,EAAQ,cAAc;AAEtB,IAAM,KAED,EAAE,SAAM,WAAQ,cAAW,GAAG,QAE/B,kBAAC,UAAD;CAAQ,WAAW,EAAG,8BAA8B,CAAS;CAAG,GAAI;WACjE;AACK,CAAA;AAGZ,EAAc,cAAc;AAE5B,IAAM,KAED,EAAE,SAAM,WAAQ,cAAW,GAAG,QAE/B,kBAAC,UAAD;CACE,WAAW,EACT,oEACA,CACF;CACA,GAAI;WAEH;AACK,CAAA;AAGZ,EAAgB,cAAc;AAE9B,IAAM,KAAkE,EACtE,cACA,GAAG,QAGD,kBAAC,UAAD;CAAQ,WAAW,EAAG,6BAA6B,CAAS;CAAG,GAAI;WACjE,kBAAC,OAAD;EACE,OAAM;EACN,OAAM;EACN,QAAO;EACP,MAAK;YAEL,kBAAC,KAAD;GAAG,MAAK;GAAU,UAAS;GAAU,UAAS;aAA9C,CACE,kBAAC,QAAD,EAAM,GAAE,uFAAwF,CAAA,GAChG,kBAAC,QAAD,EAAM,GAAE,sFAAuF,CAAA,CAC9F;;CACA,CAAA;AACC,CAAA;AAGZ,EAAc,cAAc;AAU5B,IAAM,KAKA,EAAE,YAAS,eAAY,SAAS,cAAW,uBAE7C,kBAAC,GAAD;CAAM,yBAAuB;WAA7B,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAO,OAAO,EAAQ,MAAQ,CAAA,GAC9B,kBAAC,GAAD,EAAM,MAAM,EAAQ,KAAO,CAAA,CACpB,EAAA,CAAA,GACT,kBAAC,GAAD,EAAA,UAAA;EACG,EAAQ,oBACP,kBAAC,GAAD;GACE,MAAM,EAAQ,iBAAiB;GAC/B,QAAQ,EAAQ,iBAAiB;GACjC,UAAU,MAAM;IACd,IAAI,GAAe;KACjB,IAAM,EAAE,SAAM,cAAW,EAAQ;KACjC,EAAc,GAAG;MAAE,MAAM;MAAoB;MAAM;KAAO,CAAC;IAC7D;GACF;EACD,CAAA;EAGF,EAAQ,kBACP,kBAAC,GAAD;GACE,MAAM,EAAQ,eAAe;GAC7B,QAAQ,EAAQ,eAAe;GAC/B,UAAU,MAAM;IACd,IAAI,GAAe;KACjB,IAAM,EAAE,SAAM,cAAW,EAAQ;KACjC,EAAc,GAAG;MAAE,MAAM;MAAkB;MAAM;KAAO,CAAC;IAC3D;GACF;EACD,CAAA;EAGF,EAAQ,eAAe,kBAAC,GAAD,EAAe,SAAS,EAAY,CAAA;CACrD,EAAA,CAAA,CACL;;AAGV,EAAY,cAAc;AAO1B,IAAa,KAAiC,EAAE,aAAU,uBAAoB;CAC5E,IAAM,EAAE,UAAO,SAAM,iBAAc,EAAS;EAC1C,KAAK;EACL,MAAM;CACR,CAAC;CAQD,OANA,EAAM,gBAAgB;EACpB,AAAI,KAAM,EAAK,WAAW;CAC5B,GAAG,CAAC,CAAI,CAAC,GAEL,CAAC,KAAS,CAAC,IAAa,OAG1B,kBAAC,GAAD;EACE,SAAS,EAAK;EACH;EACX,iBAAiB,EAAK,eAAe;EACrC,gBAAgB,GAAG,MAAW;GAC5B,IAAM,IAAW;IAAE,GAAG;IAAQ,MAAM;GAAe;GAGnD,OAFA,EAAK,iBAAiB,EAAE,YAAS,CAAC,GAE3B,IACH,EAAc,GAAG;IAAE;IAAQ;IAAM;GAAM,CAAC,IACxC,EAA4B,EAAO,MAAM;EAC/C;CACD,CAAA;AAEL;AACA,EAAO,cAAc;AAErB,IAAa,IAAa,CAAC;AAY3B,OAAO,OAAO,GAAY;CACxB,SAAS;CACT;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/esm/modules/guide/components/Banner/index.mjs

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