npm - @knocklabs/react - Versions diffs - 0.1.4 → 0.1.6 - Mend

@knocklabs/react 0.1.4 → 0.1.6

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

Files changed (102) hide show

package/README.md CHANGED Viewed

@@ -6,7 +6,7 @@ A set of components for integrating [Knock](https://knock.app) into a React appl
 [See a live demo](https://knock-in-app-notifications-react.vercel.app/)
-![In-app feed component example](NotificationFeed.png)
+![In-app feed component example](https://github.com/knocklabs/javascript/raw/main/packages/react/NotificationFeed.png)
 **Note: these components are designed to be used via React for web only.**

package/dist/cjs/index.css CHANGED Viewed

	@@ -1 +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-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-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-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{--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{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}}.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-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}
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{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}: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}.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-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}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("react"),k=require("./Avatar.js"),p=require("./ArchiveButton.js"),a=require("@knocklabs/react-core");const y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=y(f),h=i.default.forwardRef(({item:e,onItemClick:l,avatar:_,children:d,archiveButton:m},b)=>{const{feedClient:j,colorMode:N}=a.useKnockFeed(),{dateFnsLocale:v}=a.useTranslations(),o=f.useMemo(()=>e.blocks.reduce((r,u)=>({...r,[u.name]:u}),{}),[e]),c=o.action_url&&o.action_url.rendered,s=i.default.useCallback(()=>{if(j.markAsInteracted(e),l)return l(e);setTimeout(()=>{c&&c!==""&&window.location.assign(c)},200)},[e]),x=i.default.useCallback(r=>{switch(r.key){case"Enter":{r.stopPropagation(),s();break}}},[s]),t=e.actors[0];return n.jsx("div",{ref:b,className:`rnf-notification-cell rnf-notification-cell--${N}`,onClick:s,onKeyDown:x,tabIndex:0,children:n.jsxs("div",{className:"rnf-notification-cell__inner",children:[!e.read_at&&n.jsx("div",{className:"rnf-notification-cell__unread-dot"}),a.renderNodeOrFallback(_,t&&"name"in t&&t.name&&n.jsx(k.Avatar,{name:t.name,src:t.avatar})),n.jsxs("div",{className:"rnf-notification-cell__content-outer",children:[o.body&&n.jsx("div",{className:"rnf-notification-cell__content",dangerouslySetInnerHTML:{__html:o.body.rendered}}),d&&n.jsx("div",{className:"rnf-notification-cell__child-content",children:d}),n.jsx("span",{className:"rnf-notification-cell__timestamp",children:a.formatTimestamp(e.inserted_at,{locale:v()})})]}),a.renderNodeOrFallback(m,n.jsx(p.ArchiveButton,{item:e}))]})})});exports.NotificationCell=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("react"),k=require("./Avatar.js"),p=require("./ArchiveButton.js"),a=require("@knocklabs/react-core");const y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=y(f),h=i.default.forwardRef(({item:e,onItemClick:l,avatar:_,children:d,archiveButton:m},b)=>{const{feedClient:j,colorMode:N}=a.useKnockFeed(),{locale:v}=a.useTranslations(),o=f.useMemo(()=>e.blocks.reduce((r,u)=>({...r,[u.name]:u}),{}),[e]),c=o.action_url&&o.action_url.rendered,s=i.default.useCallback(()=>{if(j.markAsInteracted(e),l)return l(e);setTimeout(()=>{c&&c!==""&&window.location.assign(c)},200)},[e]),x=i.default.useCallback(r=>{switch(r.key){case"Enter":{r.stopPropagation(),s();break}}},[s]),t=e.actors[0];return n.jsx("div",{ref:b,className:`rnf-notification-cell rnf-notification-cell--${N}`,onClick:s,onKeyDown:x,tabIndex:0,children:n.jsxs("div",{className:"rnf-notification-cell__inner",children:[!e.read_at&&n.jsx("div",{className:"rnf-notification-cell__unread-dot"}),a.renderNodeOrFallback(_,t&&"name"in t&&t.name&&n.jsx(k.Avatar,{name:t.name,src:t.avatar})),n.jsxs("div",{className:"rnf-notification-cell__content-outer",children:[o.body&&n.jsx("div",{className:"rnf-notification-cell__content",dangerouslySetInnerHTML:{__html:o.body.rendered}}),d&&n.jsx("div",{className:"rnf-notification-cell__child-content",children:d}),n.jsx("span",{className:"rnf-notification-cell__timestamp",children:a.formatTimestamp(e.inserted_at,{locale:v})})]}),a.renderNodeOrFallback(m,n.jsx(p.ArchiveButton,{item:e}))]})})});exports.NotificationCell=h;
 //# sourceMappingURL=NotificationCell.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationCell.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ContentBlock, FeedItem } from \"@knocklabs/client\";\nimport { Avatar } from \"./Avatar\";\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport {\n useKnockFeed,\n useTranslations,\n formatTimestamp,\n renderNodeOrFallback,\n} from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n onItemClick?: (item: FeedItem) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(({ item, onItemClick, avatar, children, archiveButton }, ref) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { ~~dateFnsLocale~~ } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = blocksByName.action_url && blocksByName.action_url.rendered;\n\n const onClick = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item);\n\n if (onItemClick) return onItemClick(item);\n\n // Delay when we navigate, until we've actually issued our API call.\n setTimeout(() => {\n if (actionUrl && actionUrl !== \"\") {\n window.location.assign(actionUrl);\n }\n }, 200);\n }, [item]);\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onClick();\n break;\n }\n default:\n break;\n }\n },\n [onClick],\n );\n\n const actor = item.actors[0];\n\n return (\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && <div className=\"rnf-notification-cell__unread-dot\" />}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{ __html: blocksByName.body.rendered }}\n />\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale: ~~dateFnsLocale()~~ })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n});\n"],"names":["NotificationCell","React","item","onItemClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","~~dateFnsLocale~~","useTranslations","blocksByName","useMemo","acc","block","actionUrl","onClick","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","formatTimestamp","ArchiveButton"],"mappings":"oUAyBaA,EAAmBC,EAAM,QAAA,WAGpC,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,OAAAC,EAAQ,SAAAC,EAAU,cAAAC,CAAc,EAAGC,IAAQ,CACjE,KAAM,CAAE,WAAAC,EAAY,UAAAC,CAAU,EAAIC,EAAa,aAAA,EACzC,CAAE,~~cAAAC~~,~~GAAkBC~~,EAAAA,~~kBAEpBC~~,EAA4BC,EAAAA,QAAQ,IACjCZ,EAAK,OAAO,OAAO,CAACa,EAAKC,KACvB,CAAE,GAAGD,EAAK,CAACC,EAAM,IAAI,EAAGA,CAAM,GACpC,CAAE,CAAA,EACJ,CAACd,CAAI,CAAC,EAEHe,EAAYJ,EAAa,YAAcA,EAAa,WAAW,SAE/DK,EAAUjB,UAAM,YAAY,IAAM,CAIlC,GAFJO,EAAW,iBAAiBN,CAAI,EAE5BC,EAAa,OAAOA,EAAYD,CAAI,EAGxC,WAAW,IAAM,CACXe,GAAaA,IAAc,IACtB,OAAA,SAAS,OAAOA,CAAS,GAEjC,GAAG,CAAA,EACL,CAACf,CAAI,CAAC,EAEHiB,EAAYlB,EAAAA,QAAM,YACrBmB,GAA4C,CAC3C,OAAQA,EAAG,IAAK,CACd,IAAK,QAAS,CACZA,EAAG,gBAAgB,EACXF,IACR,KACF,CAGF,CACF,EACA,CAACA,CAAO,CAAA,EAGJG,EAAQnB,EAAK,OAAO,CAAC,EAGzB,OAAAoB,EAAA,IAAC,MAAA,CACC,IAAAf,EACA,UAAW,gDAAgDE,CAAS,GACpE,QAAAS,EACA,UAAAC,EACA,SAAU,EAEV,SAAAI,EAAA,KAAC,MAAI,CAAA,UAAU,+BACZ,SAAA,CAAA,CAACrB,EAAK,SAAYoB,EAAA,IAAA,MAAA,CAAI,UAAU,oCAAoC,EAEpEE,EAAA,qBACCpB,EACAiB,GAAS,SAAUA,GAASA,EAAM,MAChCC,EAAAA,IAACG,EAAAA,OAAO,CAAA,KAAMJ,EAAM,KAAM,IAAKA,EAAM,MAAQ,CAAA,CAEjD,EAEAE,EAAAA,KAAC,MAAI,CAAA,UAAU,uCACZ,SAAA,CAAAV,EAAa,MACZS,EAAA,IAAC,MAAA,CACC,UAAU,iCACV,wBAAyB,CAAE,OAAQT,EAAa,KAAK,QAAS,CAAA,CAChE,EAGDR,GACCiB,EAAA,IAAC,MAAI,CAAA,UAAU,uCACZ,SAAAjB,EACH,~~EAGDiB~~,EAAAA,~~IAAA~~,~~OAAA~~,~~CAAK~~,UAAU,mCACb,~~SAAgBI~~,~~EAAAA~~,~~gBAAAxB,~~EAAK,YAAa,CAAE,~~OAAQS~~,~~EAAgB~~,~~CAAA,~~CAAC,~~CAChE~~,CAAA,CAAA,EACF,EAECa,EAAqB,qBAAAlB,EAAgBgB,EAAA,IAAAK,EAAA,cAAA,CAAc,KAAAzB,CAAY,CAAA,CAAE,CAAA,EACpE,CAAA,CAAA,CAGN,CAAC"}
