@knocklabs/react 0.2.33 → 0.3.0-rc-2.0

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n  ActionButton,\n  ButtonSetContentBlock,\n  ContentBlock,\n  FeedItem,\n  MarkdownContentBlock,\n  TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n  formatTimestamp,\n  renderNodeOrFallback,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  // Invoked when the outer container is clicked\n  onItemClick?: (item: FeedItem) => void;\n  // Invoked when a button in the notification cell is clicked\n  onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n  if (url && url !== \"\") {\n    setTimeout(() => window.location.assign(url), 200);\n  }\n}\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(\n  (\n    { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n    ref,\n  ) => {\n    const { feedClient, colorMode } = useKnockFeed();\n    const { locale } = useTranslations();\n\n    const blocksByName: BlockByName = useMemo(() => {\n      return item.blocks.reduce((acc, block) => {\n        return { ...acc, [block.name]: block };\n      }, {});\n    }, [item]);\n\n    const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n    const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n    const onContainerClickHandler = React.useCallback(() => {\n      // Mark as interacted + read once we click the item\n      feedClient.markAsInteracted(item, {\n        type: \"cell_click\",\n        action: actionUrl,\n      });\n\n      if (onItemClick) return onItemClick(item);\n\n      return maybeNavigateToUrlWithDelay(actionUrl);\n    }, [item, actionUrl, onItemClick, feedClient]);\n\n    const onButtonClickHandler = React.useCallback(\n      (_e: React.MouseEvent, button: ActionButton) => {\n        // Record the interaction with the metadata for the button that was clicked\n        feedClient.markAsInteracted(item, {\n          type: \"button_click\",\n          name: button.name,\n          label: button.label,\n          action: button.action,\n        });\n\n        if (onButtonClick) return onButtonClick(item, button);\n\n        return maybeNavigateToUrlWithDelay(button.action);\n      },\n      [onButtonClick, feedClient, item],\n    );\n\n    const onKeyDown = React.useCallback(\n      (ev: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (ev.key) {\n          case \"Enter\": {\n            ev.stopPropagation();\n            onContainerClickHandler();\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onContainerClickHandler],\n    );\n\n    const actor = item.actors[0];\n\n    return (\n      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\n        tabIndex={0}\n      >\n        <div className=\"rnf-notification-cell__inner\">\n          {!item.read_at && (\n            <div className=\"rnf-notification-cell__unread-dot\" />\n          )}\n\n          {renderNodeOrFallback(\n            avatar,\n            actor && \"name\" in actor && actor.name && (\n              <Avatar name={actor.name} src={actor.avatar} />\n            ),\n          )}\n\n          <div className=\"rnf-notification-cell__content-outer\">\n            {blocksByName.body && (\n              <div\n                className=\"rnf-notification-cell__content\"\n                dangerouslySetInnerHTML={{\n                  __html: (blocksByName.body as MarkdownContentBlock).rendered,\n                }}\n              />\n            )}\n\n            {buttonSet && (\n              <div className=\"rnf-notification-cell__button-group\">\n                <ButtonGroup>\n                  {buttonSet.buttons.map((button, i) => (\n                    <Button\n                      variant={i === 0 ? \"primary\" : \"secondary\"}\n                      key={button.name}\n                      onClick={(e) => onButtonClickHandler(e, button)}\n                    >\n                      {button.label}\n                    </Button>\n                  ))}\n                </ButtonGroup>\n              </div>\n            )}\n\n            {children && (\n              <div className=\"rnf-notification-cell__child-content\">\n                {children}\n              </div>\n            )}\n\n            <span className=\"rnf-notification-cell__timestamp\">\n              {formatTimestamp(item.inserted_at, { locale })}\n            </span>\n          </div>\n\n          {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","_e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","e","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}
+{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n  ActionButton,\n  ButtonSetContentBlock,\n  ContentBlock,\n  FeedItem,\n  MarkdownContentBlock,\n  TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n  formatTimestamp,\n  renderNodeOrFallback,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  // Invoked when the outer container is clicked\n  onItemClick?: (item: FeedItem) => void;\n  // Invoked when a button in the notification cell is clicked\n  onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n  if (url && url !== \"\") {\n    setTimeout(() => window.location.assign(url), 200);\n  }\n}\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(\n  (\n    { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n    ref,\n  ) => {\n    const { feedClient, colorMode } = useKnockFeed();\n    const { locale } = useTranslations();\n\n    const blocksByName: BlockByName = useMemo(() => {\n      return item.blocks.reduce((acc, block) => {\n        return { ...acc, [block.name]: block };\n      }, {});\n    }, [item]);\n\n    const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n    const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n    const onContainerClickHandler = React.useCallback(() => {\n      // Mark as interacted + read once we click the item\n      feedClient.markAsInteracted(item, {\n        type: \"cell_click\",\n        action: actionUrl,\n      });\n\n      if (onItemClick) return onItemClick(item);\n\n      return maybeNavigateToUrlWithDelay(actionUrl);\n    }, [item, actionUrl, onItemClick, feedClient]);\n\n    const onButtonClickHandler = React.useCallback(\n      (e: React.MouseEvent, button: ActionButton) => {\n        // Record the interaction with the metadata for the button that was clicked\n        feedClient.markAsInteracted(item, {\n          type: \"button_click\",\n          name: button.name,\n          label: button.label,\n          action: button.action,\n        });\n\n        if (onButtonClick) return onButtonClick(item, button);\n\n        return maybeNavigateToUrlWithDelay(button.action);\n      },\n      [onButtonClick, feedClient, item],\n    );\n\n    const onKeyDown = React.useCallback(\n      (ev: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (ev.key) {\n          case \"Enter\": {\n            ev.stopPropagation();\n            onContainerClickHandler();\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onContainerClickHandler],\n    );\n\n    const actor = item.actors[0];\n\n    return (\n      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\n        tabIndex={0}\n      >\n        <div className=\"rnf-notification-cell__inner\">\n          {!item.read_at && (\n            <div className=\"rnf-notification-cell__unread-dot\" />\n          )}\n\n          {renderNodeOrFallback(\n            avatar,\n            actor && \"name\" in actor && actor.name && (\n              <Avatar name={actor.name} src={actor.avatar} />\n            ),\n          )}\n\n          <div className=\"rnf-notification-cell__content-outer\">\n            {blocksByName.body && (\n              <div\n                className=\"rnf-notification-cell__content\"\n                dangerouslySetInnerHTML={{\n                  __html: (blocksByName.body as MarkdownContentBlock).rendered,\n                }}\n              />\n            )}\n\n            {buttonSet && (\n              <div className=\"rnf-notification-cell__button-group\">\n                <ButtonGroup>\n                  {buttonSet.buttons.map((button, i) => (\n                    <Button\n                      variant={i === 0 ? \"primary\" : \"secondary\"}\n                      key={button.name}\n                      onClick={(e) => onButtonClickHandler(e, button)}\n                    >\n                      {button.label}\n                    </Button>\n                  ))}\n                </ButtonGroup>\n              </div>\n            )}\n\n            {children && (\n              <div className=\"rnf-notification-cell__child-content\">\n                {children}\n              </div>\n            )}\n\n            <span className=\"rnf-notification-cell__timestamp\">\n              {formatTimestamp(item.inserted_at, { locale })}\n            </span>\n          </div>\n\n          {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}

package/dist/esm/modules/in-app-messages/components/Banner/Banner.mjs

@@ -0,0 +1,99 @@
+import { useInAppMessagesChannel as E, useInAppMessage as b } from "@knocklabs/react-core";
+import i from "clsx";
+import t, { useEffect as N } from "react";
+/* empty css            */
+const f = "banner", s = ({
+  children: e,
+  className: a,
+  ...n
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-iam-banner", a), ...n }, e);
+s.displayName = "BannerView.Root";
+const o = ({
+  children: e,
+  className: a,
+  ...n
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-iam-banner__message", a), ...n }, e);
+o.displayName = "BannerView.Content";
+const c = ({
+  title: e,
+  className: a,
+  ...n
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-iam-banner__title", a), ...n }, e);
+c.displayName = "BannerView.Title";
+const l = ({
+  body: e,
+  className: a,
+  ...n
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-iam-banner__body", a), dangerouslySetInnerHTML: {
+  __html: e
+}, ...n });
+l.displayName = "BannerView.Body";
+const m = ({
+  children: e,
+  className: a,
+  ...n
+}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-iam-banner__actions", a), ...n }, e);
+m.displayName = "BannerView.Actions";
+const d = ({
+  text: e,
+  action: a,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t.createElement("a", { href: a, className: i("knock-iam-banner__action", n), ...r }, e);
+d.displayName = "BannerView.PrimaryAction";
+const u = ({
+  text: e,
+  action: a,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t.createElement("a", { href: a, className: i("knock-iam-banner__action knock-iam-banner__action--secondary", n), ...r }, e);
+u.displayName = "BannerView.SecondaryAction";
+const _ = ({
+  className: e,
+  ...a
+}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-iam-banner__close", e), ...a }, /* @__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" }))));
+_.displayName = "BannerView.DismissButton";
+const p = ({
+  content: e,
+  colorMode: a = "light",
+  onInteract: n,
+  onDismiss: r
+}) => /* @__PURE__ */ t.createElement(s, { "data-knock-color-mode": a, onClick: n }, /* @__PURE__ */ t.createElement(o, null, /* @__PURE__ */ t.createElement(c, { title: e.title }), /* @__PURE__ */ t.createElement(l, { body: e.body })), /* @__PURE__ */ t.createElement(m, null, e.secondary_button && /* @__PURE__ */ t.createElement(u, { text: e.secondary_button.text, action: e.secondary_button.action }), e.primary_button && /* @__PURE__ */ t.createElement(d, { text: e.primary_button.text, action: e.primary_button.action }), e.dismissible && /* @__PURE__ */ t.createElement(_, { onClick: r })));
+p.displayName = "BannerView.Default";
+const w = ({
+  filters: e
+}) => {
+  const {
+    colorMode: a
+  } = E(), {
+    message: n,
+    inAppMessagesClient: r
+  } = b(f, e);
+  if (N(() => {
+    !n || n.seen_at !== null || r.markAsSeen(n);
+  }, [n, r]), !n || n.archived_at) return null;
+  const y = () => {
+    r.markAsArchived(n);
+  }, k = () => {
+    r.markAsInteracted(n);
+  };
+  return /* @__PURE__ */ t.createElement(p, { content: n.content, colorMode: a, onDismiss: y, onInteract: k });
+};
+w.displayName = "Banner";
+const B = {};
+Object.assign(B, {
+  Default: p,
+  Root: s,
+  Content: o,
+  Title: c,
+  Body: l,
+  Actions: m,
+  PrimaryAction: d,
+  SecondaryAction: u,
+  DismissButton: _
+});
+export {
+  w as Banner,
+  B as BannerView
+};
+//# sourceMappingURL=Banner.mjs.map

package/dist/esm/modules/in-app-messages/components/Banner/Banner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.mjs","sources":["../../../../../../src/modules/in-app-messages/components/Banner/Banner.tsx"],"sourcesContent":["import {\n  ColorMode,\n  UseInAppMessageOptions,\n  useInAppMessage,\n  useInAppMessagesChannel,\n} from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React, { useEffect } from \"react\";\n\nimport { ActionContent } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nexport interface BannerProps {\n  filters?: UseInAppMessageOptions;\n}\n\nexport interface BannerContent {\n  title: string;\n  body: string;\n  primary_button?: {\n    text: string;\n    action: string;\n  };\n  secondary_button?: {\n    text: string;\n    action: string;\n  };\n  dismissible?: boolean;\n}\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryAction: React.FC<\n  ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <a\n      href={action}\n      className={clsx(\"knock-iam-banner__action\", className)}\n      {...props}\n    >\n      {text}\n    </a>\n  );\n};\nPrimaryAction.displayName = \"BannerView.PrimaryAction\";\n\nconst SecondaryAction: React.FC<\n  ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <a\n      href={action}\n      className={clsx(\n        \"knock-iam-banner__action knock-iam-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </a>\n  );\n};\nSecondaryAction.displayName = \"BannerView.SecondaryAction\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-iam-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\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onInteract?: () => void;\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({ content, colorMode = \"light\", onInteract, onDismiss }) => {\n  return (\n    <Root data-knock-color-mode={colorMode} onClick={onInteract}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryAction\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryAction\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\nconst Banner: React.FC<BannerProps> = ({ filters }) => {\n  const { colorMode } = useInAppMessagesChannel();\n\n  const { message, inAppMessagesClient } = useInAppMessage<BannerContent>(\n    MESSAGE_TYPE,\n    filters,\n  );\n\n  // Mark the message as seen on render\n  useEffect(() => {\n    if (!message || message.seen_at !== null) return;\n\n    inAppMessagesClient.markAsSeen(message);\n  }, [message, inAppMessagesClient]);\n\n  // Exclude archived messages\n  if (!message || message.archived_at) return null;\n\n  const onDismiss = () => {\n    inAppMessagesClient.markAsArchived(message);\n  };\n\n  const onInteract = () => {\n    inAppMessagesClient.markAsInteracted(message);\n  };\n\n  return (\n    <DefaultView\n      content={message.content}\n      colorMode={colorMode}\n      onDismiss={onDismiss}\n      onInteract={onInteract}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nconst 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  PrimaryAction: typeof PrimaryAction;\n  SecondaryAction: typeof SecondaryAction;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryAction,\n  SecondaryAction,\n  DismissButton,\n});\n\nexport { Banner, BannerView };\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryAction","text","action","SecondaryAction","DismissButton","DefaultView","content","colorMode","onInteract","onDismiss","secondary_button","primary_button","dismissible","Banner","filters","useInAppMessagesChannel","message","inAppMessagesClient","useInAppMessage","useEffect","seen_at","markAsSeen","archived_at","markAsArchived","markAsInteracted","BannerView","Object","assign","Default"],"mappings":";;;;AAaA,MAAMA,IAAe,UAoBfC,IAEFA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAEjCC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,oBAAoBH,CAAS,GAAG,GAAIC,EAAAA,GACtDF,CACH;AAGJD,EAAKM,cAAc;AAEnB,MAAMC,IAEFA,CAAC;AAAA,EAAEN,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAEjCC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,6BAA6BH,CAAS,GAAG,GAAIC,EAAAA,GAC/DF,CACH;AAGJM,EAAQD,cAAc;AAEtB,MAAME,IAEFA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOP,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAE9BC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,2BAA2BH,CAAS,GAAG,GAAIC,EAAAA,GAC7DM,CACH;AAGJD,EAAMF,cAAc;AAEpB,MAAMI,IAAwEA,CAAC;AAAA,EAC7EC,MAAAA;AAAAA,EACAT,WAAAA;AAAAA,EACA,GAAGC;AACL,sCAEK,OACC,EAAA,WAAWE,EAAK,0BAA0BH,CAAS,GACnD,yBAAyB;AAAA,EAAEU,QAAQD;AAAAA,GAC/BR,GAAAA,EACJ,CAAA;AAGNO,EAAKJ,cAAc;AAEnB,MAAMO,IAEFA,CAAC;AAAA,EAAEZ,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAEjCC,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAK,6BAA6BH,CAAS,GAAG,GAAIC,EAAAA,GAC/DF,CACH;AAGJY,EAAQP,cAAc;AAEtB,MAAMQ,IAEFA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAQd,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAErCC,gBAAAA,EAAA,cAAC,KACC,EAAA,MAAMY,GACN,WAAWX,EAAK,4BAA4BH,CAAS,GACjDC,GAAAA,EAAAA,GAEHY,CACH;AAGJD,EAAcR,cAAc;AAE5B,MAAMW,IAEFA,CAAC;AAAA,EAAEF,MAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAQd,WAAAA;AAAAA,EAAW,GAAGC;AAAM,MAErCC,gBAAAA,EAAA,cAAC,KACC,EAAA,MAAMY,GACN,WAAWX,EACT,gEACAH,CACF,GACIC,GAAAA,EAAAA,GAEHY,CACH;AAGJE,EAAgBX,cAAc;AAE9B,MAAMY,IAAiEA,CAAC;AAAA,EACtEhB,WAAAA;AAAAA,EACA,GAAGC;AACL,sCAEK,UAAO,EAAA,WAAWE,EAAK,2BAA2BH,CAAS,GAAG,GAAIC,KACjEC,gBAAAA,EAAA,cAAC,SACC,OAAM,8BACN,OAAM,MACN,QAAO,MACP,MAAK,UAEJA,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAK,WAAU,UAAS,WAAU,UAAS,aAC3CA,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,uFAAA,CAAsF,GAC7FA,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,uFAAqF,CAC/F,CACF,CACF;AAGJc,EAAcZ,cAAc;AAE5B,MAAMa,IAKDA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,WAAAA,IAAY;AAAA,EAASC,YAAAA;AAAAA,EAAYC,WAAAA;AAAU,MAExDnB,gBAAAA,EAAA,cAACJ,GAAK,EAAA,yBAAuBqB,GAAW,SAASC,EAC/C,GAAAlB,gBAAAA,EAAA,cAACG,GACC,MAAAH,gBAAAA,EAAA,cAACI,GAAM,EAAA,OAAOY,EAAQX,MAAAA,CAAM,GAC3BL,gBAAAA,EAAA,cAAAM,GAAA,EAAK,MAAMU,EAAQT,KAAK,CAAA,CAC3B,GACAP,gBAAAA,EAAA,cAACS,GACEO,MAAAA,EAAQI,oBACPpB,gBAAAA,EAAA,cAACa,GACC,EAAA,MAAMG,EAAQI,iBAAiBT,MAC/B,QAAQK,EAAQI,iBAAiBR,OAEpC,CAAA,GAEAI,EAAQK,kBACPrB,gBAAAA,EAAA,cAACU,GACC,EAAA,MAAMM,EAAQK,eAAeV,MAC7B,QAAQK,EAAQK,eAAeT,OAElC,CAAA,GAEAI,EAAQM,eAAetB,gBAAAA,EAAA,cAACc,GAAc,EAAA,SAASK,EAAa,CAAA,CAC/D,CACF;AAGJJ,EAAYb,cAAc;AAE1B,MAAMqB,IAAgCA,CAAC;AAAA,EAAEC,SAAAA;AAAQ,MAAM;AAC/C,QAAA;AAAA,IAAEP,WAAAA;AAAAA,MAAcQ,EAAwB,GAExC;AAAA,IAAEC,SAAAA;AAAAA,IAASC,qBAAAA;AAAAA,EAAAA,IAAwBC,EACvCjC,GACA6B,CACF;AAUA,MAPAK,EAAU,MAAM;AACd,IAAI,CAACH,KAAWA,EAAQI,YAAY,QAEpCH,EAAoBI,WAAWL,CAAO;AAAA,EAAA,GACrC,CAACA,GAASC,CAAmB,CAAC,GAG7B,CAACD,KAAWA,EAAQM,YAAoB,QAAA;AAE5C,QAAMb,IAAYA,MAAM;AACtBQ,IAAAA,EAAoBM,eAAeP,CAAO;AAAA,EAAA,GAGtCR,IAAaA,MAAM;AACvBS,IAAAA,EAAoBO,iBAAiBR,CAAO;AAAA,EAAA;AAG9C,yCACGX,GACC,EAAA,SAASW,EAAQV,SACjB,WAAAC,GACA,WAAAE,GACA,YAAAD,EACA,CAAA;AAEN;AACAK,EAAOrB,cAAc;AAErB,MAAMiC,IAAa,CAAC;AAYpBC,OAAOC,OAAOF,GAAY;AAAA,EACxBG,SAASvB;AAAAA,EACTnB,MAAAA;AAAAA,EACAO,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAE,MAAAA;AAAAA,EACAG,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAG,iBAAAA;AAAAA,EACAC,eAAAA;AACF,CAAC;"}

package/dist/esm/modules/in-app-messages/components/Card/Card.mjs

@@ -0,0 +1,111 @@
+import { useInAppMessagesChannel as C, useInAppMessage as w } from "@knocklabs/react-core";
+import c from "clsx";
+import t, { useEffect as h } from "react";
+/* empty css            */
+const f = "card", i = ({
+  children: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: c("knock-iam-card", n), ...a }, e);
+i.displayName = "CardView.Root";
+const l = ({
+  children: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: c("knock-iam-card__message", n), ...a }, e);
+l.displayName = "CardView.Content";
+const k = ({
+  children: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: c("knock-iam-card__header", n), ...a }, e);
+k.displayName = "CardView.Header";
+const y = ({
+  headline: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: c("knock-iam-card__headline", n), ...a }, e);
+y.displayName = "CardView.Headline";
+const s = ({
+  title: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: c("knock-iam-card__title", n), ...a }, e);
+s.displayName = "CardView.Title";
+const o = ({
+  body: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: c("knock-iam-card__body", n), dangerouslySetInnerHTML: {
+  __html: e
+}, ...a });
+o.displayName = "CardView.Body";
+const m = ({
+  children: e,
+  className: n,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: c("knock-iam-card__actions", n), ...a }, e);
+m.displayName = "CardView.Actions";
+const d = ({
+  text: e,
+  action: n,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ t.createElement("a", { href: n, className: c("knock-iam-card__action", a), ...r }, e);
+d.displayName = "CardView.PrimaryAction";
+const u = ({
+  text: e,
+  action: n,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ t.createElement("a", { href: n, className: c("knock-iam-card__action knock-iam-card__action--secondary", a), ...r }, e);
+u.displayName = "CardView.SecondaryAction";
+const _ = ({
+  className: e,
+  ...n
+}) => /* @__PURE__ */ t.createElement("button", { className: c("knock-iam-card__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" }))));
+_.displayName = "CardView.DismissButton";
+const p = ({
+  content: e,
+  colorMode: n = "light",
+  onInteract: a,
+  onDismiss: r
+}) => /* @__PURE__ */ t.createElement(i, { "data-knock-color-mode": n, onClick: a }, /* @__PURE__ */ t.createElement(l, null, /* @__PURE__ */ t.createElement(k, null, /* @__PURE__ */ t.createElement(y, { headline: e.headline }), e.dismissible && /* @__PURE__ */ t.createElement(_, { onClick: r })), /* @__PURE__ */ t.createElement(s, { title: e.title }), /* @__PURE__ */ t.createElement(o, { body: e.body })), /* @__PURE__ */ t.createElement(m, null, e.primary_button && /* @__PURE__ */ t.createElement(d, { text: e.primary_button.text, action: e.primary_button.action }), e.secondary_button && /* @__PURE__ */ t.createElement(u, { text: e.secondary_button.text, action: e.secondary_button.action })));
+p.displayName = "CardView.Default";
+const A = ({
+  filters: e
+}) => {
+  const {
+    colorMode: n
+  } = C(), {
+    message: a,
+    inAppMessagesClient: r
+  } = w(f, e);
+  if (h(() => {
+    !a || a.seen_at !== null || r.markAsSeen(a);
+  }, [a, r]), !a || a.archived_at) return null;
+  const E = () => {
+    r.markAsArchived(a);
+  }, N = () => {
+    r.markAsInteracted(a);
+  };
+  return /* @__PURE__ */ t.createElement(p, { content: a.content, colorMode: n, onDismiss: E, onInteract: N });
+};
+A.displayName = "Card";
+const g = {};
+Object.assign(g, {
+  Default: p,
+  Root: i,
+  Content: l,
+  Title: s,
+  Body: o,
+  Actions: m,
+  PrimaryAction: d,
+  SecondaryAction: u,
+  DismissButton: _
+});
+export {
+  A as Card,
+  g as CardView
+};
+//# sourceMappingURL=Card.mjs.map

package/dist/esm/modules/in-app-messages/components/Card/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","sources":["../../../../../../src/modules/in-app-messages/components/Card/Card.tsx"],"sourcesContent":["import {\n  ColorMode,\n  UseInAppMessageOptions,\n  useInAppMessage,\n  useInAppMessagesChannel,\n} from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React, { useEffect } from \"react\";\n\nimport { ActionContent } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nexport interface CardProps {\n  filters?: UseInAppMessageOptions;\n}\n\nexport interface CardContent {\n  headline: string;\n  title: string;\n  body: string;\n  primary_button?: {\n    text: string;\n    action: string;\n  };\n  secondary_button?: {\n    text: string;\n    action: string;\n  };\n  dismissible?: boolean;\n}\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-iam-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryAction: React.FC<\n  ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <a\n      href={action}\n      className={clsx(\"knock-iam-card__action\", className)}\n      {...props}\n    >\n      {text}\n    </a>\n  );\n};\nPrimaryAction.displayName = \"CardView.PrimaryAction\";\n\nconst SecondaryAction: React.FC<\n  ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <a\n      href={action}\n      className={clsx(\n        \"knock-iam-card__action knock-iam-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </a>\n  );\n};\nSecondaryAction.displayName = \"CardView.SecondaryAction\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-iam-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\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onInteract?: () => void;\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({ content, colorMode = \"light\", onInteract, onDismiss }) => {\n  return (\n    <Root data-knock-color-mode={colorMode} onClick={onInteract}>\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      <Actions>\n        {content.primary_button && (\n          <PrimaryAction\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n          />\n        )}\n\n        {content.secondary_button && (\n          <SecondaryAction\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n          />\n        )}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\nconst Card: React.FC<CardProps> = ({ filters }) => {\n  const { colorMode } = useInAppMessagesChannel();\n  const { message, inAppMessagesClient } = useInAppMessage<CardContent>(\n    MESSAGE_TYPE,\n    filters,\n  );\n\n  // Mark the message as seen on render\n  useEffect(() => {\n    if (!message || message.seen_at !== null) return;\n\n    inAppMessagesClient.markAsSeen(message);\n  }, [message, inAppMessagesClient]);\n\n  // Exclude archived messages\n  if (!message || message.archived_at) return null;\n\n  const onDismiss = () => {\n    inAppMessagesClient.markAsArchived(message);\n  };\n\n  const onInteract = () => {\n    inAppMessagesClient.markAsInteracted(message);\n  };\n\n  return (\n    <DefaultView\n      content={message.content}\n      colorMode={colorMode}\n      onDismiss={onDismiss}\n      onInteract={onInteract}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nconst 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  Actions: typeof Actions;\n  PrimaryAction: typeof PrimaryAction;\n  SecondaryAction: typeof SecondaryAction;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryAction,\n  SecondaryAction,\n  DismissButton,\n});\n\nexport { Card, CardView };\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Actions","PrimaryAction","text","action","SecondaryAction","DismissButton","DefaultView","content","colorMode","onInteract","onDismiss","dismissible","primary_button","secondary_button","Card","filters","useInAppMessagesChannel","message","inAppMessagesClient","useInAppMessage","useEffect","seen_at","markAsSeen","archived_at","markAsArchived","markAsInteracted","CardView","Object","assign","Default"],"mappings":"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"}

package/dist/esm/modules/in-app-messages/components/Modal/Modal.mjs

@@ -0,0 +1,115 @@
+import { useInAppMessagesChannel as h, useInAppMessage as A } from "@knocklabs/react-core";
+import * as r from "@radix-ui/react-dialog";
+import n from "clsx";
+import t, { useEffect as g } from "react";
+/* empty css            */
+const v = "modal", i = ({
+  children: e,
+  onOpenChange: l,
+  ...a
+}) => /* @__PURE__ */ t.createElement(r.Root, { defaultOpen: !0, onOpenChange: l, ...a }, /* @__PURE__ */ t.createElement(r.Portal, null, e));
+i.displayName = "ModalView.Root";
+const s = t.forwardRef(({
+  className: e,
+  ...l
+}, a) => /* @__PURE__ */ t.createElement(r.Overlay, { className: n("knock-iam-modal__overlay", e), ref: a, ...l }));
+s.displayName = "ModalView.Overlay";
+const m = t.forwardRef(({
+  children: e,
+  className: l,
+  ...a
+}, o) => /* @__PURE__ */ t.createElement(r.Content, { className: n("knock-iam-modal", l), ref: o, ...a }, e));
+m.displayName = "ModalView.Content";
+const f = ({
+  children: e,
+  className: l,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: n("knock-iam-modal__header", l), ...a }, e);
+f.displayName = "ModalView.Header";
+const d = ({
+  title: e,
+  className: l,
+  ...a
+}) => /* @__PURE__ */ t.createElement(r.Title, { className: n("knock-iam-modal__title", l), ...a }, e);
+d.displayName = "ModalView.Title";
+const u = ({
+  body: e,
+  className: l,
+  ...a
+}) => /* @__PURE__ */ t.createElement(r.Description, { className: n("knock-iam-modal__body", l), dangerouslySetInnerHTML: {
+  __html: e
+}, ...a });
+u.displayName = "ModalView.Body";
+const p = ({
+  children: e,
+  className: l,
+  ...a
+}) => /* @__PURE__ */ t.createElement("div", { className: n("knock-iam-modal__actions", l), ...a }, e);
+p.displayName = "ModalView.Actions";
+const y = ({
+  text: e,
+  action: l,
+  className: a,
+  ...o
+}) => /* @__PURE__ */ t.createElement("a", { href: l, className: n("knock-iam-modal__action", a), ...o }, e);
+y.displayName = "ModalView.PrimaryAction";
+const _ = ({
+  text: e,
+  action: l,
+  className: a,
+  ...o
+}) => /* @__PURE__ */ t.createElement("a", { href: l, className: n("knock-iam-modal__action knock-iam-modal__action--secondary", a), ...o }, e);
+_.displayName = "ModalView.SecondaryAction";
+const E = ({
+  className: e,
+  ...l
+}) => /* @__PURE__ */ t.createElement(r.Close, { className: n("knock-iam-modal__close", e), ...l }, /* @__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" }))));
+E.displayName = "ModalView.Close";
+const k = ({
+  content: e,
+  colorMode: l = "light",
+  onOpenChange: a,
+  onInteract: o,
+  onDismiss: c
+}) => /* @__PURE__ */ t.createElement(i, { onOpenChange: a, onClick: o }, /* @__PURE__ */ t.createElement(s, null), /* @__PURE__ */ t.createElement(m, { "data-knock-color-mode": l }, /* @__PURE__ */ t.createElement(f, null, /* @__PURE__ */ t.createElement(d, { title: e.title }), e.dismissible && /* @__PURE__ */ t.createElement(E, { onClick: c })), /* @__PURE__ */ t.createElement(u, { body: e.body }), /* @__PURE__ */ t.createElement(p, null, e.secondary_button && /* @__PURE__ */ t.createElement(_, { text: e.secondary_button.text, action: e.secondary_button.action }), e.primary_button && /* @__PURE__ */ t.createElement(y, { text: e.primary_button.text, action: e.primary_button.action }))));
+k.displayName = "ModalView.Default";
+const V = ({
+  filters: e
+}) => {
+  const {
+    colorMode: l
+  } = h(), {
+    message: a,
+    inAppMessagesClient: o
+  } = A(v, e);
+  if (g(() => {
+    !a || a.seen_at !== null || o.markAsSeen(a);
+  }, [a, o]), !a || a.archived_at) return null;
+  const c = (w) => {
+    w || o.markAsArchived(a);
+  }, M = () => {
+    o.markAsArchived(a);
+  }, N = () => {
+    o.markAsInteracted(a);
+  };
+  return /* @__PURE__ */ t.createElement(k, { content: a.content, colorMode: l, onOpenChange: c, onDismiss: M, onInteract: N });
+};
+V.displayName = "Modal";
+const C = {};
+Object.assign(C, {
+  Default: k,
+  Root: i,
+  Overlay: s,
+  Content: m,
+  Title: d,
+  Body: u,
+  Actions: p,
+  PrimaryAction: y,
+  SecondaryAction: _,
+  Close: E
+});
+export {
+  V as Modal,
+  C as ModalView
+};
+//# sourceMappingURL=Modal.mjs.map

package/dist/esm/modules/in-app-messages/components/Modal/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","sources":["../../../../../../src/modules/in-app-messages/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  ColorMode,\n  UseInAppMessageOptions,\n  useInAppMessage,\n  useInAppMessagesChannel,\n} from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport clsx from \"clsx\";\nimport React, { useEffect } from \"react\";\n\nimport { ActionContent } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\nexport interface ModalProps {\n  filters?: UseInAppMessageOptions;\n}\n\nexport interface ModalContent {\n  title: string;\n  body: string;\n  primary_button?: {\n    text: string;\n    action: string;\n  };\n  secondary_button?: {\n    text: string;\n    action: string;\n  };\n  dismissible?: boolean;\n}\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\n// TODO: Causes layout shift...\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Overlay\n        className={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-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={clsx(\"knock-iam-modal__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-iam-modal__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryAction: React.FC<\n  ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <a\n      href={action}\n      className={clsx(\"knock-iam-modal__action\", className)}\n      {...props}\n    >\n      {text}\n    </a>\n  );\n};\nPrimaryAction.displayName = \"ModalView.PrimaryAction\";\n\nconst SecondaryAction: React.FC<\n  ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <a\n      href={action}\n      className={clsx(\n        \"knock-iam-modal__action knock-iam-modal__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </a>\n  );\n};\nSecondaryAction.displayName = \"ModalView.SecondaryAction\";\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={clsx(\"knock-iam-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\nconst DefaultView: React.FC<{\n  content: ModalContent;\n  colorMode?: ColorMode;\n  onOpenChange?: (open: boolean) => void;\n  onInteract?: () => void;\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onOpenChange,\n  onInteract,\n  onDismiss,\n}) => {\n  return (\n    <Root onOpenChange={onOpenChange} onClick={onInteract}>\n      <Overlay />\n      {/* Must pass color mode to content for css variables to be set properly */}\n      <Content data-knock-color-mode={colorMode}>\n        <Header>\n          <Title title={content.title} />\n          {content.dismissible && <Close onClick={onDismiss} />}\n        </Header>\n\n        <Body body={content.body} />\n\n        <Actions>\n          {content.secondary_button && (\n            <SecondaryAction\n              text={content.secondary_button.text}\n              action={content.secondary_button.action}\n            />\n          )}\n          {content.primary_button && (\n            <PrimaryAction\n              text={content.primary_button.text}\n              action={content.primary_button.action}\n            />\n          )}\n        </Actions>\n      </Content>\n    </Root>\n  );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\nconst Modal: React.FC<ModalProps> = ({ filters }) => {\n  const { colorMode } = useInAppMessagesChannel();\n  const { message, inAppMessagesClient } = useInAppMessage<ModalContent>(\n    MESSAGE_TYPE,\n    filters,\n  );\n\n  // Mark the message as seen on render\n  useEffect(() => {\n    if (!message || message.seen_at !== null) return;\n\n    inAppMessagesClient.markAsSeen(message);\n  }, [message, inAppMessagesClient]);\n\n  // Exclude archived messages\n  if (!message || message.archived_at) return null;\n\n  const onOpenChange = (open: boolean) => {\n    if (!open) {\n      inAppMessagesClient.markAsArchived(message);\n    }\n  };\n\n  const onDismiss = () => {\n    inAppMessagesClient.markAsArchived(message);\n  };\n\n  const onInteract = () => {\n    inAppMessagesClient.markAsInteracted(message);\n  };\n\n  return (\n    <DefaultView\n      content={message.content}\n      colorMode={colorMode}\n      onOpenChange={onOpenChange}\n      onDismiss={onDismiss}\n      onInteract={onInteract}\n    />\n  );\n};\nModal.displayName = \"Modal\";\n\nconst 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  Actions: typeof Actions;\n  PrimaryAction: typeof PrimaryAction;\n  SecondaryAction: typeof SecondaryAction;\n  Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n  Default: DefaultView,\n  Root,\n  Overlay,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryAction,\n  SecondaryAction,\n  Close,\n});\n\nexport { Modal, ModalView };\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","clsx","Content","Header","Title","title","Body","body","__html","Actions","PrimaryAction","text","action","SecondaryAction","Close","DefaultView","content","colorMode","onInteract","onDismiss","dismissible","secondary_button","primary_button","Modal","filters","useInAppMessagesChannel","message","inAppMessagesClient","useInAppMessage","useEffect","seen_at","markAsSeen","archived_at","open","markAsArchived","markAsInteracted","ModalView","Object","assign","Default"],"mappings":"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"}

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs

@@ -19,10 +19,10 @@ const w = (u) => {
     connectionStatus: n,
     setActionLabel: o,
     actionLabel: i,
-    errorLabel: _
+    errorLabel: p
   } = L(), {
     buildSlackAuthUrl: m,
-    disconnectFromSlack: p
+    disconnectFromSlack: _
   } = S(u, h, d);
   b(() => {
     const k = (a) => {
@@ -38,7 +38,7 @@ const w = (u) => {
     };
   }, [r.host, s, c]);
   const g = t("slackDisconnect") || null, E = t("slackReconnect") || null;
-  return n === "connecting" || n === "disconnecting" ? /* @__PURE__ */ e.createElement("div", { className: "rsk-connect__button rsk-connect__button--loading" }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t(n === "connecting" ? "slackConnecting" : "slackDisconnecting"))) : n === "error" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--error", onMouseEnter: () => o(E), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--error" }, i || _ || t("slackError"))) : n === "disconnected" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--disconnected" }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t("slackConnect"))) : /* @__PURE__ */ e.createElement("button", { onClick: p, className: "rsk-connect__button rsk-connect__button--connected", onMouseEnter: () => o(g), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--connected" }, i || t("slackConnected")));
+  return n === "connecting" || n === "disconnecting" ? /* @__PURE__ */ e.createElement("div", { className: "rsk-connect__button rsk-connect__button--loading" }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t(n === "connecting" ? "slackConnecting" : "slackDisconnecting"))) : n === "error" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--error", onMouseEnter: () => o(E), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--error" }, i || p || t("slackError"))) : n === "disconnected" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--disconnected" }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t("slackConnect"))) : /* @__PURE__ */ e.createElement("button", { onClick: _, className: "rsk-connect__button rsk-connect__button--connected", onMouseEnter: () => o(g), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--connected" }, i || t("slackConnected")));
 };
 export {
   H as SlackAuthButton

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n  slackClientId: string;\n  redirectUrl?: string;\n  onAuthenticationComplete?: (authenticationResp: string) => void;\n  additionalScopes?: string[];\n}\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n  slackClientId,\n  redirectUrl,\n  onAuthenticationComplete,\n  additionalScopes,\n}) => {\n  const { t } = useTranslations();\n  const knock = useKnockClient();\n\n  const {\n    setConnectionStatus,\n    connectionStatus,\n    setActionLabel,\n    actionLabel,\n    errorLabel,\n  } = useKnockSlackClient();\n\n  const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n    slackClientId,\n    redirectUrl,\n    additionalScopes,\n  );\n\n  useEffect(() => {\n    const receiveMessage = (event: MessageEvent) => {\n      if (event.origin !== knock.host) {\n        return;\n      }\n\n      try {\n        if (event.data === \"authComplete\") {\n          setConnectionStatus(\"connected\");\n        }\n\n        if (event.data === \"authFailed\") {\n          setConnectionStatus(\"error\");\n        }\n\n        if (onAuthenticationComplete) {\n          onAuthenticationComplete(event.data);\n        }\n      } catch (_error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    window.addEventListener(\"message\", receiveMessage, false);\n\n    // Cleanup the event listener when the component unmounts\n    return () => {\n      window.removeEventListener(\"message\", receiveMessage);\n    };\n  }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n  const disconnectLabel = t(\"slackDisconnect\") || null;\n  const reconnectLabel = t(\"slackReconnect\") || null;\n\n  // Loading states\n  if (\n    connectionStatus === \"connecting\" ||\n    connectionStatus === \"disconnecting\"\n  ) {\n    return (\n      <div className=\"rsk-connect__button rsk-connect__button--loading\">\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>\n          {connectionStatus === \"connecting\"\n            ? t(\"slackConnecting\")\n            : t(\"slackDisconnecting\")}\n        </span>\n      </div>\n    );\n  }\n\n  // Error state\n  if (connectionStatus === \"error\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--error\"\n        onMouseEnter={() => setActionLabel(reconnectLabel)}\n        onMouseLeave={() => setActionLabel(null)}\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span className=\"rsk-connect__button__text--error\">\n          {actionLabel || errorLabel || t(\"slackError\")}\n        </span>\n      </button>\n    );\n  }\n\n  // Disconnected state\n  if (connectionStatus === \"disconnected\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--disconnected\"\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>{t(\"slackConnect\")}</span>\n      </button>\n    );\n  }\n\n  // Connected state\n  return (\n    <button\n      onClick={disconnectFromSlack}\n      className=\"rsk-connect__button rsk-connect__button--connected\"\n      onMouseEnter={() => setActionLabel(disconnectLabel)}\n      onMouseLeave={() => setActionLabel(null)}\n    >\n      <SlackIcon height=\"16px\" width=\"16px\" />\n      <span className=\"rsk-connect__button__text--connected\">\n        {actionLabel || t(\"slackConnected\")}\n      </span>\n    </button>\n  );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":"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"}
+{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n  slackClientId: string;\n  redirectUrl?: string;\n  onAuthenticationComplete?: (authenticationResp: string) => void;\n  additionalScopes?: string[];\n}\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n  slackClientId,\n  redirectUrl,\n  onAuthenticationComplete,\n  additionalScopes,\n}) => {\n  const { t } = useTranslations();\n  const knock = useKnockClient();\n\n  const {\n    setConnectionStatus,\n    connectionStatus,\n    setActionLabel,\n    actionLabel,\n    errorLabel,\n  } = useKnockSlackClient();\n\n  const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n    slackClientId,\n    redirectUrl,\n    additionalScopes,\n  );\n\n  useEffect(() => {\n    const receiveMessage = (event: MessageEvent) => {\n      if (event.origin !== knock.host) {\n        return;\n      }\n\n      try {\n        if (event.data === \"authComplete\") {\n          setConnectionStatus(\"connected\");\n        }\n\n        if (event.data === \"authFailed\") {\n          setConnectionStatus(\"error\");\n        }\n\n        if (onAuthenticationComplete) {\n          onAuthenticationComplete(event.data);\n        }\n      } catch (error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    window.addEventListener(\"message\", receiveMessage, false);\n\n    // Cleanup the event listener when the component unmounts\n    return () => {\n      window.removeEventListener(\"message\", receiveMessage);\n    };\n  }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n  const disconnectLabel = t(\"slackDisconnect\") || null;\n  const reconnectLabel = t(\"slackReconnect\") || null;\n\n  // Loading states\n  if (\n    connectionStatus === \"connecting\" ||\n    connectionStatus === \"disconnecting\"\n  ) {\n    return (\n      <div className=\"rsk-connect__button rsk-connect__button--loading\">\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>\n          {connectionStatus === \"connecting\"\n            ? t(\"slackConnecting\")\n            : t(\"slackDisconnecting\")}\n        </span>\n      </div>\n    );\n  }\n\n  // Error state\n  if (connectionStatus === \"error\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--error\"\n        onMouseEnter={() => setActionLabel(reconnectLabel)}\n        onMouseLeave={() => setActionLabel(null)}\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span className=\"rsk-connect__button__text--error\">\n          {actionLabel || errorLabel || t(\"slackError\")}\n        </span>\n      </button>\n    );\n  }\n\n  // Disconnected state\n  if (connectionStatus === \"disconnected\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--disconnected\"\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>{t(\"slackConnect\")}</span>\n      </button>\n    );\n  }\n\n  // Connected state\n  return (\n    <button\n      onClick={disconnectFromSlack}\n      className=\"rsk-connect__button rsk-connect__button--connected\"\n      onMouseEnter={() => setActionLabel(disconnectLabel)}\n      onMouseLeave={() => setActionLabel(null)}\n    >\n      <SlackIcon height=\"16px\" width=\"16px\" />\n      <span className=\"rsk-connect__button__text--connected\">\n        {actionLabel || t(\"slackConnected\")}\n      </span>\n    </button>\n  );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":";;;;;AAqBA,MAAMA,IAAsBA,CAACC,MAAgB;AAIrCC,QAAAA,IAAaC,OAAOD,cAAcC,OAAOC,SACzCC,IAAYF,OAAOE,aAAaF,OAAOG,SAEvCC,IACJJ,OAAOI,cAAcC,SAASC,gBAAgBC,eAAeC,OAAOC,OAChEC,IACJV,OAAOU,eACPL,SAASC,gBAAgBK,gBACzBH,OAAOI,QAEHC,IAAOT,IAAa,IAAIK,MAAQ,IAAIV,GAIpCe,IAAW,4BAHLJ,IAAc,IAAIE,MAAS,IAAIV,CAGgB,SAASW,CAAI;AAEjEE,SAAAA,KAAKjB,GAAK,eAAegB,CAAQ;AAC1C,GAEaE,IAA2DA,CAAC;AAAA,EACvEC,eAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,0BAAAA;AAAAA,EACAC,kBAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAgB,GACxBC,IAAQC,KAER;AAAA,IACJC,qBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,YAAAA;AAAAA,MACEC,EAAoB,GAElB;AAAA,IAAEC,mBAAAA;AAAAA,IAAmBC,qBAAAA;AAAAA,EAAwBC,IAAAA,EACjDhB,GACAC,GACAE,CACF;AAEAc,EAAAA,EAAU,MAAM;AACRC,UAAAA,IAAiBA,CAACC,MAAwB;AAC1CA,UAAAA,EAAMC,WAAWd,EAAMe;AAIvB,YAAA;AACEF,UAAAA,EAAMG,SAAS,kBACjBd,EAAoB,WAAW,GAG7BW,EAAMG,SAAS,gBACjBd,EAAoB,OAAO,GAGzBN,KACFA,EAAyBiB,EAAMG,IAAI;AAAA,gBAEvB;AACdd,UAAAA,EAAoB,OAAO;AAAA,QAC7B;AAAA,IAAA;AAGKe,kBAAAA,iBAAiB,WAAWL,GAAgB,EAAK,GAGjD,MAAM;AACJM,aAAAA,oBAAoB,WAAWN,CAAc;AAAA,IAAA;AAAA,KAErD,CAACZ,EAAMe,MAAMnB,GAA0BM,CAAmB,CAAC;AAExDiB,QAAAA,IAAkBrB,EAAE,iBAAiB,KAAK,MAC1CsB,IAAiBtB,EAAE,gBAAgB,KAAK;AAI5CK,SAAAA,MAAqB,gBACrBA,MAAqB,kBAGnBkB,gBAAAA,EAAA,cAAC,SAAI,WAAU,mDAAA,mCACZC,GAAU,EAAA,QAAO,QAAO,OAAM,OAAM,CAAA,GACpCD,gBAAAA,EAAA,cAAA,QAAA,MAEKvB,EADHK,MAAqB,eAChB,oBACA,oBADiB,CAEzB,CACF,IAKAA,MAAqB,0CAEpB,UACC,EAAA,SAAS,MAAM7B,EAAoBkC,GAAmB,GACtD,WAAU,kDACV,cAAc,MAAMJ,EAAegB,CAAc,GACjD,cAAc,MAAMhB,EAAe,IAAI,EAAA,mCAEtCkB,GAAU,EAAA,QAAO,QAAO,OAAM,QAAM,GACrCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,sCACbhB,KAAeC,KAAcR,EAAE,YAAY,CAC9C,CACF,IAKAK,MAAqB,iBAErBkB,gBAAAA,EAAA,cAAC,YACC,SAAS,MAAM/C,EAAoBkC,EAAkB,CAAC,GACtD,WAAU,wDAEV,GAAAa,gBAAAA,EAAA,cAACC,KAAU,QAAO,QAAO,OAAM,OAAM,CAAA,mCACpC,QAAMxB,MAAAA,EAAE,cAAc,CAAE,CAC3B,IAMDuB,gBAAAA,EAAA,cAAA,UAAA,EACC,SAASZ,GACT,WAAU,sDACV,cAAc,MAAML,EAAee,CAAe,GAClD,cAAc,MAAMf,EAAe,IAAI,EAEvC,GAAAiB,gBAAAA,EAAA,cAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAM,GACrCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,uCACbhB,GAAAA,KAAeP,EAAE,gBAAgB,CACpC,CACF;AAEJ;"}