npm - @knocklabs/react - Versions diffs - 0.11.22 → 0.12.0-rc.0 - Mend

@knocklabs/react 0.11.22 → 0.12.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

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

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

package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const r=require("react"),C=require("@knocklabs/react-core"),m=require("../../../core/components/Spinner/Spinner.js");;/* empty css                                          */require("lodash.debounce");;/* empty css               */const _=require("../SlackChannelCombobox/SlackConnectionError.js"),q=require("../SlackIcon/SlackIcon.js");;/* empty css            */const E=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=E(r),S=({inErrorState:e,connectedChannels:o=[],updateConnectedChannels:i,connectedChannelsError:d,connectedChannelsUpdating:h})=>{const{t:a}=C.useTranslations(),[t,c]=r.useState(null),[l,s]=r.useState(null),f=()=>{if(!t)return;if(l&&s(null),o.find(p=>p.channel_id===t))return c(""),s(a("slackChannelAlreadyConnected")||"");const k=[...o,{channel_id:t}];i(k),c("")};return n.default.createElement("div",{className:"rsk-connect-channel"},n.default.createElement("input",{className:`rsk-connect-channel__input ${(e||!!l)&&!t&&"rsk-connect-channel__input--error"}`,tabIndex:-1,id:"slack-channel-search",type:"text",placeholder:l||d||a("slackChannelId"),onChange:u=>c(u.target.value),value:t||""}),n.default.createElement("button",{className:"rsk-connect-channel__button",onClick:f},h?n.default.createElement(m.Spinner,{size:"15px",thickness:3}):n.default.createElement(q.SlackIcon,{height:"16px",width:"16px"}),a("slackConnectChannel")),n.default.createElement(_,null))};module.exports=S;
+"use strict";const r=require("react"),C=require("@knocklabs/react-core"),m=require("../../../core/components/Spinner/Spinner.js");;/* empty css                                          */;/* empty css               */const _=require("../SlackChannelCombobox/SlackConnectionError.js"),E=require("../SlackIcon/SlackIcon.js");;/* empty css            */const S=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=S(r),q=({inErrorState:e,connectedChannels:o=[],updateConnectedChannels:i,connectedChannelsError:d,connectedChannelsUpdating:h})=>{const{t:a}=C.useTranslations(),[t,c]=r.useState(null),[l,s]=r.useState(null),f=()=>{if(!t)return;if(l&&s(null),o.find(p=>p.channel_id===t))return c(""),s(a("slackChannelAlreadyConnected")||"");const k=[...o,{channel_id:t}];i(k),c("")};return n.default.createElement("div",{className:"rsk-connect-channel"},n.default.createElement("input",{className:`rsk-connect-channel__input ${(e||!!l)&&!t&&"rsk-connect-channel__input--error"}`,tabIndex:-1,id:"slack-channel-search",type:"text",placeholder:l||d||a("slackChannelId"),onChange:u=>c(u.target.value),value:t||""}),n.default.createElement("button",{className:"rsk-connect-channel__button",onClick:f},h?n.default.createElement(m.Spinner,{size:"15px",thickness:3}):n.default.createElement(E.SlackIcon,{height:"16px",width:"16px"}),a("slackConnectChannel")),n.default.createElement(_,null))};module.exports=q;
 //# sourceMappingURL=SlackAddChannelInput.js.map