1	+ {"version":3,"file":"NotificationCell.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ContentBlock, FeedItem } from \"@knocklabs/client\";\nimport { Avatar } from \"./Avatar\";\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport {\n useKnockFeed,\n useTranslations,\n formatTimestamp,\n renderNodeOrFallback,\n} from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n onItemClick?: (item: FeedItem) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(({ item, onItemClick, avatar, children, archiveButton }, ref) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { locale } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = blocksByName.action_url && blocksByName.action_url.rendered;\n\n const onClick = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item);\n\n if (onItemClick) return onItemClick(item);\n\n // Delay when we navigate, until we've actually issued our API call.\n setTimeout(() => {\n if (actionUrl && actionUrl !== \"\") {\n window.location.assign(actionUrl);\n }\n }, 200);\n }, [item]);\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onClick();\n break;\n }\n default:\n break;\n }\n },\n [onClick],\n );\n\n const actor = item.actors[0];\n\n return (\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && <div className=\"rnf-notification-cell__unread-dot\" />}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{ __html: blocksByName.body.rendered }}\n />\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n});\n"],"names":["NotificationCell","React","item","onItemClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","onClick","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","formatTimestamp","ArchiveButton"],"mappings":"oUAyBaA,EAAmBC,EAAM,QAAA,WAGpC,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,OAAAC,EAAQ,SAAAC,EAAU,cAAAC,CAAc,EAAGC,IAAQ,CACjE,KAAM,CAAE,WAAAC,EAAY,UAAAC,CAAU,EAAIC,EAAa,aAAA,EACzC,CAAE,OAAAC,GAAWC,EAAAA,kBAEbC,EAA4BC,EAAAA,QAAQ,IACjCZ,EAAK,OAAO,OAAO,CAACa,EAAKC,KACvB,CAAE,GAAGD,EAAK,CAACC,EAAM,IAAI,EAAGA,CAAM,GACpC,CAAE,CAAA,EACJ,CAACd,CAAI,CAAC,EAEHe,EAAYJ,EAAa,YAAcA,EAAa,WAAW,SAE/DK,EAAUjB,UAAM,YAAY,IAAM,CAIlC,GAFJO,EAAW,iBAAiBN,CAAI,EAE5BC,EAAa,OAAOA,EAAYD,CAAI,EAGxC,WAAW,IAAM,CACXe,GAAaA,IAAc,IACtB,OAAA,SAAS,OAAOA,CAAS,GAEjC,GAAG,CAAA,EACL,CAACf,CAAI,CAAC,EAEHiB,EAAYlB,EAAAA,QAAM,YACrBmB,GAA4C,CAC3C,OAAQA,EAAG,IAAK,CACd,IAAK,QAAS,CACZA,EAAG,gBAAgB,EACXF,IACR,KACF,CAGF,CACF,EACA,CAACA,CAAO,CAAA,EAGJG,EAAQnB,EAAK,OAAO,CAAC,EAGzB,OAAAoB,EAAA,IAAC,MAAA,CACC,IAAAf,EACA,UAAW,gDAAgDE,CAAS,GACpE,QAAAS,EACA,UAAAC,EACA,SAAU,EAEV,SAAAI,EAAA,KAAC,MAAI,CAAA,UAAU,+BACZ,SAAA,CAAA,CAACrB,EAAK,SAAYoB,EAAA,IAAA,MAAA,CAAI,UAAU,oCAAoC,EAEpEE,EAAA,qBACCpB,EACAiB,GAAS,SAAUA,GAASA,EAAM,MAChCC,EAAAA,IAACG,EAAAA,OAAO,CAAA,KAAMJ,EAAM,KAAM,IAAKA,EAAM,MAAQ,CAAA,CAEjD,EAEAE,EAAAA,KAAC,MAAI,CAAA,UAAU,uCACZ,SAAA,CAAAV,EAAa,MACZS,EAAA,IAAC,MAAA,CACC,UAAU,iCACV,wBAAyB,CAAE,OAAQT,EAAa,KAAK,QAAS,CAAA,CAChE,EAGDR,GACCiB,EAAA,IAAC,MAAI,CAAA,UAAU,uCACZ,SAAAjB,EACH,EAGFiB,EAAAA,IAAC,OAAK,CAAA,UAAU,mCACb,SAAAI,kBAAgBxB,EAAK,YAAa,CAAE,OAAAS,CAAO,CAAC,CAC/C,CAAA,CAAA,EACF,EAECa,EAAqB,qBAAAlB,EAAgBgB,EAAA,IAAAK,EAAA,cAAA,CAAc,KAAAzB,CAAY,CAAA,CAAE,CAAA,EACpE,CAAA,CAAA,CAGN,CAAC"}

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

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

