@knocklabs/react 0.1.0

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/esm/modules/core/components/Button/Button.mjs

@@ -0,0 +1,38 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { useKnockFeed as m } from "@knocklabs/react-core";
+import { ButtonSpinner as c } from "./ButtonSpinner.mjs";
+
+const j = ({
+  variant: r = "primary",
+  loadingText: o,
+  isLoading: t = !1,
+  isDisabled: s = !1,
+  isFullWidth: u = !1,
+  onClick: a,
+  children: n
+}) => {
+  const { colorMode: f } = m(), l = [
+    "rnf-button",
+    `rnf-button--${r}`,
+    u ? "rnf-button--full-width" : "",
+    t ? "rnf-button--is-loading" : "",
+    `rnf-button--${f}`
+  ].join(" ");
+  return /* @__PURE__ */ b(
+    "button",
+    {
+      onClick: a,
+      className: l,
+      disabled: t || s,
+      type: "button",
+      children: [
+        t && /* @__PURE__ */ e(c, { hasLabel: !!o }),
+        t ? o || /* @__PURE__ */ e("span", { className: "rnf-button__button-text-hidden", children: n }) : n
+      ]
+    }
+  );
+};
+export {
+  j as Button
+};
+//# sourceMappingURL=Button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { ButtonSpinner } from \"./ButtonSpinner\";\n\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n  variant: \"primary\" | \"secondary\";\n  loadingText?: string;\n  isLoading?: boolean;\n  isDisabled?: boolean;\n  isFullWidth?: boolean;\n  onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: React.FC<PropsWithChildren<ButtonProps>> = ({\n  variant = \"primary\",\n  loadingText,\n  isLoading = false,\n  isDisabled = false,\n  isFullWidth = false,\n  onClick,\n  children,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  const classNames = [\n    \"rnf-button\",\n    `rnf-button--${variant}`,\n    isFullWidth ? \"rnf-button--full-width\" : \"\",\n    isLoading ? \"rnf-button--is-loading\" : \"\",\n    `rnf-button--${colorMode}`,\n  ].join(\" \");\n\n  // In this case when there's no loading text, we still want to display the original\n  // content of the button, but make it hidden. That allows us to keep the button width\n  // consistent and show the spinner in the middle, meaning no layout shift.\n  const textToShowWhileLoading = loadingText || (\n    <span className=\"rnf-button__button-text-hidden\">{children}</span>\n  );\n\n  return (\n    <button\n      onClick={onClick}\n      className={classNames}\n      disabled={isLoading || isDisabled}\n      type=\"button\"\n    >\n      {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n      {isLoading ? textToShowWhileLoading : children}\n    </button>\n  );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","jsxs","jsx","ButtonSpinner"],"mappings":";;;;AAeO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC,KAEhBC,IAAa;AAAA,IACjB;AAAA,IACA,eAAeT,CAAO;AAAA,IACtBI,IAAc,2BAA2B;AAAA,IACzCF,IAAY,2BAA2B;AAAA,IACvC,eAAeK,CAAS;AAAA,EAAA,EACxB,KAAK,GAAG;AAUR,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWI;AAAA,MACX,UAAUP,KAAaC;AAAA,MACvB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAD,KAAc,gBAAAS,EAAAC,GAAA,EAAc,UAAU,CAAC,CAACX,GAAa;AAAA,QACrDC,IAZ0BD,KAC7B,gBAAAU,EAAC,QAAK,EAAA,WAAU,kCAAkC,UAAAL,EAAS,CAAA,IAWnBA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5C;"}

package/dist/esm/modules/core/components/Button/ButtonGroup.mjs

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+
+const m = ({ children: o }) => /* @__PURE__ */ t("div", { className: "rnf-button-group", children: o });
+export {
+  m as ButtonGroup
+};
+//# sourceMappingURL=ButtonGroup.mjs.map

package/dist/esm/modules/core/components/Button/ButtonGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.mjs","sources":["../../../../../../src/modules/core/components/Button/ButtonGroup.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport \"./styles.css\";\n\nexport const ButtonGroup: React.FC<PropsWithChildren> = ({ children }) => (\n  <div className=\"rnf-button-group\">{children}</div>\n);\n"],"names":["ButtonGroup","children","jsx"],"mappings":";;AAIa,MAAAA,IAA2C,CAAC,EAAE,UAAAC,QACxD,gBAAAC,EAAA,OAAA,EAAI,WAAU,oBAAoB,UAAAD,EAAS,CAAA;"}