package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAddChannelInputProps {\n inErrorState: boolean;\n connectedChannels: SlackChannelConnection[];\n updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n connectedChannelsError: string \| null;\n connectedChannelsUpdating: boolean;\n}\n\nconst SlackAddChannelInput: FunctionComponent<SlackAddChannelInputProps> = ({\n inErrorState,\n connectedChannels = [],\n updateConnectedChannels,\n connectedChannelsError,\n connectedChannelsUpdating,\n}) => {\n const { t } = useTranslations();\n const [value, setValue] = useState<string \| null>(null);\n const [localError, setLocalError] = useState<string \| null>(null);\n\n const submitChannel = () => {\n if (!value) {\n return;\n }\n\n if (localError) {\n setLocalError(null);\n }\n\n const alreadyConnected = connectedChannels.find(\n (channel) => channel.channel_id === value,\n );\n\n if (alreadyConnected) {\n setValue(\"\");\n return setLocalError(t(\"slackChannelAlreadyConnected\") \|\| \"\");\n }\n\n const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n updateConnectedChannels(channelsToSendToKnock);\n setValue(\"\");\n };\n\n return (\n <div className=\"rsk-connect-channel\">\n <input\n className={`rsk-connect-channel__input ${(inErrorState \|\| !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n tabIndex={-1}\n id=\"slack-channel-search\"\n type=\"text\"\n placeholder={\n localError \|\| connectedChannelsError \|\| t(\"slackChannelId\")\n }\n onChange={(e) => setValue(e.target.value)}\n value={value \|\| \"\"}\n />\n <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n {connectedChannelsUpdating ? (\n <Spinner size=\"15px\" thickness={3} />\n ) : (\n <SlackIcon height=\"16px\" width=\"16px\" />\n )}\n {t(\"slackConnectChannel\")}\n </button>\n <ConnectionErrorInfoBoxes />\n </div>\n );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","find","channel","channel_id","channelsToSendToKnock","React","e","target","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":"~~8bAoBMA~~,EAAqEA,CAAC,CAC1EC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CACb,EAEA,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAW,+BAA+BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAmC,GACxH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAA,CAAK,EAErCH,UAAA,cAACI,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,MAAA,CAChC,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}
1	+ {"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAddChannelInputProps {\n inErrorState: boolean;\n connectedChannels: SlackChannelConnection[];\n updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n connectedChannelsError: string \| null;\n connectedChannelsUpdating: boolean;\n}\n\nconst SlackAddChannelInput: FunctionComponent<SlackAddChannelInputProps> = ({\n inErrorState,\n connectedChannels = [],\n updateConnectedChannels,\n connectedChannelsError,\n connectedChannelsUpdating,\n}) => {\n const { t } = useTranslations();\n const [value, setValue] = useState<string \| null>(null);\n const [localError, setLocalError] = useState<string \| null>(null);\n\n const submitChannel = () => {\n if (!value) {\n return;\n }\n\n if (localError) {\n setLocalError(null);\n }\n\n const alreadyConnected = connectedChannels.find(\n (channel) => channel.channel_id === value,\n );\n\n if (alreadyConnected) {\n setValue(\"\");\n return setLocalError(t(\"slackChannelAlreadyConnected\") \|\| \"\");\n }\n\n const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n updateConnectedChannels(channelsToSendToKnock);\n setValue(\"\");\n };\n\n return (\n <div className=\"rsk-connect-channel\">\n <input\n className={`rsk-connect-channel__input ${(inErrorState \|\| !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n tabIndex={-1}\n id=\"slack-channel-search\"\n type=\"text\"\n placeholder={\n localError \|\| connectedChannelsError \|\| t(\"slackChannelId\")\n }\n onChange={(e) => setValue(e.target.value)}\n value={value \|\| \"\"}\n />\n <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n {connectedChannelsUpdating ? (\n <Spinner size=\"15px\" thickness={3} />\n ) : (\n <SlackIcon height=\"16px\" width=\"16px\" />\n )}\n {t(\"slackConnectChannel\")}\n </button>\n <ConnectionErrorInfoBoxes />\n </div>\n );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","find","channel","channel_id","channelsToSendToKnock","React","e","target","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":"maAoBMA,EAAqEA,CAAC,CAC1EC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CACb,EAEA,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAW,+BAA+BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAmC,GACxH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAA,CAAK,EAErCH,UAAA,cAACI,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,MAAA,CAChC,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}

package/dist/esm/index.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ import { ButtonGroup as k } from "./modules/core/components/Button/ButtonGroup.m
 import { BellIcon as h } from "./modules/core/components/Icons/Bell.mjs";
 import { CheckmarkCircle as T } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
 import { ChevronDown as v } from "./modules/core/components/Icons/ChevronDown.mjs";
-import { CloseCircle as P } from "./modules/core/components/Icons/CloseCircle.mjs";
+import { CloseCircle as A } from "./modules/core/components/Icons/CloseCircle.mjs";
 import { Spinner as F } from "./modules/core/components/Spinner/Spinner.mjs";
 import { default as b } from "./modules/core/hooks/useOnBottomScroll.mjs";
 import { EmptyFeed as g } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
@@ -21,7 +21,7 @@ import { UnseenBadge as X } from "./modules/feed/components/UnseenBadge/UnseenBa
 import { Banner as Z, BannerView as _ } from "./modules/guide/components/Banner/Banner.mjs";
 import { Card as ee, CardView as oe } from "./modules/guide/components/Card/Card.mjs";
 import "@knocklabs/client";
-import { FilterStatus as re, I18nContext as ne, KnockFeedProvider as ie, KnockGuideContext as ae, KnockI18nProvider as se, KnockMsTeamsProvider as me, KnockProvider as ue, KnockSlackProvider as pe, feedProviderKey as ce, formatBadgeCount as fe, formatTimestamp as le, getBadgeAriaLabel as de, locales as xe, msTeamsProviderKey as Ce, renderNodeOrFallback as ke, slackProviderKey as Se, toSentenceCase as he, useAuthenticatedKnockClient as Ke, useConnectedMsTeamsChannels as Te, useConnectedSlackChannels as Me, useCreateNotificationStore as ve, useFeedSettings as Be, useGuide as Pe, useGuideContext as Ae, useGuides as Fe, useKnockClient as Ne, useKnockFeed as be, useKnockMsTeamsClient as Ge, useKnockSlackClient as ge, useMsTeamsAuth as we, useMsTeamsChannels as ye, useMsTeamsConnectionStatus as Ie, useMsTeamsTeams as Oe, useNotificationStore as Ve, useNotifications as De, usePreferences as Ee, useSlackAuth as He, useSlackChannels as Le, useSlackConnectionStatus as Re, useStableOptions as Ue, useTranslations as je } from "@knocklabs/react-core";
+import { FilterStatus as re, I18nContext as ne, KnockFeedProvider as ae, KnockGuideContext as ie, KnockI18nProvider as se, KnockMsTeamsProvider as me, KnockProvider as ue, KnockSlackProvider as ce, feedProviderKey as pe, formatBadgeCount as fe, formatTimestamp as le, getBadgeAriaLabel as de, locales as xe, msTeamsProviderKey as Ce, renderNodeOrFallback as ke, slackProviderKey as Se, toSentenceCase as he, useAuthenticatedKnockClient as Ke, useConnectedMsTeamsChannels as Te, useConnectedSlackChannels as Me, useCreateNotificationStore as ve, useFeedSettings as Be, useGuide as Ae, useGuideContext as Pe, useGuides as Fe, useKnockAuthState as Ne, useKnockClient as be, useKnockFeed as Ge, useKnockMsTeamsClient as ge, useKnockSlackClient as we, useMsTeamsAuth as ye, useMsTeamsChannels as Ie, useMsTeamsConnectionStatus as Oe, useMsTeamsTeams as Ve, useNotificationStore as De, useNotifications as Ee, usePreferences as He, useSlackAuth as Le, useSlackChannels as Re, useSlackConnectionStatus as Ue, useStableOptions as je, useTranslations as qe } from "@knocklabs/react-core";
 import "@telegraph/button";
 import "@telegraph/icon";
 import "@telegraph/layout";
@@ -33,14 +33,14 @@ import "react";
 /* empty css                                             */
 import "@telegraph/tag";
 import "@telegraph/toggle";
-import { Modal as ze, ModalView as Je } from "./modules/guide/components/Modal/Modal.mjs";
-import { KnockGuideProvider as We } from "./modules/guide/providers/KnockGuideProvider.mjs";
-import { MsTeamsAuthButton as Ye } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
-import { MsTeamsAuthContainer as _e } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
-import { default as eo } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
-import { SlackAuthButton as to } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
-import { SlackAuthContainer as no } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
-import { SlackChannelCombobox as ao } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
+import { Modal as Je, ModalView as Qe } from "./modules/guide/components/Modal/Modal.mjs";
+import { KnockGuideProvider as Xe } from "./modules/guide/providers/KnockGuideProvider.mjs";
+import { MsTeamsAuthButton as Ze } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
+import { MsTeamsAuthContainer as $e } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
+import { default as oo } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
+import { SlackAuthButton as ro } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
+import { SlackAuthContainer as ao } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
+import { SlackChannelCombobox as so } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
 export {
   O as Avatar,
   Z as Banner,
@@ -52,35 +52,35 @@ export {
   oe as CardView,
   T as CheckmarkCircle,
   v as ChevronDown,
-  P as CloseCircle,
+  A as CloseCircle,
   g as EmptyFeed,
   re as FilterStatus,
   ne as I18nContext,
-  ie as KnockFeedProvider,
-  ae as KnockGuideContext,
-  We as KnockGuideProvider,
+  ae as KnockFeedProvider,
+  ie as KnockGuideContext,
+  Xe as KnockGuideProvider,
   se as KnockI18nProvider,
   me as KnockMsTeamsProvider,
   ue as KnockProvider,
-  pe as KnockSlackProvider,
+  ce as KnockSlackProvider,
   R as MarkAsRead,
-  ze as Modal,
-  Je as ModalView,
-  Ye as MsTeamsAuthButton,
-  _e as MsTeamsAuthContainer,
-  eo as MsTeamsChannelCombobox,
+  Je as Modal,
+  Qe as ModalView,
+  Ze as MsTeamsAuthButton,
+  $e as MsTeamsAuthContainer,
+  oo as MsTeamsChannelCombobox,
   y as NotificationCell,
   D as NotificationFeed,
   j as NotificationFeedContainer,
   H as NotificationFeedHeader,
   z as NotificationFeedPopover,
   Q as NotificationIconButton,
-  to as SlackAuthButton,
-  no as SlackAuthContainer,
-  ao as SlackChannelCombobox,
+  ro as SlackAuthButton,
+  ao as SlackAuthContainer,
+  so as SlackChannelCombobox,
   F as Spinner,
   X as UnseenBadge,
-  ce as feedProviderKey,
+  pe as feedProviderKey,
   fe as formatBadgeCount,
   le as formatTimestamp,
   de as getBadgeAriaLabel,
@@ -94,25 +94,26 @@ export {
   Me as useConnectedSlackChannels,
   ve as useCreateNotificationStore,
   Be as useFeedSettings,
-  Pe as useGuide,
-  Ae as useGuideContext,
+  Ae as useGuide,
+  Pe as useGuideContext,
   Fe as useGuides,
-  Ne as useKnockClient,
-  be as useKnockFeed,
-  Ge as useKnockMsTeamsClient,
-  ge as useKnockSlackClient,
-  we as useMsTeamsAuth,
-  ye as useMsTeamsChannels,
-  Ie as useMsTeamsConnectionStatus,
-  Oe as useMsTeamsTeams,
-  Ve as useNotificationStore,
-  De as useNotifications,
+  Ne as useKnockAuthState,
+  be as useKnockClient,
+  Ge as useKnockFeed,
+  ge as useKnockMsTeamsClient,
+  we as useKnockSlackClient,
+  ye as useMsTeamsAuth,
+  Ie as useMsTeamsChannels,
+  Oe as useMsTeamsConnectionStatus,
+  Ve as useMsTeamsTeams,
+  De as useNotificationStore,
+  Ee as useNotifications,
   b as useOnBottomScroll,
-  Ee as usePreferences,
-  He as useSlackAuth,
-  Le as useSlackChannels,
-  Re as useSlackConnectionStatus,
-  Ue as useStableOptions,
-  je as useTranslations
+  He as usePreferences,
+  Le as useSlackAuth,
+  Re as useSlackChannels,
+  Ue as useSlackConnectionStatus,
+  je as useStableOptions,
+  qe as useTranslations
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/modules/core/cx/index.mjs ADDED Viewed

@@ -0,0 +1,5 @@
+const n = (...o) => o.filter((e) => !!e).join(" ");
+export {
+  n as cx
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/modules/core/cx/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","sources":["../../../../../src/modules/core/cx/index.ts"],"sourcesContent":["type ClassValue = string | false | null | undefined;\n\n/**\n * Joins truthy class names into a space-separated string, e.g.\n * `cx(\"knock-guide-banner\", className)`. Falsy values are dropped, so\n * conditional modifiers work too: `cx(\"btn\", isActive && \"btn--active\")`.\n */\nexport const cx = (...classes: ClassValue[]): string =>\n classes.filter((value): value is string => Boolean(value)).join(\" \");\n"],"names":["cx","classes","filter","value","Boolean","join"],"mappings":"AAOO,MAAMA,IAAKA,IAAIC,MACpBA,EAAQC,OAAO,CAACC,MAA2BC,EAAQD,CAAM,EAAEE,KAAK,GAAG;"}

package/dist/esm/modules/core/debounce/index.mjs ADDED Viewed

@@ -0,0 +1,15 @@
+const o = (u, n = 0) => {
+  let e = null;
+  const l = (...t) => {
+    e !== null && clearTimeout(e), e = setTimeout(() => {
+      e = null, u(...t);
+    }, n);
+  };
+  return l.cancel = () => {
+    e !== null && (clearTimeout(e), e = null);
+  }, l;
+};
+export {
+  o as debounce
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/modules/core/debounce/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","sources":["../../../../../src/modules/core/debounce/index.ts"],"sourcesContent":["type DebouncedFunction<TArgs extends unknown[]> = {\n (...args: TArgs): void;\n cancel: () => void;\n};\n\n/**\n * Minimal trailing-edge debounce, replacing `lodash.debounce` for our single\n * use case (no `leading`/`maxWait` options). Invokes `func` once `wait`\n * milliseconds have elapsed since the last call.\n */\nexport const debounce = <TArgs extends unknown[]>(\n func: (...args: TArgs) => void,\n wait = 0,\n): DebouncedFunction<TArgs> => {\n let timeout: ReturnType<typeof setTimeout> | null = null;\n\n const debounced = (...args: TArgs) => {\n if (timeout !== null) {\n clearTimeout(timeout);\n }\n timeout = setTimeout(() => {\n timeout = null;\n func(...args);\n }, wait);\n };\n\n debounced.cancel = () => {\n if (timeout !== null) {\n clearTimeout(timeout);\n timeout = null;\n }\n };\n\n return debounced;\n};\n"],"names":["debounce","func","wait","timeout","debounced","args","clearTimeout","setTimeout","cancel"],"mappings":"AAUO,MAAMA,IAAW,CACtBC,GACAC,IAAO,MACsB;AAC7B,MAAIC,IAAgD;AAE9CC,QAAAA,IAAYA,IAAIC,MAAgB;AACpC,IAAIF,MAAY,QACdG,aAAaH,CAAO,GAEtBA,IAAUI,WAAW,MAAM;AACf,MAAAJ,IAAA,MACVF,EAAK,GAAGI,CAAI;AAAA,OACXH,CAAI;AAAA,EACT;AAEAE,SAAAA,EAAUI,SAAS,MAAM;AACvB,IAAIL,MAAY,SACdG,aAAaH,CAAO,GACVA,IAAA;AAAA,EAEd,GAEOC;AACT;"}

package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs CHANGED Viewed

@@ -1,15 +1,15 @@
-import i from "lodash.debounce";
-import { useMemo as f, useCallback as u, useEffect as a } from "react";
+import { useMemo as i, useCallback as f, useEffect as u } from "react";
+import { debounce as a } from "../debounce/index.mjs";
 const d = () => {
 };
 function k(t) {
-  const r = t.callback ?? d, e = t.ref, l = t.offset ?? 0, n = f(() => i(r, 200), [r]), c = u(() => {
+  const r = t.callback ?? d, e = t.ref, l = t.offset ?? 0, n = i(() => a(r, 200), [r]), c = f(() => {
     if (e.current) {
       const o = e.current, s = Math.round(o.scrollTop + o.clientHeight);
       Math.round(o.scrollHeight - l) <= s && n();
     }
   }, [n]);
-  a(() => {
+  u(() => {
     let o;
     return e.current && (o = e.current, e.current.addEventListener("scroll", c)), () => {
       o && o.removeEventListener("scroll", c);

package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import ~~debounce from \"lodash.debounce\";\nimport~~ { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement \| null>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debouncedCallback]);\n\n useEffect(() => {\n let element: HTMLElement \| undefined;\n if (ref.current) {\n element = ref.current;\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","element","addEventListener","removeEventListener"],"mappings":";;~~AASA~~,MAAMA,IAAOA,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnDC,QAAAA,IAAWD,EAAQC,YAAYH,GAC/BI,IAAMF,EAAQE,KACdC,IAASH,EAAQG,UAAU,GAE3BC,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAIO,SAAS;AACf,YAAMC,IAAaR,EAAIO,SACjBE,IAAgCC,KAAKC,MACzCH,EAAWI,YAAYJ,EAAWK,YACpC;AAGA,MAFuBH,KAAKC,MAAMH,EAAWM,eAAeb,CAAM,KAE5CQ,KACFP,EAAA;AAAA,IACpB;AAAA,EACF,GAGC,CAACA,CAAiB,CAAC;AAEtBa,EAAAA,EAAU,MAAM;AACVC,QAAAA;AACJ,WAAIhB,EAAIO,YACNS,IAAUhB,EAAIO,SACVA,EAAAA,QAAQU,iBAAiB,UAAUZ,CAAc,IAGhD,MAAM;AACX,MAAIW,KACME,EAAAA,oBAAoB,UAAUb,CAAc;AAAA,IAExD;AAAA,EAAA,GAGC,CAACA,CAAc,CAAC;AACrB;"}
1	+ {"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\nimport { debounce } from \"../debounce\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement \| null>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debouncedCallback]);\n\n useEffect(() => {\n let element: HTMLElement \| undefined;\n if (ref.current) {\n element = ref.current;\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","element","addEventListener","removeEventListener"],"mappings":";;AAUA,MAAMA,IAAOA,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnDC,QAAAA,IAAWD,EAAQC,YAAYH,GAC/BI,IAAMF,EAAQE,KACdC,IAASH,EAAQG,UAAU,GAE3BC,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAIO,SAAS;AACf,YAAMC,IAAaR,EAAIO,SACjBE,IAAgCC,KAAKC,MACzCH,EAAWI,YAAYJ,EAAWK,YACpC;AAGA,MAFuBH,KAAKC,MAAMH,EAAWM,eAAeb,CAAM,KAE5CQ,KACFP,EAAA;AAAA,IACpB;AAAA,EACF,GAGC,CAACA,CAAiB,CAAC;AAEtBa,EAAAA,EAAU,MAAM;AACVC,QAAAA;AACJ,WAAIhB,EAAIO,YACNS,IAAUhB,EAAIO,SACVA,EAAAA,QAAQU,iBAAiB,UAAUZ,CAAc,IAGhD,MAAM;AACX,MAAIW,KACME,EAAAA,oBAAoB,UAAUb,CAAc;AAAA,IAExD;AAAA,EAAA,GAGC,CAACA,CAAc,CAAC;AACrB;"}

package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs CHANGED Viewed

@@ -2,14 +2,13 @@ import { useKnockFeed as w, useTranslations as T, renderNodeOrFallback as u, for
 import n, { useMemo as A } from "react";
 import { Button as B } from "../../../core/components/Button/Button.mjs";
 import { ButtonGroup as H } from "../../../core/components/Button/ButtonGroup.mjs";
-import "lodash.debounce";
 import { ArchiveButton as M } from "./ArchiveButton.mjs";
 import { Avatar as x } from "./Avatar.mjs";
 /* empty css            */
 function p(e) {
   e && e !== "" && setTimeout(() => window.location.assign(e), 200);
 }
-const L = n.forwardRef(({
+const G = n.forwardRef(({
   item: e,
   onItemClick: l,
   onButtonClick: i,
@@ -62,6 +61,6 @@ const L = n.forwardRef(({
   );
 });
 export {
-  L as NotificationCell
+  G as NotificationCell
 };
 //# sourceMappingURL=NotificationCell.mjs.map

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

	@@ -1 +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 // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\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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"}
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 // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\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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"}

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs CHANGED Viewed

@@ -1,68 +1,69 @@
-import { isRequestInFlight as y, NetworkStatus as f } from "@knocklabs/client";
-import { FilterStatus as C, useKnockFeed as I, useFeedSettings as B, useTranslations as q } from "@knocklabs/react-core";
-import e, { useState as x, useRef as K, useEffect as p, useCallback as H } from "react";
-import { Spinner as M } from "../../../core/components/Spinner/Spinner.mjs";
-import P from "../../../core/hooks/useOnBottomScroll.mjs";
-import { EmptyFeed as z } from "../EmptyFeed/EmptyFeed.mjs";
-import { NotificationCell as A } from "../NotificationCell/NotificationCell.mjs";
+import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
+import { FilterStatus as I, useKnockFeed as B, useFeedSettings as q, useTranslations as x } from "@knocklabs/react-core";
+import e, { useState as K, useRef as H, useEffect as _, useCallback as M } from "react";
+import { Spinner as P } from "../../../core/components/Spinner/Spinner.mjs";
+import z from "../../../core/hooks/useOnBottomScroll.mjs";
+import { EmptyFeed as A } from "../EmptyFeed/EmptyFeed.mjs";
+import { NotificationCell as O } from "../NotificationCell/NotificationCell.mjs";
 /* empty css                              */
-import { NotificationFeedHeader as O } from "./NotificationFeedHeader.mjs";
+import { NotificationFeedHeader as T } from "./NotificationFeedHeader.mjs";
 /* empty css            */
-const T = (t) => /* @__PURE__ */ e.createElement(A, { key: t.item.id, ...t }), U = (t) => /* @__PURE__ */ e.createElement(O, { ...t }), $ = ({
+const U = (t) => /* @__PURE__ */ e.createElement(O, { key: t.item.id, ...t }), $ = (t) => /* @__PURE__ */ e.createElement(T, { ...t }), j = ({
   colorMode: t
-}) => /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__spinner-container" }, /* @__PURE__ */ e.createElement(M, { thickness: 3, size: "16px", color: t === "dark" ? "rgba(255, 255, 255, 0.65)" : void 0 })), j = "https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed", ee = ({
-  EmptyComponent: t = /* @__PURE__ */ e.createElement(z, null),
-  renderItem: _ = T,
-  onNotificationClick: g,
-  onNotificationButtonClick: E,
-  onMarkAllAsReadClick: b,
-  initialFilterStatus: r = C.All,
-  header: N,
-  renderHeader: h = U,
-  renderLoading: m = $
+}) => /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__spinner-container" }, /* @__PURE__ */ e.createElement(P, { thickness: 3, size: "16px", color: t === "dark" ? "rgba(255, 255, 255, 0.65)" : void 0 })), D = "https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed", te = ({
+  EmptyComponent: t = /* @__PURE__ */ e.createElement(A, null),
+  renderItem: g = U,
+  onNotificationClick: E,
+  onNotificationButtonClick: b,
+  onMarkAllAsReadClick: N,
+  initialFilterStatus: r = I.All,
+  header: h,
+  renderHeader: S = $,
+  renderLoading: m = j
 }) => {
-  const [a, l] = x(r), {
+  var p;
+  const [a, l] = K(r), {
     feedClient: n,
-    useFeedStore: S,
+    useFeedStore: F,
     colorMode: c
-  } = I(), {
+  } = B(), {
     settings: i
-  } = B(n), {
-    t: F
-  } = q(), {
+  } = q(n), {
+    t: R
+  } = x(), {
     pageInfo: d,
     items: u,
     networkStatus: o
-  } = S(), k = K(null);
-  p(() => {
+  } = F(), k = H(null);
+  _(() => {
     l(r);
-  }, [r]), p(() => {
+  }, [r]), _(() => {
     n.fetch({
       status: a
     });
   }, [n, a]);
-  const R = u.length === 0, s = y(o), v = H(() => {
+  const v = u.length === 0, s = C(o), w = M(() => {
     !s && d.after && n.fetchNextPage();
   }, [s, d, n]);
-  return P({
+  return z({
     ref: k,
-    callback: v,
+    callback: w,
     offset: 70
-  }), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${c}` }, N || h({
+  }), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${c}` }, h || S({
     setFilterStatus: l,
     filterStatus: a,
-    onMarkAllAsReadClick: b
+    onMarkAllAsReadClick: N
   }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__container", ref: k }, o === f.loading && m({
     colorMode: c
-  }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__feed-items-container" }, o !== f.loading && u.map((w) => _({
-    item: w,
-    onItemClick: g,
-    onButtonClick: E
+  }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__feed-items-container" }, o !== f.loading && u.map((y) => g({
+    item: y,
+    onItemClick: E,
+    onButtonClick: b
   }))), o === f.fetchMore && m({
     colorMode: c
-  }), !s && R && t), (i == null ? void 0 : i.features.branding_required) && /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__knock-branding" }, /* @__PURE__ */ e.createElement("a", { href: j, target: "_blank" }, F("poweredBy") || "Powered by Knock")));
+  }), !s && v && t), ((p = i == null ? void 0 : i.features) == null ? void 0 : p.branding_required) && /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__knock-branding" }, /* @__PURE__ */ e.createElement("a", { href: D, target: "_blank" }, R("poweredBy") || "Powered by Knock")));
 };
 export {
-  ee as NotificationFeed
+  te as NotificationFeed
 };
 //# sourceMappingURL=NotificationFeed.mjs.map

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport type RenderLoadingProps = {\n colorMode: ColorMode;\n};\n\nexport type RenderLoading = (props: RenderLoadingProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /*\n @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n renderLoading?: RenderLoading;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst defaultRenderLoading = ({ colorMode }: RenderLoadingProps) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n renderLoading = defaultRenderLoading,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header \|\|\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading &&\n renderLoading({ colorMode })}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore &&\n renderLoading({ colorMode })}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") \|\| \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","defaultRenderLoading","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","renderLoading","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":";;;;;;;;;;AAyDA,MAAMA,IAAoBA,CAACC,MACxBC,gBAAAA,EAAA,cAAAC,GAAA,EAAiB,KAAKF,EAAMG,KAAKC,IAAI,GAAIJ,EAC3C,CAAA,GAEKK,IAAsBA,CAACL,MAC1BC,gBAAAA,EAAA,cAAAK,GAAA,EAA2BN,GAAAA,GAC7B,GAEKO,IAAuBA,CAAC;AAAA,EAAEC,WAAAA;AAA8B,MAC3DP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,2CAAA,mCACZQ,GACC,EAAA,WAAW,GACX,MAAK,QACL,OAAOD,MAAc,SAAS,8BAA8BE,QAAU,CAE1E,GAGIC,IACJ,sGAEWC,KAAoDA,CAAC;AAAA,EAChEC,gBAAAA,oCAAkBC,GAAY,IAAA;AAAA,EAC9BC,YAAAA,IAAahB;AAAAA,EACbiB,qBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,qBAAAA,IAAsBC,EAAaC;AAAAA,EACnCC,QAAAA;AAAAA,EACAC,cAAAA,IAAelB;AAAAA,EACfmB,eAAAA,IAAgBjB;AAClB,MAAM;AACJ,QAAM,CAACkB,GAAQC,CAAS,IAAIC,EAASR,CAAmB,GAClD;AAAA,IAAES,YAAAA;AAAAA,IAAYC,cAAAA;AAAAA,IAAcrB,WAAAA;AAAAA,MAAcsB,EAAa,GACvD;AAAA,IAAEC,UAAAA;AAAAA,EAAAA,IAAaC,EAAgBJ,CAAU,GACzC;AAAA,IAAEK,GAAAA;AAAAA,MAAMC,EAAgB,GAExB;AAAA,IAAEC,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAOC,eAAAA;AAAAA,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhDC,EAAAA,EAAU,MAAM;AACdd,IAAAA,EAAUP,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBqB,EAAU,MAAM;AAEdZ,IAAAA,EAAWa,MAAM;AAAA,MAAEhB,QAAAA;AAAAA,IAAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjBiB,QAAAA,IAAUN,EAAMO,WAAW,GAC3BC,IAAkBC,EAAkBR,CAAa,GAGjDS,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBT,EAASa,SAC/BpB,EAAWqB,cAAc;AAAA,EAE1B,GAAA,CAACL,GAAiBT,GAAUP,CAAU,CAAC;AAIxB,SAAAsB,EAAA;AAAA,IAChBC,KAAKb;AAAAA,IACLc,UAAUN;AAAAA,IACVO,QAAQ;AAAA,EAAA,CACT,mCAGE,OACC,EAAA,WAAW,gDAAgD7C,CAAS,MAEnEc,KACCC,EAAa;AAAA,IACX+B,iBAAiB5B;AAAAA,IACjB6B,cAAc9B;AAAAA,IACdP,sBAAAA;AAAAA,EACD,CAAA,GAEHjB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,oCAAmC,KAAKqC,EACpDD,GAAAA,MAAkBmB,EAAcC,WAC/BjC,EAAc;AAAA,IAAEhB,WAAAA;AAAAA,EAAAA,CAAW,GAE5BP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8CAAA,GACZoC,MAAkBmB,EAAcC,WAC/BrB,EAAMsB,IAAI,CAACvD,MACTY,EAAW;AAAA,IACTZ,MAAAA;AAAAA,IACAwD,aAAa3C;AAAAA,IACb4C,eAAe3C;AAAAA,EAChB,CAAA,CACH,CACJ,GAECoB,MAAkBmB,EAAcK,aAC/BrC,EAAc;AAAA,IAAEhB,WAAAA;AAAAA,EAAW,CAAA,GAE5B,CAACoC,KAAmBF,KAAW7B,CAClC,~~IAECkB~~,KAAAA,gBAAAA,EAAU+B,~~SAASC~~,~~sBACjB9D~~,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,2CACbA,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAMU,GAAmB,QAAO,SAChCsB,GAAAA,EAAE,WAAW,KAAK,kBACrB,CACF,CAEJ;AAEJ;"}
1	+ {"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport type RenderLoadingProps = {\n colorMode: ColorMode;\n};\n\nexport type RenderLoading = (props: RenderLoadingProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /*\n @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n renderLoading?: RenderLoading;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst defaultRenderLoading = ({ colorMode }: RenderLoadingProps) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n renderLoading = defaultRenderLoading,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header \|\|\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading &&\n renderLoading({ colorMode })}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore &&\n renderLoading({ colorMode })}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features?.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") \|\| \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","defaultRenderLoading","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","renderLoading","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":";;;;;;;;;;AAyDA,MAAMA,IAAoBA,CAACC,MACxBC,gBAAAA,EAAA,cAAAC,GAAA,EAAiB,KAAKF,EAAMG,KAAKC,IAAI,GAAIJ,EAC3C,CAAA,GAEKK,IAAsBA,CAACL,MAC1BC,gBAAAA,EAAA,cAAAK,GAAA,EAA2BN,GAAAA,GAC7B,GAEKO,IAAuBA,CAAC;AAAA,EAAEC,WAAAA;AAA8B,MAC3DP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,2CAAA,mCACZQ,GACC,EAAA,WAAW,GACX,MAAK,QACL,OAAOD,MAAc,SAAS,8BAA8BE,QAAU,CAE1E,GAGIC,IACJ,sGAEWC,KAAoDA,CAAC;AAAA,EAChEC,gBAAAA,oCAAkBC,GAAY,IAAA;AAAA,EAC9BC,YAAAA,IAAahB;AAAAA,EACbiB,qBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,qBAAAA,IAAsBC,EAAaC;AAAAA,EACnCC,QAAAA;AAAAA,EACAC,cAAAA,IAAelB;AAAAA,EACfmB,eAAAA,IAAgBjB;AAClB,MAAM;;AACJ,QAAM,CAACkB,GAAQC,CAAS,IAAIC,EAASR,CAAmB,GAClD;AAAA,IAAES,YAAAA;AAAAA,IAAYC,cAAAA;AAAAA,IAAcrB,WAAAA;AAAAA,MAAcsB,EAAa,GACvD;AAAA,IAAEC,UAAAA;AAAAA,EAAAA,IAAaC,EAAgBJ,CAAU,GACzC;AAAA,IAAEK,GAAAA;AAAAA,MAAMC,EAAgB,GAExB;AAAA,IAAEC,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAOC,eAAAA;AAAAA,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhDC,EAAAA,EAAU,MAAM;AACdd,IAAAA,EAAUP,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBqB,EAAU,MAAM;AAEdZ,IAAAA,EAAWa,MAAM;AAAA,MAAEhB,QAAAA;AAAAA,IAAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjBiB,QAAAA,IAAUN,EAAMO,WAAW,GAC3BC,IAAkBC,EAAkBR,CAAa,GAGjDS,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBT,EAASa,SAC/BpB,EAAWqB,cAAc;AAAA,EAE1B,GAAA,CAACL,GAAiBT,GAAUP,CAAU,CAAC;AAIxB,SAAAsB,EAAA;AAAA,IAChBC,KAAKb;AAAAA,IACLc,UAAUN;AAAAA,IACVO,QAAQ;AAAA,EAAA,CACT,mCAGE,OACC,EAAA,WAAW,gDAAgD7C,CAAS,MAEnEc,KACCC,EAAa;AAAA,IACX+B,iBAAiB5B;AAAAA,IACjB6B,cAAc9B;AAAAA,IACdP,sBAAAA;AAAAA,EACD,CAAA,GAEHjB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,oCAAmC,KAAKqC,EACpDD,GAAAA,MAAkBmB,EAAcC,WAC/BjC,EAAc;AAAA,IAAEhB,WAAAA;AAAAA,EAAAA,CAAW,GAE5BP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8CAAA,GACZoC,MAAkBmB,EAAcC,WAC/BrB,EAAMsB,IAAI,CAACvD,MACTY,EAAW;AAAA,IACTZ,MAAAA;AAAAA,IACAwD,aAAa3C;AAAAA,IACb4C,eAAe3C;AAAAA,EAChB,CAAA,CACH,CACJ,GAECoB,MAAkBmB,EAAcK,aAC/BrC,EAAc;AAAA,IAAEhB,WAAAA;AAAAA,EAAW,CAAA,GAE5B,CAACoC,KAAmBF,KAAW7B,CAClC,KAECkB,IAAAA,KAAAA,gBAAAA,EAAU+B,aAAV/B,gBAAAA,EAAoBgC,sBAClB9D,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,2CACbA,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAMU,GAAmB,QAAO,SAChCsB,GAAAA,EAAE,WAAW,KAAK,kBACrB,CACF,CAEJ;AAEJ;"}

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

@@ -1,6 +1,6 @@
 import { useGuide as g } from "@knocklabs/react-core";
-import i from "clsx";
 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 = ({