package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("react"),q=require("react-popper"),x=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");const y=require("@knocklabs/react-core");const F=require("../../../core/hooks/useComponentVisible.js");require("./styles.css.js");const N=({store:e,feedClient:o})=>{e.metadata.unseen_count>0&&o.markAllAsSeen()},b=({isVisible:e,onOpen:o=N,onClose:i,buttonRef:n,closeOnClickOutside:s=!0,placement:c="bottom-end",...f})=>{const{colorMode:a,feedClient:d,useFeedStore:u}=y.useKnockFeed(),p=u(),{ref:r}=F(e,i,{closeOnClickOutside:s}),{styles:l,attributes:m}=q.usePopper(n.current,r.current,{strategy:"fixed",placement:c,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return v.useEffect(()=>{e&&o&&o({store:p,feedClient:d})},[e]),t.jsx("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${a}`,style:{...l.popper,visibility:e?"visible":"hidden"},ref:r,...m.popper,role:"dialog",tabIndex:-1,children:t.jsx("div",{className:"rnf-notification-feed-popover__inner",children:t.jsx(x.NotificationFeed,{...f})})})};exports.NotificationFeedPopover=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("react"),q=require("react-popper"),x=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");const y=require("@knocklabs/react-core");const F=require("../../../core/hooks/useComponentVisible.js");const N=({store:e,feedClient:o})=>{e.metadata.unseen_count>0&&o.markAllAsSeen()},b=({isVisible:e,onOpen:o=N,onClose:i,buttonRef:n,closeOnClickOutside:s=!0,placement:c="bottom-end",...f})=>{const{colorMode:a,feedClient:d,useFeedStore:u}=y.useKnockFeed(),p=u(),{ref:r}=F(e,i,{closeOnClickOutside:s}),{styles:l,attributes:m}=q.usePopper(n.current,r.current,{strategy:"fixed",placement:c,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return v.useEffect(()=>{e&&o&&o({store:p,feedClient:d})},[e]),t.jsx("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${a}`,style:{...l.popper,visibility:e?"visible":"hidden"},ref:r,...m.popper,role:"dialog",tabIndex:-1,children:t.jsx("div",{className:"rnf-notification-feed-popover__inner",children:t.jsx(x.NotificationFeed,{...f})})})};exports.NotificationFeedPopover=b;
 //# sourceMappingURL=NotificationFeedPopover.js.map

