@knocklabs/react 0.12.1 → 0.13.1

package/dist/cjs/modules/core/components/Spinner/Spinner.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=c(l);function s(e){return e==="fast"?600:e==="slow"?900:750}const d=({color:e="rgba(0,0,0,0.4)",speed:r="medium",gap:a=4,thickness:n=4,size:i="1em",...o})=>t.default.createElement("svg",{height:i,width:i,...o,style:{animationDuration:`${s(r)}ms`},className:"__react-svg-spinner_circle",role:"img","aria-labelledby":"title desc",viewBox:"0 0 32 32"},t.default.createElement("title",{id:"title"},"Circle loading spinner"),t.default.createElement("desc",{id:"desc"},'Image of a partial circle indicating "loading."'),t.default.createElement("style",{dangerouslySetInnerHTML:{__html:`
+"use strict";let e=require("react/jsx-runtime");function t(e){return e===`fast`?600:e===`slow`?900:750}var n=({color:n=`rgba(0,0,0,0.4)`,speed:r=`medium`,gap:i=4,thickness:a=4,size:o=`1em`,...s})=>(0,e.jsxs)(`svg`,{height:o,width:o,...s,style:{animationDuration:`${t(r)}ms`},className:`__react-svg-spinner_circle`,role:`img`,"aria-labelledby":`title desc`,viewBox:`0 0 32 32`,children:[(0,e.jsx)(`title`,{id:`title`,children:`Circle loading spinner`}),(0,e.jsx)(`desc`,{id:`desc`,children:`Image of a partial circle indicating "loading."`}),(0,e.jsx)(`style`,{dangerouslySetInnerHTML:{__html:`
       .__react-svg-spinner_circle{
           transition-property: transform;
           animation-name: __react-svg-spinner_infinite-spin;
@@ -9,5 +9,5 @@
           from {transform: rotate(0deg)}
           to {transform: rotate(360deg)}
       }
-    `}}),t.default.createElement("circle",{role:"presentation",cx:16,cy:16,r:14-n/2,stroke:e,fill:"none",strokeWidth:n,strokeDasharray:Math.PI*2*(11-a),strokeLinecap:"round"}));exports.Spinner=d;
-//# sourceMappingURL=Spinner.js.map
+    `}}),(0,e.jsx)(`circle`,{role:`presentation`,cx:16,cy:16,r:14-a/2,stroke:n,fill:`none`,strokeWidth:a,strokeDasharray:Math.PI*2*(11-i),strokeLinecap:`round`})]});exports.Spinner=n;
+//# sourceMappingURL=Spinner.js.map

package/dist/cjs/modules/core/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n  if (speed === \"fast\") return 600;\n  if (speed === \"slow\") return 900;\n  return 750;\n}\n\nexport interface SpinnerProps {\n  color?: string;\n  speed?: Speed;\n  gap?: number;\n  thickness?: number;\n  size?: string;\n}\n\nexport const Spinner: FunctionComponent<SpinnerProps> = ({\n  color = \"rgba(0,0,0,0.4)\",\n  speed = \"medium\",\n  gap = 4,\n  thickness = 4,\n  size = \"1em\",\n  ...props\n}) => (\n  <svg\n    height={size}\n    width={size}\n    {...props}\n    style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n    className=\"__react-svg-spinner_circle\"\n    role=\"img\"\n    aria-labelledby=\"title desc\"\n    viewBox=\"0 0 32 32\"\n  >\n    <title id=\"title\">Circle loading spinner</title>\n    <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n      .__react-svg-spinner_circle{\n          transition-property: transform;\n          animation-name: __react-svg-spinner_infinite-spin;\n          animation-iteration-count: infinite;\n          animation-timing-function: linear;\n      }\n      @keyframes __react-svg-spinner_infinite-spin {\n          from {transform: rotate(0deg)}\n          to {transform: rotate(360deg)}\n      }\n    `,\n      }}\n    />\n    <circle\n      role=\"presentation\"\n      cx={16}\n      cy={16}\n      r={14 - thickness / 2}\n      stroke={color}\n      fill=\"none\"\n      strokeWidth={thickness}\n      strokeDasharray={Math.PI * 2 * (11 - gap)}\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","React","animationDuration","__html","Math","PI"],"mappings":"wKAIA,SAASA,EAAYC,EAAc,CAC7BA,OAAAA,IAAU,OAAe,IACzBA,IAAU,OAAe,IACtB,GACT,CAUO,MAAMC,EAA2CA,CAAC,CACvDC,MAAAA,EAAQ,kBACRF,MAAAA,EAAQ,SACRG,IAAAA,EAAM,EACNC,UAAAA,EAAY,EACZC,KAAAA,EAAO,MACP,GAAGC,CACL,IACEC,UAAA,cAAC,OACC,OAAQF,EACR,MAAOA,EACP,GAAIC,EACJ,MAAO,CAAEE,kBAAmB,GAAGT,EAAYC,CAAK,CAAC,IAAK,EACtD,UAAU,6BACV,KAAK,MACL,kBAAgB,aAChB,QAAQ,WAER,EAAAO,EAAA,QAAA,cAAC,QAAM,CAAA,GAAG,SAAQ,wBAAsB,0BACvC,OAAK,CAAA,GAAG,QAAO,iDAA+C,EAC9DA,EAAA,QAAA,cAAA,QAAA,CACC,wBAAyB,CACvBE,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYV,CAAE,CAAA,EAEHF,EAAA,QAAA,cAAA,SAAA,CACC,KAAK,eACL,GAAI,GACJ,GAAI,GACJ,EAAG,GAAKH,EAAY,EACpB,OAAQF,EACR,KAAK,OACL,YAAaE,EACb,gBAAiBM,KAAKC,GAAK,GAAK,GAAKR,GACrC,cAAc,OAAA,CAAO,CAEzB"}
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n  if (speed === \"fast\") return 600;\n  if (speed === \"slow\") return 900;\n  return 750;\n}\n\nexport interface SpinnerProps {\n  color?: string;\n  speed?: Speed;\n  gap?: number;\n  thickness?: number;\n  size?: string;\n}\n\nexport const Spinner: FunctionComponent<SpinnerProps> = ({\n  color = \"rgba(0,0,0,0.4)\",\n  speed = \"medium\",\n  gap = 4,\n  thickness = 4,\n  size = \"1em\",\n  ...props\n}) => (\n  <svg\n    height={size}\n    width={size}\n    {...props}\n    style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n    className=\"__react-svg-spinner_circle\"\n    role=\"img\"\n    aria-labelledby=\"title desc\"\n    viewBox=\"0 0 32 32\"\n  >\n    <title id=\"title\">Circle loading spinner</title>\n    <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n      .__react-svg-spinner_circle{\n          transition-property: transform;\n          animation-name: __react-svg-spinner_infinite-spin;\n          animation-iteration-count: infinite;\n          animation-timing-function: linear;\n      }\n      @keyframes __react-svg-spinner_infinite-spin {\n          from {transform: rotate(0deg)}\n          to {transform: rotate(360deg)}\n      }\n    `,\n      }}\n    />\n    <circle\n      role=\"presentation\"\n      cx={16}\n      cy={16}\n      r={14 - thickness / 2}\n      stroke={color}\n      fill=\"none\"\n      strokeWidth={thickness}\n      strokeDasharray={Math.PI * 2 * (11 - gap)}\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"mappings":"gDAIA,SAAS,EAAY,EAAc,CAGjC,OAFI,IAAU,OAAe,IACzB,IAAU,OAAe,IACtB,GACT,CAUA,IAAa,GAA4C,CACvD,QAAQ,kBACR,QAAQ,SACR,MAAM,EACN,YAAY,EACZ,OAAO,MACP,GAAG,MAEH,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,OAAQ,EACR,MAAO,EACP,GAAI,EACJ,MAAO,CAAE,kBAAmB,GAAG,EAAY,CAAK,EAAE,GAAI,EACtD,UAAU,6BACV,KAAK,MACL,kBAAgB,aAChB,QAAQ,qBARV,EAUE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,GAAG,iBAAQ,wBAA6B,CAAA,GAC/C,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAG,gBAAO,iDAAqD,CAAA,GACrE,EAAA,EAAA,IAAA,CAAC,QAAD,CACE,wBAAyB,CACvB,OAAQ;;;;;;;;;;;KAYV,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,eACL,GAAI,GACJ,GAAI,GACJ,EAAG,GAAK,EAAY,EACpB,OAAQ,EACR,KAAK,OACL,YAAa,EACb,gBAAiB,KAAK,GAAK,GAAK,GAAK,GACrC,cAAc,OACf,CAAA,CACE"}

package/dist/cjs/modules/core/components/Spinner/index.js

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

package/dist/cjs/modules/core/cx/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=(...e)=>e.filter(o=>!!o).join(" ");exports.cx=t;
-//# sourceMappingURL=index.js.map
+"use strict";var e=(...e)=>e.filter(e=>!!e).join(` `);exports.cx=e;
+//# sourceMappingURL=index.js.map

package/dist/cjs/modules/core/cx/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":"gFAOO,MAAMA,EAAKA,IAAIC,IACpBA,EAAQC,OAAQC,GAA2BC,EAAQD,CAAM,EAAEE,KAAK,GAAG"}
+{"version":3,"file":"index.js","names":[],"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"],"mappings":"aAOA,IAAa,GAAM,GAAG,IACpB,EAAQ,OAAQ,GAA2B,EAAQ,CAAM,CAAC,CAAC,KAAK,GAAG"}

