@knocklabs/react 0.2.22 → 0.2.24

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.2.24
+
+### Patch Changes
+
+- Updated dependencies [395f0ca]
+  - @knocklabs/client@0.10.11
+  - @knocklabs/react-core@0.2.22
+
+## 0.2.23
+
+### Patch Changes
+
+- a4d520c: chore: update generic types
+- e88c1c0: remove stop propogation from useComponentVisible hook to prevent page reloads with react-router-dom
+- Updated dependencies [a4d520c]
+  - @knocklabs/react-core@0.2.21
+  - @knocklabs/client@0.10.10
+
 ## 0.2.22
 
 ### Patch Changes

package/README.md

@@ -40,12 +40,11 @@ You can integrate Knock into your app as follows:
 
 ```jsx
 import {
-  KnockProvider,
   KnockFeedProvider,
-  NotificationIconButton,
+  KnockProvider,
   NotificationFeedPopover,
+  NotificationIconButton,
 } from "@knocklabs/react";
-
 // Required CSS import, unless you're overriding the styling
 import "@knocklabs/react/dist/index.css";
 

package/dist/cjs/index.css

@@ -1 +1 @@
-:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}
+:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useComponentVisible.js","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      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","key","handleClickOutside","closeOnClickOutside","current","target","stopPropagation","useEffect","addEventListener","removeEventListener"],"mappings":"sCAEA,SAASA,EAASC,EAA4BC,EAAoB,CAChE,OAAKD,EACEA,IAAWC,GAASD,EAAOD,SAASE,CAAK,EAD5B,EAEtB,CAMwBC,SAAAA,EACtBC,EACAC,EACAC,EACA,CACMC,MAAAA,EAAMC,SAAuB,IAAI,EAEjCC,EAAiBC,GAAyB,CAC1CA,EAAMC,MAAQ,UAChBN,EAAQK,CAAK,CACf,EAGIE,EAAsBF,GAAiB,CAEzCJ,EAAQO,qBACR,CAACb,EAASO,EAAIO,QAASJ,EAAMK,UAE7BL,EAAMM,gBAAgB,EACtBX,EAAQK,CAAK,EACf,EAGFO,OAAAA,EAAAA,UAAU,KACJb,IACOc,SAAAA,iBAAiB,UAAWT,EAAe,EAAI,EAC/CS,SAAAA,iBAAiB,QAASN,EAAoB,EAAI,GAGtD,IAAM,CACFO,SAAAA,oBAAoB,UAAWV,EAAe,EAAI,EAClDU,SAAAA,oBAAoB,QAASP,EAAoB,EAAI,CAAA,GAE/D,CAACR,CAAS,CAAC,EAEP,CAAEG,IAAAA,CAAAA,CACX"}
+{"version":3,"file":"useComponentVisible.js","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options,\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","useEffect","addEventListener","removeEventListener"],"mappings":"sCAEA,SAASA,EAASC,EAA4BC,EAAoB,CAChE,OAAKD,EACEA,IAAWC,GAASD,EAAOD,SAASE,CAAK,EAD5B,EAEtB,CAMwBC,SAAAA,EACtBC,EACAC,EACAC,EACA,CACMC,MAAAA,EAAMC,SAAuB,IAAI,EAEjCC,EAAiBC,GAAyB,CAC1CA,EAAMC,MAAQ,UAChBN,EAAQK,CAAK,CACf,EAGIE,EAAsBF,GAAiB,CAEzCJ,EAAQO,qBACR,CAACb,EAASO,EAAIO,QAASJ,EAAMK,SAE7BV,EAAQK,CAAK,CACf,EAGFM,OAAAA,EAAAA,UAAU,KACJZ,IACOa,SAAAA,iBAAiB,UAAWR,EAAe,EAAI,EAC/CQ,SAAAA,iBAAiB,QAASL,EAAoB,EAAI,GAGtD,IAAM,CACFM,SAAAA,oBAAoB,UAAWT,EAAe,EAAI,EAClDS,SAAAA,oBAAoB,QAASN,EAAoB,EAAI,CAAA,GAI/D,CAACR,CAAS,CAAC,EAEP,CAAEG,IAAAA,CAAAA,CACX"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\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","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","addEventListener","removeEventListener"],"mappings":"kIASMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,QAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,GAEtB,CAAA,EACC,CAACA,CAAiB,CAAC,EAEtBa,EAAAA,UAAU,KACJf,EAAIO,SACFA,EAAAA,QAAQS,iBAAiB,SAAUX,CAAc,EAGhD,IAAM,CACPL,EAAIO,SACFA,EAAAA,QAAQU,oBAAoB,SAAUZ,CAAc,CAC1D,GAED,CAACA,CAAc,CAAC,CACrB"}
+{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n  ref: RefObject<HTMLDivElement | 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    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedCallback]);\n\n  useEffect(() => {\n    let element: HTMLElement | undefined;\n    if (ref.current) {\n      element = ref.current;\n      ref.current.addEventListener(\"scroll\", handleOnScroll);\n    }\n\n    return () => {\n      if (element) {\n        element.removeEventListener(\"scroll\", handleOnScroll);\n      }\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","element","addEventListener","removeEventListener"],"mappings":"kIASMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,QAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,GAEtB,CAAA,EAGC,CAACA,CAAiB,CAAC,EAEtBa,EAAAA,UAAU,IAAM,CACVC,IAAAA,EACJ,OAAIhB,EAAIO,UACNS,EAAUhB,EAAIO,QACVA,EAAAA,QAAQU,iBAAiB,SAAUZ,CAAc,GAGhD,IAAM,CACPW,GACME,EAAAA,oBAAoB,SAAUb,CAAc,CACtD,CACF,EAGC,CAACA,CAAc,CAAC,CACrB"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),d=require("react-popper-tooltip"),i=require("@knocklabs/react-core"),v=require("../../../core/components/Icons/CloseCircle.js"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=b(a),C=({item:e})=>{const{colorMode:o,feedClient:c}=i.useKnockFeed(),{t:r}=i.useTranslations(),l=a.useCallback(n=>{n.preventDefault(),n.stopPropagation(),c.markAsArchived(e)},[e]),{getTooltipProps:s,setTooltipRef:u,setTriggerRef:f,visible:p}=d.usePopperTooltip({placement:"top-end"});return t.default.createElement("button",{ref:f,onClick:l,type:"button","aria-label":r("archiveNotification"),className:`rnf-archive-notification-btn rnf-archive-notification-btn--${o}`},t.default.createElement(v.CloseCircle,null),p&&t.default.createElement("div",{ref:u,...s({className:`rnf-tooltip rnf-tooltip--${o}`})},r("archiveNotification")))};exports.ArchiveButton=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@knocklabs/react-core"),a=require("react"),d=require("react-popper-tooltip"),v=require("../../../core/components/Icons/CloseCircle.js"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=b(a),C=({item:e})=>{const{colorMode:o,feedClient:c}=i.useKnockFeed(),{t:r}=i.useTranslations(),l=a.useCallback(n=>{n.preventDefault(),n.stopPropagation(),c.markAsArchived(e)},[e]),{getTooltipProps:s,setTooltipRef:u,setTriggerRef:f,visible:p}=d.usePopperTooltip({placement:"top-end"});return t.default.createElement("button",{ref:f,onClick:l,type:"button","aria-label":r("archiveNotification"),className:`rnf-archive-notification-btn rnf-archive-notification-btn--${o}`},t.default.createElement(v.CloseCircle,null),p&&t.default.createElement("div",{ref:u,...s({className:`rnf-tooltip rnf-tooltip--${o}`})},r("archiveNotification")))};exports.ArchiveButton=C;
 //# sourceMappingURL=ArchiveButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ArchiveButton.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport 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","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":"wSAUMA,EAA8CA,CAAC,CAAEC,KAAAA,CAAK,IAAM,CAC1D,KAAA,CAAEC,UAAAA,EAAWC,WAAAA,GAAeC,EAAa,aAAA,EACzC,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAExBC,EAAUC,cACbC,GAAqC,CACpCA,EAAEC,eAAe,EACjBD,EAAEE,gBAAgB,EAElBR,EAAWS,eAAeX,CAAI,CAAA,EAEhC,CAACA,CAAI,CACP,EAEM,CAAEY,gBAAAA,EAAiBC,cAAAA,EAAeC,cAAAA,EAAeC,QAAAA,GACrDC,mBAAiB,CAAEC,UAAW,SAAA,CAAW,EAGzC,OAAAC,EAAA,QAAA,cAAC,SACC,CAAA,IAAKJ,EACL,QAAAR,EACA,KAAK,SACL,aAAYF,EAAE,qBAAqB,EACnC,UAAY,8DAA6DH,CAAU,EAAA,EAElFiB,EAAA,QAAA,cAAAC,EAAA,YAAA,IAAW,EAEXJ,2BACE,MACC,CAAA,IAAKF,EACL,GAAID,EAAgB,CAClBQ,UAAY,4BAA2BnB,CAAU,EAClD,CAAA,GAEAG,EAAE,qBAAqB,CAC1B,CAEJ,CAEJ"}
+{"version":3,"file":"ArchiveButton.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  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","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":"wSAWMA,EAA8CA,CAAC,CAAEC,KAAAA,CAAK,IAAM,CAC1D,KAAA,CAAEC,UAAAA,EAAWC,WAAAA,GAAeC,EAAa,aAAA,EACzC,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAExBC,EAAUC,EAAAA,YACbC,GAAqC,CACpCA,EAAEC,eAAe,EACjBD,EAAEE,gBAAgB,EAElBR,EAAWS,eAAeX,CAAI,CAChC,EAGA,CAACA,CAAI,CAAA,EAGD,CAAEY,gBAAAA,EAAiBC,cAAAA,EAAeC,cAAAA,EAAeC,QAAAA,GACrDC,mBAAiB,CAAEC,UAAW,SAAA,CAAW,EAGzC,OAAAC,EAAA,QAAA,cAAC,SACC,CAAA,IAAKJ,EACL,QAAAR,EACA,KAAK,SACL,aAAYF,EAAE,qBAAqB,EACnC,UAAY,8DAA6DH,CAAU,EAAA,EAElFiB,EAAA,QAAA,cAAAC,EAAA,YAAA,IAAW,EAEXJ,2BACE,MACC,CAAA,IAAKF,EACL,GAAID,EAAgB,CAClBQ,UAAY,4BAA2BnB,CAAU,EAClD,CAAA,GAEAG,EAAE,qBAAqB,CAC1B,CAEJ,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\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","split","charAt","React"],"mappings":"yMAQaA,EAAgCA,CAAC,CAAEC,KAAAA,EAAMC,IAAAA,CAAI,IAAM,CAC9D,SAASC,EAAYF,EAAc,CACjC,KAAM,CAACG,EAAWC,CAAQ,EAAIJ,EAAKK,MAAM,GAAG,EAC5C,OAAOF,GAAaC,EACf,GAAED,EAAUG,OAAO,CAAC,CAAE,GAAEF,EAASE,OAAO,CAAC,CAAE,GAC5CH,EACEA,EAAUG,OAAO,CAAC,EAClB,EACR,CAGE,OAAAC,EAAA,QAAA,cAAC,OAAI,UAAU,YAAA,EACZN,EACEM,EAAAA,QAAA,cAAA,MAAA,CAAI,IAAAN,EAAU,IAAM,YAAWD,CAAK,GAAG,UAAU,mBAAA,CAAsB,EAEvEO,EAAA,QAAA,cAAA,OAAA,CAAK,UAAU,sBAAwBL,EAAAA,EAAYF,CAAI,CAAE,CAE9D,CAEJ"}
+{"version":3,"file":"Avatar.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={`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","split","charAt","React"],"mappings":"yMASaA,EAAgCA,CAAC,CAAEC,KAAAA,EAAMC,IAAAA,CAAI,IAAM,CAC9D,SAASC,EAAYF,EAAc,CACjC,KAAM,CAACG,EAAWC,CAAQ,EAAIJ,EAAKK,MAAM,GAAG,EAC5C,OAAOF,GAAaC,EACf,GAAED,EAAUG,OAAO,CAAC,CAAE,GAAEF,EAASE,OAAO,CAAC,CAAE,GAC5CH,EACEA,EAAUG,OAAO,CAAC,EAClB,EACR,CAGE,OAAAC,EAAA,QAAA,cAAC,OAAI,UAAU,YAAA,EACZN,EACEM,EAAAA,QAAA,cAAA,MAAA,CAAI,IAAAN,EAAU,IAAM,YAAWD,CAAK,GAAG,UAAU,mBAAA,CAAsB,EAEvEO,EAAA,QAAA,cAAA,OAAA,CAAK,UAAU,sBAAwBL,EAAAA,EAAYF,CAAI,CAAE,CAE9D,CAEJ"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),a=require("../../../core/components/Icons/ChevronDown.js"),l=require("@knocklabs/react-core");const d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(c),u=({children:e,value:o,onChange:r})=>{const{colorMode:n}=l.useKnockFeed();return t.default.createElement("div",{className:`rnf-dropdown rnf-dropdown--${n}`},t.default.createElement("select",{value:o,onChange:r},e),t.default.createElement(a.ChevronDown,null))};exports.Dropdown=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@knocklabs/react-core"),a=require("react"),l=require("../../../core/components/Icons/ChevronDown.js");const d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(a),u=({children:e,value:o,onChange:r})=>{const{colorMode:n}=c.useKnockFeed();return t.default.createElement("div",{className:`rnf-dropdown rnf-dropdown--${n}`},t.default.createElement("select",{value:o,onChange:r},e),t.default.createElement(l.ChevronDown,null))};exports.Dropdown=u;
 //# sourceMappingURL=Dropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import 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","React","ChevronDown"],"mappings":"uSAWaA,EAAuDA,CAAC,CACnEC,SAAAA,EACAC,MAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAEnC,OACGC,EAAA,QAAA,cAAA,MAAA,CAAI,UAAY,8BAA6BF,CAAU,EACtD,EAAAE,UAAA,cAAC,SAAO,CAAA,MAAAJ,EAAc,SAAAC,CACnBF,EAAAA,CACH,EACAK,EAAA,QAAA,cAACC,EAAAA,gBAAW,CACd,CAEJ"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select value={value} onChange={onChange}>\n        {children}\n      </select>\n      <ChevronDown />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","React","ChevronDown"],"mappings":"uSAYaA,EAAuDA,CAAC,CACnEC,SAAAA,EACAC,MAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAEnC,OACGC,EAAA,QAAA,cAAA,MAAA,CAAI,UAAY,8BAA6BF,CAAU,EACtD,EAAAE,UAAA,cAAC,SAAO,CAAA,MAAAJ,EAAc,SAAAC,CACnBF,EAAAA,CACH,EACAK,EAAA,QAAA,cAACC,EAAAA,gBAAW,CACd,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = any> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\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?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\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  onNotificationButtonClick,\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({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\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","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAkDMA,EAAqBC,GACxBC,UAAA,cAAAC,EAAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,UAAA,cAAAK,EAAAA,uBAAA,CAA2BN,GAAAA,CAC7B,CAAA,EAEKO,EAAiBA,CAAC,CAAEC,UAAAA,CAAoC,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,oEACZQ,UACC,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,MAAU,CAAA,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,CACjB,IAAM,CACJ,KAAM,CAACmB,EAAQC,CAAS,EAAIC,WAASP,CAAmB,EAClD,CAAEQ,WAAAA,EAAYC,aAAAA,EAAcpB,UAAAA,GAAcqB,EAAa,aAAA,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,EAAgB,gBAAA,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUN,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBoB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAY,gDAA+C5C,CAAU,IAEpEc,GACCC,EAAa,CACX8B,gBAAiB5B,EACjB6B,aAAc9B,EACdN,qBAAAA,CAAAA,CACD,EAEHjB,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKoC,CACpDD,EAAAA,IAAkBmB,EAAcC,cAAAA,SAC9BvD,EAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEDP,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,6CACZmC,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKtD,GACTY,EAAW,CACTZ,KAAAA,EACAuD,YAAa1C,EACb2C,cAAe1C,CAAAA,CAChB,CACH,CACJ,EAECmB,IAAkBmB,EAAAA,cAAcK,WAC9B3D,EAAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEA,CAACmC,GAAmBF,GAAW5B,CAClC,GAECiB,GAAAA,YAAAA,EAAU+B,SAASC,oBAClB7D,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,yCACZA,EAAAA,QAAA,cAAA,IAAA,CAAE,KAAMU,EAAmB,OAAO,QAChCqB,EAAAA,EAAE,WAAW,CAChB,CACF,CAEJ,CAEJ"}
