@knocklabs/react 0.1.8 → 0.2.0

package/dist/esm/modules/core/components/Icons/CheckmarkCircle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckmarkCircle.mjs","sources":["../../../../../../src/modules/core/components/Icons/CheckmarkCircle.tsx"],"sourcesContent":["const CheckmarkCircle = () => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M14 8.00012C14 4.68762 11.3125 2.00012 7.99997 2.00012C4.68747 2.00012 1.99997 4.68762 1.99997 8.00012C1.99997 11.3126 4.68747 14.0001 7.99997 14.0001C11.3125 14.0001 14 11.3126 14 8.00012Z\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeMiterlimit=\"10\"\n    />\n    <path\n      d=\"M10.9999 5.5004L6.79994 10.5004L4.99994 8.5004\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport { CheckmarkCircle };\n"],"names":["CheckmarkCircle","jsxs","jsx"],"mappings":";AAAA,MAAMA,IAAkB,MACtB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,kBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AACF;"}

package/dist/esm/modules/core/components/Icons/{ChevronDown.esm.js → ChevronDown.mjs}

@@ -22,4 +22,4 @@ const t = () => /* @__PURE__ */ o(
 export {
   t as ChevronDown
 };
-//# sourceMappingURL=ChevronDown.esm.js.map
+//# sourceMappingURL=ChevronDown.mjs.map

package/dist/esm/modules/core/components/Icons/ChevronDown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronDown.mjs","sources":["../../../../../../src/modules/core/components/Icons/ChevronDown.tsx"],"sourcesContent":["const ChevronDown = () => (\n  <svg\n    width=\"8\"\n    height=\"6\"\n    viewBox=\"0 0 8 6\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M1.74994 1.87512L3.99994 4.12512L6.24994 1.87512\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport { ChevronDown };\n"],"names":["ChevronDown","jsx"],"mappings":";AAAA,MAAMA,IAAc,MAClB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AACF;"}

package/dist/esm/modules/core/components/Icons/{CloseCircle.esm.js → CloseCircle.mjs}

@@ -19,4 +19,4 @@ const l = () => /* @__PURE__ */ C(
 export {
   l as CloseCircle
 };
-//# sourceMappingURL=CloseCircle.esm.js.map
+//# sourceMappingURL=CloseCircle.mjs.map

package/dist/esm/modules/core/components/Icons/CloseCircle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseCircle.mjs","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"sourcesContent":["const CloseCircle = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport { CloseCircle };\n"],"names":["CloseCircle","jsx"],"mappings":";AAAA,MAAMA,IAAc,MAClB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AACF;"}

package/dist/esm/modules/core/components/Spinner/{Spinner.esm.js → Spinner.mjs}

@@ -62,4 +62,4 @@ const m = ({
 export {
   m as Spinner
 };
-//# sourceMappingURL=Spinner.esm.js.map
+//# sourceMappingURL=Spinner.mjs.map

package/dist/esm/modules/core/components/Spinner/Spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.mjs","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import React 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: React.FC<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","jsxs","jsx"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AACjC,SAAIA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAAkC,CAAC;AAAA,EAC9C,OAAAC,IAAQ;AAAA,EACR,OAAAF,IAAQ;AAAA,EACR,KAAAG,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,QAAQF;AAAA,IACR,OAAOA;AAAA,IACN,GAAGC;AAAA,IACJ,OAAO,EAAE,mBAAmB,GAAGP,EAAYC,CAAK,CAAC,KAAK;AAAA,IACtD,WAAU;AAAA,IACV,MAAK;AAAA,IACL,mBAAgB;AAAA,IAChB,SAAQ;AAAA,IAER,UAAA;AAAA,MAAC,gBAAAQ,EAAA,SAAA,EAAM,IAAG,SAAQ,UAAsB,0BAAA;AAAA,MACvC,gBAAAA,EAAA,QAAA,EAAK,IAAG,QAAO,UAA+C,mDAAA;AAAA,MAC/D,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,yBAAyB;AAAA,YACvB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYV;AAAA,QAAA;AAAA,MACF;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,GAAG,KAAKJ,IAAY;AAAA,UACpB,QAAQF;AAAA,UACR,MAAK;AAAA,UACL,aAAaE;AAAA,UACb,iBAAiB,KAAK,KAAK,KAAK,KAAKD;AAAA,UACrC,eAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AACF;"}

package/dist/esm/modules/core/hooks/{useComponentVisible.esm.js → useComponentVisible.mjs}

@@ -15,4 +15,4 @@ function a(e, n, c) {
 export {
   a as default
 };
-//# sourceMappingURL=useComponentVisible.esm.js.map
+//# sourceMappingURL=useComponentVisible.mjs.map

package/dist/esm/modules/core/hooks/useComponentVisible.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentVisible.mjs","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      event.stopPropagation();\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  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","handleClickOutside","useEffect"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAO,SAASC,CAAK,IAD5B;AAEtB;AAMwB,SAAAC,EACtBC,GACAC,GACAC,GACA;AACM,QAAAC,IAAMC,EAAuB,IAAI,GAEjCC,IAAgB,CAACC,MAAyB;AAC1C,IAAAA,EAAM,QAAQ,YAChBL,EAAQK,CAAK;AAAA,EACf,GAGIC,IAAqB,CAACD,MAAiB;AAEzC,IAAAJ,EAAQ,uBACR,CAACN,EAASO,EAAI,SAASG,EAAM,MAAqB,MAElDA,EAAM,gBAAgB,GACtBL,EAAQK,CAAK;AAAA,EACf;AAGF,SAAAE,EAAU,OACJR,MACO,SAAA,iBAAiB,WAAWK,GAAe,EAAI,GAC/C,SAAA,iBAAiB,SAASE,GAAoB,EAAI,IAGtD,MAAM;AACF,aAAA,oBAAoB,WAAWF,GAAe,EAAI,GAClD,SAAA,oBAAoB,SAASE,GAAoB,EAAI;AAAA,EAAA,IAE/D,CAACP,CAAS,CAAC,GAEP,EAAE,KAAAG,EAAI;AACf;"}

package/dist/esm/modules/core/hooks/{useOnBottomScroll.esm.js → useOnBottomScroll.mjs}

@@ -18,4 +18,4 @@ function k(t) {
 export {
   k as default
 };
-//# sourceMappingURL=useOnBottomScroll.esm.js.map
+//# sourceMappingURL=useOnBottomScroll.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\n\ntype OnBottomScrollOptions = {\n  ref: RefObject<HTMLDivElement | undefined>;\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  }, [debouncedCallback]);\n\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.addEventListener(\"scroll\", handleOnScroll);\n    }\n\n    return () => {\n      if (ref.current) {\n        ref.current.removeEventListener(\"scroll\", handleOnScroll);\n      }\n    };\n  }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","scrollNode","scrollContainerBottomPosition","useEffect"],"mappings":";;AASA,MAAMA,IAAO,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnD,QAAAC,IAAWD,EAAQ,YAAYF,GAC/BI,IAAMF,EAAQ,KACdG,IAASH,EAAQ,UAAU,GAE3BI,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAI,SAAS;AACf,YAAMO,IAAaP,EAAI,SACjBQ,IAAgC,KAAK;AAAA,QACzCD,EAAW,YAAYA,EAAW;AAAA,MAAA;AAIpC,MAFuB,KAAK,MAAMA,EAAW,eAAeN,CAAM,KAE5CO,KACFN;IAEtB;AAAA,EAAA,GACC,CAACA,CAAiB,CAAC;AAEtB,EAAAO,EAAU,OACJT,EAAI,WACFA,EAAA,QAAQ,iBAAiB,UAAUK,CAAc,GAGhD,MAAM;AACX,IAAIL,EAAI,WACFA,EAAA,QAAQ,oBAAoB,UAAUK,CAAc;AAAA,EAC1D,IAED,CAACA,CAAc,CAAC;AACrB;"}

package/dist/esm/modules/core/hooks/useOutsideClick.mjs

@@ -0,0 +1,18 @@
+import { useEffect as o } from "react";
+const d = ({
+  ref: t,
+  fn: e,
+  isEnabled: u = !0
+}) => {
+  const n = (i) => {
+    var c;
+    !u || !(t != null && t.current) || (c = t == null ? void 0 : t.current) != null && c.contains(i.target) || e();
+  };
+  o(() => (document.addEventListener("click", n), () => {
+    document.removeEventListener("click", n);
+  }));
+};
+export {
+  d as default
+};
+//# sourceMappingURL=useOutsideClick.mjs.map

package/dist/esm/modules/core/hooks/useOutsideClick.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideClick.mjs","sources":["../../../../../src/modules/core/hooks/useOutsideClick.ts"],"sourcesContent":["import { MutableRefObject, useEffect } from \"react\";\n\nconst useOutsideClick = ({\n  ref,\n  fn,\n  isEnabled = true,\n}: {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: MutableRefObject<any>;\n  fn: () => void;\n  isEnabled?: boolean;\n}) => {\n  const handleClick = (event: MouseEvent) => {\n    if (!isEnabled || !ref?.current || ref?.current?.contains(event.target)) {\n      return;\n    }\n    fn();\n  };\n\n  useEffect(() => {\n    document.addEventListener(\"click\", handleClick);\n\n    return () => {\n      document.removeEventListener(\"click\", handleClick);\n    };\n  });\n};\n\nexport default useOutsideClick;\n"],"names":["useOutsideClick","ref","fn","isEnabled","handleClick","event","_a","useEffect"],"mappings":";AAEA,MAAMA,IAAkB,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,IAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAKM;AACE,QAAAC,IAAc,CAACC,MAAsB;;AACrC,IAAA,CAACF,KAAa,EAACF,KAAA,QAAAA,EAAK,aAAWK,IAAAL,KAAA,gBAAAA,EAAK,YAAL,QAAAK,EAAc,SAASD,EAAM,WAG7DH;EAAA;AAGL,EAAAK,EAAU,OACC,SAAA,iBAAiB,SAASH,CAAW,GAEvC,MAAM;AACF,aAAA,oBAAoB,SAASA,CAAW;AAAA,EAAA,EAEpD;AACH;"}