package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs

@@ -0,0 +1,14 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Spinner as r } from "../Spinner/Spinner.mjs";
+
+const p = ({ hasLabel: t }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: `rnf-button-spinner rnf-button-spinner--${t ? "with-label" : "without-label"}`,
+    children: /* @__PURE__ */ n(r, {})
+  }
+);
+export {
+  p as ButtonSpinner
+};
+//# sourceMappingURL=ButtonSpinner.mjs.map

package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSpinner.mjs","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"sourcesContent":["import React from \"react\";\nimport { Spinner } from \"../Spinner\";\n\nimport \"./styles.css\";\n\ntype ButtonSpinnerProps = {\n  hasLabel: boolean;\n};\n\nexport const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({ hasLabel }) => (\n  <div\n    className={`rnf-button-spinner rnf-button-spinner--${\n      hasLabel ? \"with-label\" : \"without-label\"\n    }`}\n  >\n    <Spinner />\n  </div>\n);\n"],"names":["ButtonSpinner","hasLabel","jsx","Spinner"],"mappings":";;;AASO,MAAMA,IAA8C,CAAC,EAAE,UAAAC,EAAA,MAC5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,0CACTD,IAAW,eAAe,eAC5B;AAAA,IAEA,4BAACE,GAAQ,EAAA;AAAA,EAAA;AACX;"}

package/dist/esm/modules/core/components/Button/styles.css.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styles.css.mjs.map

package/dist/esm/modules/core/components/Button/styles.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/modules/core/components/Icons/Bell.mjs