+{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactNode;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n}\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  onNotificationButtonClick,\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({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\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","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAkDMA,EAAqBC,GACxBC,UAAA,cAAAC,EAAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,UAAA,cAAAK,EAAAA,uBAAA,CAA2BN,GAAAA,CAC7B,CAAA,EAEKO,EAAiBA,CAAC,CAAEC,UAAAA,CAAoC,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,oEACZQ,UACC,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,MAAU,CAAA,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,CACjB,IAAM,CACJ,KAAM,CAACmB,EAAQC,CAAS,EAAIC,WAASP,CAAmB,EAClD,CAAEQ,WAAAA,EAAYC,aAAAA,EAAcpB,UAAAA,GAAcqB,EAAa,aAAA,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,EAAgB,gBAAA,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUN,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBoB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAY,gDAA+C5C,CAAU,IAEpEc,GACCC,EAAa,CACX8B,gBAAiB5B,EACjB6B,aAAc9B,EACdN,qBAAAA,CAAAA,CACD,EAEHjB,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKoC,CACpDD,EAAAA,IAAkBmB,EAAcC,cAAAA,SAC9BvD,EAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEDP,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,6CACZmC,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKtD,GACTY,EAAW,CACTZ,KAAAA,EACAuD,YAAa1C,EACb2C,cAAe1C,CAAAA,CAChB,CACH,CACJ,EAECmB,IAAkBmB,EAAAA,cAAcK,WAC9B3D,EAAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEA,CAACmC,GAAmBF,GAAW5B,CAClC,GAECiB,GAAAA,YAAAA,EAAU+B,SAASC,oBAClB7D,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,yCACZA,EAAAA,QAAA,cAAA,IAAA,CAAE,KAAMU,EAAmB,OAAO,QAChCqB,EAAAA,EAAE,WAAW,CAChB,CACF,CAEJ,CAEJ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedHeader.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import 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","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":"mQAaMA,EAAwB,CAC5BC,EAAAA,aAAaC,IACbD,EAAaE,aAAAA,OACbF,EAAAA,aAAaG,IAAI,EAGNC,EAAgEA,CAAC,CAC5EC,qBAAAA,EACAC,aAAAA,EACAC,gBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAG5B,OAAAC,EAAA,QAAA,cAAC,UAAO,UAAU,+BAAA,0BACf,MAAI,CAAA,UAAU,iCACb,EAAAA,EAAA,QAAA,cAAC,OAAK,CAAA,UAAU,+BACbF,EAAE,eAAe,CACpB,EACAE,EAAA,QAAA,cAACC,YACC,MAAOL,EACP,SAAWM,GAAML,EAAgBK,EAAEC,OAAOC,KAAK,CAAA,EAE9Cf,EAAsBgB,IAAKT,GACzBI,EAAA,QAAA,cAAA,SAAA,CAAO,IAAKJ,EAAc,MAAOA,CAAAA,EAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,EACCI,UAAA,cAAAM,EAAAA,WAAA,CAAW,QAASX,CAAAA,CAAqB,CAC5C,CAEJ"}
+{"version":3,"file":"NotificationFeedHeader.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n  filterStatus: FilterStatus;\n  setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n  FilterStatus.All,\n  FilterStatus.Unread,\n  FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n  onMarkAllAsReadClick,\n  filterStatus,\n  setFilterStatus,\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <header className=\"rnf-notification-feed__header\">\n      <div className=\"rnf-notification-feed__selector\">\n        <span className=\"rnf-notification-feed__type\">\n          {t(\"notifications\")}\n        </span>\n        <Dropdown\n          value={filterStatus}\n          onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}\n        >\n          {OrderedFilterStatuses.map((filterStatus) => (\n            <option key={filterStatus} value={filterStatus}>\n              {t(filterStatus)}\n            </option>\n          ))}\n        </Dropdown>\n      </div>\n      <MarkAsRead onClick={onMarkAllAsReadClick} />\n    </header>\n  );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":"mQAaMA,EAAwB,CAC5BC,EAAAA,aAAaC,IACbD,EAAaE,aAAAA,OACbF,EAAAA,aAAaG,IAAI,EAGNC,EAAgEA,CAAC,CAC5EC,qBAAAA,EACAC,aAAAA,EACAC,gBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAG5B,OAAAC,EAAA,QAAA,cAAC,UAAO,UAAU,+BAAA,0BACf,MAAI,CAAA,UAAU,iCACb,EAAAA,EAAA,QAAA,cAAC,OAAK,CAAA,UAAU,+BACbF,EAAE,eAAe,CACpB,EACAE,EAAA,QAAA,cAACC,YACC,MAAOL,EACP,SAAWM,GAAML,EAAgBK,EAAEC,OAAOC,KAAqB,CAAA,EAE9Df,EAAsBgB,IAAKT,GACzBI,EAAA,QAAA,cAAA,SAAA,CAAO,IAAKJ,EAAc,MAAOA,CAAAA,EAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,EACCI,UAAA,cAAAM,EAAAA,WAAA,CAAW,QAASX,CAAAA,CAAqB,CAC5C,CAEJ"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),r=require("../../../core/components/Icons/Bell.js"),i=require("@knocklabs/react-core"),l=require("../UnseenBadge/UnseenBadge.js");const u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=u(c),f=t.default.forwardRef(({onClick:e,badgeCountType:n},o)=>{const{colorMode:a}=i.useKnockFeed();return t.default.createElement("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${a}`,role:"button","aria-label":"Open notification feed",ref:o,onClick:e},t.default.createElement(r.BellIcon,null),t.default.createElement(l.UnseenBadge,{badgeCountType:n}))});exports.NotificationIconButton=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@knocklabs/react-core"),r=require("react"),i=require("../../../core/components/Icons/Bell.js"),l=require("../UnseenBadge/UnseenBadge.js");const u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=u(r),f=t.default.forwardRef(({onClick:e,badgeCountType:n},o)=>{const{colorMode:a}=c.useKnockFeed();return t.default.createElement("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${a}`,role:"button","aria-label":"Open notification feed",ref:o,onClick:e},t.default.createElement(i.BellIcon,null),t.default.createElement(l.UnseenBadge,{badgeCountType:n}))});exports.NotificationIconButton=f;
 //# sourceMappingURL=NotificationIconButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationIconButton.js","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","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":"2UAaaA,EAAyBC,EAAAA,QAAMC,WAG1C,CAAC,CAAEC,QAAAA,EAASC,eAAAA,CAAe,EAAGC,IAAQ,CAChC,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAEnC,+BACG,SACC,CAAA,UAAY,8DAA6DD,CAAU,GACnF,KAAK,SACL,aAAW,yBACX,IAAAD,EACA,QAAAF,GAECF,EAAAA,QAAA,cAAAO,EAAA,SAAA,IAAQ,EACRP,EAAA,QAAA,cAAAQ,EAAA,YAAA,CAAY,eAAAL,EAA+B,CAC9C,CAEJ,CAAC"}
+{"version":3,"file":"NotificationIconButton.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\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","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":"2UAcaA,EAAyBC,EAAAA,QAAMC,WAG1C,CAAC,CAAEC,QAAAA,EAASC,eAAAA,CAAe,EAAGC,IAAQ,CAChC,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAEnC,+BACG,SACC,CAAA,UAAY,8DAA6DD,CAAU,GACnF,KAAK,SACL,aAAW,yBACX,IAAAD,EACA,QAAAF,GAECF,EAAAA,QAAA,cAAAO,EAAA,SAAA,IAAQ,EACRP,EAAA,QAAA,cAAAQ,EAAA,YAAA,CAAY,eAAAL,EAA+B,CAC9C,CAEJ,CAAC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),u=require("@knocklabs/react-core");const o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(c);function s(e,n){switch(e){case"all":return n.total_count;case"unread":return n.unread_count;case"unseen":return n.unseen_count}}const l=({badgeCountType:e="unseen"})=>{const{useFeedStore:n}=u.useKnockFeed(),t=n(r=>s(e,r.metadata));return t!==0?a.default.createElement("div",{className:"rnf-unseen-badge"},a.default.createElement("span",{className:"rnf-unseen-badge__count"},u.formatBadgeCount(t))):null};exports.UnseenBadge=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@knocklabs/react-core"),c=require("react");const o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(c);function s(e,n){switch(e){case"all":return n.total_count;case"unread":return n.unread_count;case"unseen":return n.unseen_count}}const l=({badgeCountType:e="unseen"})=>{const{useFeedStore:n}=u.useKnockFeed(),t=n(r=>s(e,r.metadata));return t!==0?a.default.createElement("div",{className:"rnf-unseen-badge"},a.default.createElement("span",{className:"rnf-unseen-badge__count"},u.formatBadgeCount(t))):null};exports.UnseenBadge=l;
 //# sourceMappingURL=UnseenBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UnseenBadge.js","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","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":"4OAYA,SAASA,EACPC,EACAC,EACA,CACA,OAAQD,EAAc,CACpB,IAAK,MACH,OAAOC,EAASC,YAClB,IAAK,SACH,OAAOD,EAASE,aAClB,IAAK,SACH,OAAOF,EAASG,YACpB,CACF,CAEO,MAAMC,EAA0CA,CAAC,CACtDL,eAAAA,EAAiB,QACnB,IAAM,CACE,KAAA,CAAEM,aAAAA,GAAiBC,EAAa,aAAA,EAChCC,EAAkBF,EAAcG,GACpCV,EAAiBC,EAAgBS,EAAMR,QAAQ,CACjD,EAEA,OAAOO,IAAoB,EACxBE,UAAA,cAAA,MAAA,CAAI,UAAU,oBACbA,EAAAA,QAAA,cAAC,OAAK,CAAA,UAAU,yBACbC,EAAAA,EAAAA,iBAAiBH,CAAe,CACnC,CACF,EACE,IACN"}
+{"version":3,"file":"UnseenBadge.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport { formatBadgeCount, useKnockFeed } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\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","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":"4OAYA,SAASA,EACPC,EACAC,EACA,CACA,OAAQD,EAAc,CACpB,IAAK,MACH,OAAOC,EAASC,YAClB,IAAK,SACH,OAAOD,EAASE,aAClB,IAAK,SACH,OAAOF,EAASG,YACpB,CACF,CAEO,MAAMC,EAA0CA,CAAC,CACtDL,eAAAA,EAAiB,QACnB,IAAM,CACE,KAAA,CAAEM,aAAAA,GAAiBC,EAAa,aAAA,EAChCC,EAAkBF,EAAcG,GACpCV,EAAiBC,EAAgBS,EAAMR,QAAQ,CACjD,EAEA,OAAOO,IAAoB,EACxBE,UAAA,cAAA,MAAA,CAAI,UAAU,oBACbA,EAAAA,QAAA,cAAC,OAAK,CAAA,UAAU,yBACbC,EAAAA,EAAAA,iBAAiBH,CAAe,CACnC,CACF,EACE,IACN"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/helpers.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=new Intl.Collator;function a(l,e){if(e.length===0)return!0;l=l.normalize("NFC"),e=e.normalize("NFC");let t=0,n=e.length;for(;t+n<=l.length;t++){let o=l.slice(t,t+n);if(r.compare(e,o)===0)return!0}return!1}exports.strContains=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=new Intl.Collator;function c(n,e){if(e.length===0)return!0;n=n.normalize("NFC"),e=e.normalize("NFC");let t=0;const l=e.length;for(;t+l<=n.length;t++){const o=n.slice(t,t+l);if(r.compare(e,o)===0)return!0}return!1}exports.strContains=c;
 //# sourceMappingURL=helpers.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/helpers.ts"],"sourcesContent":["// Taken from `react-aria` `useFilter` hook, which we didn't want to add in as a dependency\n// due to us only using this one function.\n// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/i18n/src/useFilter.ts#L58-L76\n\nconst collator = new Intl.Collator();\n\nexport function strContains(string: string, substr: string) {\n  if (substr.length === 0) {\n    return true;\n  }\n\n  string = string.normalize(\"NFC\");\n  substr = substr.normalize(\"NFC\");\n\n  let scan = 0;\n  let sliceLen = substr.length;\n  for (; scan + sliceLen <= string.length; scan++) {\n    let slice = string.slice(scan, scan + sliceLen);\n    if (collator.compare(substr, slice) === 0) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"],"names":["collator","Intl","Collator","strContains","string","substr","length","normalize","scan","sliceLen","slice","compare"],"mappings":"gFAIA,MAAMA,EAAW,IAAIC,KAAKC,SAEVC,SAAAA,EAAYC,EAAgBC,EAAgB,CACtDA,GAAAA,EAAOC,SAAW,EACb,MAAA,GAGAF,EAAAA,EAAOG,UAAU,KAAK,EACtBF,EAAAA,EAAOE,UAAU,KAAK,EAE/B,IAAIC,EAAO,EACPC,EAAWJ,EAAOC,OACtB,KAAOE,EAAOC,GAAYL,EAAOE,OAAQE,IAAQ,CAC/C,IAAIE,EAAQN,EAAOM,MAAMF,EAAMA,EAAOC,CAAQ,EAC9C,GAAIT,EAASW,QAAQN,EAAQK,CAAK,IAAM,EAC/B,MAAA,EAEX,CAEO,MAAA,EACT"}
+{"version":3,"file":"helpers.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/helpers.ts"],"sourcesContent":["// Taken from `react-aria` `useFilter` hook, which we didn't want to add in as a dependency\n// due to us only using this one function.\n// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/i18n/src/useFilter.ts#L58-L76\n\nconst collator = new Intl.Collator();\n\nexport function strContains(string: string, substr: string) {\n  if (substr.length === 0) {\n    return true;\n  }\n\n  string = string.normalize(\"NFC\");\n  substr = substr.normalize(\"NFC\");\n\n  let scan = 0;\n  const sliceLen = substr.length;\n  for (; scan + sliceLen <= string.length; scan++) {\n    const slice = string.slice(scan, scan + sliceLen);\n    if (collator.compare(substr, slice) === 0) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"],"names":["collator","Intl","Collator","strContains","string","substr","length","normalize","scan","sliceLen","slice","compare"],"mappings":"gFAIA,MAAMA,EAAW,IAAIC,KAAKC,SAEVC,SAAAA,EAAYC,EAAgBC,EAAgB,CACtDA,GAAAA,EAAOC,SAAW,EACb,MAAA,GAGAF,EAAAA,EAAOG,UAAU,KAAK,EACtBF,EAAAA,EAAOE,UAAU,KAAK,EAE/B,IAAIC,EAAO,EACX,MAAMC,EAAWJ,EAAOC,OACxB,KAAOE,EAAOC,GAAYL,EAAOE,OAAQE,IAAQ,CAC/C,MAAME,EAAQN,EAAOM,MAAMF,EAAMA,EAAOC,CAAQ,EAChD,GAAIT,EAASW,QAAQN,EAAQK,CAAK,IAAM,EAC/B,MAAA,EAEX,CAEO,MAAA,EACT"}

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

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

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

@@ -1 +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","key","handleClickOutside","closeOnClickOutside","current","target","stopPropagation","useEffect","addEventListener","removeEventListener"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAOD,SAASE,CAAK,IAD5B;AAEtB;AAMwBC,SAAAA,EACtBC,GACAC,GACAC,GACA;AACMC,QAAAA,IAAMC,EAAuB,IAAI,GAEjCC,IAAgBA,CAACC,MAAyB;AAC1CA,IAAAA,EAAMC,QAAQ,YAChBN,EAAQK,CAAK;AAAA,EACf,GAGIE,IAAqBA,CAACF,MAAiB;AAEzCJ,IAAAA,EAAQO,uBACR,CAACb,EAASO,EAAIO,SAASJ,EAAMK,YAE7BL,EAAMM,gBAAgB,GACtBX,EAAQK,CAAK;AAAA,EACf;AAGFO,SAAAA,EAAU,OACJb,MACOc,SAAAA,iBAAiB,WAAWT,GAAe,EAAI,GAC/CS,SAAAA,iBAAiB,SAASN,GAAoB,EAAI,IAGtD,MAAM;AACFO,aAAAA,oBAAoB,WAAWV,GAAe,EAAI,GAClDU,SAAAA,oBAAoB,SAASP,GAAoB,EAAI;AAAA,EAAA,IAE/D,CAACR,CAAS,CAAC,GAEP;AAAA,IAAEG,KAAAA;AAAAA,EAAAA;AACX;"}
+{"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      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","useEffect","addEventListener","removeEventListener"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAOD,SAASE,CAAK,IAD5B;AAEtB;AAMwBC,SAAAA,EACtBC,GACAC,GACAC,GACA;AACMC,QAAAA,IAAMC,EAAuB,IAAI,GAEjCC,IAAgBA,CAACC,MAAyB;AAC1CA,IAAAA,EAAMC,QAAQ,YAChBN,EAAQK,CAAK;AAAA,EACf,GAGIE,IAAqBA,CAACF,MAAiB;AAEzCJ,IAAAA,EAAQO,uBACR,CAACb,EAASO,EAAIO,SAASJ,EAAMK,WAE7BV,EAAQK,CAAK;AAAA,EACf;AAGFM,SAAAA,EAAU,OACJZ,MACOa,SAAAA,iBAAiB,WAAWR,GAAe,EAAI,GAC/CQ,SAAAA,iBAAiB,SAASL,GAAoB,EAAI,IAGtD,MAAM;AACFM,aAAAA,oBAAoB,WAAWT,GAAe,EAAI,GAClDS,SAAAA,oBAAoB,SAASN,GAAoB,EAAI;AAAA,EAAA,IAI/D,CAACR,CAAS,CAAC,GAEP;AAAA,IAAEG,KAAAA;AAAAA,EAAAA;AACX;"}

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

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

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

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

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

@@ -1,6 +1,6 @@
-import t, { useCallback as p } from "react";
-import { usePopperTooltip as m } from "react-popper-tooltip";
-import { useKnockFeed as u, useTranslations as v } from "@knocklabs/react-core";
+import { useKnockFeed as p, useTranslations as m } from "@knocklabs/react-core";
+import t, { useCallback as u } from "react";
+import { usePopperTooltip as v } from "react-popper-tooltip";
 import { CloseCircle as b } from "../../../core/components/Icons/CloseCircle.mjs";
 const g = ({
   item: e
@@ -8,16 +8,21 @@ const g = ({
   const {
     colorMode: o,
     feedClient: n
-  } = u(), {
+  } = p(), {
     t: r
-  } = v(), a = p((i) => {
-    i.preventDefault(), i.stopPropagation(), n.markAsArchived(e);
-  }, [e]), {
+  } = m(), a = u(
+    (i) => {
+      i.preventDefault(), i.stopPropagation(), n.markAsArchived(e);
+    },
+    // TODO: Check if we can remove this disable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e]
+  ), {
     getTooltipProps: c,
     setTooltipRef: l,
     setTriggerRef: s,
     visible: f
-  } = m({
+  } = v({
     placement: "top-end"
   });
   return /* @__PURE__ */ t.createElement("button", { ref: s, onClick: a, type: "button", "aria-label": r("archiveNotification"), className: `rnf-archive-notification-btn rnf-archive-notification-btn--${o}` }, /* @__PURE__ */ t.createElement(b, null), f && /* @__PURE__ */ t.createElement("div", { ref: l, ...c({

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

@@ -1 +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","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":";;;;AAUA,MAAMA,IAA8CA,CAAC;AAAA,EAAEC,MAAAA;AAAK,MAAM;AAC1D,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,YAAAA;AAAAA,MAAeC,EAAa,GACzC;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAUC,EACd,CAACC,MAAqC;AACpCA,IAAAA,EAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBR,EAAWS,eAAeX,CAAI;AAAA,EAAA,GAEhC,CAACA,CAAI,CACP,GAEM;AAAA,IAAEY,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,MACrDC,EAAiB;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAW;AAGzC,SAAAC,gBAAAA,EAAA,cAAC,UACC,EAAA,KAAKJ,GACL,SAAAR,GACA,MAAK,UACL,cAAYF,EAAE,qBAAqB,GACnC,WAAY,8DAA6DH,CAAU,GAAA,GAElFiB,gBAAAA,EAAA,cAAAC,GAAA,IAAW,GAEXJ,qCACE,OACC,EAAA,KAAKF,GACL,GAAID,EAAgB;AAAA,IAClBQ,WAAY,4BAA2BnB,CAAU;AAAA,EAClD,CAAA,KAEAG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}
+{"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  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","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":";;;;AAWA,MAAMA,IAA8CA,CAAC;AAAA,EAAEC,MAAAA;AAAK,MAAM;AAC1D,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,YAAAA;AAAAA,MAAeC,EAAa,GACzC;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAUC;AAAAA,IACd,CAACC,MAAqC;AACpCA,MAAAA,EAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBR,EAAWS,eAAeX,CAAI;AAAA,IAChC;AAAA;AAAA;AAAA,IAGA,CAACA,CAAI;AAAA,EAAA,GAGD;AAAA,IAAEY,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,MACrDC,EAAiB;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAW;AAGzC,SAAAC,gBAAAA,EAAA,cAAC,UACC,EAAA,KAAKJ,GACL,SAAAR,GACA,MAAK,UACL,cAAYF,EAAE,qBAAqB,GACnC,WAAY,8DAA6DH,CAAU,GAAA,GAElFiB,gBAAAA,EAAA,cAAAC,GAAA,IAAW,GAEXJ,qCACE,OACC,EAAA,KAAKF,GACL,GAAID,EAAgB;AAAA,IAClBQ,WAAY,4BAA2BnB,CAAU;AAAA,EAClD,CAAA,KAEAG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}

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

@@ -1 +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","split","charAt","React"],"mappings":";;AAQO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,KAAAA;AAAI,MAAM;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAKK,MAAM,GAAG;AAC5C,WAAOF,KAAaC,IACf,GAAED,EAAUG,OAAO,CAAC,CAAE,GAAEF,EAASE,OAAO,CAAC,CAAE,KAC5CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,aAAA,GACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAM,YAAWD,CAAK,IAAG,WAAU,oBAAA,CAAsB,IAEvEO,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAU,uBAAwBL,GAAAA,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={`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","split","charAt","React"],"mappings":";;AASO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,KAAAA;AAAI,MAAM;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAKK,MAAM,GAAG;AAC5C,WAAOF,KAAaC,IACf,GAAED,EAAUG,OAAO,CAAC,CAAE,GAAEF,EAASE,OAAO,CAAC,CAAE,KAC5CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,aAAA,GACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAM,YAAWD,CAAK,IAAG,WAAU,oBAAA,CAAsB,IAEvEO,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAU,uBAAwBL,GAAAA,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}

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

@@ -1,6 +1,6 @@
+import { useKnockFeed as m } from "@knocklabs/react-core";
 import e from "react";
-import { ChevronDown as m } from "../../../core/components/Icons/ChevronDown.mjs";
-import { useKnockFeed as c } from "@knocklabs/react-core";
+import { ChevronDown as c } from "../../../core/components/Icons/ChevronDown.mjs";
 
 const f = ({
   children: o,
@@ -9,8 +9,8 @@ const f = ({
 }) => {
   const {
     colorMode: n
-  } = c();
-  return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(m, null));
+  } = m();
+  return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(c, null));
 };
 export {
   f as Dropdown