package/dist/esm/modules/feed/components/EmptyFeed/{EmptyFeed.esm.js → EmptyFeed.mjs}

@@ -11,4 +11,4 @@ const p = () => {
 export {
   p as EmptyFeed
 };
-//# sourceMappingURL=EmptyFeed.esm.js.map
+//# sourceMappingURL=EmptyFeed.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyFeed.mjs","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport \"./styles.css\";\n\nexport const EmptyFeed: React.FC = () => {\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","jsx","jsxs"],"mappings":";;;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA,EAAE,WAAAC,MAAcC,KAChB,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,SAAI,WAAW,kCAAkCJ,CAAS,IACzD,UAAA,gBAAAK,EAAC,OAAI,EAAA,WAAU,yBACb,UAAA;AAAA,IAAA,gBAAAD,EAAC,MAAG,EAAA,WAAU,0BAA0B,UAAAF,EAAE,gBAAgB,GAAE;AAAA,sBAC3D,KAAE,EAAA,WAAU,wBAAwB,UAAAA,EAAE,eAAe,GAAE;AAAA,EAAA,EAC1D,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationCell/{ArchiveButton.esm.js → ArchiveButton.mjs}

@@ -2,7 +2,7 @@ import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { useCallback as m } from "react";
 import { usePopperTooltip as u } from "react-popper-tooltip";
 import { useKnockFeed as v, useTranslations as d } from "@knocklabs/react-core";
-import { CloseCircle as h } from "../../../core/components/Icons/CloseCircle.esm.js";
+import { CloseCircle as h } from "../../../core/components/Icons/CloseCircle.mjs";
 const N = ({ item: o }) => {
   const { colorMode: t, feedClient: n } = v(), { t: e } = d(), c = m(
     (i) => {
@@ -37,4 +37,4 @@ const N = ({ item: o }) => {
 export {
   N as ArchiveButton
 };
-//# sourceMappingURL=ArchiveButton.esm.js.map
+//# sourceMappingURL=ArchiveButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\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\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    [item],\n  );\n\n  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n    usePopperTooltip({ placement: \"top-end\" });\n\n  return (\n    <button\n      ref={setTriggerRef}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle />\n\n      {visible && (\n        <div\n          ref={setTooltipRef}\n          {...getTooltipProps({\n            className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n          })}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","jsxs","jsx","CloseCircle"],"mappings":";;;;;AAUA,MAAMA,IAA8C,CAAC,EAAE,MAAAC,QAAW;AAChE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa,GACzC,EAAE,GAAAC,MAAMC,KAERC,IAAUC;AAAA,IACd,CAACC,MAAqC;AACpC,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAElBN,EAAW,eAAeF,CAAI;AAAA,IAChC;AAAA,IACA,CAACA,CAAI;AAAA,EAAA,GAGD,EAAE,iBAAAS,GAAiB,eAAAC,GAAe,eAAAC,GAAe,SAAAC,MACrDC,EAAiB,EAAE,WAAW,UAAA,CAAW;AAGzC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKH;AAAA,MACL,SAAAL;AAAA,MACA,MAAK;AAAA,MACL,cAAYF,EAAE,qBAAqB;AAAA,MACnC,WAAW,8DAA8DH,CAAS;AAAA,MAElF,UAAA;AAAA,QAAA,gBAAAc,EAACC,GAAY,EAAA;AAAA,QAEZJ,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKL;AAAA,YACJ,GAAGD,EAAgB;AAAA,cAClB,WAAW,4BAA4BR,CAAS;AAAA,YAAA,CACjD;AAAA,YAEA,YAAE,qBAAqB;AAAA,UAAA;AAAA,QAC1B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/modules/feed/components/NotificationCell/{Avatar.esm.js → Avatar.mjs}

@@ -10,4 +10,4 @@ const m = ({ name: r, src: i }) => {
 export {
   m as Avatar
 };
-//# sourceMappingURL=Avatar.esm.js.map
+//# sourceMappingURL=Avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\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={`Image of ${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","jsx"],"mappings":";;AAQO,MAAMA,IAAgC,CAAC,EAAE,MAAAC,GAAM,KAAAC,QAAU;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAK,MAAM,GAAG;AAC5C,WAAOG,KAAaC,IAChB,GAAGD,EAAU,OAAO,CAAC,CAAC,GAAGC,EAAS,OAAO,CAAC,CAAC,KAC3CD,IACEA,EAAU,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAA,gBAAAE,EAAC,SAAI,WAAU,cACZ,cACE,gBAAAA,EAAA,OAAA,EAAI,KAAAJ,GAAU,KAAK,YAAYD,CAAI,IAAI,WAAU,oBAAA,CAAoB,IAErE,gBAAAK,EAAA,QAAA,EAAK,WAAU,wBAAwB,UAAAH,EAAYF,CAAI,EAAE,CAAA,EAE9D,CAAA;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationCell/{NotificationCell.esm.js → NotificationCell.mjs}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
 import i, { useMemo as h } from "react";
-import { Avatar as y } from "./Avatar.esm.js";
-import { ArchiveButton as w } from "./ArchiveButton.esm.js";
+import { Avatar as y } from "./Avatar.mjs";
+import { ArchiveButton as w } from "./ArchiveButton.mjs";
 import { useKnockFeed as x, useTranslations as C, renderNodeOrFallback as m, formatTimestamp as T } from "@knocklabs/react-core";
 
 const I = i.forwardRef(({ item: n, onItemClick: l, avatar: _, children: s, archiveButton: u }, p) => {
@@ -55,4 +55,4 @@ const I = i.forwardRef(({ item: n, onItemClick: l, avatar: _, children: s, archi
 export {
   I as NotificationCell
 };
-//# sourceMappingURL=NotificationCell.esm.js.map
+//# sourceMappingURL=NotificationCell.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ContentBlock, FeedItem } from \"@knocklabs/client\";\nimport { Avatar } from \"./Avatar\";\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport {\n  useKnockFeed,\n  useTranslations,\n  formatTimestamp,\n  renderNodeOrFallback,\n} from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  onItemClick?: (item: FeedItem) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(({ item, onItemClick, avatar, children, archiveButton }, ref) => {\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 && blocksByName.action_url.rendered;\n\n  const onClick = React.useCallback(() => {\n    // Mark as interacted + read once we click the item\n    feedClient.markAsInteracted(item);\n\n    if (onItemClick) return onItemClick(item);\n\n    // Delay when we navigate, until we've actually issued our API call.\n    setTimeout(() => {\n      if (actionUrl && actionUrl !== \"\") {\n        window.location.assign(actionUrl);\n      }\n    }, 200);\n  }, [item]);\n\n  const onKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (ev.key) {\n        case \"Enter\": {\n          ev.stopPropagation();\n          onClick();\n          break;\n        }\n        default:\n          break;\n      }\n    },\n    [onClick],\n  );\n\n  const actor = item.actors[0];\n\n  return (\n    <div\n      ref={ref}\n      className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      tabIndex={0}\n    >\n      <div className=\"rnf-notification-cell__inner\">\n        {!item.read_at && <div className=\"rnf-notification-cell__unread-dot\" />}\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={{ __html: blocksByName.body.rendered }}\n            />\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"],"names":["NotificationCell","React","item","onItemClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","onClick","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","formatTimestamp","ArchiveButton"],"mappings":";;;;;;AAyBa,MAAAA,IAAmBC,EAAM,WAGpC,CAAC,EAAE,MAAAC,GAAM,aAAAC,GAAa,QAAAC,GAAQ,UAAAC,GAAU,eAAAC,EAAc,GAAGC,MAAQ;AACjE,QAAM,EAAE,YAAAC,GAAY,WAAAC,EAAU,IAAIC,EAAa,GACzC,EAAE,QAAAC,MAAWC,KAEbC,IAA4BC,EAAQ,MACjCZ,EAAK,OAAO,OAAO,CAACa,GAAKC,OACvB,EAAE,GAAGD,GAAK,CAACC,EAAM,IAAI,GAAGA,EAAM,IACpC,CAAE,CAAA,GACJ,CAACd,CAAI,CAAC,GAEHe,IAAYJ,EAAa,cAAcA,EAAa,WAAW,UAE/DK,IAAUjB,EAAM,YAAY,MAAM;AAIlC,QAFJO,EAAW,iBAAiBN,CAAI,GAE5BC;AAAa,aAAOA,EAAYD,CAAI;AAGxC,eAAW,MAAM;AACX,MAAAe,KAAaA,MAAc,MACtB,OAAA,SAAS,OAAOA,CAAS;AAAA,OAEjC,GAAG;AAAA,EAAA,GACL,CAACf,CAAI,CAAC,GAEHiB,IAAYlB,EAAM;AAAA,IACtB,CAACmB,MAA4C;AAC3C,cAAQA,EAAG,KAAK;AAAA,QACd,KAAK,SAAS;AACZ,UAAAA,EAAG,gBAAgB,GACXF;AACR;AAAA,QACF;AAAA,MAGF;AAAA,IACF;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJG,IAAQnB,EAAK,OAAO,CAAC;AAGzB,SAAA,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,WAAW,gDAAgDE,CAAS;AAAA,MACpE,SAAAS;AAAA,MACA,WAAAC;AAAA,MACA,UAAU;AAAA,MAEV,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,gCACZ,UAAA;AAAA,QAAA,CAACrB,EAAK,WAAY,gBAAAoB,EAAA,OAAA,EAAI,WAAU,qCAAoC;AAAA,QAEpEE;AAAA,UACCpB;AAAA,UACAiB,KAAS,UAAUA,KAASA,EAAM,QAChC,gBAAAC,EAACG,GAAO,EAAA,MAAMJ,EAAM,MAAM,KAAKA,EAAM,OAAQ,CAAA;AAAA,QAEjD;AAAA,QAEA,gBAAAE,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAA;AAAA,UAAAV,EAAa,QACZ,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,yBAAyB,EAAE,QAAQT,EAAa,KAAK,SAAS;AAAA,YAAA;AAAA,UAChE;AAAA,UAGDR,KACC,gBAAAiB,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAAjB,GACH;AAAA,UAGF,gBAAAiB,EAAC,QAAK,EAAA,WAAU,oCACb,UAAAI,EAAgBxB,EAAK,aAAa,EAAE,QAAAS,EAAO,CAAC,EAC/C,CAAA;AAAA,QAAA,GACF;AAAA,QAECa,EAAqBlB,GAAgB,gBAAAgB,EAAAK,GAAA,EAAc,MAAAzB,EAAY,CAAA,CAAE;AAAA,MAAA,GACpE;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/modules/feed/components/NotificationFeed/{Dropdown.esm.js → Dropdown.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { ChevronDown as t } from "../../../core/components/Icons/ChevronDown.esm.js";
+import { ChevronDown as t } from "../../../core/components/Icons/ChevronDown.mjs";
 import { useKnockFeed as m } from "@knocklabs/react-core";
 
 const l = ({
@@ -16,4 +16,4 @@ const l = ({
 export {
   l as Dropdown
 };
-//# sourceMappingURL=Dropdown.esm.js.map
+//# sourceMappingURL=Dropdown.mjs.map

package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { ChevronDown } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: any) => 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 value={value} onChange={onChange}>\n        {children}\n      </select>\n      <ChevronDown />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","jsxs","jsx","ChevronDown"],"mappings":";;;;AAWO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC;AAEtB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAW,8BAA8BF,CAAS,IACrD,UAAA;AAAA,IAAC,gBAAAG,EAAA,UAAA,EAAO,OAAAL,GAAc,UAAAC,GACnB,UAAAF,EACH,CAAA;AAAA,sBACCO,GAAY,EAAA;AAAA,EACf,EAAA,CAAA;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationFeed/{MarkAsRead.esm.js → MarkAsRead.mjs}

@@ -1,7 +1,7 @@
 import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import * as u from "react";
 import { useKnockFeed as f, useTranslations as k } from "@knocklabs/react-core";
-import { CheckmarkCircle as p } from "../../../core/components/Icons/CheckmarkCircle.esm.js";
+import { CheckmarkCircle as p } from "../../../core/components/Icons/CheckmarkCircle.mjs";
 
 const x = ({ onClick: a }) => {
   const { useFeedStore: r, feedClient: t, colorMode: s } = f(), { t: n } = k(), o = r(
@@ -29,4 +29,4 @@ const x = ({ onClick: a }) => {
 export {
   x as MarkAsRead
 };
-//# sourceMappingURL=MarkAsRead.esm.js.map
+//# sourceMappingURL=MarkAsRead.mjs.map

package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkAsRead.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\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 />\n    </button>\n  );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","item","unreadCount","onClickHandler","React","jsxs","CheckmarkCircle"],"mappings":";;;;;AAWO,MAAMA,IAAwC,CAAC,EAAE,SAAAC,QAAc;AACpE,QAAM,EAAE,cAAAC,GAAc,YAAAC,GAAY,WAAAC,MAAcC,EAAa,GACvD,EAAE,GAAAC,MAAMC,KAERC,IAAcN;AAAA,IAAa,CAACO,MAChCA,EAAM,MAAM,OAAO,CAACC,MAAS,CAACA,EAAK,OAAO;AAAA,EAAA,GAGtCC,IAAcT,EAAa,CAACO,MAAUA,EAAM,SAAS,YAAY,GAEjEG,IAAiBC,EAAM;AAAA,IAC3B,CAAC,MAAwB;AACvB,MAAAV,EAAW,cAAc,GACrBF,KAASA,EAAQ,GAAGO,CAAW;AAAA,IACrC;AAAA,IACA,CAACL,GAAYK,GAAaP,CAAO;AAAA,EAAA;AAIjC,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8CAA8CV,CAAS;AAAA,MAClE,UAAUO,MAAgB;AAAA,MAC1B,SAASC;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAN,EAAE,eAAe;AAAA,0BACjBS,GAAgB,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvB;"}

package/dist/esm/modules/feed/components/NotificationFeed/{NotificationFeed.esm.js → NotificationFeed.mjs}

@@ -1,14 +1,14 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
 import { useState as R, useRef as y, useEffect as k, useCallback as B } from "react";
-import { EmptyFeed as q } from "../EmptyFeed/EmptyFeed.esm.js";
+import { EmptyFeed as q } from "../EmptyFeed/EmptyFeed.mjs";
 import { useKnockFeed as j, useFeedSettings as E, useTranslations as H, FilterStatus as K } from "@knocklabs/react-core";
-import { Spinner as M } from "../../../core/components/Spinner/Spinner.esm.js";
-import { NotificationCell as z } from "../NotificationCell/NotificationCell.esm.js";
+import { Spinner as M } from "../../../core/components/Spinner/Spinner.mjs";
+import { NotificationCell as z } from "../NotificationCell/NotificationCell.mjs";
 
-import { NotificationFeedHeader as A } from "./NotificationFeedHeader.esm.js";
+import { NotificationFeedHeader as A } from "./NotificationFeedHeader.mjs";
 
-import L from "../../../core/hooks/useOnBottomScroll.esm.js";
+import L from "../../../core/hooks/useOnBottomScroll.mjs";
 const O = (t) => /* @__PURE__ */ e(z, { ...t }, t.item.id), P = (t) => /* @__PURE__ */ e(A, { ...t }), h = ({ colorMode: t }) => /* @__PURE__ */ e("div", { className: "rnf-notification-feed__spinner-container", children: /* @__PURE__ */ e(
   M,
   {
@@ -64,4 +64,4 @@ const O = (t) => /* @__PURE__ */ e(z, { ...t }, t.item.id), P = (t) => /* @__PUR
 export {
   ee as NotificationFeed
 };
-//# sourceMappingURL=NotificationFeed.esm.js.map
+//# sourceMappingURL=NotificationFeed.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, isRequestInFlight, NetworkStatus } from \"@knocklabs/client\";\nimport React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport {\n  useKnockFeed,\n  useFeedSettings,\n  ColorMode,\n  FilterStatus,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport { NotificationCell } from \"../NotificationCell\";\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\n\nimport \"./styles.css\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\n\nexport type OnNotificationClick = (item: FeedItem) => void;\nexport type RenderItem = ({ item }: RenderItemProps) => ReactNode;\nexport type RenderItemProps = {\n  item: FeedItem;\n  onItemClick?: OnNotificationClick;\n};\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactElement<any>;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: OnNotificationClick;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\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 LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\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  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\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          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({ item, onItemClick: onNotificationClick }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\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\")}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","jsx","NotificationCell","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","noItems","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","useOnBottomScroll","jsxs","NetworkStatus","item"],"mappings":";;;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MACzB,gBAAAC,EAACC,KAAsC,GAAGF,EAAA,GAAnBA,EAAM,KAAK,EAAe,GAG7CG,IAAsB,CAACH,MAC1B,gBAAAC,EAAAG,GAAA,EAAwB,GAAGJ,EAAO,CAAA,GAG/BK,IAAiB,CAAC,EAAE,WAAAC,EAAA,MACvB,gBAAAL,EAAA,OAAA,EAAI,WAAU,4CACb,UAAA,gBAAAA;AAAA,EAACM;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAOD,MAAc,SAAS,8BAA8B;AAAA,EAAA;AAC9D,EACF,CAAA,GAGIE,IACJ,sGAEWC,KAAoD,CAAC;AAAA,EAChE,gBAAAC,sBAAkBC,GAAU,EAAA;AAAA,EAC5B,YAAAC,IAAab;AAAA,EACb,qBAAAc;AAAA,EACA,sBAAAC;AAAA,EACA,qBAAAC,IAAsBC,EAAa;AAAA,EACnC,QAAAC;AAAA,EACA,cAAAC,IAAef;AACjB,MAAM;AACJ,QAAM,CAACgB,GAAQC,CAAS,IAAIC,EAASN,CAAmB,GAClD,EAAE,YAAAO,GAAY,cAAAC,GAAc,WAAAjB,MAAckB,EAAa,GACvD,EAAE,UAAAC,EAAA,IAAaC,EAAgBJ,CAAU,GACzC,EAAE,GAAAK,MAAMC,KAER,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhD,EAAAC,EAAU,MAAM;AACd,IAAAd,EAAUL,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBmB,EAAU,MAAM;AAEH,IAAAZ,EAAA,MAAM,EAAE,QAAAH,EAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjB,QAAAgB,IAAUL,EAAM,WAAW,GAC3BM,IAAkBC,EAAkBN,CAAa,GAGjDO,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBP,EAAS,SAC/BP,EAAW,cAAc;AAAA,EAE1B,GAAA,CAACc,GAAiBP,GAAUP,CAAU,CAAC;AAIxB,SAAAkB,EAAA;AAAA,IAChB,KAAKR;AAAA,IACL,UAAUM;AAAA,IACV,QAAQ;AAAA,EAAA,CACT,GAGC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gDAAgDnC,CAAS;AAAA,MAEnE,UAAA;AAAA,QAAAW,KACCC,EAAa;AAAA,UACX,iBAAiBE;AAAA,UACjB,cAAcD;AAAA,UACd,sBAAAL;AAAA,QAAA,CACD;AAAA,QAEF,gBAAA2B,EAAA,OAAA,EAAI,WAAU,oCAAmC,KAAKT,GACpD,UAAA;AAAA,UAAAD,MAAkBW,EAAc,WAC9B,gBAAAzC,EAAAI,GAAA,EAAe,WAAAC,GAAsB;AAAA,4BAGvC,OAAI,EAAA,WAAU,+CACZ,UAAkByB,MAAAW,EAAc,WAC/BZ,EAAM;AAAA,YAAI,CAACa,MACT/B,EAAW,EAAE,MAAA+B,GAAM,aAAa9B,GAAqB;AAAA,UAAA,GAE3D;AAAA,UAECkB,MAAkBW,EAAc,aAC/B,gBAAAzC,EAACI,KAAe,WAAAC,GAAsB;AAAA,UAGvC,CAAC8B,KAAmBD,KAAWzB;AAAA,QAAA,GAClC;AAAA,SAECe,KAAA,gBAAAA,EAAU,SAAS,sBACjB,gBAAAxB,EAAA,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAA,EAAC,KAAE,EAAA,MAAMO,GAAmB,QAAO,UAChC,UAAEmB,EAAA,WAAW,EAChB,CAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/modules/feed/components/NotificationFeed/{NotificationFeedHeader.esm.js → NotificationFeedHeader.mjs}

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as n } from "react/jsx-runtime";
 import { FilterStatus as o, useTranslations as d } from "@knocklabs/react-core";
-import { Dropdown as c } from "./Dropdown.esm.js";
-import { MarkAsRead as l } from "./MarkAsRead.esm.js";
+import { Dropdown as c } from "./Dropdown.mjs";
+import { MarkAsRead as l } from "./MarkAsRead.mjs";
 const f = [
   o.All,
   o.Unread,
@@ -30,4 +30,4 @@ const f = [
 export {
   u as NotificationFeedHeader
 };
-//# sourceMappingURL=NotificationFeedHeader.esm.js.map
+//# sourceMappingURL=NotificationFeedHeader.mjs.map

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeedHeader.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import React, { SetStateAction } from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\n\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\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)}\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","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","jsxs","jsx","Dropdown","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB;AAAA,EAC5BC,EAAa;AAAA,EACbA,EAAa;AAAA,EACbA,EAAa;AACf,GAEaC,IAAgE,CAAC;AAAA,EAC5E,sBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,UAAO,EAAA,WAAU,iCAChB,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAU,+BACb,UAAAH,EAAE,eAAe,GACpB;AAAA,MACA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,UAAU,CAAC,MAAMC,EAAgB,EAAE,OAAO,KAAK;AAAA,UAE9C,UAAsBL,EAAA,IAAI,CAACI,MACzB,gBAAAK,EAAA,UAAA,EAA0B,OAAOL,GAC/B,UAAEA,EAAAA,CAAY,EADJA,GAAAA,CAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,IACA,gBAAAK,EAACE,GAAW,EAAA,SAASR,EAAsB,CAAA;AAAA,EAC7C,EAAA,CAAA;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationFeedContainer/{NotificationFeedContainer.esm.js → NotificationFeedContainer.mjs}

@@ -6,4 +6,4 @@ const t = ({
 export {
   t as NotificationFeedContainer
 };
-//# sourceMappingURL=NotificationFeedContainer.esm.js.map
+//# sourceMappingURL=NotificationFeedContainer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeedContainer.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","jsx"],"mappings":";;AAGO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AACF,MACU,gBAAAC,EAAA,OAAA,EAAI,WAAU,qBAAqB,UAAAD,EAAS,CAAA;"}

package/dist/esm/modules/feed/components/NotificationFeedPopover/{NotificationFeedPopover.esm.js → NotificationFeedPopover.mjs}

@@ -1,11 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useEffect as v } from "react";
 import { usePopper as x } from "react-popper";
-import { NotificationFeed as y } from "../NotificationFeed/NotificationFeed.esm.js";
-import "../NotificationFeed/NotificationFeedHeader.esm.js";
+import { NotificationFeed as y } from "../NotificationFeed/NotificationFeed.mjs";
+import "../NotificationFeed/NotificationFeedHeader.mjs";
 import { useKnockFeed as F } from "@knocklabs/react-core";
 
-import N from "../../../core/hooks/useComponentVisible.esm.js";
+import N from "../../../core/hooks/useComponentVisible.mjs";
 
 const b = ({ store: e, feedClient: o }) => {
   e.metadata.unseen_count > 0 && o.markAllAsSeen();
@@ -57,4 +57,4 @@ const b = ({ store: e, feedClient: o }) => {
 export {
   E as NotificationFeedPopover
 };
-//# sourceMappingURL=NotificationFeedPopover.esm.js.map
+//# sourceMappingURL=NotificationFeedPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\n\nimport \"./styles.css\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Feed, FeedStoreState } from \"@knocklabs/client\";\n\ntype OnOpenOptions = {\n  store: FeedStoreState;\n  feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n  if (store.metadata.unseen_count > 0) {\n    feedClient.markAllAsSeen();\n  }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n  isVisible: boolean;\n  onOpen?: (arg: OnOpenOptions) => void;\n  onClose: (e: Event) => void;\n  buttonRef: RefObject<HTMLElement>;\n  closeOnClickOutside?: boolean;\n  placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n  NotificationFeedPopoverProps\n> = ({\n  isVisible,\n  onOpen = defaultOnOpen,\n  onClose,\n  buttonRef,\n  closeOnClickOutside = true,\n  placement = \"bottom-end\",\n  ...feedProps\n}) => {\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n    closeOnClickOutside,\n  });\n\n  const { styles, attributes } = usePopper(\n    buttonRef.current,\n    popperRef.current,\n    {\n      strategy: \"fixed\",\n      placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 8],\n          },\n        },\n      ],\n    },\n  );\n\n  useEffect(() => {\n    // Whenever the feed is opened, we want to invoke the `onOpen` callback\n    // function to handle any side effects.\n    if (isVisible && onOpen) {\n      onOpen({ store, feedClient });\n    }\n  }, [isVisible]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        ...styles.popper,\n        visibility: isVisible ? \"visible\" : \"hidden\",\n      }}\n      ref={popperRef}\n      {...attributes.popper}\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"names":["defaultOnOpen","store","feedClient","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","popperRef","useComponentVisible","styles","attributes","usePopper","useEffect","jsx","NotificationFeed"],"mappings":";;;;;;;;;AAeA,MAAMA,IAAgB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAgC;AAC1D,EAAAD,EAAM,SAAS,eAAe,KAChCC,EAAW,cAAc;AAE7B,GAWaC,IAET,CAAC;AAAA,EACH,WAAAC;AAAA,EACA,QAAAC,IAASL;AAAA,EACT,SAAAM;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAT,GAAY,cAAAU,MAAiBC,EAAa,GACvDZ,IAAQW,KAER,EAAE,KAAKE,EAAA,IAAcC,EAAoBX,GAAWE,GAAS;AAAA,IACjE,qBAAAE;AAAA,EAAA,CACD,GAEK,EAAE,QAAAQ,GAAQ,YAAAC,EAAA,IAAeC;AAAA,IAC7BX,EAAU;AAAA,IACVO,EAAU;AAAA,IACV;AAAA,MACE,UAAU;AAAA,MACV,WAAAL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,UACE,MAAM;AAAA,UACN,SAAS;AAAA,YACP,QAAQ,CAAC,GAAG,CAAC;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGF,SAAAU,EAAU,MAAM;AAGd,IAAIf,KAAaC,KACRA,EAAA,EAAE,OAAAJ,GAAO,YAAAC,EAAA,CAAY;AAAA,EAC9B,GACC,CAACE,CAAS,CAAC,GAGZ,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gEAAgET,CAAS;AAAA,MACpF,OAAO;AAAA,QACL,GAAGK,EAAO;AAAA,QACV,YAAYZ,IAAY,YAAY;AAAA,MACtC;AAAA,MACA,KAAKU;AAAA,MACJ,GAAGG,EAAW;AAAA,MACf,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA,gBAAAG,EAAC,SAAI,WAAU,wCACb,4BAACC,GAAkB,EAAA,GAAGX,GAAW,EACnC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/modules/feed/components/NotificationIconButton/{NotificationIconButton.esm.js → NotificationIconButton.mjs}

@@ -1,8 +1,8 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import c from "react";
-import { BellIcon as f } from "../../../core/components/Icons/Bell.esm.js";
+import { BellIcon as f } from "../../../core/components/Icons/Bell.mjs";
 import { useKnockFeed as a } from "@knocklabs/react-core";
-import { UnseenBadge as m } from "../UnseenBadge/UnseenBadge.esm.js";
+import { UnseenBadge as m } from "../UnseenBadge/UnseenBadge.mjs";
 
 const x = c.forwardRef(({ onClick: t, badgeCountType: n }, i) => {
   const { colorMode: r } = a();
@@ -24,4 +24,4 @@ const x = c.forwardRef(({ onClick: t, badgeCountType: n }, i) => {
 export {
   x as NotificationIconButton
 };
-//# sourceMappingURL=NotificationIconButton.esm.js.map
+//# sourceMappingURL=NotificationIconButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import React, { SyntheticEvent } from \"react\";\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      role=\"button\"\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","onClick","badgeCountType","ref","colorMode","useKnockFeed","jsxs","jsx","BellIcon","UnseenBadge"],"mappings":";;;;;;AAaa,MAAAA,IAAyBC,EAAM,WAG1C,CAAC,EAAE,SAAAC,GAAS,gBAAAC,KAAkBC,MAAQ;AAChC,QAAA,EAAE,WAAAC,MAAcC;AAGpB,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8DAA8DF,CAAS;AAAA,MAClF,MAAK;AAAA,MACL,cAAW;AAAA,MACX,KAAAD;AAAA,MACA,SAAAF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAS,EAAA;AAAA,QACV,gBAAAD,EAACE,KAAY,gBAAAP,GAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD,CAAC;"}

package/dist/esm/modules/feed/components/UnseenBadge/{UnseenBadge.esm.js → UnseenBadge.mjs}

@@ -22,4 +22,4 @@ const i = ({
 export {
   i as UnseenBadge
 };
-//# sourceMappingURL=UnseenBadge.esm.js.map
+//# sourceMappingURL=UnseenBadge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnseenBadge.mjs","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { useKnockFeed, formatBadgeCount } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\nimport { FeedMetadata } from \"@knocklabs/client\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n) {\n  switch (badgeCountType) {\n    case \"all\":\n      return metadata.total_count;\n    case \"unread\":\n      return metadata.unread_count;\n    case \"unseen\":\n      return metadata.unseen_count;\n  }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n  badgeCountType = \"unseen\",\n}) => {\n  const { useFeedStore } = useKnockFeed();\n  const badgeCountValue = useFeedStore((state) =>\n    selectBadgeCount(badgeCountType, state.metadata),\n  );\n\n  return badgeCountValue !== 0 ? (\n    <div className=\"rnf-unseen-badge\">\n      <span className=\"rnf-unseen-badge__count\">\n        {formatBadgeCount(badgeCountValue)}\n      </span>\n    </div>\n  ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","jsx","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAgB;AAAA,IACtB,KAAK;AACH,aAAOC,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,EACpB;AACF;AAEO,MAAMC,IAA0C,CAAC;AAAA,EACtD,gBAAAF,IAAiB;AACnB,MAAM;AACE,QAAA,EAAE,cAAAG,MAAiBC,KACnBC,IAAkBF;AAAA,IAAa,CAACG,MACpCP,EAAiBC,GAAgBM,EAAM,QAAQ;AAAA,EAAA;AAGjD,SAAOD,MAAoB,IACxB,gBAAAE,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA,gBAAAA,EAAC,QAAK,EAAA,WAAU,2BACb,UAAAC,EAAiBH,CAAe,EACnC,CAAA,GACF,IACE;AACN;"}

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

@@ -0,0 +1,51 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useTranslations as C } from "@knocklabs/react-core";
+import { useState as i } from "react";
+import { Spinner as x } from "../../../core/components/Spinner/Spinner.mjs";
+
+import "lodash.debounce";
+
+import _ from "../SlackChannelCombobox/SlackConnectionError.mjs";
+import { SlackIcon as S } from "../SlackIcon/SlackIcon.mjs";
+
+const w = ({
+  inErrorState: h,
+  connectedChannels: a = [],
+  updateConnectedChannels: p,
+  connectedChannelsError: d,
+  connectedChannelsUpdating: m
+}) => {
+  const { t } = C(), [n, o] = i(null), [r, c] = i(null), u = () => {
+    if (!n)
+      return;
+    if (r && c(null), a.find(
+      (f) => f.channel_id === n
+    ))
+      return o(""), c(t("slackChannelAlreadyConnected") || "");
+    const k = [...a, { channel_id: n }];
+    p(k), o("");
+  };
+  return /* @__PURE__ */ s("div", { className: "rsk-connect-channel", children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        className: `rsk-connect-channel__input ${(h || !!r) && !n && "rsk-connect-channel__input--error"}`,
+        tabIndex: -1,
+        id: "slack-channel-search",
+        type: "text",
+        placeholder: r || d || t("slackChannelId"),
+        onChange: (l) => o(l.target.value),
+        value: n || ""
+      }
+    ),
+    /* @__PURE__ */ s("button", { className: "rsk-connect-channel__button", onClick: u, children: [
+      m ? /* @__PURE__ */ e(x, { size: "15px", thickness: 3 }) : /* @__PURE__ */ e(S, { height: "16px", width: "16px" }),
+      t("slackConnectChannel")
+    ] }),
+    /* @__PURE__ */ e(_, {})
+  ] });
+};
+export {
+  w as default
+};
+//# sourceMappingURL=SlackAddChannelInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlackAddChannelInput.mjs","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nconst SlackAddChannelInput = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\n}: {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}) => {\n  const { t } = useTranslations();\n  const [value, setValue] = useState<string | null>(null);\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  const submitChannel = () => {\n    if (!value) {\n      return;\n    }\n\n    if (localError) {\n      setLocalError(null);\n    }\n\n    const alreadyConnected = connectedChannels.find(\n      (channel) => channel.channel_id === value,\n    );\n\n    if (alreadyConnected) {\n      setValue(\"\");\n      return setLocalError(t(\"slackChannelAlreadyConnected\") || \"\");\n    }\n\n    const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n    updateConnectedChannels(channelsToSendToKnock);\n    setValue(\"\");\n  };\n\n  return (\n    <div className=\"rsk-connect-channel\">\n      <input\n        className={`rsk-connect-channel__input ${(inErrorState || !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n        tabIndex={-1}\n        id=\"slack-channel-search\"\n        type=\"text\"\n        placeholder={\n          localError || connectedChannelsError || t(\"slackChannelId\")\n        }\n        onChange={(e) => setValue(e.target.value)}\n        value={value || \"\"}\n      />\n      <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n        {connectedChannelsUpdating ? (\n          <Spinner size=\"15px\" thickness={3} />\n        ) : (\n          <SlackIcon height=\"16px\" width=\"16px\" />\n        )}\n        {t(\"slackConnectChannel\")}\n      </button>\n      <ConnectionErrorInfoBoxes />\n    </div>\n  );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","channel","channelsToSendToKnock","jsxs","jsx","e","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,cAAAC;AAAA,EACA,mBAAAC,IAAoB,CAAC;AAAA,EACrB,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,2BAAAC;AACF,MAMM;AACE,QAAA,EAAE,MAAMC,KACR,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAE1DG,IAAgB,MAAM;AAC1B,QAAI,CAACL;AACH;AAWF,QARIG,KACFC,EAAc,IAAI,GAGKT,EAAkB;AAAA,MACzC,CAACW,MAAYA,EAAQ,eAAeN;AAAA,IAAA;AAIpC,aAAAC,EAAS,EAAE,GACJG,EAAc,EAAE,8BAA8B,KAAK,EAAE;AAG9D,UAAMG,IAAwB,CAAC,GAAGZ,GAAmB,EAAE,YAAYK,GAAO;AAC1E,IAAAJ,EAAwBW,CAAqB,GAC7CN,EAAS,EAAE;AAAA,EAAA;AAIX,SAAA,gBAAAO,EAAC,OAAI,EAAA,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,+BAA+Bf,KAAgB,CAAC,CAACS,MAAe,CAACH,KAAS,mCAAmC;AAAA,QACxH,UAAU;AAAA,QACV,IAAG;AAAA,QACH,MAAK;AAAA,QACL,aACEG,KAAcN,KAA0B,EAAE,gBAAgB;AAAA,QAE5D,UAAU,CAACa,MAAMT,EAASS,EAAE,OAAO,KAAK;AAAA,QACxC,OAAOV,KAAS;AAAA,MAAA;AAAA,IAClB;AAAA,IACC,gBAAAQ,EAAA,UAAA,EAAO,WAAU,+BAA8B,SAASH,GACtD,UAAA;AAAA,MAAAP,IACE,gBAAAW,EAAAE,GAAA,EAAQ,MAAK,QAAO,WAAW,EAAA,CAAG,IAEnC,gBAAAF,EAACG,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,MAEvC,EAAE,qBAAqB;AAAA,IAAA,GAC1B;AAAA,sBACCC,GAAyB,EAAA;AAAA,EAC5B,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useTranslations as b, useKnockClient as f, useKnockSlackClient as x, useSlackAuth as L } from "@knocklabs/react-core";
+import { useEffect as C } from "react";
+
+import { SlackIcon as a } from "../SlackIcon/SlackIcon.mjs";
+
+const m = (d) => {
+  const s = window.screenLeft ?? window.screenX, c = window.screenTop ?? window.screenY, e = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, o = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, i = e / 2 - 600 / 2 + s, r = `width=600,height=800,top=${o / 2 - 800 / 2 + c},left=${i}`;
+  window.open(d, "Slack OAuth", r);
+}, H = ({
+  slackClientId: d,
+  redirectUrl: u
+}) => {
+  const { t: n } = b(), s = f(), {
+    setConnectionStatus: c,
+    connectionStatus: e,
+    setActionLabel: o,
+    actionLabel: i,
+    errorLabel: k
+  } = x(), { buildSlackAuthUrl: r, disconnectFromSlack: w } = L(
+    d,
+    u
+  );
+  C(() => {
+    const p = (h) => {
+      if (h.origin === s.host)
+        try {
+          h.data === "authComplete" && c("connected"), h.data === "authFailed" && c("error");
+        } catch {
+          c("error");
+        }
+    };
+    return window.addEventListener("message", p, !1), () => {
+      window.removeEventListener("message", p);
+    };
+  }, [s.host, c]);
+  const _ = n("slackDisconnect") || null, g = n("slackReconnect") || null;
+  return e === "connecting" || e === "disconnecting" ? /* @__PURE__ */ l("div", { className: "rsk-connect__button rsk-connect__button--loading", children: [
+    /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+    /* @__PURE__ */ t("span", { children: n(e === "connecting" ? "slackConnecting" : "slackDisconnecting") })
+  ] }) : e === "error" ? /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: () => m(r()),
+      className: "rsk-connect__button rsk-connect__button--error",
+      onMouseEnter: () => o(g),
+      onMouseLeave: () => o(null),
+      children: [
+        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--error", children: i || k || n("slackError") })
+      ]
+    }
+  ) : e === "disconnected" ? /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: () => m(r()),
+      className: "rsk-connect__button rsk-connect__button--disconnected",
+      children: [
+        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { children: n("slackConnect") })
+      ]
+    }
+  ) : /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: w,
+      className: "rsk-connect__button rsk-connect__button--connected",
+      onMouseEnter: () => o(_),
+      onMouseLeave: () => o(null),
+      children: [
+        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--connected", children: i || n("slackConnected") })
+      ]
+    }
+  );
+};
+export {
+  H as SlackAuthButton
+};
+//# sourceMappingURL=SlackAuthButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\ntype Props = {\n  slackClientId: string;\n  redirectUrl?: string;\n};\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: React.FC<Props> = ({\n  slackClientId,\n  redirectUrl,\n}) => {\n  const { t } = useTranslations();\n  const knock = useKnockClient();\n\n  const {\n    setConnectionStatus,\n    connectionStatus,\n    setActionLabel,\n    actionLabel,\n    errorLabel,\n  } = useKnockSlackClient();\n\n  const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n    slackClientId,\n    redirectUrl,\n  );\n\n  useEffect(() => {\n    const receiveMessage = (event: MessageEvent) => {\n      if (event.origin !== knock.host) {\n        return;\n      }\n\n      try {\n        if (event.data === \"authComplete\") {\n          setConnectionStatus(\"connected\");\n        }\n\n        if (event.data === \"authFailed\") {\n          setConnectionStatus(\"error\")\n        }\n      } catch (error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    window.addEventListener(\"message\", receiveMessage, false);\n\n    // Cleanup the event listener when the component unmounts\n    return () => {\n      window.removeEventListener(\"message\", receiveMessage);\n    };\n  }, [knock.host, setConnectionStatus]);\n\nconst disconnectLabel = t(\"slackDisconnect\") || null\nconst reconnectLabel = t(\"slackReconnect\") || null\n\n  // Loading states\n  if (\n    connectionStatus === \"connecting\" ||\n    connectionStatus === \"disconnecting\"\n  ) {\n    return (\n      <div className=\"rsk-connect__button rsk-connect__button--loading\">\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>\n          {connectionStatus === \"connecting\"\n            ? t(\"slackConnecting\")\n            : t(\"slackDisconnecting\")}\n        </span>\n      </div>\n    );\n  }\n\n  // Error state\n  if (connectionStatus === \"error\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--error\"\n        onMouseEnter={() => setActionLabel(reconnectLabel)}\n        onMouseLeave={() => setActionLabel(null)}\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span className=\"rsk-connect__button__text--error\">\n          {actionLabel || errorLabel || t(\"slackError\")}\n        </span>\n      </button>\n    );\n  }\n\n  // Disconnected state\n  if (connectionStatus === \"disconnected\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--disconnected\"\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>{t(\"slackConnect\")}</span>\n      </button>\n    );\n  }\n\n  // Connected state\n  return (\n    <button\n      onClick={disconnectFromSlack}\n      className=\"rsk-connect__button rsk-connect__button--connected\"\n      onMouseEnter={() => setActionLabel(disconnectLabel)}\n      onMouseLeave={() => setActionLabel(null)}\n    >\n      <SlackIcon height=\"16px\" width=\"16px\" />\n      <span className=\"rsk-connect__button__text--connected\">\n        {actionLabel || t(\"slackConnected\")}\n      </span>\n    </button>\n  );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","screenTop","innerWidth","innerHeight","left","features","SlackAuthButton","slackClientId","redirectUrl","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":";;;;;;AAkBA,MAAMA,IAAsB,CAACC,MAAgB;AAIrC,QAAAC,IAAa,OAAO,cAAc,OAAO,SACzCC,IAAY,OAAO,aAAa,OAAO,SAEvCC,IACJ,OAAO,cAAc,SAAS,gBAAgB,eAAe,OAAO,OAChEC,IACJ,OAAO,eACP,SAAS,gBAAgB,gBACzB,OAAO,QAEHC,IAAOF,IAAa,IAAI,MAAQ,IAAIF,GAIpCK,IAAW,4BAHLF,IAAc,IAAI,MAAS,IAAIF,CAGgB,SAASG,CAAI;AAEjE,SAAA,KAAKL,GAAK,eAAeM,CAAQ;AAC1C,GAEaC,IAAmC,CAAC;AAAA,EAC/C,eAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC,KACRC,IAAQC,KAER;AAAA,IACJ,qBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,MACEC,EAAoB,GAElB,EAAE,mBAAAC,GAAmB,qBAAAC,EAAA,IAAwBC;AAAA,IACjDd;AAAA,IACAC;AAAA,EAAA;AAGF,EAAAc,EAAU,MAAM;AACR,UAAAC,IAAiB,CAACC,MAAwB;AAC1C,UAAAA,EAAM,WAAWb,EAAM;AAIvB,YAAA;AACE,UAAAa,EAAM,SAAS,kBACjBX,EAAoB,WAAW,GAG7BW,EAAM,SAAS,gBACjBX,EAAoB,OAAO;AAAA,gBAEf;AACd,UAAAA,EAAoB,OAAO;AAAA,QAC7B;AAAA,IAAA;AAGK,kBAAA,iBAAiB,WAAWU,GAAgB,EAAK,GAGjD,MAAM;AACJ,aAAA,oBAAoB,WAAWA,CAAc;AAAA,IAAA;AAAA,EAErD,GAAA,CAACZ,EAAM,MAAME,CAAmB,CAAC;AAEhC,QAAAY,IAAkBhB,EAAE,iBAAiB,KAAK,MAC1CiB,IAAiBjB,EAAE,gBAAgB,KAAK;AAI1C,SAAAK,MAAqB,gBACrBA,MAAqB,kBAGnB,gBAAAa,EAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,IACtC,gBAAAD,EAAC,UACE,UACGnB,EADkBK,MAAA,eAChB,oBACA,oBADiB,EAEzB,CAAA;AAAA,EACF,EAAA,CAAA,IAKAA,MAAqB,UAErB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM7B,EAAoBqB,GAAmB;AAAA,MACtD,WAAU;AAAA,MACV,cAAc,MAAMJ,EAAeW,CAAc;AAAA,MACjD,cAAc,MAAMX,EAAe,IAAI;AAAA,MAEvC,UAAA;AAAA,QAAA,gBAAAa,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,QACtC,gBAAAD,EAAC,UAAK,WAAU,oCACb,eAAeX,KAAcR,EAAE,YAAY,GAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMFK,MAAqB,iBAErB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM7B,EAAoBqB,GAAmB;AAAA,MACtD,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAS,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,QACrC,gBAAAD,EAAA,QAAA,EAAM,UAAEnB,EAAA,cAAc,EAAE,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAO7B,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASP;AAAA,MACT,WAAU;AAAA,MACV,cAAc,MAAML,EAAeU,CAAe;AAAA,MAClD,cAAc,MAAMV,EAAe,IAAI;AAAA,MAEvC,UAAA;AAAA,QAAA,gBAAAa,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,0BACrC,QAAK,EAAA,WAAU,wCACb,UAAeb,KAAAP,EAAE,gBAAgB,GACpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,22 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useTranslations as a } from "@knocklabs/react-core";
+
+import { SlackIcon as e } from "../SlackIcon/SlackIcon.mjs";
+
+const d = ({
+  actionButton: t
+}) => {
+  const { t: s } = a();
+  return /* @__PURE__ */ i("div", { className: "rsk-auth", children: [
+    /* @__PURE__ */ i("div", { className: "rsk-auth__header", children: [
+      /* @__PURE__ */ r(e, { height: "32px", width: "32px" }),
+      /* @__PURE__ */ r("div", { children: t })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "rsk-auth__title", children: "Slack" }),
+    /* @__PURE__ */ r("div", { className: "rsk-auth__description", children: s("slackConnectContainerDescription") })
+  ] });
+};
+export {
+  d as SlackAuthContainer
+};
+//# sourceMappingURL=SlackAuthContainer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlackAuthContainer.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthContainer/SlackAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport const SlackAuthContainer = ({\n  actionButton,\n}: {\n  actionButton: React.ReactElement;\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <div className=\"rsk-auth\">\n      <div className=\"rsk-auth__header\">\n        <SlackIcon height=\"32px\" width=\"32px\" />\n        <div>{actionButton}</div>\n      </div>\n      <div className=\"rsk-auth__title\">Slack</div>\n      <div className=\"rsk-auth__description\">\n        {t(\"slackConnectContainerDescription\")}\n      </div>\n    </div>\n  );\n};\n"],"names":["SlackAuthContainer","actionButton","t","useTranslations","jsxs","jsx","SlackIcon"],"mappings":";;;;;AAOO,MAAMA,IAAqB,CAAC;AAAA,EACjC,cAAAC;AACF,MAEM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,MACtC,gBAAAD,EAAC,SAAK,UAAaJ,EAAA,CAAA;AAAA,IAAA,GACrB;AAAA,IACC,gBAAAI,EAAA,OAAA,EAAI,WAAU,mBAAkB,UAAK,SAAA;AAAA,sBACrC,OAAI,EAAA,WAAU,yBACZ,UAAAH,EAAE,kCAAkC,GACvC;AAAA,EACF,EAAA,CAAA;AAEJ;"}