@knocklabs/react 0.1.0 → 0.1.2

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 (34) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/index.css +1 -1
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/cjs/modules/core/components/Button/Button.js +1 -1
  5. package/dist/cjs/modules/core/components/Button/ButtonGroup.js +1 -1
  6. package/dist/cjs/modules/core/components/Button/ButtonSpinner.js +1 -1
  7. package/dist/cjs/modules/feed/components/EmptyFeed/EmptyFeed.js +1 -1
  8. package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js +1 -1
  9. package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js +1 -1
  10. package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js +1 -1
  11. package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js +1 -1
  12. package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js +1 -1
  13. package/dist/cjs/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js +2 -0
  14. package/dist/cjs/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js.map +1 -0
  15. package/dist/cjs/modules/feed/components/NotificationFeedContainer/styles.css.js +2 -0
  16. package/dist/cjs/modules/feed/components/NotificationFeedContainer/styles.css.js.map +1 -0
  17. package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js +1 -1
  18. package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js +1 -1
  19. package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js +1 -1
  20. package/dist/esm/index.mjs +16 -14
  21. package/dist/esm/index.mjs.map +1 -1
  22. package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs +9 -0
  23. package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs.map +1 -0
  24. package/dist/esm/modules/feed/components/NotificationFeedContainer/styles.css.mjs +2 -0
  25. package/dist/esm/modules/feed/components/NotificationFeedContainer/styles.css.mjs.map +1 -0
  26. package/dist/index.css +1 -1
  27. package/dist/types/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.d.ts +3 -0
  28. package/dist/types/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.d.ts.map +1 -0
  29. package/dist/types/modules/feed/components/NotificationFeedContainer/index.d.ts +2 -0
  30. package/dist/types/modules/feed/components/NotificationFeedContainer/index.d.ts.map +1 -0
  31. package/dist/types/modules/feed/index.d.ts +1 -0
  32. package/dist/types/modules/feed/index.d.ts.map +1 -1
  33. package/package.json +7 -7
  34. package/dist/cjs/theme.css.js +0 -2