package/dist/cjs/modules/core/debounce/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=(t,u=0)=>{let e=null;const l=(...n)=>{e!==null&&clearTimeout(e),e=setTimeout(()=>{e=null,t(...n)},u)};return l.cancel=()=>{e!==null&&(clearTimeout(e),e=null)},l};exports.debounce=o;
-//# sourceMappingURL=index.js.map
+"use strict";var e=(e,t=0)=>{let n=null,r=(...r)=>{n!==null&&clearTimeout(n),n=setTimeout(()=>{n=null,e(...r)},t)};return r.cancel=()=>{n!==null&&(clearTimeout(n),n=null)},r};exports.debounce=e;
+//# sourceMappingURL=index.js.map

package/dist/cjs/modules/core/debounce/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":"gFAUO,MAAMA,EAAW,CACtBC,EACAC,EAAO,IACsB,CAC7B,IAAIC,EAAgD,KAE9CC,MAAAA,EAAYA,IAAIC,IAAgB,CAChCF,IAAY,MACdG,aAAaH,CAAO,EAEtBA,EAAUI,WAAW,IAAM,CACfJ,EAAA,KACVF,EAAK,GAAGI,CAAI,GACXH,CAAI,CACT,EAEAE,OAAAA,EAAUI,OAAS,IAAM,CACnBL,IAAY,OACdG,aAAaH,CAAO,EACVA,EAAA,KAEd,EAEOC,CACT"}
+{"version":3,"file":"index.js","names":[],"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"],"mappings":"aAUA,IAAa,GACX,EACA,EAAO,IACsB,CAC7B,IAAI,EAAgD,KAE9C,GAAa,GAAG,IAAgB,CAChC,IAAY,MACd,aAAa,CAAO,EAEtB,EAAU,eAAiB,CACzB,EAAU,KACV,EAAK,GAAG,CAAI,CACd,EAAG,CAAI,CACT,EASA,MAPA,GAAU,WAAe,CACnB,IAAY,OACd,aAAa,CAAO,EACpB,EAAU,KAEd,EAEO,CACT"}

package/dist/cjs/modules/core/hooks/index.js

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

package/dist/cjs/modules/core/hooks/useComponentVisible.js

@@ -1,2 +1,2 @@
-"use strict";const o=require("react");function i(e,t){return e?e===t||e.contains(t):!1}function d(e,t,s){const r=o.useRef(null),c=n=>{n.key==="Escape"&&t(n)},u=n=>{s.closeOnClickOutside&&!i(r.current,n.target)&&t(n)};return o.useEffect(()=>(e&&(document.addEventListener("keydown",c,!0),document.addEventListener("click",u,!0)),()=>{document.removeEventListener("keydown",c,!0),document.removeEventListener("click",u,!0)}),[e]),{ref:r}}module.exports=d;
-//# sourceMappingURL=useComponentVisible.js.map
+"use strict";let e=require("react");function t(e,t){return e?e===t||e.contains(t):!1}function n(n,r,i){let a=(0,e.useRef)(null),o=e=>{e.key===`Escape`&&r(e)},s=e=>{i.closeOnClickOutside&&!t(a.current,e.target)&&r(e)};return(0,e.useEffect)(()=>(n&&(document.addEventListener(`keydown`,o,!0),document.addEventListener(`click`,s,!0)),()=>{document.removeEventListener(`keydown`,o,!0),document.removeEventListener(`click`,s,!0)}),[n]),{ref:a}}exports.default=n;
+//# sourceMappingURL=useComponentVisible.js.map

package/dist/cjs/modules/core/hooks/useComponentVisible.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentVisible.js","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options,\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","useEffect","addEventListener","removeEventListener"],"mappings":"sCAEA,SAASA,EAASC,EAA4BC,EAAoB,CAC5D,OAACD,EACEA,IAAWC,GAASD,EAAOD,SAASE,CAAK,EAD5B,EAEtB,CAMwBC,SAAAA,EACtBC,EACAC,EACAC,EACA,CACMC,MAAAA,EAAMC,SAAuB,IAAI,EAEjCC,EAAiBC,GAAyB,CAC1CA,EAAMC,MAAQ,UAChBN,EAAQK,CAAK,CAEjB,EAEME,EAAsBF,GAAiB,CAEzCJ,EAAQO,qBACR,CAACb,EAASO,EAAIO,QAASJ,EAAMK,MAAqB,GAElDV,EAAQK,CAAK,CAEjB,EAEAM,OAAAA,EAAAA,UAAU,KACJZ,IACOa,SAAAA,iBAAiB,UAAWR,EAAe,EAAI,EAC/CQ,SAAAA,iBAAiB,QAASL,EAAoB,EAAI,GAGtD,IAAM,CACFM,SAAAA,oBAAoB,UAAWT,EAAe,EAAI,EAClDS,SAAAA,oBAAoB,QAASN,EAAoB,EAAI,CAChE,GAGC,CAACR,CAAS,CAAC,EAEP,CAAEG,IAAAA,CAAI,CACf"}
+{"version":3,"file":"useComponentVisible.js","names":[],"sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options,\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"mappings":"oCAEA,SAAS,EAAS,EAA4B,EAAoB,CAEhE,OADK,EACE,IAAW,GAAS,EAAO,SAAS,CAAK,EAD5B,EAEtB,CAMA,SAAwB,EACtB,EACA,EACA,EACA,CACA,IAAM,GAAA,EAAA,EAAA,OAAA,CAA6B,IAAI,EAEjC,EAAiB,GAAyB,CAC1C,EAAM,MAAQ,UAChB,EAAQ,CAAK,CAEjB,EAEM,EAAsB,GAAiB,CAEzC,EAAQ,qBACR,CAAC,EAAS,EAAI,QAAS,EAAM,MAAqB,GAElD,EAAQ,CAAK,CAEjB,EAgBA,OAdA,EAAA,EAAA,UAAA,MACM,IACF,SAAS,iBAAiB,UAAW,EAAe,EAAI,EACxD,SAAS,iBAAiB,QAAS,EAAoB,EAAI,OAGhD,CACX,SAAS,oBAAoB,UAAW,EAAe,EAAI,EAC3D,SAAS,oBAAoB,QAAS,EAAoB,EAAI,CAChE,GAGC,CAAC,CAAS,CAAC,EAEP,CAAE,KAAI,CACf"}

package/dist/cjs/modules/core/hooks/useOnBottomScroll.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("react"),u=require("../debounce/index.js"),a=()=>{};function f(t){const r=t.callback??a,o=t.ref,s=t.offset??0,l=n.useMemo(()=>u.debounce(r,200),[r]),c=n.useCallback(()=>{if(o.current){const e=o.current,i=Math.round(e.scrollTop+e.clientHeight);Math.round(e.scrollHeight-s)<=i&&l()}},[l]);n.useEffect(()=>{let e;return o.current&&(e=o.current,o.current.addEventListener("scroll",c)),()=>{e&&e.removeEventListener("scroll",c)}},[c])}module.exports=f;
-//# sourceMappingURL=useOnBottomScroll.js.map
+"use strict";const e=require("../debounce/index.js");let t=require("react");var n=()=>{};function r(r){let i=r.callback??n,a=r.ref,o=r.offset??0,s=(0,t.useMemo)(()=>e.debounce(i,200),[i]),c=(0,t.useCallback)(()=>{if(a.current){let e=a.current,t=Math.round(e.scrollTop+e.clientHeight);Math.round(e.scrollHeight-o)<=t&&s()}},[s]);(0,t.useEffect)(()=>{let e;return a.current&&(e=a.current,a.current.addEventListener(`scroll`,c)),()=>{e&&e.removeEventListener(`scroll`,c)}},[c])}exports.default=r;
+//# sourceMappingURL=useOnBottomScroll.js.map

package/dist/cjs/modules/core/hooks/useOnBottomScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnBottomScroll.js","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":"wEAUMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,SAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,EAAA,CACpB,CACF,EAGC,CAACA,CAAiB,CAAC,EAEtBa,EAAAA,UAAU,IAAM,CACVC,IAAAA,EACJ,OAAIhB,EAAIO,UACNS,EAAUhB,EAAIO,QACVA,EAAAA,QAAQU,iBAAiB,SAAUZ,CAAc,GAGhD,IAAM,CACPW,GACME,EAAAA,oBAAoB,SAAUb,CAAc,CAExD,CAAA,EAGC,CAACA,CAAc,CAAC,CACrB"}
+{"version":3,"file":"useOnBottomScroll.js","names":[],"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"],"mappings":"4EAUA,IAAM,MAAa,CAAC,EAEpB,SAAS,EAAkB,EAAgC,CACzD,IAAM,EAAW,EAAQ,UAAY,EAC/B,EAAM,EAAQ,IACd,EAAS,EAAQ,QAAU,EAE3B,GAAA,EAAA,EAAA,QAAA,KAAkC,EAAA,SAAS,EAAU,GAAG,EAAG,CAAC,CAAQ,CAAC,EAErE,GAAA,EAAA,EAAA,YAAA,KAAmC,CACvC,GAAI,EAAI,QAAS,CACf,IAAM,EAAa,EAAI,QACjB,EAAgC,KAAK,MACzC,EAAW,UAAY,EAAW,YACpC,EACuB,KAAK,MAAM,EAAW,aAAe,CAExD,GAAkB,GACpB,EAAkB,CAEtB,CAGF,EAAG,CAAC,CAAiB,CAAC,GAEtB,EAAA,EAAA,UAAA,KAAgB,CACd,IAAI,EAMJ,OALI,EAAI,UACN,EAAU,EAAI,QACd,EAAI,QAAQ,iBAAiB,SAAU,CAAc,OAG1C,CACP,GACF,EAAQ,oBAAoB,SAAU,CAAc,CAExD,CAGF,EAAG,CAAC,CAAc,CAAC,CACrB"}

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