@@ -0,0 +1,29 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+function C({ width: r = 24, height: e = 24 }) {
+  return /* @__PURE__ */ n("svg", { width: r, viewBox: "0 0 24 24", fill: "none", height: e, children: [
+    /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+export {
+  C as BellIcon
+};
+//# sourceMappingURL=Bell.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Bell.mjs","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"sourcesContent":["function BellIcon({ width = 24, height = 24 }) {\n  return (\n    <svg width={width} viewBox=\"0 0 24 24\" fill=\"none\" height={height}>\n      <path\n        d=\"M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport { BellIcon };\n"],"names":["BellIcon","width","height","jsx"],"mappings":";AAAA,SAASA,EAAS,EAAE,OAAAC,IAAQ,IAAI,QAAAC,IAAS,MAAM;AAC7C,2BACG,OAAI,EAAA,OAAAD,GAAc,SAAQ,aAAY,MAAK,QAAO,QAAAC,GACjD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,IACA,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,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,36 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+const e = () => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ r(
+        "path",
+        {
+          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",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeMiterlimit: "10"
+        }
+      ),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M10.9999 5.5004L6.79994 10.5004L4.99994 8.5004",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+export {
+  e as CheckmarkCircle
+};
+//# sourceMappingURL=CheckmarkCircle.mjs.map

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.mjs

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+const t = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "8",
+    height: "6",
+    viewBox: "0 0 8 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M1.74994 1.87512L3.99994 4.12512L6.24994 1.87512",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+export {
+  t as ChevronDown
+};
+//# 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.mjs

@@ -0,0 +1,22 @@
+import { jsx as C } from "react/jsx-runtime";
+const l = () => /* @__PURE__ */ C(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ C(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+export {
+  l as CloseCircle
+};
+//# 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.mjs

@@ -0,0 +1,65 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+function c(i) {
+  return i === "fast" ? 600 : i === "slow" ? 900 : 750;
+}
+const m = ({
+  color: i = "rgba(0,0,0,0.4)",
+  speed: t = "medium",
+  gap: a = 4,
+  thickness: n = 4,
+  size: r = "1em",
+  ...o
+}) => /* @__PURE__ */ s(
+  "svg",
+  {
+    height: r,
+    width: r,
+    ...o,
+    style: { animationDuration: `${c(t)}ms` },
+    className: "__react-svg-spinner_circle",
+    role: "img",
+    "aria-labelledby": "title desc",
+    viewBox: "0 0 32 32",
+    children: [
+      /* @__PURE__ */ e("title", { id: "title", children: "Circle loading spinner" }),
+      /* @__PURE__ */ e("desc", { id: "desc", children: 'Image of a partial circle indicating "loading."' }),
+      /* @__PURE__ */ e(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `
+      .__react-svg-spinner_circle{
+          transition-property: transform;
+          animation-name: __react-svg-spinner_infinite-spin;
+          animation-iteration-count: infinite;
+          animation-timing-function: linear;
+      }
+      @keyframes __react-svg-spinner_infinite-spin {
+          from {transform: rotate(0deg)}
+          to {transform: rotate(360deg)}
+      }
+    `
+          }
+        }
+      ),
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          role: "presentation",
+          cx: 16,
+          cy: 16,
+          r: 14 - n / 2,
+          stroke: i,
+          fill: "none",
+          strokeWidth: n,
+          strokeDasharray: Math.PI * 2 * (11 - a),
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
+export {
+  m as Spinner
+};
+//# 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.mjs

@@ -0,0 +1,18 @@
+import { useRef as i, useEffect as s } from "react";
+function d(e, n) {
+  return e ? e === n || e.contains(n) : !1;
+}
+function a(e, n, c) {
+  const r = i(null), o = (t) => {
+    t.key === "Escape" && n(t);
+  }, u = (t) => {
+    c.closeOnClickOutside && !d(r.current, t.target) && (t.stopPropagation(), n(t));
+  };
+  return s(() => (e && (document.addEventListener("keydown", o, !0), document.addEventListener("click", u, !0)), () => {
+    document.removeEventListener("keydown", o, !0), document.removeEventListener("click", u, !0);
+  }), [e]), { ref: r };
+}
+export {
+  a as default
+};
+//# 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.mjs

@@ -0,0 +1,21 @@
+import { useMemo as i, useCallback as u, useEffect as f } from "react";
+import a from "lodash.debounce";
+const d = () => {
+};
+function k(t) {
+  const c = t.callback ?? d, o = t.ref, l = t.offset ?? 0, n = i(() => a(c, 200), [c]), e = u(() => {
+    if (o.current) {
+      const r = o.current, s = Math.round(
+        r.scrollTop + r.clientHeight
+      );
+      Math.round(r.scrollHeight - l) <= s && n();
+    }
+  }, [n]);
+  f(() => (o.current && o.current.addEventListener("scroll", e), () => {
+    o.current && o.current.removeEventListener("scroll", e);
+  }), [e]);
+}
+export {
+  k as default
+};
+//# 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/feed/components/EmptyFeed/EmptyFeed.mjs

@@ -0,0 +1,14 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useKnockFeed as n, useTranslations as s } from "@knocklabs/react-core";
+
+const p = () => {
+  const { colorMode: d } = n(), { t: r } = s();
+  return /* @__PURE__ */ e("div", { className: `rnf-empty-feed rnf-empty-feed--${d}`, children: /* @__PURE__ */ t("div", { className: "rnf-empty-feed__inner", children: [
+    /* @__PURE__ */ e("h2", { className: "rnf-empty-feed__header", children: r("emptyFeedTitle") }),
+    /* @__PURE__ */ e("p", { className: "rnf-empty-feed__body", children: r("emptyFeedBody") })
+  ] }) });
+};
+export {
+  p as EmptyFeed
+};
+//# 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/EmptyFeed/styles.css.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styles.css.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,40 @@
+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.mjs";
+const N = ({ item: o }) => {
+  const { colorMode: t, feedClient: n } = v(), { t: e } = d(), c = m(
+    (i) => {
+      i.preventDefault(), i.stopPropagation(), n.markAsArchived(o);
+    },
+    [o]
+  ), { getTooltipProps: s, setTooltipRef: a, setTriggerRef: l, visible: p } = u({ placement: "top-end" });
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      ref: l,
+      onClick: c,
+      type: "button",
+      "aria-label": e("archiveNotification"),
+      className: `rnf-archive-notification-btn rnf-archive-notification-btn--${t}`,
+      children: [
+        /* @__PURE__ */ r(h, {}),
+        p && /* @__PURE__ */ r(
+          "div",
+          {
+            ref: a,
+            ...s({
+              className: `rnf-tooltip rnf-tooltip--${t}`
+            }),
+            children: e("archiveNotification")
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  N as ArchiveButton
+};
+//# 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.mjs

@@ -0,0 +1,13 @@
+import { jsx as t } from "react/jsx-runtime";
+
+const m = ({ name: r, src: i }) => {
+  function n(e) {
+    const [a, s] = e.split(" ");
+    return a && s ? `${a.charAt(0)}${s.charAt(0)}` : a ? a.charAt(0) : "";
+  }
+  return /* @__PURE__ */ t("div", { className: "rnf-avatar", children: i ? /* @__PURE__ */ t("img", { src: i, alt: `Image of ${r}`, className: "rnf-avatar__image" }) : /* @__PURE__ */ t("span", { className: "rnf-avatar__initials", children: n(r) }) });
+};
+export {
+  m as Avatar
+};
+//# 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.mjs

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import i, { useMemo as h } from "react";
+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) => {
+  const { feedClient: N, colorMode: b } = x(), { dateFnsLocale: k } = C(), a = h(() => n.blocks.reduce((t, d) => ({ ...t, [d.name]: d }), {}), [n]), r = a.action_url && a.action_url.rendered, c = i.useCallback(() => {
+    if (N.markAsInteracted(n), l)
+      return l(n);
+    setTimeout(() => {
+      r && r !== "" && window.location.assign(r);
+    }, 200);
+  }, [n]), v = i.useCallback(
+    (t) => {
+      switch (t.key) {
+        case "Enter": {
+          t.stopPropagation(), c();
+          break;
+        }
+      }
+    },
+    [c]
+  ), o = n.actors[0];
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: p,
+      className: `rnf-notification-cell rnf-notification-cell--${b}`,
+      onClick: c,
+      onKeyDown: v,
+      tabIndex: 0,
+      children: /* @__PURE__ */ f("div", { className: "rnf-notification-cell__inner", children: [
+        !n.read_at && /* @__PURE__ */ e("div", { className: "rnf-notification-cell__unread-dot" }),
+        m(
+          _,
+          o && "name" in o && o.name && /* @__PURE__ */ e(y, { name: o.name, src: o.avatar })
+        ),
+        /* @__PURE__ */ f("div", { className: "rnf-notification-cell__content-outer", children: [
+          a.body && /* @__PURE__ */ e(
+            "div",
+            {
+              className: "rnf-notification-cell__content",
+              dangerouslySetInnerHTML: { __html: a.body.rendered }
+            }
+          ),
+          s && /* @__PURE__ */ e("div", { className: "rnf-notification-cell__child-content", children: s }),
+          /* @__PURE__ */ e("span", { className: "rnf-notification-cell__timestamp", children: T(n.inserted_at, { locale: k() }) })
+        ] }),
+        m(u, /* @__PURE__ */ e(w, { item: n }))
+      ] })
+    }
+  );
+});
+export {
+  I as NotificationCell
+};
+//# 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 { dateFnsLocale } = 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: dateFnsLocale() })}\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","dateFnsLocale","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,eAAAC,MAAkBC,KAEpBC,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,UAGD,gBAAAiB,EAAA,QAAA,EAAK,WAAU,oCACb,UAAgBI,EAAAxB,EAAK,aAAa,EAAE,QAAQS,EAAgB,EAAA,CAAC,EAChE,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/NotificationCell/styles.css.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styles.css.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,19 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { ChevronDown as t } from "../../../core/components/Icons/ChevronDown.mjs";
+import { useKnockFeed as m } from "@knocklabs/react-core";
+
+const l = ({
+  children: r,
+  value: n,
+  onChange: e
+}) => {
+  const { colorMode: d } = m();
+  return /* @__PURE__ */ s("div", { className: `rnf-dropdown rnf-dropdown--${d}`, children: [
+    /* @__PURE__ */ o("select", { value: n, onChange: e, children: r }),
+    /* @__PURE__ */ o(t, {})
+  ] });
+};
+export {
+  l as Dropdown
+};
+//# 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.mjs

@@ -0,0 +1,32 @@
+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.mjs";
+
+const x = ({ onClick: a }) => {
+  const { useFeedStore: r, feedClient: t, colorMode: s } = f(), { t: n } = k(), o = r(
+    (e) => e.items.filter((m) => !m.read_at)
+  ), l = r((e) => e.metadata.unread_count), d = u.useCallback(
+    (e) => {
+      t.markAllAsRead(), a && a(e, o);
+    },
+    [t, o, a]
+  );
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      className: `rnf-mark-all-as-read rnf-mark-all-as-read--${s}`,
+      disabled: l === 0,
+      onClick: d,
+      type: "button",
+      children: [
+        n("markAllAsRead"),
+        /* @__PURE__ */ i(p, {})
+      ]
+    }
+  );
+};
+export {
+  x as MarkAsRead
+};
+//# 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;"}