package/README.md CHANGED
@@ -6,7 +6,7 @@ A set of components for integrating [Knock](https://knock.app) into a React appl
6
6
 
7
7
  [See a live demo](https://knock-in-app-notifications-react.vercel.app/)
8
8
 
9
- ![In-app feed component example](NotificationFeed.png)
9
+ ![In-app feed component example](/NotificationFeed.png)
10
10
 
11
11
  **Note: these components are designed to be used via React for web only.**
12
12
 
@@ -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-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-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}: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-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}
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-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-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-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)}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider *{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}: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-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-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-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}
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./modules/core/components/Button/Button.js"),r=require("./modules/core/components/Button/ButtonGroup.js"),i=require("./modules/core/components/Icons/Bell.js"),n=require("./modules/core/components/Icons/CheckmarkCircle.js"),c=require("./modules/core/components/Icons/ChevronDown.js"),a=require("./modules/core/components/Icons/CloseCircle.js"),u=require("./modules/core/components/Spinner/Spinner.js"),s=require("./modules/core/hooks/useOnBottomScroll.js"),l=require("./modules/feed/components/EmptyFeed/EmptyFeed.js"),d=require("./modules/feed/components/NotificationCell/NotificationCell.js"),f=require("./modules/feed/components/NotificationCell/Avatar.js"),q=require("./modules/feed/components/NotificationFeed/NotificationFeed.js"),C=require("./modules/feed/components/NotificationFeed/NotificationFeedHeader.js"),p=require("./modules/feed/components/NotificationFeed/MarkAsRead.js"),B=require("./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js"),N=require("./modules/feed/components/NotificationIconButton/NotificationIconButton.js"),F=require("./modules/feed/components/UnseenBadge/UnseenBadge.js"),o=require("@knocklabs/react-core");exports.Button=t.Button;exports.ButtonGroup=r.ButtonGroup;exports.BellIcon=i.BellIcon;exports.CheckmarkCircle=n.CheckmarkCircle;exports.ChevronDown=c.ChevronDown;exports.CloseCircle=a.CloseCircle;exports.Spinner=u.Spinner;exports.useOnBottomScroll=s;exports.EmptyFeed=l.EmptyFeed;exports.NotificationCell=d.NotificationCell;exports.Avatar=f.Avatar;exports.NotificationFeed=q.NotificationFeed;exports.NotificationFeedHeader=C.NotificationFeedHeader;exports.MarkAsRead=p.MarkAsRead;exports.NotificationFeedPopover=B.NotificationFeedPopover;exports.NotificationIconButton=N.NotificationIconButton;exports.UnseenBadge=F.UnseenBadge;Object.keys(o).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})});
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./modules/core/components/Button/Button.js"),i=require("./modules/core/components/Button/ButtonGroup.js"),r=require("./modules/core/components/Icons/Bell.js"),n=require("./modules/core/components/Icons/CheckmarkCircle.js"),c=require("./modules/core/components/Icons/ChevronDown.js"),a=require("./modules/core/components/Icons/CloseCircle.js"),u=require("./modules/core/components/Spinner/Spinner.js"),s=require("./modules/core/hooks/useOnBottomScroll.js"),l=require("./modules/feed/components/EmptyFeed/EmptyFeed.js"),d=require("./modules/feed/components/NotificationCell/NotificationCell.js"),f=require("./modules/feed/components/NotificationCell/Avatar.js"),C=require("./modules/feed/components/NotificationFeed/NotificationFeed.js"),q=require("./modules/feed/components/NotificationFeed/NotificationFeedHeader.js"),N=require("./modules/feed/components/NotificationFeed/MarkAsRead.js"),p=require("./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js"),B=require("./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js"),F=require("./modules/feed/components/NotificationIconButton/NotificationIconButton.js"),m=require("./modules/feed/components/UnseenBadge/UnseenBadge.js"),o=require("@knocklabs/react-core");exports.Button=t.Button;exports.ButtonGroup=i.ButtonGroup;exports.BellIcon=r.BellIcon;exports.CheckmarkCircle=n.CheckmarkCircle;exports.ChevronDown=c.ChevronDown;exports.CloseCircle=a.CloseCircle;exports.Spinner=u.Spinner;exports.useOnBottomScroll=s;exports.EmptyFeed=l.EmptyFeed;exports.NotificationCell=d.NotificationCell;exports.Avatar=f.Avatar;exports.NotificationFeed=C.NotificationFeed;exports.NotificationFeedHeader=q.NotificationFeedHeader;exports.MarkAsRead=N.MarkAsRead;exports.NotificationFeedContainer=p.NotificationFeedContainer;exports.NotificationFeedPopover=B.NotificationFeedPopover;exports.NotificationIconButton=F.NotificationIconButton;exports.UnseenBadge=m.UnseenBadge;Object.keys(o).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})});
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const d=({variant:r="primary",loadingText:n,isLoading:t=!1,isDisabled:s=!1,isFullWidth:u=!1,onClick:a,children:o})=>{const{colorMode:c}=i.useKnockFeed(),l=["rnf-button",`rnf-button--${r}`,u?"rnf-button--full-width":"",t?"rnf-button--is-loading":"",`rnf-button--${c}`].join(" "),b=n||e.jsx("span",{className:"rnf-button__button-text-hidden",children:o});return e.jsxs("button",{onClick:a,className:l,disabled:t||s,type:"button",children:[t&&e.jsx(f.ButtonSpinner,{hasLabel:!!n}),t?b:o]})};exports.Button=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@knocklabs/react-core"),f=require("./ButtonSpinner.js");const d=({variant:r="primary",loadingText:n,isLoading:t=!1,isDisabled:s=!1,isFullWidth:u=!1,onClick:a,children:o})=>{const{colorMode:c}=i.useKnockFeed(),l=["rnf-button",`rnf-button--${r}`,u?"rnf-button--full-width":"",t?"rnf-button--is-loading":"",`rnf-button--${c}`].join(" "),b=n||e.jsx("span",{className:"rnf-button__button-text-hidden",children:o});return e.jsxs("button",{onClick:a,className:l,disabled:t||s,type:"button",children:[t&&e.jsx(f.ButtonSpinner,{hasLabel:!!n}),t?b:o]})};exports.Button=d;
2
2
  //# sourceMappingURL=Button.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const o=({children:t})=>e.jsx("div",{className:"rnf-button-group",children:t});exports.ButtonGroup=o;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");const o=({children:t})=>e.jsx("div",{className:"rnf-button-group",children:t});exports.ButtonGroup=o;
2
2
  //# sourceMappingURL=ButtonGroup.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=const r=({hasLabel:e})=>n.jsx("div",{className:`rnf-button-spinner rnf-button-spinner--${e?"with-label":"without-label"}`,children:n.jsx(t.Spinner,{})});exports.ButtonSpinner=r;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("../Spinner/Spinner.js");const r=({hasLabel:e})=>n.jsx("div",{className:`rnf-button-spinner rnf-button-spinner--${e?"with-label":"without-label"}`,children:n.jsx(t.Spinner,{})});exports.ButtonSpinner=r;