@@ -0,0 +1 @@
+"use strict";const e=require("./components/Spinner/Spinner.js");require("./components/Spinner/index.js");const t=require("./components/Button/Button.js"),n=require("./components/Button/ButtonGroup.js");require("./components/Button/index.js");const r=require("./components/Icons/Bell.js"),i=require("./components/Icons/CheckmarkCircle.js"),a=require("./components/Icons/ChevronDown.js"),o=require("./components/Icons/CloseCircle.js");require("./components/Icons/index.js");const s=require("./hooks/useOnBottomScroll.js");require("./hooks/index.js"),require("./utils.js"),exports.BellIcon=r.BellIcon,exports.Button=t.Button,exports.ButtonGroup=n.ButtonGroup,exports.CheckmarkCircle=i.CheckmarkCircle,exports.ChevronDown=a.ChevronDown,exports.CloseCircle=o.CloseCircle,exports.Spinner=e.Spinner,exports.useOnBottomScroll=s.default;

package/dist/cjs/modules/core/utils.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=e=>{const n=window.screenLeft??window.screenX,t=window.screenTop??window.screenY,o=window.innerWidth??document.documentElement.clientWidth??screen.width,i=window.innerHeight??document.documentElement.clientHeight??screen.height,c=o/2-600/2+n,d=`width=600,height=800,top=${i/2-800/2+t},left=${c}`;return window.open(e,"_blank",d)},h=()=>{if(typeof window<"u")return window};exports.checkForWindow=h;exports.openPopupWindow=w;
-//# sourceMappingURL=utils.js.map
+"use strict";var e=e=>{let t=window.screenLeft??window.screenX,n=window.screenTop??window.screenY,r=window.innerWidth??document.documentElement.clientWidth??screen.width,i=window.innerHeight??document.documentElement.clientHeight??screen.height,a=r/2-600/2+t,o=`width=600,height=800,top=${i/2-800/2+n},left=${a}`;return window.open(e,`_blank`,o)},t=()=>{if(typeof window<`u`)return window};exports.checkForWindow=t,exports.openPopupWindow=e;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/modules/core/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (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  return window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n  if (typeof window !== \"undefined\") {\n    return window;\n  }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","checkForWindow"],"mappings":"gFAAaA,MAAAA,EAAmBC,GAAgB,CAIxCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAW,4BAHLJ,EAAc,EAAIE,IAAS,EAAIV,CAGgB,SAASW,CAAI,GAExE,OAAOb,OAAOe,KAAKjB,EAAK,SAAUgB,CAAQ,CAC5C,EAEaE,EAAiBA,IAAM,CAC9B,GAAA,OAAOhB,OAAW,IACbA,OAAAA,MAEX"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (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  return window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n  if (typeof window !== \"undefined\") {\n    return window;\n  }\n};\n"],"mappings":"aAAA,IAAa,EAAmB,GAAgB,CAC9C,IAGM,EAAa,OAAO,YAAc,OAAO,QACzC,EAAY,OAAO,WAAa,OAAO,QAEvC,EACJ,OAAO,YAAc,SAAS,gBAAgB,aAAe,OAAO,MAChE,EACJ,OAAO,aACP,SAAS,gBAAgB,cACzB,OAAO,OAEH,EAAO,EAAa,EAAI,IAAQ,EAAI,EAIpC,EAAW,4BAHL,EAAc,EAAI,IAAS,EAAI,EAGiB,QAAQ,IAEpE,OAAO,OAAO,KAAK,EAAK,SAAU,CAAQ,CAC5C,EAEa,MAAuB,CAClC,GAAI,OAAO,OAAW,IACpB,OAAO,MAEX"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),r=require("@knocklabs/react-core");;/* empty css            */const d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(n),c=()=>{const{colorMode:e}=r.useKnockFeed(),{t:a}=r.useTranslations();return t.default.createElement("div",{className:`rnf-empty-feed rnf-empty-feed--${e}`},t.default.createElement("div",{className:"rnf-empty-feed__inner"},t.default.createElement("h2",{className:"rnf-empty-feed__header"},a("emptyFeedTitle")),t.default.createElement("p",{className:"rnf-empty-feed__body"},a("emptyFeedBody"))))};exports.EmptyFeed=c;
-//# sourceMappingURL=EmptyFeed.js.map
+"use strict";;/* empty css        */let e=require("@knocklabs/react-core"),t=require("react/jsx-runtime");var n=()=>{let{colorMode:n}=(0,e.useKnockFeed)(),{t:r}=(0,e.useTranslations)();return(0,t.jsx)(`div`,{className:`rnf-empty-feed rnf-empty-feed--${n}`,children:(0,t.jsxs)(`div`,{className:`rnf-empty-feed__inner`,children:[(0,t.jsx)(`h2`,{className:`rnf-empty-feed__header`,children:r(`emptyFeedTitle`)}),(0,t.jsx)(`p`,{className:`rnf-empty-feed__body`,children:r(`emptyFeedBody`)})]})})};exports.EmptyFeed=n;
+//# sourceMappingURL=EmptyFeed.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyFeed.js","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n  const { colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  return (\n    <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n      <div className=\"rnf-empty-feed__inner\">\n        <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n        <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n      </div>\n    </div>\n  );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","React"],"mappings":"4OAKaA,EAA+BA,IAAM,CAC1C,KAAA,CAAEC,UAAAA,GAAcC,eAAa,EAC7B,CAAEC,EAAAA,GAAMC,kBAAgB,EAG5B,OAAAC,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAW,kCAAkCJ,CAAS,EACzD,EAAAI,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,uBACb,EAAAA,UAAA,cAAC,KAAG,CAAA,UAAU,0BAA0BF,EAAE,gBAAgB,CAAE,EAC3DE,EAAA,QAAA,cAAA,IAAA,CAAE,UAAU,sBAAA,EAAwBF,EAAE,eAAe,CAAE,CAC1D,CACF,CAEJ"}
+{"version":3,"file":"EmptyFeed.js","names":[],"sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n  const { colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  return (\n    <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n      <div className=\"rnf-empty-feed__inner\">\n        <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n        <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"0GAKA,IAAa,MAAqC,CAChD,GAAM,CAAE,cAAA,EAAA,EAAA,aAAA,CAA2B,EAC7B,CAAE,MAAA,EAAA,EAAA,gBAAA,CAAsB,EAE9B,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,kCAAkC,cAChD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kCAA0B,EAAE,gBAAgB,CAAM,CAAA,GAChE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,gCAAwB,EAAE,eAAe,CAAK,CAAA,CACxD,GACF,CAAA,CAET"}

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

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

package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),u=require("@knocklabs/react-core"),d=require("@popperjs/core"),v=require("../../../core/components/Icons/CloseCircle.js"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=b(t),m=({item:e})=>{const{colorMode:i,feedClient:f}=u.useKnockFeed(),{t:s}=u.useTranslations(),[r,l]=t.useState(!1),n=t.useRef(null),c=t.useRef(null),p=t.useCallback(o=>{o.preventDefault(),o.stopPropagation(),f.markAsArchived(e)},[e]);return t.useEffect(()=>{if(n.current&&c.current&&r){const o=d.createPopper(n.current,c.current,{placement:"top-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]});return()=>{o.destroy()}}},[r]),a.default.createElement("button",{ref:n,onClick:p,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),type:"button","aria-label":s("archiveNotification"),className:`rnf-archive-notification-btn rnf-archive-notification-btn--${i}`},a.default.createElement(v.CloseCircle,{"aria-hidden":!0}),r&&a.default.createElement("div",{ref:c,className:`rnf-tooltip rnf-tooltip--${i}`},s("archiveNotification")))};exports.ArchiveButton=m;
-//# sourceMappingURL=ArchiveButton.js.map
+"use strict";const e=require("../../../core/components/Icons/CloseCircle.js");require("../../../core/components/Icons/index.js");let t=require("@knocklabs/react-core"),n=require("react"),r=require("react/jsx-runtime"),i=require("@popperjs/core");var a=({item:a})=>{let{colorMode:o,feedClient:s}=(0,t.useKnockFeed)(),{t:c}=(0,t.useTranslations)(),[l,u]=(0,n.useState)(!1),d=(0,n.useRef)(null),f=(0,n.useRef)(null),p=(0,n.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),s.markAsArchived(a)},[a]);return(0,n.useEffect)(()=>{if(d.current&&f.current&&l){let e=(0,i.createPopper)(d.current,f.current,{placement:`top-end`,modifiers:[{name:`offset`,options:{offset:[0,8]}}]});return()=>{e.destroy()}}},[l]),(0,r.jsxs)(`button`,{ref:d,onClick:p,onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),type:`button`,"aria-label":c(`archiveNotification`),className:`rnf-archive-notification-btn rnf-archive-notification-btn--${o}`,children:[(0,r.jsx)(e.CloseCircle,{"aria-hidden":!0}),l&&(0,r.jsx)(`div`,{ref:f,className:`rnf-tooltip rnf-tooltip--${o}`,children:c(`archiveNotification`)})]})};exports.ArchiveButton=a;
+//# sourceMappingURL=ArchiveButton.js.map

package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArchiveButton.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { createPopper } from \"@popperjs/core\";\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n  const [visible, setVisible] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  useEffect(() => {\n    if (triggerRef.current && tooltipRef.current && visible) {\n      const popperInstance = createPopper(\n        triggerRef.current,\n        tooltipRef.current,\n        {\n          placement: \"top-end\",\n          modifiers: [\n            {\n              name: \"offset\",\n              options: {\n                offset: [0, 8],\n              },\n            },\n          ],\n        },\n      );\n\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [visible]);\n\n  return (\n    <button\n      ref={triggerRef}\n      onClick={onClick}\n      onMouseEnter={() => setVisible(true)}\n      onMouseLeave={() => setVisible(false)}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle aria-hidden />\n\n      {visible && (\n        <div\n          ref={tooltipRef}\n          className={`rnf-tooltip rnf-tooltip--${colorMode}`}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","visible","setVisible","useState","triggerRef","useRef","tooltipRef","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","useEffect","current","popperInstance","createPopper","placement","modifiers","name","options","offset","destroy","React","CloseCircle"],"mappings":"kSAWMA,EAA8CA,CAAC,CAAEC,KAAAA,CAAK,IAAM,CAC1D,KAAA,CAAEC,UAAAA,EAAWC,WAAAA,GAAeC,eAAa,EACzC,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAaC,SAA0B,IAAI,EAC3CC,EAAaD,SAAuB,IAAI,EAExCE,EAAUC,EAAAA,YACbC,GAAqC,CACpCA,EAAEC,eAAe,EACjBD,EAAEE,gBAAgB,EAElBd,EAAWe,eAAejB,CAAI,CAChC,EAGA,CAACA,CAAI,CACP,EAEAkB,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIT,EAAWU,SAAWR,EAAWQ,SAAWb,EAAS,CACvD,MAAMc,EAAiBC,EAAAA,aACrBZ,EAAWU,QACXR,EAAWQ,QACX,CACEG,UAAW,UACXC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,CAAC,CAAA,CAEhB,CAAA,CAAA,CAGP,EAEA,MAAO,IAAM,CACXN,EAAeO,QAAQ,CACzB,CAAA,CACF,EACC,CAACrB,CAAO,CAAC,0BAGT,SACC,CAAA,IAAKG,EACL,QAAAG,EACA,aAAc,IAAML,EAAW,EAAI,EACnC,aAAc,IAAMA,EAAW,EAAK,EACpC,KAAK,SACL,aAAYH,EAAE,qBAAqB,EACnC,UAAW,8DAA8DH,CAAS,IAElF2B,EAAAA,QAAA,cAACC,eAAY,cAAW,GAAA,EAEvBvB,GACCsB,EAAAA,QAAA,cAAC,OACC,IAAKjB,EACL,UAAW,4BAA4BV,CAAS,IAE/CG,EAAE,qBAAqB,CAC1B,CAEJ,CAEJ"}
+{"version":3,"file":"ArchiveButton.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { createPopper } from \"@popperjs/core\";\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n  const [visible, setVisible] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  useEffect(() => {\n    if (triggerRef.current && tooltipRef.current && visible) {\n      const popperInstance = createPopper(\n        triggerRef.current,\n        tooltipRef.current,\n        {\n          placement: \"top-end\",\n          modifiers: [\n            {\n              name: \"offset\",\n              options: {\n                offset: [0, 8],\n              },\n            },\n          ],\n        },\n      );\n\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [visible]);\n\n  return (\n    <button\n      ref={triggerRef}\n      onClick={onClick}\n      onMouseEnter={() => setVisible(true)}\n      onMouseLeave={() => setVisible(false)}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle aria-hidden />\n\n      {visible && (\n        <div\n          ref={tooltipRef}\n          className={`rnf-tooltip rnf-tooltip--${colorMode}`}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"mappings":"sPAWA,IAAM,GAA+C,CAAE,UAAW,CAChE,GAAM,CAAE,YAAW,eAAA,EAAA,EAAA,aAAA,CAA4B,EACzC,CAAE,MAAA,EAAA,EAAA,gBAAA,CAAsB,EACxB,CAAC,EAAS,IAAA,EAAA,EAAA,SAAA,CAAuB,EAAK,EACtC,GAAA,EAAA,EAAA,OAAA,CAAuC,IAAI,EAC3C,GAAA,EAAA,EAAA,OAAA,CAAoC,IAAI,EAExC,GAAA,EAAA,EAAA,YAAA,CACH,GAAqC,CACpC,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAElB,EAAW,eAAe,CAAI,CAChC,EAGA,CAAC,CAAI,CACP,EA0BA,OAxBA,EAAA,EAAA,UAAA,KAAgB,CACd,GAAI,EAAW,SAAW,EAAW,SAAW,EAAS,CACvD,IAAM,GAAA,EAAA,EAAA,aAAA,CACJ,EAAW,QACX,EAAW,QACX,CACE,UAAW,UACX,UAAW,CACT,CACE,KAAM,SACN,QAAS,CACP,OAAQ,CAAC,EAAG,CAAC,CACf,CACF,CACF,CACF,CACF,EAEA,UAAa,CACX,EAAe,QAAQ,CACzB,CACF,CACF,EAAG,CAAC,CAAO,CAAC,GAGV,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,IAAK,EACI,UACT,iBAAoB,EAAW,EAAI,EACnC,iBAAoB,EAAW,EAAK,EACpC,KAAK,SACL,aAAY,EAAE,qBAAqB,EACnC,UAAW,8DAA8D,aAP3E,EASE,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CAAa,cAAA,EAAa,CAAA,EAEzB,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,EACL,UAAW,4BAA4B,aAEtC,EAAE,qBAAqB,CACrB,CAAA,CAED,GAEZ"}

package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react");;/* empty css            */const s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=s(i),u=({name:t,src:r})=>{function n(c){const[a,l]=c.split(" ");return a&&l?`${a.charAt(0)}${l.charAt(0)}`:a?a.charAt(0):""}return e.default.createElement("div",{className:"rnf-avatar"},r?e.default.createElement("img",{src:r,alt:t,className:"rnf-avatar__image"}):e.default.createElement("span",{className:"rnf-avatar__initials"},n(t)))};exports.Avatar=u;
-//# sourceMappingURL=Avatar.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js");;/* empty css        */let t=require("react");t=e.__toESM(t);let n=require("react/jsx-runtime");var r=({name:e,src:t})=>{function r(e){let[t,n]=e.split(` `);return t&&n?`${t.charAt(0)}${n.charAt(0)}`:t?t.charAt(0):``}return(0,n.jsx)(`div`,{className:`rnf-avatar`,children:t?(0,n.jsx)(`img`,{src:t,alt:e,className:`rnf-avatar__image`}):(0,n.jsx)(`span`,{className:`rnf-avatar__initials`,children:r(e)})})};exports.Avatar=r;
+//# sourceMappingURL=Avatar.js.map

package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={name} className=\"rnf-avatar__image\" />\n      ) : (\n        <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n      )}\n    </div>\n  );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":"yMASaA,EAAgCA,CAAC,CAAEC,KAAAA,EAAMC,IAAAA,CAAI,IAAM,CAC9D,SAASC,EAAYF,EAAc,CACjC,KAAM,CAACG,EAAWC,CAAQ,EAAIJ,EAAKK,MAAM,GAAG,EAC5C,OAAOF,GAAaC,EAChB,GAAGD,EAAUG,OAAO,CAAC,CAAC,GAAGF,EAASE,OAAO,CAAC,CAAC,GAC3CH,EACEA,EAAUG,OAAO,CAAC,EAClB,EAAA,CAIN,OAAAC,UAAA,cAAC,OAAI,UAAU,cACZN,EACEM,EAAAA,QAAA,cAAA,MAAA,CAAI,IAAAN,EAAU,IAAKD,EAAM,UAAU,8CAEnC,OAAK,CAAA,UAAU,wBAAwBE,EAAYF,CAAI,CAAE,CAE9D,CAEJ"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={name} className=\"rnf-avatar__image\" />\n      ) : (\n        <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"0KASA,IAAa,GAAiC,CAAE,OAAM,SAAU,CAC9D,SAAS,EAAY,EAAc,CACjC,GAAM,CAAC,EAAW,GAAY,EAAK,MAAM,GAAG,EAC5C,OAAO,GAAa,EAChB,GAAG,EAAU,OAAO,CAAC,IAAI,EAAS,OAAO,CAAC,IAC1C,EACE,EAAU,OAAO,CAAC,EAClB,EACR,CAEA,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sBACZ,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,IAAK,EAAM,UAAU,mBAAqB,CAAA,GAEzD,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,gCAAwB,EAAY,CAAI,CAAQ,CAAA,CAE/D,CAAA,CAET"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@knocklabs/react-core"),y=require("react"),A=require("../../../core/components/Button/Button.js"),B=require("../../../core/components/Button/ButtonGroup.js"),T=require("./ArchiveButton.js"),h=require("./Avatar.js");;/* empty css            */const w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=w(y);function p(e){e&&e!==""&&setTimeout(()=>window.location.assign(e),200)}const M=t.default.forwardRef(({item:e,onItemClick:i,onButtonClick:s,avatar:b,children:f,archiveButton:k},v)=>{var _;const{feedClient:l,colorMode:N}=c.useKnockFeed(),{locale:E}=c.useTranslations(),o=y.useMemo(()=>e.blocks.reduce((n,a)=>({...n,[a.name]:a}),{}),[e]),d=(_=o.action_url)==null?void 0:_.rendered,m=o.actions,u=t.default.useCallback(()=>(l.markAsInteracted(e,{type:"cell_click",action:d}),i?i(e):p(d)),[e,d,i,l]),C=t.default.useCallback((n,a)=>(l.markAsInteracted(e,{type:"button_click",name:a.name,label:a.label,action:a.action}),s?s(e,a):p(a.action)),[s,l,e]),g=t.default.useCallback(n=>{switch(n.key){case"Enter":{n.stopPropagation(),u();break}}},[u]),r=e.actors[0];return t.default.createElement("div",{ref:v,className:`rnf-notification-cell rnf-notification-cell--${N}`,onClick:u,onKeyDown:g,tabIndex:0},t.default.createElement("div",{className:"rnf-notification-cell__inner"},!e.read_at&&t.default.createElement("div",{className:"rnf-notification-cell__unread-dot"}),c.renderNodeOrFallback(b,r&&"name"in r&&r.name&&t.default.createElement(h.Avatar,{name:r.name,src:r.avatar})),t.default.createElement("div",{className:"rnf-notification-cell__content-outer"},o.body&&t.default.createElement("div",{className:"rnf-notification-cell__content",dangerouslySetInnerHTML:{__html:o.body.rendered}}),m&&t.default.createElement("div",{className:"rnf-notification-cell__button-group"},t.default.createElement(B.ButtonGroup,null,m.buttons.map((n,a)=>t.default.createElement(A.Button,{variant:a===0?"primary":"secondary",key:n.name,onClick:q=>C(q,n)},n.label)))),f&&t.default.createElement("div",{className:"rnf-notification-cell__child-content"},f),t.default.createElement("span",{className:"rnf-notification-cell__timestamp"},c.formatTimestamp(e.inserted_at,{locale:E}))),c.renderNodeOrFallback(k,t.default.createElement(T.ArchiveButton,{item:e}))))});exports.NotificationCell=M;
-//# sourceMappingURL=NotificationCell.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../../../core/components/Button/Button.js"),n=require("../../../core/components/Button/ButtonGroup.js");require("../../../core/index.js");const r=require("./ArchiveButton.js");;/* empty css        */const i=require("./Avatar.js");let a=require("@knocklabs/react-core"),o=require("react");o=e.__toESM(o);let s=require("react/jsx-runtime");function c(e){e&&e!==``&&setTimeout(()=>window.location.assign(e),200)}var l=o.default.forwardRef(({item:e,onItemClick:l,onButtonClick:u,avatar:d,children:f,archiveButton:p},m)=>{let{feedClient:h,colorMode:g}=(0,a.useKnockFeed)(),{locale:_}=(0,a.useTranslations)(),v=(0,o.useMemo)(()=>e.blocks.reduce((e,t)=>({...e,[t.name]:t}),{}),[e]),y=v.action_url?.rendered,b=v.actions,x=o.default.useCallback(()=>(h.markAsInteracted(e,{type:`cell_click`,action:y}),l?l(e):c(y)),[e,y,l,h]),S=o.default.useCallback((t,n)=>(h.markAsInteracted(e,{type:`button_click`,name:n.name,label:n.label,action:n.action}),u?u(e,n):c(n.action)),[u,h,e]),C=o.default.useCallback(e=>{switch(e.key){case`Enter`:e.stopPropagation(),x();break;default:break}},[x]),w=e.actors[0];return(0,s.jsx)(`div`,{ref:m,className:`rnf-notification-cell rnf-notification-cell--${g}`,onClick:x,onKeyDown:C,tabIndex:0,children:(0,s.jsxs)(`div`,{className:`rnf-notification-cell__inner`,children:[!e.read_at&&(0,s.jsx)(`div`,{className:`rnf-notification-cell__unread-dot`}),(0,a.renderNodeOrFallback)(d,w&&`name`in w&&w.name&&(0,s.jsx)(i.Avatar,{name:w.name,src:w.avatar})),(0,s.jsxs)(`div`,{className:`rnf-notification-cell__content-outer`,children:[v.body&&(0,s.jsx)(`div`,{className:`rnf-notification-cell__content`,dangerouslySetInnerHTML:{__html:v.body.rendered}}),b&&(0,s.jsx)(`div`,{className:`rnf-notification-cell__button-group`,children:(0,s.jsx)(n.ButtonGroup,{children:b.buttons.map((e,n)=>(0,s.jsx)(t.Button,{variant:n===0?`primary`:`secondary`,onClick:t=>S(t,e),children:e.label},e.name))})}),f&&(0,s.jsx)(`div`,{className:`rnf-notification-cell__child-content`,children:f}),(0,s.jsx)(`span`,{className:`rnf-notification-cell__timestamp`,children:(0,a.formatTimestamp)(e.inserted_at,{locale:_})})]}),(0,a.renderNodeOrFallback)(p,(0,s.jsx)(r.ArchiveButton,{item:e}))]})})});exports.NotificationCell=l;
+//# sourceMappingURL=NotificationCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCell.js","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":"wZAqCA,SAASA,EAA4BC,EAAc,CAC7CA,GAAOA,IAAQ,IACjBC,WAAW,IAAMC,OAAOC,SAASC,OAAOJ,CAAG,EAAG,GAAG,CAErD,CAEaK,MAAAA,EAAmBC,EAAAA,QAAMC,WAIpC,CACE,CAAEC,KAAAA,EAAMC,YAAAA,EAAaC,cAAAA,EAAeC,OAAAA,EAAQC,SAAAA,EAAUC,cAAAA,CAAc,EACpEC,IACG,OACG,KAAA,CAAEC,WAAAA,EAAYC,UAAAA,GAAcC,eAAa,EACzC,CAAEC,OAAAA,GAAWC,kBAAgB,EAE7BC,EAA4BC,EAAAA,QAAQ,IACjCb,EAAKc,OAAOC,OAAO,CAACC,EAAKC,KACvB,CAAE,GAAGD,EAAK,CAACC,EAAMC,IAAI,EAAGD,CAAM,GACpC,EAAE,EACJ,CAACjB,CAAI,CAAC,EAEHmB,GAAaP,EAAAA,EAAaQ,aAAbR,YAAAA,EAA8CS,SAC3DC,EAAYV,EAAaW,QAEzBC,EAA0B1B,UAAM2B,YAAY,KAEhDlB,EAAWmB,iBAAiB1B,EAAM,CAChC2B,KAAM,aACNC,OAAQT,CAAAA,CACT,EAEGlB,EAAoBA,EAAYD,CAAI,EAEjCT,EAA4B4B,CAAS,GAC3C,CAACnB,EAAMmB,EAAWlB,EAAaM,CAAU,CAAC,EAEvCsB,EAAuB/B,EAAAA,QAAM2B,YACjC,CAACK,EAAsBC,KAErBxB,EAAWmB,iBAAiB1B,EAAM,CAChC2B,KAAM,eACNT,KAAMa,EAAOb,KACbc,MAAOD,EAAOC,MACdJ,OAAQG,EAAOH,MAAAA,CAChB,EAEG1B,EAAsBA,EAAcF,EAAM+B,CAAM,EAE7CxC,EAA4BwC,EAAOH,MAAM,GAElD,CAAC1B,EAAeK,EAAYP,CAAI,CAClC,EAEMiC,EAAYnC,EAAAA,QAAM2B,YACrBS,GAA4C,CAC3C,OAAQA,EAAGC,IAAG,CACZ,IAAK,QAAS,CACZD,EAAGE,gBAAgB,EACKZ,EAAA,EACxB,KAAA,CAGA,CACJ,EAEF,CAACA,CAAuB,CAC1B,EAEMa,EAAQrC,EAAKsC,OAAO,CAAC,EAE3B,OAEExC,EAAAA,QAAA,cAAC,MAAA,CACC,IAAAQ,EACA,UAAW,gDAAgDE,CAAS,GACpE,QAASgB,EACT,UAAAS,EAEA,SAAU,CAAA,0BAET,MAAI,CAAA,UAAU,gCACZ,CAACjC,EAAKuC,SACLzC,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,oCAChB,EAEA0C,EAAAA,qBACCrC,EACAkC,GAAS,SAAUA,GAASA,EAAMnB,MAC/BpB,EAAAA,QAAA,cAAA2C,EAAA,OAAA,CAAO,KAAMJ,EAAMnB,KAAM,IAAKmB,EAAMlC,QAEzC,EAEAL,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,wCACZc,EAAa8B,8BACX,MACC,CAAA,UAAU,iCACV,wBAAyB,CACvBC,OAAS/B,EAAa8B,KAA8BrB,QACtD,CAAA,CAEH,EAEAC,GACCxB,UAAA,cAAC,OAAI,UAAU,qCAAA,EACZA,EAAA,QAAA,cAAA8C,EAAA,YAAA,KACEtB,EAAUuB,QAAQC,IAAI,CAACf,EAAQgB,IAC9BjD,EAAA,QAAA,cAACkD,EACC,OAAA,CAAA,QAASD,IAAM,EAAI,UAAY,YAC/B,IAAKhB,EAAOb,KACZ,QAAgBW,GAAAA,EAAqBoB,EAAGlB,CAAM,CAAA,EAE7CA,EAAOC,KACV,CACD,CACH,CACF,EAGD5B,2BACE,MAAI,CAAA,UAAU,sCACZA,EAAAA,CACH,EAGFN,EAAA,QAAA,cAAC,QAAK,UAAU,kCAAA,EACboD,EAAAA,gBAAgBlD,EAAKmD,YAAa,CAAEzC,OAAAA,CAAAA,CAAQ,CAC/C,CACF,EAEC8B,EAAAA,qBAAqBnC,EAAgBP,EAAAA,QAAA,cAAAsD,EAAA,cAAA,CAAc,KAAApD,GAAc,CACpE,CAAA,CAGN,CACF"}
+{"version":3,"file":"NotificationCell.js","names":[],"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"],"mappings":"uaAqCA,SAAS,EAA4B,EAAc,CAC7C,GAAO,IAAQ,IACjB,eAAiB,OAAO,SAAS,OAAO,CAAG,EAAG,GAAG,CAErD,CAEA,IAAa,EAAmB,EAAA,QAAM,YAKlC,CAAE,OAAM,cAAa,gBAAe,SAAQ,WAAU,iBACtD,IACG,CACH,GAAM,CAAE,aAAY,cAAA,EAAA,EAAA,aAAA,CAA2B,EACzC,CAAE,WAAA,EAAA,EAAA,gBAAA,CAA2B,EAE7B,GAAA,EAAA,EAAA,QAAA,KACG,EAAK,OAAO,QAAQ,EAAK,KACvB,CAAE,GAAG,GAAM,EAAM,MAAO,CAAM,GACpC,CAAC,CAAC,EACJ,CAAC,CAAI,CAAC,EAEH,EAAa,EAAa,YAAiC,SAC3D,EAAY,EAAa,QAEzB,EAA0B,EAAA,QAAM,iBAEpC,EAAW,iBAAiB,EAAM,CAChC,KAAM,aACN,OAAQ,CACV,CAAC,EAEG,EAAoB,EAAY,CAAI,EAEjC,EAA4B,CAAS,GAC3C,CAAC,EAAM,EAAW,EAAa,CAAU,CAAC,EAEvC,EAAuB,EAAA,QAAM,aAChC,EAAsB,KAErB,EAAW,iBAAiB,EAAM,CAChC,KAAM,eACN,KAAM,EAAO,KACb,MAAO,EAAO,MACd,OAAQ,EAAO,MACjB,CAAC,EAEG,EAAsB,EAAc,EAAM,CAAM,EAE7C,EAA4B,EAAO,MAAM,GAElD,CAAC,EAAe,EAAY,CAAI,CAClC,EAEM,EAAY,EAAA,QAAM,YACrB,GAA4C,CAC3C,OAAQ,EAAG,IAAX,CACE,IAAK,QACH,EAAG,gBAAgB,EACnB,EAAwB,EACxB,MAEF,QACE,KACJ,CACF,EACA,CAAC,CAAuB,CAC1B,EAEM,EAAQ,EAAK,OAAO,GAE1B,OAEE,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,gDAAgD,IAC3D,QAAS,EACE,YAEX,SAAU,YAEV,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wCAAf,CACG,CAAC,EAAK,UACL,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mCAAqC,CAAA,6BAIpD,EACA,GAAS,SAAU,GAAS,EAAM,OAChC,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAQ,KAAM,EAAM,KAAM,IAAK,EAAM,MAAS,CAAA,CAElD,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gDAAf,CACG,EAAa,OACZ,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,UAAU,iCACV,wBAAyB,CACvB,OAAS,EAAa,KAA8B,QACtD,CACD,CAAA,EAGF,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gDACb,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CAAA,SACG,EAAU,QAAQ,KAAK,EAAQ,KAC9B,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CACE,QAAS,IAAM,EAAI,UAAY,YAE/B,QAAU,GAAM,EAAqB,EAAG,CAAM,WAE7C,EAAO,KACF,EAJD,EAAO,IAIN,CACT,CACU,CAAA,CACV,CAAA,EAGN,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uCACZ,UACE,CAAA,GAGP,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kEACG,EAAK,YAAa,CAAE,QAAO,CAAC,CACzC,CAAA,CACH,+BAEiB,GAAe,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAqB,MAAO,CAAA,CAAC,CAC/D,GACF,CAAA,CAET,CACF"}

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

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

package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@knocklabs/react-core"),c=require("react"),l=require("../../../core/components/Icons/ChevronDown.js");;/* empty css            */const d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(c),i=({children:e,value:o,onChange:r})=>{const{colorMode:n}=a.useKnockFeed();return t.default.createElement("div",{className:`rnf-dropdown rnf-dropdown--${n}`},t.default.createElement("select",{"aria-label":"Select notification filter",value:o,onChange:r},e),t.default.createElement(l.ChevronDown,{"aria-hidden":!0}))};exports.Dropdown=i;
-//# sourceMappingURL=Dropdown.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../../../core/components/Icons/ChevronDown.js");require("../../../core/components/Icons/index.js");/* empty css         */let n=require("@knocklabs/react-core"),r=require("react");r=e.__toESM(r);let i=require("react/jsx-runtime");var a=({children:e,value:r,onChange:a})=>{let{colorMode:o}=(0,n.useKnockFeed)();return(0,i.jsxs)(`div`,{className:`rnf-dropdown rnf-dropdown--${o}`,children:[(0,i.jsx)(`select`,{"aria-label":`Select notification filter`,value:r,onChange:a,children:e}),(0,i.jsx)(t.ChevronDown,{"aria-hidden":!0})]})};exports.Dropdown=a;
+//# sourceMappingURL=Dropdown.js.map

package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select\n        aria-label=\"Select notification filter\"\n        value={value}\n        onChange={onChange}\n      >\n        {children}\n      </select>\n      <ChevronDown aria-hidden />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","ChevronDown"],"mappings":"uSAYaA,EAAuDA,CAAC,CACnEC,SAAAA,EACAC,MAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,eAAa,EAEnC,+BACG,MAAI,CAAA,UAAW,8BAA8BD,CAAS,EAAA,0BACpD,SACC,CAAA,aAAW,6BACX,MAAAF,EACA,SAAAC,GAECF,CACH,0BACCK,EAAAA,YAAY,CAAA,cAAW,EAAA,CAAA,CAC1B,CAEJ"}
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select\n        aria-label=\"Select notification filter\"\n        value={value}\n        onChange={onChange}\n      >\n        {children}\n      </select>\n      <ChevronDown aria-hidden />\n    </div>\n  );\n};\n"],"mappings":"2TAYA,IAAa,GAAwD,CACnE,WACA,QACA,cACI,CACJ,GAAM,CAAE,cAAA,EAAA,EAAA,aAAA,CAA2B,EAEnC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,8BAA8B,aAA9C,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,aAAW,6BACJ,QACG,WAET,UACK,CAAA,GACR,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CAAa,cAAA,EAAa,CAAA,CACvB,GAET"}