package/dist/esm/{index.mjs → index.esm.js} RENAMED Viewed

@@ -1,22 +1,22 @@
-import { Button as t } from "./modules/core/components/Button/Button.mjs";
-import { ButtonGroup as p } from "./modules/core/components/Button/ButtonGroup.mjs";
-import { BellIcon as m } from "./modules/core/components/Icons/Bell.mjs";
-import { CheckmarkCircle as x } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
-import { ChevronDown as c } from "./modules/core/components/Icons/ChevronDown.mjs";
-import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.mjs";
-import { Spinner as u } from "./modules/core/components/Spinner/Spinner.mjs";
-import { default as N } from "./modules/core/hooks/useOnBottomScroll.mjs";
-import { EmptyFeed as F } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
-import { NotificationCell as v } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
-import { Avatar as A } from "./modules/feed/components/NotificationCell/Avatar.mjs";
-import { NotificationFeed as S } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
-import { NotificationFeedHeader as w } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
-import { MarkAsRead as D } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
-import { NotificationFeedContainer as G } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
-import { NotificationFeedPopover as M } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
-import { NotificationIconButton as P } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
-import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
+import { Button as t } from "./modules/core/components/Button/Button.esm.js";
+import { ButtonGroup as p } from "./modules/core/components/Button/ButtonGroup.esm.js";
+import { BellIcon as m } from "./modules/core/components/Icons/Bell.esm.js";
+import { CheckmarkCircle as x } from "./modules/core/components/Icons/CheckmarkCircle.esm.js";
+import { ChevronDown as c } from "./modules/core/components/Icons/ChevronDown.esm.js";
+import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.esm.js";
+import { Spinner as u } from "./modules/core/components/Spinner/Spinner.esm.js";
+import { default as N } from "./modules/core/hooks/useOnBottomScroll.esm.js";
+import { EmptyFeed as F } from "./modules/feed/components/EmptyFeed/EmptyFeed.esm.js";
+import { NotificationCell as v } from "./modules/feed/components/NotificationCell/NotificationCell.esm.js";
+import { Avatar as A } from "./modules/feed/components/NotificationCell/Avatar.esm.js";
+import { NotificationFeed as S } from "./modules/feed/components/NotificationFeed/NotificationFeed.esm.js";
+import { NotificationFeedHeader as w } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.esm.js";
+import { MarkAsRead as D } from "./modules/feed/components/NotificationFeed/MarkAsRead.esm.js";
+import { NotificationFeedContainer as G } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.esm.js";
+import { NotificationFeedPopover as M } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.esm.js";
+import { NotificationIconButton as P } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.esm.js";
+import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.esm.js";
 export * from "@knocklabs/react-core";
 export {
   A as Avatar,
@@ -38,4 +38,4 @@ export {
   U as UnseenBadge,
   N as useOnBottomScroll
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.esm.js.map

package/dist/esm/index.esm.js.map ADDED Viewed

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

package/dist/esm/modules/core/components/Button/{Button.mjs → Button.esm.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
 import { useKnockFeed as m } from "@knocklabs/react-core";
-import { ButtonSpinner as c } from "./ButtonSpinner.mjs";
+import { ButtonSpinner as c } from "./ButtonSpinner.esm.js";
 const j = ({
   variant: r = "primary",
@@ -35,4 +35,4 @@ const j = ({
 export {
   j as Button
 };
-//# sourceMappingURL=Button.mjs.map
+//# sourceMappingURL=Button.esm.js.map

package/dist/esm/modules/core/components/Button/Button.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/esm/modules/core/components/Button/{ButtonGroup.mjs → ButtonGroup.esm.js} RENAMED Viewed

@@ -4,4 +4,4 @@ const m = ({ children: o }) => /* @__PURE__ */ t("div", { className: "rnf-button
 export {
   m as ButtonGroup
 };
-//# sourceMappingURL=ButtonGroup.mjs.map
+//# sourceMappingURL=ButtonGroup.esm.js.map

package/dist/esm/modules/core/components/Button/ButtonGroup.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/esm/modules/core/components/Button/{ButtonSpinner.mjs → ButtonSpinner.esm.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Spinner as r } from "../Spinner/Spinner.mjs";
+import { Spinner as r } from "../Spinner/Spinner.esm.js";
 const p = ({ hasLabel: t }) => /* @__PURE__ */ n(
   "div",
@@ -11,4 +11,4 @@ const p = ({ hasLabel: t }) => /* @__PURE__ */ n(
 export {
   p as ButtonSpinner
 };
-//# sourceMappingURL=ButtonSpinner.mjs.map
+//# sourceMappingURL=ButtonSpinner.esm.js.map

package/dist/esm/modules/core/components/Button/ButtonSpinner.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/esm/modules/core/components/Icons/{Bell.mjs → Bell.esm.js} RENAMED Viewed

@@ -26,4 +26,4 @@ function C({ width: r = 24, height: e = 24 }) {
 export {
   C as BellIcon
 };
-//# sourceMappingURL=Bell.mjs.map
+//# sourceMappingURL=Bell.esm.js.map

package/dist/esm/modules/core/components/Icons/Bell.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/esm/modules/core/components/Icons/{CheckmarkCircle.mjs → CheckmarkCircle.esm.js} RENAMED Viewed

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

package/dist/esm/modules/core/components/Icons/CheckmarkCircle.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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

package/dist/esm/modules/core/components/Icons/ChevronDown.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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

package/dist/esm/modules/core/components/Icons/CloseCircle.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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

package/dist/esm/modules/core/components/Spinner/Spinner.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Spinner.esm.js","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n if (speed === \"fast\") return 600;\n if (speed === \"slow\") return 900;\n return 750;\n}\n\nexport interface SpinnerProps {\n color?: string;\n speed?: Speed;\n gap?: number;\n thickness?: number;\n size?: string;\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color = \"rgba(0,0,0,0.4)\",\n speed = \"medium\",\n gap = 4,\n thickness = 4,\n size = \"1em\",\n ...props\n}) => (\n <svg\n height={size}\n width={size}\n {...props}\n style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n className=\"__react-svg-spinner_circle\"\n role=\"img\"\n aria-labelledby=\"title desc\"\n viewBox=\"0 0 32 32\"\n >\n <title id=\"title\">Circle loading spinner</title>\n <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n <style\n dangerouslySetInnerHTML={{\n __html: `\n .__react-svg-spinner_circle{\n transition-property: transform;\n animation-name: __react-svg-spinner_infinite-spin;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n @keyframes __react-svg-spinner_infinite-spin {\n from {transform: rotate(0deg)}\n to {transform: rotate(360deg)}\n }\n `,\n }}\n />\n <circle\n role=\"presentation\"\n cx={16}\n cy={16}\n r={14 - thickness / 2}\n stroke={color}\n fill=\"none\"\n strokeWidth={thickness}\n strokeDasharray={Math.PI * 2 * (11 - gap)}\n strokeLinecap=\"round\"\n />\n </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","jsxs","jsx"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AACjC,SAAIA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAAkC,CAAC;AAAA,EAC9C,OAAAC,IAAQ;AAAA,EACR,OAAAF,IAAQ;AAAA,EACR,KAAAG,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,QAAQF;AAAA,IACR,OAAOA;AAAA,IACN,GAAGC;AAAA,IACJ,OAAO,EAAE,mBAAmB,GAAGP,EAAYC,CAAK,CAAC,KAAK;AAAA,IACtD,WAAU;AAAA,IACV,MAAK;AAAA,IACL,mBAAgB;AAAA,IAChB,SAAQ;AAAA,IAER,UAAA;AAAA,MAAC,gBAAAQ,EAAA,SAAA,EAAM,IAAG,SAAQ,UAAsB,0BAAA;AAAA,MACvC,gBAAAA,EAAA,QAAA,EAAK,IAAG,QAAO,UAA+C,mDAAA;AAAA,MAC/D,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,yBAAyB;AAAA,YACvB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYV;AAAA,QAAA;AAAA,MACF;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,GAAG,KAAKJ,IAAY;AAAA,UACpB,QAAQF;AAAA,UACR,MAAK;AAAA,UACL,aAAaE;AAAA,UACb,iBAAiB,KAAK,KAAK,KAAK,KAAKD;AAAA,UACrC,eAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AACF;"}

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

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

package/dist/esm/modules/core/hooks/useComponentVisible.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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

package/dist/esm/modules/core/hooks/useOnBottomScroll.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useOnBottomScroll.esm.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","scrollNode","scrollContainerBottomPosition","useEffect"],"mappings":";;AASA,MAAMA,IAAO,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnD,QAAAC,IAAWD,EAAQ,YAAYF,GAC/BI,IAAMF,EAAQ,KACdG,IAASH,EAAQ,UAAU,GAE3BI,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAI,SAAS;AACf,YAAMO,IAAaP,EAAI,SACjBQ,IAAgC,KAAK;AAAA,QACzCD,EAAW,YAAYA,EAAW;AAAA,MAAA;AAIpC,MAFuB,KAAK,MAAMA,EAAW,eAAeN,CAAM,KAE5CO,KACFN;IAEtB;AAAA,EAAA,GACC,CAACA,CAAiB,CAAC;AAEtB,EAAAO,EAAU,OACJT,EAAI,WACFA,EAAA,QAAQ,iBAAiB,UAAUK,CAAc,GAGhD,MAAM;AACX,IAAIL,EAAI,WACFA,EAAA,QAAQ,oBAAoB,UAAUK,CAAc;AAAA,EAC1D,IAED,CAACA,CAAc,CAAC;AACrB;"}

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

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

package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EmptyFeed.esm.js","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport \"./styles.css\";\n\nexport const EmptyFeed: React.FC = () => {\n const { colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n return (\n <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n <div className=\"rnf-empty-feed__inner\">\n <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n </div>\n </div>\n );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","jsx","jsxs"],"mappings":";;;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA,EAAE,WAAAC,MAAcC,KAChB,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,SAAI,WAAW,kCAAkCJ,CAAS,IACzD,UAAA,gBAAAK,EAAC,OAAI,EAAA,WAAU,yBACb,UAAA;AAAA,IAAA,gBAAAD,EAAC,MAAG,EAAA,WAAU,0BAA0B,UAAAF,EAAE,gBAAgB,GAAE;AAAA,sBAC3D,KAAE,EAAA,WAAU,wBAAwB,UAAAA,EAAE,eAAe,GAAE;AAAA,EAAA,EAC1D,CAAA,EACF,CAAA;AAEJ;"}

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

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

package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ArchiveButton.esm.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","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","jsxs","jsx","CloseCircle"],"mappings":";;;;;AAUA,MAAMA,IAA8C,CAAC,EAAE,MAAAC,QAAW;AAChE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa,GACzC,EAAE,GAAAC,MAAMC,KAERC,IAAUC;AAAA,IACd,CAACC,MAAqC;AACpC,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAElBN,EAAW,eAAeF,CAAI;AAAA,IAChC;AAAA,IACA,CAACA,CAAI;AAAA,EAAA,GAGD,EAAE,iBAAAS,GAAiB,eAAAC,GAAe,eAAAC,GAAe,SAAAC,MACrDC,EAAiB,EAAE,WAAW,UAAA,CAAW;AAGzC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKH;AAAA,MACL,SAAAL;AAAA,MACA,MAAK;AAAA,MACL,cAAYF,EAAE,qBAAqB;AAAA,MACnC,WAAW,8DAA8DH,CAAS;AAAA,MAElF,UAAA;AAAA,QAAA,gBAAAc,EAACC,GAAY,EAAA;AAAA,QAEZJ,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKL;AAAA,YACJ,GAAGD,EAAgB;AAAA,cAClB,WAAW,4BAA4BR,CAAS;AAAA,YAAA,CACjD;AAAA,YAEA,YAAE,qBAAqB;AAAA,UAAA;AAAA,QAC1B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

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

package/dist/esm/modules/feed/components/NotificationCell/Avatar.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Avatar.esm.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","jsx"],"mappings":";;AAQO,MAAMA,IAAgC,CAAC,EAAE,MAAAC,GAAM,KAAAC,QAAU;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAK,MAAM,GAAG;AAC5C,WAAOG,KAAaC,IAChB,GAAGD,EAAU,OAAO,CAAC,CAAC,GAAGC,EAAS,OAAO,CAAC,CAAC,KAC3CD,IACEA,EAAU,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAA,gBAAAE,EAAC,SAAI,WAAU,cACZ,cACE,gBAAAA,EAAA,OAAA,EAAI,KAAAJ,GAAU,KAAK,YAAYD,CAAI,IAAI,WAAU,oBAAA,CAAoB,IAErE,gBAAAK,EAAA,QAAA,EAAK,WAAU,wBAAwB,UAAAH,EAAYF,CAAI,EAAE,CAAA,EAE9D,CAAA;AAEJ;"}

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

@@ -1,11 +1,11 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
 import i, { useMemo as h } from "react";
-import { Avatar as y } from "./Avatar.mjs";
-import { ArchiveButton as w } from "./ArchiveButton.mjs";
+import { Avatar as y } from "./Avatar.esm.js";
+import { ArchiveButton as w } from "./ArchiveButton.esm.js";
 import { useKnockFeed as x, useTranslations as C, renderNodeOrFallback as m, formatTimestamp as T } from "@knocklabs/react-core";
 const I = i.forwardRef(({ item: n, onItemClick: l, avatar: _, children: s, archiveButton: u }, p) => {
-  const { feedClient: N, colorMode: b } = x(), { dateFnsLocale: k } = C(), a = h(() => n.blocks.reduce((t, d) => ({ ...t, [d.name]: d }), {}), [n]), r = a.action_url && a.action_url.rendered, c = i.useCallback(() => {
+  const { feedClient: N, colorMode: b } = x(), { locale: k } = C(), a = h(() => n.blocks.reduce((t, d) => ({ ...t, [d.name]: d }), {}), [n]), r = a.action_url && a.action_url.rendered, c = i.useCallback(() => {
     if (N.markAsInteracted(n), l)
       return l(n);
     setTimeout(() => {
@@ -45,7 +45,7 @@ const I = i.forwardRef(({ item: n, onItemClick: l, avatar: _, children: s, archi
             }
           ),
           s && /* @__PURE__ */ e("div", { className: "rnf-notification-cell__child-content", children: s }),
-          /* @__PURE__ */ e("span", { className: "rnf-notification-cell__timestamp", children: T(n.inserted_at, { locale: k() }) })
+          /* @__PURE__ */ e("span", { className: "rnf-notification-cell__timestamp", children: T(n.inserted_at, { locale: k }) })
         ] }),
         m(u, /* @__PURE__ */ e(w, { item: n }))
       ] })
@@ -55,4 +55,4 @@ const I = i.forwardRef(({ item: n, onItemClick: l, avatar: _, children: s, archi
 export {
   I as NotificationCell
 };
-//# sourceMappingURL=NotificationCell.mjs.map
+//# sourceMappingURL=NotificationCell.esm.js.map

package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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

package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dropdown.esm.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","jsxs","jsx","ChevronDown"],"mappings":";;;;AAWO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC;AAEtB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAW,8BAA8BF,CAAS,IACrD,UAAA;AAAA,IAAC,gBAAAG,EAAA,UAAA,EAAO,OAAAL,GAAc,UAAAC,GACnB,UAAAF,EACH,CAAA;AAAA,sBACCO,GAAY,EAAA;AAAA,EACf,EAAA,CAAA;AAEJ;"}

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

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

package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MarkAsRead.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n const unreadItems = useFeedStore((state) =>\n state.items.filter((item) => !item.read_at),\n );\n\n const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n const onClickHandler = React.useCallback(\n (e: React.MouseEvent) => {\n feedClient.markAllAsRead();\n if (onClick) onClick(e, unreadItems);\n },\n [feedClient, unreadItems, onClick],\n );\n\n return (\n <button\n className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n disabled={unreadCount === 0}\n onClick={onClickHandler}\n type=\"button\"\n >\n {t(\"markAllAsRead\")}\n <CheckmarkCircle />\n </button>\n );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","item","unreadCount","onClickHandler","React","jsxs","CheckmarkCircle"],"mappings":";;;;;AAWO,MAAMA,IAAwC,CAAC,EAAE,SAAAC,QAAc;AACpE,QAAM,EAAE,cAAAC,GAAc,YAAAC,GAAY,WAAAC,MAAcC,EAAa,GACvD,EAAE,GAAAC,MAAMC,KAERC,IAAcN;AAAA,IAAa,CAACO,MAChCA,EAAM,MAAM,OAAO,CAACC,MAAS,CAACA,EAAK,OAAO;AAAA,EAAA,GAGtCC,IAAcT,EAAa,CAACO,MAAUA,EAAM,SAAS,YAAY,GAEjEG,IAAiBC,EAAM;AAAA,IAC3B,CAAC,MAAwB;AACvB,MAAAV,EAAW,cAAc,GACrBF,KAASA,EAAQ,GAAGO,CAAW;AAAA,IACrC;AAAA,IACA,CAACL,GAAYK,GAAaP,CAAO;AAAA,EAAA;AAIjC,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8CAA8CV,CAAS;AAAA,MAClE,UAAUO,MAAgB;AAAA,MAC1B,SAASC;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAN,EAAE,eAAe;AAAA,0BACjBS,GAAgB,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvB;"}

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

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

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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