2
2
  //# sourceMappingURL=ButtonSpinner.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const n=()=>{const{colorMode:s}=t.useKnockFeed(),{t:r}=t.useTranslations();return e.jsx("div",{className:`rnf-empty-feed rnf-empty-feed--${s}`,children:e.jsxs("div",{className:"rnf-empty-feed__inner",children:[e.jsx("h2",{className:"rnf-empty-feed__header",children:r("emptyFeedTitle")}),e.jsx("p",{className:"rnf-empty-feed__body",children:r("emptyFeedBody")})]})})};exports.EmptyFeed=n;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@knocklabs/react-core");const n=()=>{const{colorMode:s}=t.useKnockFeed(),{t:r}=t.useTranslations();return e.jsx("div",{className:`rnf-empty-feed rnf-empty-feed--${s}`,children:e.jsxs("div",{className:"rnf-empty-feed__inner",children:[e.jsx("h2",{className:"rnf-empty-feed__header",children:r("emptyFeedTitle")}),e.jsx("p",{className:"rnf-empty-feed__body",children:r("emptyFeedBody")})]})})};exports.EmptyFeed=n;
2
2
  //# sourceMappingURL=EmptyFeed.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=const c=({name:r,src:e})=>{function i(n){const[a,s]=n.split(" ");return a&&s?`${a.charAt(0)}${s.charAt(0)}`:a?a.charAt(0):""}return t.jsx("div",{className:"rnf-avatar",children:e?t.jsx("img",{src:e,alt:`Image of ${r}`,className:"rnf-avatar__image"}):t.jsx("span",{className:"rnf-avatar__initials",children:i(r)})})};exports.Avatar=c;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");const c=({name:r,src:e})=>{function i(n){const[a,s]=n.split(" ");return a&&s?`${a.charAt(0)}${s.charAt(0)}`:a?a.charAt(0):""}return t.jsx("div",{className:"rnf-avatar",children:e?t.jsx("img",{src:e,alt:`Image of ${r}`,className:"rnf-avatar__image"}):t.jsx("span",{className:"rnf-avatar__initials",children:i(r)})})};exports.Avatar=c;
2
2
  //# sourceMappingURL=Avatar.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=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;
1
+ "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;
2
2
  //# sourceMappingURL=NotificationCell.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const d=({children:o,value:r,onChange:n})=>{const{colorMode:s}=c.useKnockFeed();return e.jsxs("div",{className:`rnf-dropdown rnf-dropdown--${s}`,children:[e.jsx("select",{value:r,onChange:n,children:o}),e.jsx(t.ChevronDown,{})]})};exports.Dropdown=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../core/components/Icons/ChevronDown.js"),c=require("@knocklabs/react-core");const d=({children:o,value:r,onChange:n})=>{const{colorMode:s}=c.useKnockFeed();return e.jsxs("div",{className:`rnf-dropdown rnf-dropdown--${s}`,children:[e.jsx("select",{value:r,onChange:n,children:o}),e.jsx(t.ChevronDown,{})]})};exports.Dropdown=d;
2
2
  //# sourceMappingURL=Dropdown.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=function b(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const k=b(f),p=({onClick:e})=>{const{useFeedStore:r,feedClient:t,colorMode:n}=c.useKnockFeed(),{t:l}=c.useTranslations(),o=r(a=>a.items.filter(d=>!d.read_at)),u=r(a=>a.metadata.unread_count),i=k.useCallback(a=>{t.markAllAsRead(),e&&e(a,o)},[t,o,e]);return s.jsxs("button",{className:`rnf-mark-all-as-read rnf-mark-all-as-read--${n}`,disabled:u===0,onClick:i,type:"button",children:[l("markAllAsRead"),s.jsx(m.CheckmarkCircle,{})]})};exports.MarkAsRead=p;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),c=require("@knocklabs/react-core"),m=require("../../../core/components/Icons/CheckmarkCircle.js");function b(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const k=b(f),p=({onClick:e})=>{const{useFeedStore:r,feedClient:t,colorMode:n}=c.useKnockFeed(),{t:l}=c.useTranslations(),o=r(a=>a.items.filter(d=>!d.read_at)),u=r(a=>a.metadata.unread_count),i=k.useCallback(a=>{t.markAllAsRead(),e&&e(a,o)},[t,o,e]);return s.jsxs("button",{className:`rnf-mark-all-as-read rnf-mark-all-as-read--${n}`,disabled:u===0,onClick:i,type:"button",children:[l("markAllAsRead"),s.jsx(m.CheckmarkCircle,{})]})};exports.MarkAsRead=p;