package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@knocklabs/react-core"),m=require("react"),f=require("../../../core/components/Icons/CheckmarkCircle.js");;/* empty css            */function b(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const o=b(m),k=({onClick:e})=>{const{useFeedStore:r,feedClient:t,colorMode:n}=s.useKnockFeed(),{t:l}=s.useTranslations(),c=r(a=>a.items.filter(i=>!i.read_at)),u=r(a=>a.metadata.unread_count),d=o.useCallback(a=>{t.markAllAsRead(),e&&e(a,c)},[t,c,e]);return o.createElement("button",{className:`rnf-mark-all-as-read rnf-mark-all-as-read--${n}`,disabled:u===0,onClick:d,type:"button"},l("markAllAsRead"),o.createElement(f.CheckmarkCircle,{"aria-hidden":!0}))};exports.MarkAsRead=k;
-//# sourceMappingURL=MarkAsRead.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("../../../core/components/Icons/CheckmarkCircle.js");require("../../../core/components/Icons/index.js");/* empty css         */let n=require("@knocklabs/react-core"),r=require("react");r=e.__toESM(r);let i=require("react/jsx-runtime");var a=({onClick:e})=>{let{useFeedStore:a,feedClient:o,colorMode:s}=(0,n.useKnockFeed)(),{t:c}=(0,n.useTranslations)(),l=a(e=>e.items.filter(e=>!e.read_at)),u=a(e=>e.metadata.unread_count),d=r.useCallback(t=>{o.markAllAsRead(),e&&e(t,l)},[o,l,e]);return(0,i.jsxs)(`button`,{className:`rnf-mark-all-as-read rnf-mark-all-as-read--${s}`,disabled:u===0,onClick:d,type:`button`,children:[c(`markAllAsRead`),(0,i.jsx)(t.CheckmarkCircle,{"aria-hidden":!0})]})};exports.MarkAsRead=a;
+//# sourceMappingURL=MarkAsRead.js.map