2
2
  //# sourceMappingURL=MarkAsRead.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=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;
1
+ "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;
2
2
  //# sourceMappingURL=NotificationFeed.js.map
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");const t=({children:e})=>i.jsx("div",{className:"rnf-feed-provider",children:e});exports.NotificationFeedContainer=t;
2
+ //# sourceMappingURL=NotificationFeedContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationFeedContainer.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n children,\n}) => {\n return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","jsx"],"mappings":"gJAGO,MAAMA,EAAyD,CAAC,CACrE,SAAAC,CACF,IACUC,EAAAA,IAAA,MAAA,CAAI,UAAU,oBAAqB,SAAAD,CAAS,CAAA"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=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;
1
+ "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;
2
2
  //# sourceMappingURL=NotificationFeedPopover.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=s(c),f=l.default.forwardRef(({onClick:t,badgeCountType:o},n)=>{const{colorMode:i}=a.useKnockFeed();return e.jsxs("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${i}`,role:"button","aria-label":"Open notification feed",ref:n,onClick:t,children:[e.jsx(r.BellIcon,{}),e.jsx(u.UnseenBadge,{badgeCountType:o})]})});exports.NotificationIconButton=f;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),r=require("../../../core/components/Icons/Bell.js"),a=require("@knocklabs/react-core"),u=require("../UnseenBadge/UnseenBadge.js");const s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=s(c),f=l.default.forwardRef(({onClick:t,badgeCountType:o},n)=>{const{colorMode:i}=a.useKnockFeed();return e.jsxs("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${i}`,role:"button","aria-label":"Open notification feed",ref:n,onClick:t,children:[e.jsx(r.BellIcon,{}),e.jsx(u.UnseenBadge,{badgeCountType:o})]})});exports.NotificationIconButton=f;
2
2
  //# sourceMappingURL=NotificationIconButton.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=function c(n,e){switch(n){case"all":return e.total_count;case"unread":return e.unread_count;case"unseen":return e.unseen_count}}const o=({badgeCountType:n="unseen"})=>{const{useFeedStore:e}=t.useKnockFeed(),u=e(r=>c(n,r.metadata));return u!==0?s.jsx("div",{className:"rnf-unseen-badge",children:s.jsx("span",{className:"rnf-unseen-badge__count",children:t.formatBadgeCount(u)})}):null};exports.UnseenBadge=o;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("@knocklabs/react-core");function c(n,e){switch(n){case"all":return e.total_count;case"unread":return e.unread_count;case"unseen":return e.unseen_count}}const o=({badgeCountType:n="unseen"})=>{const{useFeedStore:e}=t.useKnockFeed(),u=e(r=>c(n,r.metadata));return u!==0?s.jsx("div",{className:"rnf-unseen-badge",children:s.jsx("span",{className:"rnf-unseen-badge__count",children:t.formatBadgeCount(u)})}):null};exports.UnseenBadge=o;
2
2
  //# sourceMappingURL=UnseenBadge.js.map
@@ -1,39 +1,41 @@
1
1
 
2
2
  import { Button as t } from "./modules/core/components/Button/Button.mjs";
3
3
  import { ButtonGroup as p } from "./modules/core/components/Button/ButtonGroup.mjs";
4
- import { BellIcon as i } from "./modules/core/components/Icons/Bell.mjs";
5
- import { CheckmarkCircle as n } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
4
+ import { BellIcon as m } from "./modules/core/components/Icons/Bell.mjs";
5
+ import { CheckmarkCircle as x } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
6
6
  import { ChevronDown as c } from "./modules/core/components/Icons/ChevronDown.mjs";
7
7
  import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.mjs";
8
- import { Spinner as B } from "./modules/core/components/Spinner/Spinner.mjs";
9
- import { default as s } from "./modules/core/hooks/useOnBottomScroll.mjs";
8
+ import { Spinner as u } from "./modules/core/components/Spinner/Spinner.mjs";
9
+ import { default as N } from "./modules/core/hooks/useOnBottomScroll.mjs";
10
10
  import { EmptyFeed as F } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
11
11
  import { NotificationCell as v } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
12
12
  import { Avatar as A } from "./modules/feed/components/NotificationCell/Avatar.mjs";
13
13
  import { NotificationFeed as S } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
14
14
  import { NotificationFeedHeader as w } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
15
15
  import { MarkAsRead as D } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
16
- import { NotificationFeedPopover as G } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
17
- import { NotificationIconButton as M } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
18
- import { UnseenBadge as P } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
16
+ import { NotificationFeedContainer as G } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
17
+ import { NotificationFeedPopover as M } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
18
+ import { NotificationIconButton as P } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
19
+ import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
19
20
  export * from "@knocklabs/react-core";
20
21
  export {
21
22
  A as Avatar,
22
- i as BellIcon,
23
+ m as BellIcon,
23
24
  t as Button,
24
25
  p as ButtonGroup,
25
- n as CheckmarkCircle,
26
+ x as CheckmarkCircle,
26
27
  c as ChevronDown,
27
28
  d as CloseCircle,
28
29
  F as EmptyFeed,
29
30
  D as MarkAsRead,
30
31
  v as NotificationCell,
31
32
  S as NotificationFeed,
33
+ G as NotificationFeedContainer,
32
34
  w as NotificationFeedHeader,
33
- G as NotificationFeedPopover,
34
- M as NotificationIconButton,
35
- B as Spinner,
36
- P as UnseenBadge,
37
- s as useOnBottomScroll
35
+ M as NotificationFeedPopover,
36
+ P as NotificationIconButton,
37
+ u as Spinner,
38
+ U as UnseenBadge,
39
+ N as useOnBottomScroll
38
40
  };
39
41
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,9 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+
3
+ const t = ({
4
+ children: r
5
+ }) => /* @__PURE__ */ e("div", { className: "rnf-feed-provider", children: r });
6
+ export {
7
+ t as NotificationFeedContainer
8
+ };
9
+ //# sourceMappingURL=NotificationFeedContainer.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationFeedContainer.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n children,\n}) => {\n return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","jsx"],"mappings":";;AAGO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AACF,MACU,gBAAAC,EAAA,OAAA,EAAI,WAAU,qBAAqB,UAAAD,EAAS,CAAA;"}
@@ -0,0 +1,2 @@
1
+
2
+ //# sourceMappingURL=styles.css.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/dist/index.css CHANGED
@@ -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-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-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}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-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)}
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-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 *{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-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-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}
@@ -0,0 +1,3 @@
1
+ import { PropsWithChildren } from "react";
2
+ export declare const NotificationFeedContainer: React.FC<PropsWithChildren>;
3
+ //# sourceMappingURL=NotificationFeedContainer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationFeedContainer.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAIjE,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from "./NotificationFeedContainer";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}
@@ -1,6 +1,7 @@
1
1
  export * from "./components/EmptyFeed";
2
2
  export * from "./components/NotificationCell";
3
3
  export * from "./components/NotificationFeed";
4
+ export * from "./components/NotificationFeedContainer";
4
5
  export * from "./components/NotificationFeedPopover";
5
6
  export * from "./components/NotificationIconButton";
6
7
  export * from "./components/UnseenBadge";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/feed/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/feed/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wCAAwC,CAAC;AACvD,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@knocklabs/react",
3
3
  "description": "A set of React components to build notification experiences powered by Knock",
4
4
  "author": "@knocklabs",
5
- "version": "0.1.0",
5
+ "version": "0.1.2",
6
6
  "license": "MIT",
7
7
  "main": "dist/cjs/index.js",
8
8
  "module": "dist/esm/index.mjs",
@@ -39,16 +39,16 @@
39
39
  "bugs": {
40
40
  "url": "https://github.com/knocklabs/javascript/issues"
41
41
  },
42
+ "peerDependencies": {
43
+ "react": ">=16.8.0",
44
+ "react-dom": ">=16.8.0"
45
+ },
42
46
  "dependencies": {
43
47
  "@knocklabs/client": "*",
44
- "@knocklabs/react-core": "0.1.0",
45
- "date-fns": "^2.30.0",
48
+ "@knocklabs/react-core": "*",
46
49
  "lodash.debounce": "^4.0.8",
47
- "react": "^18.2.0",
48
- "react-dom": "^18.2.0",
49
50
  "react-popper": "^2.3.0",
50
- "react-popper-tooltip": "^4.4.2",
51
- "zustand": "^3.5.10"
51
+ "react-popper-tooltip": "^4.4.2"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@types/lodash.debounce": "^4.0.9",
@@ -1,2 +0,0 @@
1
- "use strict";
2
- //# sourceMappingURL=theme.css.js.map