package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkAsRead.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n  onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n  const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const unreadItems = useFeedStore((state) =>\n    state.items.filter((item) => !item.read_at),\n  );\n\n  const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n  const onClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      feedClient.markAllAsRead();\n      if (onClick) onClick(e, unreadItems);\n    },\n    [feedClient, unreadItems, onClick],\n  );\n\n  return (\n    <button\n      className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n      disabled={unreadCount === 0}\n      onClick={onClickHandler}\n      type=\"button\"\n    >\n      {t(\"markAllAsRead\")}\n      <CheckmarkCircle aria-hidden />\n    </button>\n  );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":"ijBAYaA,EAAwCA,CAAC,CAAEC,QAAAA,CAAQ,IAAM,CAC9D,KAAA,CAAEC,aAAAA,EAAcC,WAAAA,EAAYC,UAAAA,GAAcC,eAAa,EACvD,CAAEC,EAAAA,GAAMC,kBAAgB,EAExBC,EAAcN,EAAcO,GAChCA,EAAMC,MAAMC,OAAiBC,GAAA,CAACA,EAAKC,OAAO,CAC5C,EAEMC,EAAcZ,EAAwBO,GAAAA,EAAMM,SAASC,YAAY,EAEjEC,EAAiBC,EAAMC,YAC1BC,GAAwB,CACvBjB,EAAWkB,cAAc,EACrBpB,GAAiBmB,EAAAA,EAAGZ,CAAW,CAErC,EAAA,CAACL,EAAYK,EAAaP,CAAO,CACnC,EAGE,OAAAiB,EAAA,cAAC,UACC,UAAW,8CAA8Cd,CAAS,GAClE,SAAUU,IAAgB,EAC1B,QAASG,EACT,KAAK,UAEJX,EAAE,eAAe,kBACjBgB,EAAAA,gBAAgB,CAAA,cAAW,EAAA,CAAA,CAC9B,CAEJ"}
+{"version":3,"file":"MarkAsRead.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n  onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n  const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const unreadItems = useFeedStore((state) =>\n    state.items.filter((item) => !item.read_at),\n  );\n\n  const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n  const onClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      feedClient.markAllAsRead();\n      if (onClick) onClick(e, unreadItems);\n    },\n    [feedClient, unreadItems, onClick],\n  );\n\n  return (\n    <button\n      className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n      disabled={unreadCount === 0}\n      onClick={onClickHandler}\n      type=\"button\"\n    >\n      {t(\"markAllAsRead\")}\n      <CheckmarkCircle aria-hidden />\n    </button>\n  );\n};\n"],"mappings":"+TAYA,IAAa,GAAyC,CAAE,aAAc,CACpE,GAAM,CAAE,eAAc,aAAY,cAAA,EAAA,EAAA,aAAA,CAA2B,EACvD,CAAE,MAAA,EAAA,EAAA,gBAAA,CAAsB,EAExB,EAAc,EAAc,GAChC,EAAM,MAAM,OAAQ,GAAS,CAAC,EAAK,OAAO,CAC5C,EAEM,EAAc,EAAc,GAAU,EAAM,SAAS,YAAY,EAEjE,EAAiB,EAAM,YAC1B,GAAwB,CACvB,EAAW,cAAc,EACrB,GAAS,EAAQ,EAAG,CAAW,CACrC,EACA,CAAC,EAAY,EAAa,CAAO,CACnC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,UAAW,8CAA8C,IACzD,SAAU,IAAgB,EAC1B,QAAS,EACT,KAAK,kBAJP,CAMG,EAAE,eAAe,GAClB,EAAA,EAAA,IAAA,CAAC,EAAA,gBAAD,CAAiB,cAAA,EAAa,CAAA,CACxB,GAEZ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeed.js","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":"kjBAyDMA,EAAqBC,GACxBC,EAAA,QAAA,cAAAC,EAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,EAAA,QAAA,cAAAK,yBAAA,CAA2BN,GAAAA,EAC7B,EAEKO,EAAuBA,CAAC,CAAEC,UAAAA,CAA8B,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,0CAAA,0BACZQ,EACC,QAAA,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,OAAU,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,EACfmB,cAAAA,EAAgBjB,CAClB,IAAM,OACJ,KAAM,CAACkB,EAAQC,CAAS,EAAIC,EAAAA,SAASR,CAAmB,EAClD,CAAES,WAAAA,EAAYC,aAAAA,EAAcrB,UAAAA,GAAcsB,eAAa,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,kBAAgB,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUP,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBqB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAW,gDAAgD7C,CAAS,IAEnEc,GACCC,EAAa,CACX+B,gBAAiB5B,EACjB6B,aAAc9B,EACdP,qBAAAA,CACD,CAAA,EAEHjB,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKqC,CACpDD,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BjC,EAAc,CAAEhB,UAAAA,CAAAA,CAAW,EAE5BP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,6CAAA,EACZoC,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKvD,GACTY,EAAW,CACTZ,KAAAA,EACAwD,YAAa3C,EACb4C,cAAe3C,CAChB,CAAA,CACH,CACJ,EAECoB,IAAkBmB,EAAAA,cAAcK,WAC/BrC,EAAc,CAAEhB,UAAAA,CAAW,CAAA,EAE5B,CAACoC,GAAmBF,GAAW7B,CAClC,IAECkB,EAAAA,GAAAA,YAAAA,EAAU+B,WAAV/B,YAAAA,EAAoBgC,oBAClB9D,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,yCACbA,EAAAA,QAAA,cAAC,IAAE,CAAA,KAAMU,EAAmB,OAAO,QAChCsB,EAAAA,EAAE,WAAW,GAAK,kBACrB,CACF,CAEJ,CAEJ"}
+{"version":3,"file":"NotificationFeed.js","names":[],"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"],"mappings":"gnBAyDA,IAAM,EAAqB,IACzB,EAAA,EAAA,IAAA,CAAC,EAAA,iBAAD,CAAsC,GAAI,CAAQ,EAA3B,EAAM,KAAK,EAAgB,EAG9C,EAAuB,IAC3B,EAAA,EAAA,IAAA,CAAC,EAAA,uBAAD,CAAwB,GAAI,CAAQ,CAAA,EAGhC,GAAwB,CAAE,gBAC9B,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qDACb,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CACE,UAAW,EACX,KAAK,OACL,MAAO,IAAc,OAAS,4BAA8B,IAAA,EAC7D,CAAA,CACE,CAAA,EAGD,EACJ,qGAEW,GAAqD,CAChE,kBAAiB,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAY,CAAA,EAC7B,aAAa,EACb,sBACA,4BACA,uBACA,sBAAsB,EAAA,aAAa,IACnC,SACA,eAAe,EACf,gBAAgB,KACZ,CACJ,GAAM,CAAC,EAAQ,IAAA,EAAA,EAAA,SAAA,CAAsB,CAAmB,EAClD,CAAE,aAAY,eAAc,cAAA,EAAA,EAAA,aAAA,CAA2B,EACvD,CAAE,aAAA,EAAA,EAAA,gBAAA,CAA6B,CAAU,EACzC,CAAE,MAAA,EAAA,EAAA,gBAAA,CAAsB,EAExB,CAAE,WAAU,QAAO,iBAAkB,EAAa,EAClD,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAI,GAEhD,EAAA,EAAA,UAAA,KAAgB,CACd,EAAU,CAAmB,CAC/B,EAAG,CAAC,CAAmB,CAAC,GAExB,EAAA,EAAA,UAAA,KAAgB,CAEd,EAAW,MAAM,CAAE,QAAO,CAAC,CAC7B,EAAG,CAAC,EAAY,CAAM,CAAC,EAEvB,IAAM,EAAU,EAAM,SAAW,EAC3B,GAAA,EAAA,EAAA,kBAAA,CAAoC,CAAa,EAiBvD,OANA,EAAA,QAAkB,CAChB,IAAK,EACL,UAAA,EAAA,EAAA,YAAA,KAVyC,CACrC,CAAC,GAAmB,EAAS,OAC/B,EAAW,cAAc,CAE7B,EAAG,CAAC,EAAiB,EAAU,CAAU,CAM7B,EACV,OAAQ,EACV,CAAC,GAGC,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,UAAW,gDAAgD,aAD7D,CAGG,GACC,EAAa,CACX,gBAAiB,EACjB,aAAc,EACd,sBACF,CAAC,GAEH,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAmC,IAAK,WAAvD,CACG,IAAkB,EAAA,cAAc,SAC/B,EAAc,CAAE,WAAU,CAAC,GAE7B,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDACZ,IAAkB,EAAA,cAAc,SAC/B,EAAM,IAAK,GACT,EAAW,CACT,OACA,YAAa,EACb,cAAe,CACjB,CAAC,CACH,CACC,CAAA,EAEJ,IAAkB,EAAA,cAAc,WAC/B,EAAc,CAAE,WAAU,CAAC,EAE5B,CAAC,GAAmB,GAAW,CAC7B,IAEJ,GAAU,UAAU,oBACnB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kDACb,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,KAAM,EAAmB,OAAO,kBAChC,EAAE,WAAW,GAAK,kBAClB,CAAA,CACA,CAAA,CAEJ,GAET"}

package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@knocklabs/react-core"),c=require("react"),l=require("./Dropdown.js"),d=require("./MarkAsRead.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=s(c),u=[n.FilterStatus.All,n.FilterStatus.Unread,n.FilterStatus.Read],f=({onMarkAllAsReadClick:e,filterStatus:o,setFilterStatus:i})=>{const{t:r}=n.useTranslations();return t.default.createElement("header",{className:"rnf-notification-feed__header"},t.default.createElement("div",{className:"rnf-notification-feed__selector"},t.default.createElement("span",{className:"rnf-notification-feed__type"},r("notifications")),t.default.createElement(l.Dropdown,{value:o,onChange:a=>i(a.target.value)},u.map(a=>t.default.createElement("option",{key:a,value:a},r(a))))),t.default.createElement(d.MarkAsRead,{onClick:e}))};exports.NotificationFeedHeader=f;
-//# sourceMappingURL=NotificationFeedHeader.js.map
+"use strict";const e=require("../../../../_virtual/_rolldown/runtime.js"),t=require("./Dropdown.js"),n=require("./MarkAsRead.js");let r=require("@knocklabs/react-core"),i=require("react");i=e.__toESM(i);let a=require("react/jsx-runtime");var o=[r.FilterStatus.All,r.FilterStatus.Unread,r.FilterStatus.Read],s=({onMarkAllAsReadClick:e,filterStatus:i,setFilterStatus:s})=>{let{t:c}=(0,r.useTranslations)();return(0,a.jsxs)(`header`,{className:`rnf-notification-feed__header`,children:[(0,a.jsxs)(`div`,{className:`rnf-notification-feed__selector`,children:[(0,a.jsx)(`span`,{className:`rnf-notification-feed__type`,children:c(`notifications`)}),(0,a.jsx)(t.Dropdown,{value:i,onChange:e=>s(e.target.value),children:o.map(e=>(0,a.jsx)(`option`,{value:e,children:c(e)},e))})]}),(0,a.jsx)(n.MarkAsRead,{onClick:e})]})};exports.NotificationFeedHeader=s;
+//# sourceMappingURL=NotificationFeedHeader.js.map

package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedHeader.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n  filterStatus: FilterStatus;\n  setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n  FilterStatus.All,\n  FilterStatus.Unread,\n  FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n  onMarkAllAsReadClick,\n  filterStatus,\n  setFilterStatus,\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <header className=\"rnf-notification-feed__header\">\n      <div className=\"rnf-notification-feed__selector\">\n        <span className=\"rnf-notification-feed__type\">\n          {t(\"notifications\")}\n        </span>\n        <Dropdown\n          value={filterStatus}\n          onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}\n        >\n          {OrderedFilterStatuses.map((filterStatus) => (\n            <option key={filterStatus} value={filterStatus}>\n              {t(filterStatus)}\n            </option>\n          ))}\n        </Dropdown>\n      </div>\n      <MarkAsRead onClick={onMarkAllAsReadClick} />\n    </header>\n  );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":"mQAaMA,EAAwB,CAC5BC,EAAAA,aAAaC,IACbD,EAAaE,aAAAA,OACbF,eAAaG,IAAI,EAGNC,EAAgEA,CAAC,CAC5EC,qBAAAA,EACAC,aAAAA,EACAC,gBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EAG5B,OAAAC,EAAA,QAAA,cAAC,UAAO,UAAU,+BAAA,0BACf,MAAI,CAAA,UAAU,iCACb,EAAAA,EAAA,QAAA,cAAC,OAAK,CAAA,UAAU,+BACbF,EAAE,eAAe,CACpB,EACAE,EAAAA,QAAA,cAACC,EAAAA,UACC,MAAOL,EACP,SAAWM,GAAML,EAAgBK,EAAEC,OAAOC,KAAqB,CAAA,EAE9Df,EAAsBgB,IAAKT,GACzBI,EAAAA,QAAA,cAAA,SAAA,CAAO,IAAKJ,EAAc,MAAOA,CAAAA,EAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,EACCI,EAAA,QAAA,cAAAM,EAAA,WAAA,CAAW,QAASX,CAAqB,CAAA,CAC5C,CAEJ"}
+{"version":3,"file":"NotificationFeedHeader.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n  filterStatus: FilterStatus;\n  setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n  FilterStatus.All,\n  FilterStatus.Unread,\n  FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n  onMarkAllAsReadClick,\n  filterStatus,\n  setFilterStatus,\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <header className=\"rnf-notification-feed__header\">\n      <div className=\"rnf-notification-feed__selector\">\n        <span className=\"rnf-notification-feed__type\">\n          {t(\"notifications\")}\n        </span>\n        <Dropdown\n          value={filterStatus}\n          onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}\n        >\n          {OrderedFilterStatuses.map((filterStatus) => (\n            <option key={filterStatus} value={filterStatus}>\n              {t(filterStatus)}\n            </option>\n          ))}\n        </Dropdown>\n      </div>\n      <MarkAsRead onClick={onMarkAllAsReadClick} />\n    </header>\n  );\n};\n"],"mappings":"8OAaA,IAAM,EAAwB,CAC5B,EAAA,aAAa,IACb,EAAA,aAAa,OACb,EAAA,aAAa,IACf,EAEa,GAAiE,CAC5E,uBACA,eACA,qBACI,CACJ,GAAM,CAAE,MAAA,EAAA,EAAA,gBAAA,CAAsB,EAE9B,OACE,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAU,yCAAlB,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,uCACb,EAAE,eAAe,CACd,CAAA,GACN,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CACE,MAAO,EACP,SAAW,GAAM,EAAgB,EAAE,OAAO,KAAqB,WAE9D,EAAsB,IAAK,IAC1B,EAAA,EAAA,IAAA,CAAC,SAAD,CAA2B,MAAO,WAC/B,EAAE,CAAY,CACT,EAFK,CAEL,CACT,CACO,CAAA,CACP,KACL,EAAA,EAAA,IAAA,CAAC,EAAA,WAAD,CAAY,QAAS,CAAuB,CAAA,CACtC,GAEZ"}

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

@@ -0,0 +1 @@
+"use strict";const e=require("./MarkAsRead.js"),t=require("./NotificationFeedHeader.js"),n=require("./NotificationFeed.js");exports.MarkAsRead=e.MarkAsRead,exports.NotificationFeed=n.NotificationFeed,exports.NotificationFeedHeader=t.NotificationFeedHeader;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");;/* empty css            */const o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(t),i=({children:e})=>a.default.createElement("div",{className:"rnf-feed-provider"},e);exports.NotificationFeedContainer=i;
-//# sourceMappingURL=NotificationFeedContainer.js.map
+"use strict";;/* empty css        */let e=require("react/jsx-runtime");var t=({children:t})=>(0,e.jsx)(`div`,{className:`rnf-feed-provider`,children:t});exports.NotificationFeedContainer=t;
+//# sourceMappingURL=NotificationFeedContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedContainer.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode } from \"react\";\n\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: FunctionComponent<{\n  children?: ReactNode | undefined;\n}> = ({ children }) => <div className=\"rnf-feed-provider\">{children}</div>;\n"],"names":["NotificationFeedContainer","children","React"],"mappings":"yMAIaA,EAERA,CAAC,CAAEC,SAAAA,CAAS,IAAOC,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,mBAAA,EAAqBD,CAAS"}
+{"version":3,"file":"NotificationFeedContainer.js","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode } from \"react\";\n\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: FunctionComponent<{\n  children?: ReactNode | undefined;\n}> = ({ children }) => <div className=\"rnf-feed-provider\">{children}</div>;\n"],"mappings":"uEAIA,IAAa,GAEP,CAAE,eAAe,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oBAAqB,UAAc,CAAA"}

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

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