@knocklabs/react 0.5.0 → 0.6.0-rc.0
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.
- package/CHANGELOG.md +16 -0
- package/README.md +3 -3
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/modules/core/components/Button/Button.js.map +1 -1
- package/dist/cjs/modules/core/components/Icons/Bell.js.map +1 -1
- package/dist/cjs/modules/core/hooks/useComponentVisible.js.map +1 -1
- package/dist/cjs/modules/core/hooks/useOnBottomScroll.js.map +1 -1
- package/dist/cjs/modules/feed/components/EmptyFeed/EmptyFeed.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js.map +1 -1
- package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthContainer/SlackAuthContainer.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectionError.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackErrorMessage.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackIcon/SlackIcon.js.map +1 -1
- package/dist/esm/modules/core/components/Button/Button.mjs.map +1 -1
- package/dist/esm/modules/core/components/Icons/Bell.mjs.map +1 -1
- package/dist/esm/modules/core/hooks/useComponentVisible.mjs.map +1 -1
- package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs +30 -24
- package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs +5 -5
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs +40 -37
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map +1 -1
- package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs +11 -8
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs +14 -11
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs +13 -10
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackIcon/SlackIcon.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts +0 -1
- package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts.map +1 -1
- package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map +1 -1
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.d.ts.map +1 -1
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.d.ts.map +1 -1
- package/package.json +12 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.6.0-rc.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 0fc5f2d: [JS] Support React 19 in React SDKs
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 9e638a2: Make `SlackChannelCombobox` and `MsTeamsChannelCombobox` non-modal
|
|
12
|
+
|
|
13
|
+
This fixes a bug whereby the page layout could shift when the combobox dropdown menu opens and the `<body>` element has non-zero padding.
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [0fc5f2d]
|
|
16
|
+
- @knocklabs/client@0.12.0-rc.0
|
|
17
|
+
- @knocklabs/react-core@0.5.0-rc.0
|
|
18
|
+
|
|
3
19
|
## 0.5.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -81,8 +81,8 @@ Alternatively, if you don't want to use our components you can render the feed i
|
|
|
81
81
|
import {
|
|
82
82
|
useAuthenticatedKnockClient,
|
|
83
83
|
useNotifications,
|
|
84
|
+
useNotificationStore,
|
|
84
85
|
} from "@knocklabs/react";
|
|
85
|
-
import create from "zustand";
|
|
86
86
|
|
|
87
87
|
const YourAppLayout = () => {
|
|
88
88
|
const knockClient = useAuthenticatedKnockClient(
|
|
@@ -95,8 +95,7 @@ const YourAppLayout = () => {
|
|
|
95
95
|
process.env.KNOCK_FEED_ID,
|
|
96
96
|
);
|
|
97
97
|
|
|
98
|
-
const
|
|
99
|
-
const { metadata } = useNotificationStore();
|
|
98
|
+
const { metadata } = useNotificationStore(notificationFeed);
|
|
100
99
|
|
|
101
100
|
useEffect(() => {
|
|
102
101
|
notificationFeed.fetch();
|
|
@@ -111,3 +110,4 @@ const YourAppLayout = () => {
|
|
|
111
110
|
- [Signup for Knock](https://knock.app)
|
|
112
111
|
- [Knock documentation](https://docs.knock.app)
|
|
113
112
|
- [Knock dashboard](https://dashboard.knock.app)
|
|
113
|
+
- [React SDK documentation](https://docs.knock.app/sdks/react/overview)
|
package/dist/cjs/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-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:break-word;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-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-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{--tgph-surface-1:#fff;--tgph-surface-2:#f9f9f8;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#f0f0f3;--tgph-gray-4:#e8e8ec;--tgph-gray-5:#e0e1e6;--tgph-gray-6:#d9d9e0;--tgph-gray-7:#cdced6;--tgph-gray-8:#b9bbc6;--tgph-gray-9:#8b8d98;--tgph-gray-10:#80838d;--tgph-gray-11:#60646c;--tgph-gray-12:#1c2024;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f1f0ef;--tgph-beige-4:#e9e8e6;--tgph-beige-5:#e2e1de;--tgph-beige-6:#dad9d6;--tgph-beige-7:#cfceca;--tgph-beige-8:#bcbbb5;--tgph-beige-9:#8d8d86;--tgph-beige-10:#82827c;--tgph-beige-11:#63635e;--tgph-beige-12:#21201c;--tgph-accent-1:#fffcfc;--tgph-accent-2:#fff8f7;--tgph-accent-3:#feebe7;--tgph-accent-4:#ffdcd3;--tgph-accent-5:#ffcdc2;--tgph-accent-6:#fdbdaf;--tgph-accent-7:#f5a898;--tgph-accent-8:#ec8e7b;--tgph-accent-9:#e54d2e;--tgph-accent-10:#dd4425;--tgph-accent-11:#d13415;--tgph-accent-12:#5c271f;--tgph-green-1:#fbfefd;--tgph-green-2:#f4fbf7;--tgph-green-3:#e6f7ed;--tgph-green-4:#d6f1e3;--tgph-green-5:#c3e9d7;--tgph-green-6:#acdec8;--tgph-green-7:#8bceb6;--tgph-green-8:#56ba9f;--tgph-green-9:#29a383;--tgph-green-10:#26997b;--tgph-green-11:#208368;--tgph-green-12:#1d3b31;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fdfdfe;--tgph-blue-2:#f7f9ff;--tgph-blue-3:#edf2fe;--tgph-blue-4:#e1e9ff;--tgph-blue-5:#d2deff;--tgph-blue-6:#c1d0ff;--tgph-blue-7:#abbdf9;--tgph-blue-8:#8da4ef;--tgph-blue-9:#3e63dd;--tgph-blue-10:#3358d4;--tgph-blue-11:#3a5bc7;--tgph-blue-12:#1f2d5c;--tgph-red-1:#fffcfd;--tgph-red-2:#fff7f8;--tgph-red-3:#feeaed;--tgph-red-4:#ffdce1;--tgph-red-5:#ffced6;--tgph-red-6:#f8bfc8;--tgph-red-7:#efacb8;--tgph-red-8:#e592a3;--tgph-red-9:#e54666;--tgph-red-10:#dc3b5d;--tgph-red-11:#ca244d;--tgph-red-12:#64172b;--tgph-purple-1:#fdfcfe;--tgph-purple-2:#faf8ff;--tgph-purple-3:#f4f0fe;--tgph-purple-4:#ebe4ff;--tgph-purple-5:#e1d9ff;--tgph-purple-6:#d4cafe;--tgph-purple-7:#c2b5f5;--tgph-purple-8:#aa99ec;--tgph-purple-9:#654dc4;--tgph-purple-10:#654dc4;--tgph-purple-11:#6550b9;--tgph-purple-12:#2f265f;--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 5px 2px 0px #1c202403,0px 3px 2px 0px #1c202408,0px 1px 1px 0px #1c20240d,0px 0px 1px 0px #1c20240f;--tgph-shadow-2:0px 16px 7px 0px #1c202403,0px 9px 6px 0px #1c202408,0px 4px 4px 0px #1c20240d,0px 1px 2px 0px #1c20240f;--tgph-shadow-3:0px 29px 12px 0px #1c202403,0px 16px 10px 0px #1c202408,0px 7px 7px 0px #1c20240d,0px 2px 4px 0px #1c20240f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset,0px 3px 2px 0px #1c202408 inset,0px 1px 1px 0px #1c20240d inset,0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--tgph-family-mono:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.75rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:.25%;--tgph-tracking-1:.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-.25%;--tgph-tracking-5:-.5%;--tgph-tracking-6:-.625%;--tgph-tracking-7:-.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.875rem;--tgph-text-3:1rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800}.tgph-text,.tgph-heading,.tgph-code{--color: var(--tgph-gray-12);--font-size: var(--tgph-text-2);--weight: var(--tgph-weight-regular);--leading: var(--tgph-leading-2);--tracking: var(--tgph-tracking-2);--text-align: left;--font-family: var(--tgph-family-sans);--text-overflow: clip;color:var(--color);font-size:var(--font-size);font-weight:var(--weight);line-height:var(--leading);letter-spacing:var(--tracking);text-align:var(--text-align);box-sizing:border-box;font-family:var(--font-family);text-overflow:var(--text-overflow)}.tgph-button{--tgph-button-default-shadow: none;--tgph-button-hover-shadow: none;--tgph-button-focus-shadow: none;--tgph-button-active-shadow: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;text-decoration:none;box-shadow:var(--tgph-button-default-shadow)}.tgph-button:hover{box-shadow:var(--tgph-button-hover-shadow)}.tgph-button:focus{box-shadow:var(--tgph-button-focus-shadow)}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--tgph-button-active-shadow);background-color:var(--active_backgroundColor)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}[data-tgph-button-loading-icon]{animation:button-loading-icon 1s infinite linear}@keyframes button-loading-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tgph-icon{display:inline-block}.tgph-box{--background-color: none;--border-color: var(--tgph-gray-6);--border-style: solid;--border-width: 0;--padding: 0;--margin: 0;--border-radius: 0;--width: auto;--max-width: auto;--min-width: auto;--height: auto;--max-height: auto;--min-height: auto;--z-index: auto;--position: static;--top: auto;--left: auto;--right: auto;--bottom: auto;--overflow: visible;background-color:var(--background-color);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);padding:var(--padding);margin:var(--margin);border-radius:var(--border-radius);width:var(--width);max-width:var(--max-width);min-width:var(--min-width);height:var(--height);max-height:var(--max-height);min-height:var(--min-height);z-index:var(--z-index);position:var(--position);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);overflow:var(--overflow)}.tgph-box--interactive{--hover_backgroundColor: none;--focus_backgroundColor: none;--active_backgroundColor: none}.tgph-box--interactive:hover{background-color:var(--hover_backgroundColor)}.tgph-box--interactive:focus{background-color:var(--focus_backgroundColor)}.tgph-box--interactive:active{background-color:var(--active_backgroundColor)}.tgph-stack{--display: flex;--direction: row;--wrap: nowrap;--justify: flex-start;--align: stretch;--gap: 0;display:var(--display);flex-direction:var(--direction);flex-wrap:var(--wrap);justify-content:var(--justify);align-items:var(--align);gap:var(--gap)}.tgph .order-1{order:1}.tgph .order-2{order:2}.tgph .order-3{order:3}.tgph .box-border{box-sizing:border-box}.tgph .flex{display:flex}.tgph .aspect-square{aspect-ratio:1 / 1}.tgph .h-10{height:var(--tgph-spacing-10)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .h-full{height:var(--tgph-spacing-full)}.tgph .w-full{width:var(--tgph-spacing-full)}.tgph .cursor-not-allowed{cursor:not-allowed}.tgph .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph .items-center{align-items:center}.tgph .justify-center{justify-content:center}.tgph .rounded-2{border-radius:var(--tgph-rounded-2)}.tgph .rounded-3{border-radius:var(--tgph-rounded-3)}.tgph .border,.tgph .border-\[1px\]{border-width:1px}.tgph .border-solid{border-style:solid}.tgph .border-none{border-style:none}.tgph .border-gray-2{border-color:var(--tgph-gray-2)}.tgph .border-gray-6{border-color:var(--tgph-gray-6)}.tgph .border-red-6{border-color:var(--tgph-red-6)}.tgph .border-transparent{border-color:var(--tgph-transparent)}.tgph .bg-gray-2{background-color:var(--tgph-gray-2)}.tgph .bg-surface-1{background-color:var(--tgph-surface-1)}.tgph .bg-transparent{background-color:var(--tgph-transparent)}.tgph .\!p-1{padding:var(--tgph-spacing-1)!important}.tgph .px-1{padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph .px-2{padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph .px-3{padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph .pl-0{padding-left:var(--tgph-spacing-0)}.tgph .pl-1{padding-left:var(--tgph-spacing-1)}.tgph .pl-2{padding-left:var(--tgph-spacing-2)}.tgph .pl-3{padding-left:var(--tgph-spacing-3)}.tgph .pr-1{padding-right:var(--tgph-spacing-1)}.tgph .pr-2{padding-right:var(--tgph-spacing-2)}.tgph .pr-3{padding-right:var(--tgph-spacing-3)}.tgph .text-gray-12{color:var(--tgph-gray-12)}.tgph .shadow-0{--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph .outline{outline-style:solid}.tgph .outline-0{outline-width:0px}.tgph .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tgph .\[font-family\:inherit\]{font-family:inherit}.tgph .placeholder\:text-gray-10::-moz-placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-10::placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-9::-moz-placeholder{color:var(--tgph-gray-9)}.tgph .placeholder\:text-gray-9::placeholder{color:var(--tgph-gray-9)}.tgph .focus-within\:\!border-blue-8:focus-within{border-color:var(--tgph-blue-8)!important}.tgph .focus-within\:\!bg-gray-4:focus-within{background-color:var(--tgph-gray-4)!important}.tgph .hover\:border-gray-7:hover{border-color:var(--tgph-gray-7)}.tgph .hover\:bg-gray-3:hover{background-color:var(--tgph-gray-3)}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:var(--tgph-spacing-auto)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:var(--tgph-spacing-full)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}.tgph-motion{--motion-opacity: 1;--motion-scale: 1;--motion-x: 0;--motion-y: 0;--motion-transition-duration: .2s;--motion-transition-type: ease-in-out;--motion-rotate: 0deg;opacity:var(--motion-opacity);transform:scale(var(--motion-scale)) translate(var(--motion-x),var(--motion-y)) rotate(var(--motion-rotate));transition:all var(--motion-transition-duration) var(--motion-transition-type)}:root{--rtk-font-size-xs: .75rem;--rtk-font-size-sm: .875rem;--rtk-font-size-md: 1rem;--rtk-font-size-lg: 1.125rem;--rtk-font-size-xl: 1.266rem;--rtk-font-size-2xl: 1.5rem;--rtk-font-size-3xl: 1.75rem;--rtk-spacing-0: 0rem;--rtk-spacing-1: .25rem;--rtk-spacing-2: .5rem;--rtk-spacing-3: .75rem;--rtk-spacing-4: 1rem;--rtk-spacing-5: 1.25rem;--rtk-spacing-6: 1.5rem;--rtk-spacing-7: 2rem;--rtk-font-weight-normal: 400;--rtk-font-weight-medium: 500;--rtk-font-weight-semibold: 600;--rtk-font-weight-bold: 700;--rtk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rtk-border-radius-sm: 2px;--rtk-border-radius-md: 4px;--rtk-border-radius-lg: 8px;--rtk-button-border-radius: 6px;--rtk-color-white: #fff;--rtk-color-white-a-75: rgba(255, 255, 255, .75);--rtk-color-black: #000;--rtk-color-gray-900: #1a1f36;--rtk-color-gray-800: #3c4257;--rtk-color-gray-700: #3c4257;--rtk-color-gray-600: #515669;--rtk-color-gray-500: #697386;--rtk-color-gray-400: #9ea0aa;--rtk-color-gray-300: #a5acb8;--rtk-color-gray-200: #dddee1;--rtk-color-gray-100: #e4e8ee;--rtk-color-brand-500: #e95744;--rtk-color-brand-700: #e4321b;--rtk-color-brand-900: #891e10;--rtk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rtk-connected-color: rgba(51, 163, 102, 1);--rtk-disconnect-border-color: rgba(230, 71, 51, 1);--rtk-disconnect-background-color: rgba(255, 245, 245, 1);--rtk-error-red: rgba(205, 123, 46, 1)}.rtk-connect__button{background-color:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-200);border-radius:var(--rtk-button-border-radius);box-sizing:border-box;color:var(--rtk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);gap:var(--rtk-spacing-2);padding:var(--rtk-spacing-1) var(--rtk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rtk-connect__button--connected{border-color:var(--rtk-connected-color);color:var(--rtk-connected-color);width:120px}.rtk-connect__button--error{border-color:var(--rtk-error-red);color:var(--rtk-error-red)}.rtk-connect__button--loading{border-color:var(--rtk-color-gray-100);color:var(--rtk-color-gray-400);pointer-events:none}.rtk-connect__button--disconnected:hover{background-color:var(--rtk-button-hover-color)}.rtk-connect__button--connected:hover,.rtk-connect__button__text--connected:hover{background-color:var(--rtk-disconnect-background-color);border-color:var(--rtk-disconnect-border-color);color:var(--rtk-disconnect-border-color)}.rtk-connect__button--error:hover,.rtk-connect__button__text--error:hover{border-color:var(--rtk-color-black);color:var(--rtk-color-black)}.rtk-connect__button:active{transform:translate(1px,1px)}.rtk-auth{background:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-lg);font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);padding:var(--rtk-spacing-5)}.rtk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rtk-auth__title{color:#1a1f36;font-size:var(--rtk-font-size-md);line-height:var(--rtk-spacing-5);margin-top:var(--rtk-spacing-4)}.rtk-auth__description{color:#515669;font-size:var(--rtk-font-size-sm);line-height:var(--rtk-spacing-5)}.rtk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rtk-font-size-sm);font-family:var(--rtk-font-family-sanserif)}.rtk-combobox__search{font-family:var(--rtk-font-family-sanserif)!important}.rtk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-md);display:flex;gap:var(--rtk-spacing-1);padding:var(--rtk-spacing-2)}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}.rsk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif)}.rsk-combobox__label{align-self:start;display:flex;align-items:center}.rsk-combobox__search{font-family:var(--rsk-font-family-sanserif)!important}.rsk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);padding:var(--rsk-spacing-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-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:break-word;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-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-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{--tgph-surface-1:#fff;--tgph-surface-2:#f9f9f8;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#f0f0f3;--tgph-gray-4:#e8e8ec;--tgph-gray-5:#e0e1e6;--tgph-gray-6:#d9d9e0;--tgph-gray-7:#cdced6;--tgph-gray-8:#b9bbc6;--tgph-gray-9:#8b8d98;--tgph-gray-10:#80838d;--tgph-gray-11:#60646c;--tgph-gray-12:#1c2024;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f1f0ef;--tgph-beige-4:#e9e8e6;--tgph-beige-5:#e2e1de;--tgph-beige-6:#dad9d6;--tgph-beige-7:#cfceca;--tgph-beige-8:#bcbbb5;--tgph-beige-9:#8d8d86;--tgph-beige-10:#82827c;--tgph-beige-11:#63635e;--tgph-beige-12:#21201c;--tgph-accent-1:#fffcfc;--tgph-accent-2:#fff8f7;--tgph-accent-3:#feebe7;--tgph-accent-4:#ffdcd3;--tgph-accent-5:#ffcdc2;--tgph-accent-6:#fdbdaf;--tgph-accent-7:#f5a898;--tgph-accent-8:#ec8e7b;--tgph-accent-9:#e54d2e;--tgph-accent-10:#dd4425;--tgph-accent-11:#d13415;--tgph-accent-12:#5c271f;--tgph-green-1:#fbfefd;--tgph-green-2:#f4fbf7;--tgph-green-3:#e6f7ed;--tgph-green-4:#d6f1e3;--tgph-green-5:#c3e9d7;--tgph-green-6:#acdec8;--tgph-green-7:#8bceb6;--tgph-green-8:#56ba9f;--tgph-green-9:#29a383;--tgph-green-10:#26997b;--tgph-green-11:#208368;--tgph-green-12:#1d3b31;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fdfdfe;--tgph-blue-2:#f7f9ff;--tgph-blue-3:#edf2fe;--tgph-blue-4:#e1e9ff;--tgph-blue-5:#d2deff;--tgph-blue-6:#c1d0ff;--tgph-blue-7:#abbdf9;--tgph-blue-8:#8da4ef;--tgph-blue-9:#3e63dd;--tgph-blue-10:#3358d4;--tgph-blue-11:#3a5bc7;--tgph-blue-12:#1f2d5c;--tgph-red-1:#fffcfd;--tgph-red-2:#fff7f8;--tgph-red-3:#feeaed;--tgph-red-4:#ffdce1;--tgph-red-5:#ffced6;--tgph-red-6:#f8bfc8;--tgph-red-7:#efacb8;--tgph-red-8:#e592a3;--tgph-red-9:#e54666;--tgph-red-10:#dc3b5d;--tgph-red-11:#ca244d;--tgph-red-12:#64172b;--tgph-purple-1:#fdfcfe;--tgph-purple-2:#faf8ff;--tgph-purple-3:#f4f0fe;--tgph-purple-4:#ebe4ff;--tgph-purple-5:#e1d9ff;--tgph-purple-6:#d4cafe;--tgph-purple-7:#c2b5f5;--tgph-purple-8:#aa99ec;--tgph-purple-9:#654dc4;--tgph-purple-10:#654dc4;--tgph-purple-11:#6550b9;--tgph-purple-12:#2f265f;--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 5px 2px 0px #1c202403,0px 3px 2px 0px #1c202408,0px 1px 1px 0px #1c20240d,0px 0px 1px 0px #1c20240f;--tgph-shadow-2:0px 16px 7px 0px #1c202403,0px 9px 6px 0px #1c202408,0px 4px 4px 0px #1c20240d,0px 1px 2px 0px #1c20240f;--tgph-shadow-3:0px 29px 12px 0px #1c202403,0px 16px 10px 0px #1c202408,0px 7px 7px 0px #1c20240d,0px 2px 4px 0px #1c20240f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset,0px 3px 2px 0px #1c202408 inset,0px 1px 1px 0px #1c20240d inset,0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--tgph-family-mono:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.75rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:.25%;--tgph-tracking-1:.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-.25%;--tgph-tracking-5:-.5%;--tgph-tracking-6:-.625%;--tgph-tracking-7:-.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.875rem;--tgph-text-3:1rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800}.tgph-text,.tgph-heading,.tgph-code{--color: var(--tgph-gray-12);--font-size: var(--tgph-text-2);--weight: var(--tgph-weight-regular);--leading: var(--tgph-leading-2);--tracking: var(--tgph-tracking-2);--text-align: left;--font-family: var(--tgph-family-sans);--text-overflow: clip;color:var(--color);font-size:var(--font-size);font-weight:var(--weight);line-height:var(--leading);letter-spacing:var(--tracking);text-align:var(--text-align);box-sizing:border-box;font-family:var(--font-family);text-overflow:var(--text-overflow)}.tgph-button{--tgph-button-hover-shadow: none;--tgph-button-focus-shadow: none;--tgph-button-active-shadow: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;text-decoration:none}.tgph-button:hover{box-shadow:var(--tgph-button-hover-shadow)}.tgph-button:focus{box-shadow:var(--tgph-button-focus-shadow)}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--tgph-button-active-shadow);background-color:var(--active_backgroundColor)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}[data-tgph-button-loading-icon]{animation:button-loading-icon 1s infinite linear}@keyframes button-loading-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tgph-icon{display:inline-block}.tgph-box{--background-color: none;--border-color: var(--tgph-gray-6);--box-shadow: none;--border-style: solid;--border-width: 0;--padding: 0;--margin: 0;--border-radius: 0;--width: auto;--max-width: auto;--min-width: auto;--height: auto;--max-height: auto;--min-height: auto;--z-index: auto;--position: static;--top: auto;--left: auto;--right: auto;--bottom: auto;--overflow: visible;background-color:var(--background-color);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--box-shadow);padding:var(--padding);margin:var(--margin);border-radius:var(--border-radius);width:var(--width);max-width:var(--max-width);min-width:var(--min-width);height:var(--height);max-height:var(--max-height);min-height:var(--min-height);z-index:var(--z-index);position:var(--position);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);overflow:var(--overflow)}.tgph-box--interactive{--hover_backgroundColor: none;--focus_backgroundColor: none;--active_backgroundColor: none}.tgph-box--interactive:hover{background-color:var(--hover_backgroundColor)}.tgph-box--interactive:focus{background-color:var(--focus_backgroundColor)}.tgph-box--interactive:active{background-color:var(--active_backgroundColor)}.tgph-stack{--display: flex;--direction: row;--wrap: nowrap;--justify: flex-start;--align: stretch;--gap: 0;display:var(--display);flex-direction:var(--direction);flex-wrap:var(--wrap);justify-content:var(--justify);align-items:var(--align);gap:var(--gap)}.tgph .order-1{order:1}.tgph .order-2{order:2}.tgph .order-3{order:3}.tgph .box-border{box-sizing:border-box}.tgph .flex{display:flex}.tgph .aspect-square{aspect-ratio:1 / 1}.tgph .h-10{height:var(--tgph-spacing-10)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .h-full{height:var(--tgph-spacing-full)}.tgph .w-full{width:var(--tgph-spacing-full)}.tgph .cursor-not-allowed{cursor:not-allowed}.tgph .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph .items-center{align-items:center}.tgph .justify-center{justify-content:center}.tgph .rounded-2{border-radius:var(--tgph-rounded-2)}.tgph .rounded-3{border-radius:var(--tgph-rounded-3)}.tgph .border,.tgph .border-\[1px\]{border-width:1px}.tgph .border-solid{border-style:solid}.tgph .border-none{border-style:none}.tgph .border-gray-2{border-color:var(--tgph-gray-2)}.tgph .border-gray-6{border-color:var(--tgph-gray-6)}.tgph .border-red-6{border-color:var(--tgph-red-6)}.tgph .border-transparent{border-color:var(--tgph-transparent)}.tgph .bg-gray-2{background-color:var(--tgph-gray-2)}.tgph .bg-surface-1{background-color:var(--tgph-surface-1)}.tgph .bg-transparent{background-color:var(--tgph-transparent)}.tgph .\!p-1{padding:var(--tgph-spacing-1)!important}.tgph .px-1{padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph .px-2{padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph .px-3{padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph .pl-0{padding-left:var(--tgph-spacing-0)}.tgph .pl-1{padding-left:var(--tgph-spacing-1)}.tgph .pl-2{padding-left:var(--tgph-spacing-2)}.tgph .pl-3{padding-left:var(--tgph-spacing-3)}.tgph .pr-1{padding-right:var(--tgph-spacing-1)}.tgph .pr-2{padding-right:var(--tgph-spacing-2)}.tgph .pr-3{padding-right:var(--tgph-spacing-3)}.tgph .text-gray-12{color:var(--tgph-gray-12)}.tgph .shadow-0{--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph .outline{outline-style:solid}.tgph .outline-0{outline-width:0px}.tgph .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tgph .\[font-family\:inherit\]{font-family:inherit}.tgph .placeholder\:text-gray-10::-moz-placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-10::placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-9::-moz-placeholder{color:var(--tgph-gray-9)}.tgph .placeholder\:text-gray-9::placeholder{color:var(--tgph-gray-9)}.tgph .focus-within\:\!border-blue-8:focus-within{border-color:var(--tgph-blue-8)!important}.tgph .focus-within\:\!bg-gray-4:focus-within{background-color:var(--tgph-gray-4)!important}.tgph .hover\:border-gray-7:hover{border-color:var(--tgph-gray-7)}.tgph .hover\:bg-gray-3:hover{background-color:var(--tgph-gray-3)}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:var(--tgph-spacing-auto)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:var(--tgph-spacing-full)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}.tgph-motion{--motion-opacity: 1;--motion-scale: 1;--motion-x: 0;--motion-y: 0;--motion-transition-duration: .2s;--motion-transition-type: ease-in-out;--motion-rotate: 0deg;opacity:var(--motion-opacity);transform:scale(var(--motion-scale)) translate(var(--motion-x),var(--motion-y)) rotate(var(--motion-rotate));transition:all var(--motion-transition-duration) var(--motion-transition-type)}:root{--rtk-font-size-xs: .75rem;--rtk-font-size-sm: .875rem;--rtk-font-size-md: 1rem;--rtk-font-size-lg: 1.125rem;--rtk-font-size-xl: 1.266rem;--rtk-font-size-2xl: 1.5rem;--rtk-font-size-3xl: 1.75rem;--rtk-spacing-0: 0rem;--rtk-spacing-1: .25rem;--rtk-spacing-2: .5rem;--rtk-spacing-3: .75rem;--rtk-spacing-4: 1rem;--rtk-spacing-5: 1.25rem;--rtk-spacing-6: 1.5rem;--rtk-spacing-7: 2rem;--rtk-font-weight-normal: 400;--rtk-font-weight-medium: 500;--rtk-font-weight-semibold: 600;--rtk-font-weight-bold: 700;--rtk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rtk-border-radius-sm: 2px;--rtk-border-radius-md: 4px;--rtk-border-radius-lg: 8px;--rtk-button-border-radius: 6px;--rtk-color-white: #fff;--rtk-color-white-a-75: rgba(255, 255, 255, .75);--rtk-color-black: #000;--rtk-color-gray-900: #1a1f36;--rtk-color-gray-800: #3c4257;--rtk-color-gray-700: #3c4257;--rtk-color-gray-600: #515669;--rtk-color-gray-500: #697386;--rtk-color-gray-400: #9ea0aa;--rtk-color-gray-300: #a5acb8;--rtk-color-gray-200: #dddee1;--rtk-color-gray-100: #e4e8ee;--rtk-color-brand-500: #e95744;--rtk-color-brand-700: #e4321b;--rtk-color-brand-900: #891e10;--rtk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rtk-connected-color: rgba(51, 163, 102, 1);--rtk-disconnect-border-color: rgba(230, 71, 51, 1);--rtk-disconnect-background-color: rgba(255, 245, 245, 1);--rtk-error-red: rgba(205, 123, 46, 1)}.rtk-connect__button{background-color:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-200);border-radius:var(--rtk-button-border-radius);box-sizing:border-box;color:var(--rtk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);gap:var(--rtk-spacing-2);padding:var(--rtk-spacing-1) var(--rtk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rtk-connect__button--connected{border-color:var(--rtk-connected-color);color:var(--rtk-connected-color);width:120px}.rtk-connect__button--error{border-color:var(--rtk-error-red);color:var(--rtk-error-red)}.rtk-connect__button--loading{border-color:var(--rtk-color-gray-100);color:var(--rtk-color-gray-400);pointer-events:none}.rtk-connect__button--disconnected:hover{background-color:var(--rtk-button-hover-color)}.rtk-connect__button--connected:hover,.rtk-connect__button__text--connected:hover{background-color:var(--rtk-disconnect-background-color);border-color:var(--rtk-disconnect-border-color);color:var(--rtk-disconnect-border-color)}.rtk-connect__button--error:hover,.rtk-connect__button__text--error:hover{border-color:var(--rtk-color-black);color:var(--rtk-color-black)}.rtk-connect__button:active{transform:translate(1px,1px)}.rtk-auth{background:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-lg);font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);padding:var(--rtk-spacing-5)}.rtk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rtk-auth__title{color:#1a1f36;font-size:var(--rtk-font-size-md);line-height:var(--rtk-spacing-5);margin-top:var(--rtk-spacing-4)}.rtk-auth__description{color:#515669;font-size:var(--rtk-font-size-sm);line-height:var(--rtk-spacing-5)}.rtk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rtk-font-size-sm);font-family:var(--rtk-font-family-sanserif)}.rtk-combobox__search{font-family:var(--rtk-font-family-sanserif)!important}.rtk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-md);display:flex;gap:var(--rtk-spacing-1);padding:var(--rtk-spacing-2)}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}.rsk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif)}.rsk-combobox__label{align-self:start;display:flex;align-items:center}.rsk-combobox__search{font-family:var(--rsk-font-family-sanserif)!important}.rsk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { ButtonSpinner } from \"./ButtonSpinner\";\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n variant: \"primary\" | \"secondary\";\n loadingText?: string;\n isLoading?: boolean;\n isDisabled?: boolean;\n isFullWidth?: boolean;\n onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: FunctionComponent<PropsWithChildren<ButtonProps>> = ({\n variant = \"primary\",\n loadingText,\n isLoading = false,\n isDisabled = false,\n isFullWidth = false,\n onClick,\n children,\n}) => {\n const { colorMode } = useKnockFeed();\n\n const classNames = [\n \"rnf-button\",\n `rnf-button--${variant}`,\n isFullWidth ? \"rnf-button--full-width\" : \"\",\n isLoading ? \"rnf-button--is-loading\" : \"\",\n `rnf-button--${colorMode}`,\n ].join(\" \");\n\n // In this case when there's no loading text, we still want to display the original\n // content of the button, but make it hidden. That allows us to keep the button width\n // consistent and show the spinner in the middle, meaning no layout shift.\n const textToShowWhileLoading = loadingText || (\n <span className=\"rnf-button__button-text-hidden\">{children}</span>\n );\n\n return (\n <button\n onClick={onClick}\n className={classNames}\n disabled={isLoading || isDisabled}\n type=\"button\"\n >\n {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n {isLoading ? textToShowWhileLoading : children}\n </button>\n );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","join","textToShowWhileLoading","React","ButtonSpinner"],"mappings":"4QAgBaA,EAA4DA,CAAC,CACxEC,QAAAA,EAAU,UACVC,YAAAA,EACAC,UAAAA,EAAY,GACZC,WAAAA,EAAa,GACbC,YAAAA,EAAc,GACdC,QAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { ButtonSpinner } from \"./ButtonSpinner\";\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n variant: \"primary\" | \"secondary\";\n loadingText?: string;\n isLoading?: boolean;\n isDisabled?: boolean;\n isFullWidth?: boolean;\n onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: FunctionComponent<PropsWithChildren<ButtonProps>> = ({\n variant = \"primary\",\n loadingText,\n isLoading = false,\n isDisabled = false,\n isFullWidth = false,\n onClick,\n children,\n}) => {\n const { colorMode } = useKnockFeed();\n\n const classNames = [\n \"rnf-button\",\n `rnf-button--${variant}`,\n isFullWidth ? \"rnf-button--full-width\" : \"\",\n isLoading ? \"rnf-button--is-loading\" : \"\",\n `rnf-button--${colorMode}`,\n ].join(\" \");\n\n // In this case when there's no loading text, we still want to display the original\n // content of the button, but make it hidden. That allows us to keep the button width\n // consistent and show the spinner in the middle, meaning no layout shift.\n const textToShowWhileLoading = loadingText || (\n <span className=\"rnf-button__button-text-hidden\">{children}</span>\n );\n\n return (\n <button\n onClick={onClick}\n className={classNames}\n disabled={isLoading || isDisabled}\n type=\"button\"\n >\n {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n {isLoading ? textToShowWhileLoading : children}\n </button>\n );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","join","textToShowWhileLoading","React","ButtonSpinner"],"mappings":"4QAgBaA,EAA4DA,CAAC,CACxEC,QAAAA,EAAU,UACVC,YAAAA,EACAC,UAAAA,EAAY,GACZC,WAAAA,EAAa,GACbC,YAAAA,EAAc,GACdC,QAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,eAAa,EAE7BC,EAAa,CACjB,aACA,eAAeT,CAAO,GACtBI,EAAc,yBAA2B,GACzCF,EAAY,yBAA2B,GACvC,eAAeK,CAAS,EAAE,EAC1BG,KAAK,GAAG,EAKJC,EAAyBV,GAC7BW,EAAAA,QAAA,cAAC,OAAK,CAAA,UAAU,kCAAkCN,CAAS,EAI3D,OAAAM,UAAA,cAAC,UACC,QAAAP,EACA,UAAWI,EACX,SAAUP,GAAaC,EACvB,KAAK,UAEJD,GAAcU,EAAA,QAAA,cAAAC,EAAAA,cAAA,CAAc,SAAU,CAAC,CAACZ,EAAe,EACvDC,EAAYS,EAAyBL,CACxC,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bell.js","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype BellIconProps = {\n width?: number;\n height?: number;\n \"aria-hidden\"?: boolean;\n};\n\nconst BellIcon: FunctionComponent<BellIconProps> = ({\n width = 24,\n height = 24,\n \"aria-hidden\": ariaHidden,\n}) => {\n return (\n <svg\n width={width}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n height={height}\n aria-hidden={ariaHidden}\n >\n <path\n d=\"M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\n\nexport { BellIcon };\n"],"names":["BellIcon","width","height","ariaHidden","React"],"mappings":"wKAQMA,EAA6CA,CAAC,CAClDC,MAAAA,EAAQ,GACRC,OAAAA,EAAS,GACT,cAAeC,CACjB,IAEKC,EAAA,QAAA,cAAA,MAAA,CACC,MAAAH,EACA,QAAQ,YACR,KAAK,OACL,OAAAC,EACA,cAAaC,GAEZC,EAAA,QAAA,cAAA,OAAA,CACC,EAAE,qfACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,
|
|
1
|
+
{"version":3,"file":"Bell.js","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype BellIconProps = {\n width?: number;\n height?: number;\n \"aria-hidden\"?: boolean;\n};\n\nconst BellIcon: FunctionComponent<BellIconProps> = ({\n width = 24,\n height = 24,\n \"aria-hidden\": ariaHidden,\n}) => {\n return (\n <svg\n width={width}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n height={height}\n aria-hidden={ariaHidden}\n >\n <path\n d=\"M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\n\nexport { BellIcon };\n"],"names":["BellIcon","width","height","ariaHidden","React"],"mappings":"wKAQMA,EAA6CA,CAAC,CAClDC,MAAAA,EAAQ,GACRC,OAAAA,EAAS,GACT,cAAeC,CACjB,IAEKC,EAAA,QAAA,cAAA,MAAA,CACC,MAAAH,EACA,QAAQ,YACR,KAAK,OACL,OAAAC,EACA,cAAaC,GAEZC,EAAA,QAAA,cAAA,OAAA,CACC,EAAE,qfACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAO,CAAA,EAExBA,EAAA,QAAA,cAAC,QACC,EAAE,mOACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QAAO,CAE1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComponentVisible.js","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\ntype Options = {\n closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n isVisible: boolean,\n onClose: (event: Event) => void,\n options: Options,\n) {\n const ref = useRef<HTMLDivElement>(null);\n\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onClose(event);\n }\n };\n\n const handleClickOutside = (event: Event) => {\n if (\n options.closeOnClickOutside &&\n !contains(ref.current, event.target as HTMLElement)\n ) {\n onClose(event);\n }\n };\n\n useEffect(() => {\n if (isVisible) {\n document.addEventListener(\"keydown\", handleKeydown, true);\n document.addEventListener(\"click\", handleClickOutside, true);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown, true);\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isVisible]);\n\n return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","useEffect","addEventListener","removeEventListener"],"mappings":"sCAEA,SAASA,EAASC,EAA4BC,EAAoB,CAC5D,OAACD,EACEA,IAAWC,GAASD,EAAOD,SAASE,CAAK,EAD5B,EAEtB,CAMwBC,SAAAA,EACtBC,EACAC,EACAC,EACA,CACMC,MAAAA,EAAMC,SAAuB,IAAI,EAEjCC,EAAiBC,GAAyB,CAC1CA,EAAMC,MAAQ,UAChBN,EAAQK,CAAK,
|
|
1
|
+
{"version":3,"file":"useComponentVisible.js","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\ntype Options = {\n closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n isVisible: boolean,\n onClose: (event: Event) => void,\n options: Options,\n) {\n const ref = useRef<HTMLDivElement>(null);\n\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onClose(event);\n }\n };\n\n const handleClickOutside = (event: Event) => {\n if (\n options.closeOnClickOutside &&\n !contains(ref.current, event.target as HTMLElement)\n ) {\n onClose(event);\n }\n };\n\n useEffect(() => {\n if (isVisible) {\n document.addEventListener(\"keydown\", handleKeydown, true);\n document.addEventListener(\"click\", handleClickOutside, true);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown, true);\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isVisible]);\n\n return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","useEffect","addEventListener","removeEventListener"],"mappings":"sCAEA,SAASA,EAASC,EAA4BC,EAAoB,CAC5D,OAACD,EACEA,IAAWC,GAASD,EAAOD,SAASE,CAAK,EAD5B,EAEtB,CAMwBC,SAAAA,EACtBC,EACAC,EACAC,EACA,CACMC,MAAAA,EAAMC,SAAuB,IAAI,EAEjCC,EAAiBC,GAAyB,CAC1CA,EAAMC,MAAQ,UAChBN,EAAQK,CAAK,CAEjB,EAEME,EAAsBF,GAAiB,CAEzCJ,EAAQO,qBACR,CAACb,EAASO,EAAIO,QAASJ,EAAMK,MAAqB,GAElDV,EAAQK,CAAK,CAEjB,EAEAM,OAAAA,EAAAA,UAAU,KACJZ,IACOa,SAAAA,iBAAiB,UAAWR,EAAe,EAAI,EAC/CQ,SAAAA,iBAAiB,QAASL,EAAoB,EAAI,GAGtD,IAAM,CACFM,SAAAA,oBAAoB,UAAWT,EAAe,EAAI,EAClDS,SAAAA,oBAAoB,QAASN,EAAoB,EAAI,CAChE,GAGC,CAACR,CAAS,CAAC,EAEP,CAAEG,IAAAA,CAAI,CACf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement | undefined>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debouncedCallback]);\n\n useEffect(() => {\n let element: HTMLElement | undefined;\n if (ref.current) {\n element = ref.current;\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","element","addEventListener","removeEventListener"],"mappings":"kIASMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,QAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,
|
|
1
|
+
{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement | undefined>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debouncedCallback]);\n\n useEffect(() => {\n let element: HTMLElement | undefined;\n if (ref.current) {\n element = ref.current;\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","element","addEventListener","removeEventListener"],"mappings":"kIASMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,QAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,EAAA,CACpB,CACF,EAGC,CAACA,CAAiB,CAAC,EAEtBa,EAAAA,UAAU,IAAM,CACVC,IAAAA,EACJ,OAAIhB,EAAIO,UACNS,EAAUhB,EAAIO,QACVA,EAAAA,QAAQU,iBAAiB,SAAUZ,CAAc,GAGhD,IAAM,CACPW,GACME,EAAAA,oBAAoB,SAAUb,CAAc,CAExD,CAAA,EAGC,CAACA,CAAc,CAAC,CACrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyFeed.js","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n const { colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n return (\n <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n <div className=\"rnf-empty-feed__inner\">\n <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n </div>\n </div>\n );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","React"],"mappings":"4OAKaA,EAA+BA,IAAM,CAC1C,KAAA,CAAEC,UAAAA,GAAcC,
|
|
1
|
+
{"version":3,"file":"EmptyFeed.js","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n const { colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n return (\n <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n <div className=\"rnf-empty-feed__inner\">\n <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n </div>\n </div>\n );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","React"],"mappings":"4OAKaA,EAA+BA,IAAM,CAC1C,KAAA,CAAEC,UAAAA,GAAcC,eAAa,EAC7B,CAAEC,EAAAA,GAAMC,kBAAgB,EAG5B,OAAAC,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAW,kCAAkCJ,CAAS,EACzD,EAAAI,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,uBACb,EAAAA,UAAA,cAAC,KAAG,CAAA,UAAU,0BAA0BF,EAAE,gBAAgB,CAAE,EAC3DE,EAAA,QAAA,cAAA,IAAA,CAAE,UAAU,sBAAA,EAAwBF,EAAE,eAAe,CAAE,CAC1D,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),u=require("@knocklabs/react-core"),d=require("@popperjs/core"),v=require("../../../core/components/Icons/CloseCircle.js"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=b(t),m=({item:e})=>{const{colorMode:i,feedClient:f}=u.useKnockFeed(),{t:s}=u.useTranslations(),[r,l]=t.useState(!1),n=t.useRef(null),c=t.useRef(null),p=t.useCallback(o=>{o.preventDefault(),o.stopPropagation(),f.markAsArchived(e)},[e]);return t.useEffect(()=>{if(n.current&&c.current&&r){const o=d.createPopper(n.current,c.current,{placement:"top-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]});return()=>{o.destroy()}}},[r]),a.default.createElement("button",{ref:n,onClick:p,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),type:"button","aria-label":s("archiveNotification"),className:`rnf-archive-notification-btn rnf-archive-notification-btn--${i}`},a.default.createElement(v.CloseCircle,{"aria-hidden":!0}),r&&a.default.createElement("div",{ref:c,className:`rnf-tooltip rnf-tooltip--${i}`},s("archiveNotification")))};exports.ArchiveButton=m;
|
|
2
2
|
//# sourceMappingURL=ArchiveButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArchiveButton.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport
|
|
1
|
+
{"version":3,"file":"ArchiveButton.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { createPopper } from \"@popperjs/core\";\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n const { colorMode, feedClient } = useKnockFeed();\n const { t } = useTranslations();\n const [visible, setVisible] = useState(false);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n feedClient.markAsArchived(item);\n },\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [item],\n );\n\n useEffect(() => {\n if (triggerRef.current && tooltipRef.current && visible) {\n const popperInstance = createPopper(\n triggerRef.current,\n tooltipRef.current,\n {\n placement: \"top-end\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n return () => {\n popperInstance.destroy();\n };\n }\n }, [visible]);\n\n return (\n <button\n ref={triggerRef}\n onClick={onClick}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n type=\"button\"\n aria-label={t(\"archiveNotification\")}\n className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n >\n <CloseCircle aria-hidden />\n\n {visible && (\n <div\n ref={tooltipRef}\n className={`rnf-tooltip rnf-tooltip--${colorMode}`}\n >\n {t(\"archiveNotification\")}\n </div>\n )}\n </button>\n );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","visible","setVisible","useState","triggerRef","useRef","tooltipRef","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","useEffect","current","popperInstance","createPopper","placement","modifiers","name","options","offset","destroy","React","CloseCircle"],"mappings":"kSAWMA,EAA8CA,CAAC,CAAEC,KAAAA,CAAK,IAAM,CAC1D,KAAA,CAAEC,UAAAA,EAAWC,WAAAA,GAAeC,eAAa,EACzC,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAaC,SAA0B,IAAI,EAC3CC,EAAaD,SAAuB,IAAI,EAExCE,EAAUC,EAAAA,YACbC,GAAqC,CACpCA,EAAEC,eAAe,EACjBD,EAAEE,gBAAgB,EAElBd,EAAWe,eAAejB,CAAI,CAChC,EAGA,CAACA,CAAI,CACP,EAEAkB,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIT,EAAWU,SAAWR,EAAWQ,SAAWb,EAAS,CACvD,MAAMc,EAAiBC,EAAAA,aACrBZ,EAAWU,QACXR,EAAWQ,QACX,CACEG,UAAW,UACXC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,CAAC,CAAA,CAEhB,CAAA,CAAA,CAGP,EAEA,MAAO,IAAM,CACXN,EAAeO,QAAQ,CACzB,CAAA,CACF,EACC,CAACrB,CAAO,CAAC,0BAGT,SACC,CAAA,IAAKG,EACL,QAAAG,EACA,aAAc,IAAML,EAAW,EAAI,EACnC,aAAc,IAAMA,EAAW,EAAK,EACpC,KAAK,SACL,aAAYH,EAAE,qBAAqB,EACnC,UAAW,8DAA8DH,CAAS,IAElF2B,EAAAA,QAAA,cAACC,eAAY,cAAW,GAAA,EAEvBvB,GACCsB,EAAAA,QAAA,cAAC,OACC,IAAKjB,EACL,UAAW,4BAA4BV,CAAS,IAE/CG,EAAE,qBAAqB,CAC1B,CAEJ,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n name: string;\n src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n function getInitials(name: string) {\n const [firstName, lastName] = name.split(\" \");\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName\n ? firstName.charAt(0)\n : \"\";\n }\n\n return (\n <div className=\"rnf-avatar\">\n {src ? (\n <img src={src} alt={name} className=\"rnf-avatar__image\" />\n ) : (\n <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n )}\n </div>\n );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":"yMASaA,EAAgCA,CAAC,CAAEC,KAAAA,EAAMC,IAAAA,CAAI,IAAM,CAC9D,SAASC,EAAYF,EAAc,CACjC,KAAM,CAACG,EAAWC,CAAQ,EAAIJ,EAAKK,MAAM,GAAG,EAC5C,OAAOF,GAAaC,EAChB,GAAGD,EAAUG,OAAO,CAAC,CAAC,GAAGF,EAASE,OAAO,CAAC,CAAC,GAC3CH,EACEA,EAAUG,OAAO,CAAC,EAClB,
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n name: string;\n src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n function getInitials(name: string) {\n const [firstName, lastName] = name.split(\" \");\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName\n ? firstName.charAt(0)\n : \"\";\n }\n\n return (\n <div className=\"rnf-avatar\">\n {src ? (\n <img src={src} alt={name} className=\"rnf-avatar__image\" />\n ) : (\n <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n )}\n </div>\n );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":"yMASaA,EAAgCA,CAAC,CAAEC,KAAAA,EAAMC,IAAAA,CAAI,IAAM,CAC9D,SAASC,EAAYF,EAAc,CACjC,KAAM,CAACG,EAAWC,CAAQ,EAAIJ,EAAKK,MAAM,GAAG,EAC5C,OAAOF,GAAaC,EAChB,GAAGD,EAAUG,OAAO,CAAC,CAAC,GAAGF,EAASE,OAAO,CAAC,CAAC,GAC3CH,EACEA,EAAUG,OAAO,CAAC,EAClB,EAAA,CAIN,OAAAC,UAAA,cAAC,OAAI,UAAU,cACZN,EACEM,EAAAA,QAAA,cAAA,MAAA,CAAI,IAAAN,EAAU,IAAKD,EAAM,UAAU,8CAEnC,OAAK,CAAA,UAAU,wBAAwBE,EAAYF,CAAI,CAAE,CAE9D,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationCell.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n ActionButton,\n ButtonSetContentBlock,\n ContentBlock,\n FeedItem,\n MarkdownContentBlock,\n TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n formatTimestamp,\n renderNodeOrFallback,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n // Invoked when the outer container is clicked\n onItemClick?: (item: FeedItem) => void;\n // Invoked when a button in the notification cell is clicked\n onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n if (url && url !== \"\") {\n setTimeout(() => window.location.assign(url), 200);\n }\n}\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(\n (\n { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n ref,\n ) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { locale } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n const onContainerClickHandler = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item, {\n type: \"cell_click\",\n action: actionUrl,\n });\n\n if (onItemClick) return onItemClick(item);\n\n return maybeNavigateToUrlWithDelay(actionUrl);\n }, [item, actionUrl, onItemClick, feedClient]);\n\n const onButtonClickHandler = React.useCallback(\n (_e: React.MouseEvent, button: ActionButton) => {\n // Record the interaction with the metadata for the button that was clicked\n feedClient.markAsInteracted(item, {\n type: \"button_click\",\n name: button.name,\n label: button.label,\n action: button.action,\n });\n\n if (onButtonClick) return onButtonClick(item, button);\n\n return maybeNavigateToUrlWithDelay(button.action);\n },\n [onButtonClick, feedClient, item],\n );\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onContainerClickHandler();\n break;\n }\n default:\n break;\n }\n },\n [onContainerClickHandler],\n );\n\n const actor = item.actors[0];\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && (\n <div className=\"rnf-notification-cell__unread-dot\" />\n )}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{\n __html: (blocksByName.body as MarkdownContentBlock).rendered,\n }}\n />\n )}\n\n {buttonSet && (\n <div className=\"rnf-notification-cell__button-group\">\n <ButtonGroup>\n {buttonSet.buttons.map((button, i) => (\n <Button\n variant={i === 0 ? \"primary\" : \"secondary\"}\n key={button.name}\n onClick={(e) => onButtonClickHandler(e, button)}\n >\n {button.label}\n </Button>\n ))}\n </ButtonGroup>\n </div>\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","_e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","e","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"ybAqCA,SAASA,EAA4BC,EAAc,CAC7CA,GAAOA,IAAQ,IACjBC,WAAW,IAAMC,OAAOC,SAASC,OAAOJ,CAAG,EAAG,GAAG,CAErD,CAEaK,MAAAA,EAAmBC,EAAAA,QAAMC,WAIpC,CACE,CAAEC,KAAAA,EAAMC,YAAAA,EAAaC,cAAAA,EAAeC,OAAAA,EAAQC,SAAAA,EAAUC,cAAAA,CAAc,EACpEC,IACG,OACG,KAAA,CAAEC,WAAAA,EAAYC,UAAAA,GAAcC,
|
|
1
|
+
{"version":3,"file":"NotificationCell.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n ActionButton,\n ButtonSetContentBlock,\n ContentBlock,\n FeedItem,\n MarkdownContentBlock,\n TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n formatTimestamp,\n renderNodeOrFallback,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n // Invoked when the outer container is clicked\n onItemClick?: (item: FeedItem) => void;\n // Invoked when a button in the notification cell is clicked\n onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n if (url && url !== \"\") {\n setTimeout(() => window.location.assign(url), 200);\n }\n}\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(\n (\n { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n ref,\n ) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { locale } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n const onContainerClickHandler = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item, {\n type: \"cell_click\",\n action: actionUrl,\n });\n\n if (onItemClick) return onItemClick(item);\n\n return maybeNavigateToUrlWithDelay(actionUrl);\n }, [item, actionUrl, onItemClick, feedClient]);\n\n const onButtonClickHandler = React.useCallback(\n (_e: React.MouseEvent, button: ActionButton) => {\n // Record the interaction with the metadata for the button that was clicked\n feedClient.markAsInteracted(item, {\n type: \"button_click\",\n name: button.name,\n label: button.label,\n action: button.action,\n });\n\n if (onButtonClick) return onButtonClick(item, button);\n\n return maybeNavigateToUrlWithDelay(button.action);\n },\n [onButtonClick, feedClient, item],\n );\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onContainerClickHandler();\n break;\n }\n default:\n break;\n }\n },\n [onContainerClickHandler],\n );\n\n const actor = item.actors[0];\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && (\n <div className=\"rnf-notification-cell__unread-dot\" />\n )}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{\n __html: (blocksByName.body as MarkdownContentBlock).rendered,\n }}\n />\n )}\n\n {buttonSet && (\n <div className=\"rnf-notification-cell__button-group\">\n <ButtonGroup>\n {buttonSet.buttons.map((button, i) => (\n <Button\n variant={i === 0 ? \"primary\" : \"secondary\"}\n key={button.name}\n onClick={(e) => onButtonClickHandler(e, button)}\n >\n {button.label}\n </Button>\n ))}\n </ButtonGroup>\n </div>\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","_e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","e","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"ybAqCA,SAASA,EAA4BC,EAAc,CAC7CA,GAAOA,IAAQ,IACjBC,WAAW,IAAMC,OAAOC,SAASC,OAAOJ,CAAG,EAAG,GAAG,CAErD,CAEaK,MAAAA,EAAmBC,EAAAA,QAAMC,WAIpC,CACE,CAAEC,KAAAA,EAAMC,YAAAA,EAAaC,cAAAA,EAAeC,OAAAA,EAAQC,SAAAA,EAAUC,cAAAA,CAAc,EACpEC,IACG,OACG,KAAA,CAAEC,WAAAA,EAAYC,UAAAA,GAAcC,eAAa,EACzC,CAAEC,OAAAA,GAAWC,kBAAgB,EAE7BC,EAA4BC,EAAAA,QAAQ,IACjCb,EAAKc,OAAOC,OAAO,CAACC,EAAKC,KACvB,CAAE,GAAGD,EAAK,CAACC,EAAMC,IAAI,EAAGD,CAAM,GACpC,EAAE,EACJ,CAACjB,CAAI,CAAC,EAEHmB,GAAaP,EAAAA,EAAaQ,aAAbR,YAAAA,EAA8CS,SAC3DC,EAAYV,EAAaW,QAEzBC,EAA0B1B,UAAM2B,YAAY,KAEhDlB,EAAWmB,iBAAiB1B,EAAM,CAChC2B,KAAM,aACNC,OAAQT,CAAAA,CACT,EAEGlB,EAAoBA,EAAYD,CAAI,EAEjCT,EAA4B4B,CAAS,GAC3C,CAACnB,EAAMmB,EAAWlB,EAAaM,CAAU,CAAC,EAEvCsB,EAAuB/B,EAAAA,QAAM2B,YACjC,CAACK,EAAsBC,KAErBxB,EAAWmB,iBAAiB1B,EAAM,CAChC2B,KAAM,eACNT,KAAMa,EAAOb,KACbc,MAAOD,EAAOC,MACdJ,OAAQG,EAAOH,MAAAA,CAChB,EAEG1B,EAAsBA,EAAcF,EAAM+B,CAAM,EAE7CxC,EAA4BwC,EAAOH,MAAM,GAElD,CAAC1B,EAAeK,EAAYP,CAAI,CAClC,EAEMiC,EAAYnC,EAAAA,QAAM2B,YACrBS,GAA4C,CAC3C,OAAQA,EAAGC,IAAG,CACZ,IAAK,QAAS,CACZD,EAAGE,gBAAgB,EACKZ,EAAA,EACxB,KAAA,CAGA,CACJ,EAEF,CAACA,CAAuB,CAC1B,EAEMa,EAAQrC,EAAKsC,OAAO,CAAC,EAE3B,OAEExC,EAAAA,QAAA,cAAC,MAAA,CACC,IAAAQ,EACA,UAAW,gDAAgDE,CAAS,GACpE,QAASgB,EACT,UAAAS,EAEA,SAAU,CAAA,0BAET,MAAI,CAAA,UAAU,gCACZ,CAACjC,EAAKuC,SACLzC,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,oCAChB,EAEA0C,EAAAA,qBACCrC,EACAkC,GAAS,SAAUA,GAASA,EAAMnB,MAC/BpB,EAAAA,QAAA,cAAA2C,EAAA,OAAA,CAAO,KAAMJ,EAAMnB,KAAM,IAAKmB,EAAMlC,QAEzC,EAEAL,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,wCACZc,EAAa8B,8BACX,MACC,CAAA,UAAU,iCACV,wBAAyB,CACvBC,OAAS/B,EAAa8B,KAA8BrB,QACtD,CAAA,CAEH,EAEAC,GACCxB,UAAA,cAAC,OAAI,UAAU,qCAAA,EACZA,EAAA,QAAA,cAAA8C,EAAA,YAAA,KACEtB,EAAUuB,QAAQC,IAAI,CAACf,EAAQgB,IAC9BjD,EAAA,QAAA,cAACkD,EACC,OAAA,CAAA,QAASD,IAAM,EAAI,UAAY,YAC/B,IAAKhB,EAAOb,KACZ,QAAgBW,GAAAA,EAAqBoB,EAAGlB,CAAM,CAAA,EAE7CA,EAAOC,KACV,CACD,CACH,CACF,EAGD5B,2BACE,MAAI,CAAA,UAAU,sCACZA,EAAAA,CACH,EAGFN,EAAA,QAAA,cAAC,QAAK,UAAU,kCAAA,EACboD,EAAAA,gBAAgBlD,EAAKmD,YAAa,CAAEzC,OAAAA,CAAAA,CAAQ,CAC/C,CACF,EAEC8B,EAAAA,qBAAqBnC,EAAgBP,EAAAA,QAAA,cAAAsD,EAAA,cAAA,CAAc,KAAApD,GAAc,CACpE,CAAA,CAGN,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select\n aria-label=\"Select notification filter\"\n value={value}\n onChange={onChange}\n >\n {children}\n </select>\n <ChevronDown aria-hidden />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","ChevronDown"],"mappings":"uSAYaA,EAAuDA,CAAC,CACnEC,SAAAA,EACAC,MAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select\n aria-label=\"Select notification filter\"\n value={value}\n onChange={onChange}\n >\n {children}\n </select>\n <ChevronDown aria-hidden />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","ChevronDown"],"mappings":"uSAYaA,EAAuDA,CAAC,CACnEC,SAAAA,EACAC,MAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,eAAa,EAEnC,+BACG,MAAI,CAAA,UAAW,8BAA8BD,CAAS,EAAA,0BACpD,SACC,CAAA,aAAW,6BACX,MAAAF,EACA,SAAAC,GAECF,CACH,0BACCK,EAAAA,YAAY,CAAA,cAAW,EAAA,CAAA,CAC1B,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkAsRead.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n const unreadItems = useFeedStore((state) =>\n state.items.filter((item) => !item.read_at),\n );\n\n const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n const onClickHandler = React.useCallback(\n (e: React.MouseEvent) => {\n feedClient.markAllAsRead();\n if (onClick) onClick(e, unreadItems);\n },\n [feedClient, unreadItems, onClick],\n );\n\n return (\n <button\n className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n disabled={unreadCount === 0}\n onClick={onClickHandler}\n type=\"button\"\n >\n {t(\"markAllAsRead\")}\n <CheckmarkCircle aria-hidden />\n </button>\n );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":"ijBAYaA,EAAwCA,CAAC,CAAEC,QAAAA,CAAQ,IAAM,CAC9D,KAAA,CAAEC,aAAAA,EAAcC,WAAAA,EAAYC,UAAAA,GAAcC,
|
|
1
|
+
{"version":3,"file":"MarkAsRead.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n const unreadItems = useFeedStore((state) =>\n state.items.filter((item) => !item.read_at),\n );\n\n const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n const onClickHandler = React.useCallback(\n (e: React.MouseEvent) => {\n feedClient.markAllAsRead();\n if (onClick) onClick(e, unreadItems);\n },\n [feedClient, unreadItems, onClick],\n );\n\n return (\n <button\n className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n disabled={unreadCount === 0}\n onClick={onClickHandler}\n type=\"button\"\n >\n {t(\"markAllAsRead\")}\n <CheckmarkCircle aria-hidden />\n </button>\n );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":"ijBAYaA,EAAwCA,CAAC,CAAEC,QAAAA,CAAQ,IAAM,CAC9D,KAAA,CAAEC,aAAAA,EAAcC,WAAAA,EAAYC,UAAAA,GAAcC,eAAa,EACvD,CAAEC,EAAAA,GAAMC,kBAAgB,EAExBC,EAAcN,EAAcO,GAChCA,EAAMC,MAAMC,OAAiBC,GAAA,CAACA,EAAKC,OAAO,CAC5C,EAEMC,EAAcZ,EAAwBO,GAAAA,EAAMM,SAASC,YAAY,EAEjEC,EAAiBC,EAAMC,YAC1BC,GAAwB,CACvBjB,EAAWkB,cAAc,EACrBpB,GAAiBmB,EAAAA,EAAGZ,CAAW,CAErC,EAAA,CAACL,EAAYK,EAAaP,CAAO,CACnC,EAGE,OAAAiB,EAAA,cAAC,UACC,UAAW,8CAA8Cd,CAAS,GAClE,SAAUU,IAAgB,EAC1B,QAASG,EACT,KAAK,UAEJX,EAAE,eAAe,kBACjBgB,EAAAA,gBAAgB,CAAA,cAAW,EAAA,CAAA,CAC9B,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") || \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAkDMA,EAAqBC,GACxBC,
|
|
1
|
+
{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") || \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAkDMA,EAAqBC,GACxBC,EAAA,QAAA,cAAAC,EAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,EAAA,QAAA,cAAAK,yBAAA,CAA2BN,GAAAA,EAC7B,EAEKO,EAAiBA,CAAC,CAAEC,UAAAA,CAAoC,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,0CAAA,0BACZQ,EACC,QAAA,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,OAAU,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,CACjB,IAAM,CACJ,KAAM,CAACmB,EAAQC,CAAS,EAAIC,EAAAA,SAASP,CAAmB,EAClD,CAAEQ,WAAAA,EAAYC,aAAAA,EAAcpB,UAAAA,GAAcqB,eAAa,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,kBAAgB,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUN,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBoB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAW,gDAAgD5C,CAAS,IAEnEc,GACCC,EAAa,CACX8B,gBAAiB5B,EACjB6B,aAAc9B,EACdN,qBAAAA,CAAAA,CACD,EAEHjB,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKoC,CACpDD,EAAAA,IAAkBmB,EAAcC,cAAAA,SAC9BvD,EAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEDP,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,6CACZmC,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKtD,GACTY,EAAW,CACTZ,KAAAA,EACAuD,YAAa1C,EACb2C,cAAe1C,CAAAA,CAChB,CACH,CACJ,EAECmB,IAAkBmB,EAAAA,cAAcK,WAC9B3D,EAAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEA,CAACmC,GAAmBF,GAAW5B,CAClC,GAECiB,GAAAA,YAAAA,EAAU+B,SAASC,oBACjB7D,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,uCAAA,0BACZ,IAAE,CAAA,KAAMU,EAAmB,OAAO,UAChCqB,EAAE,WAAW,GAAK,kBACrB,CACF,CAEJ,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedHeader.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n filterStatus: FilterStatus;\n setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n FilterStatus.All,\n FilterStatus.Unread,\n FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n onMarkAllAsReadClick,\n filterStatus,\n setFilterStatus,\n}) => {\n const { t } = useTranslations();\n\n return (\n <header className=\"rnf-notification-feed__header\">\n <div className=\"rnf-notification-feed__selector\">\n <span className=\"rnf-notification-feed__type\">\n {t(\"notifications\")}\n </span>\n <Dropdown\n value={filterStatus}\n onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}\n >\n {OrderedFilterStatuses.map((filterStatus) => (\n <option key={filterStatus} value={filterStatus}>\n {t(filterStatus)}\n </option>\n ))}\n </Dropdown>\n </div>\n <MarkAsRead onClick={onMarkAllAsReadClick} />\n </header>\n );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":"mQAaMA,EAAwB,CAC5BC,EAAAA,aAAaC,IACbD,EAAaE,aAAAA,OACbF,
|
|
1
|
+
{"version":3,"file":"NotificationFeedHeader.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n filterStatus: FilterStatus;\n setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n FilterStatus.All,\n FilterStatus.Unread,\n FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n onMarkAllAsReadClick,\n filterStatus,\n setFilterStatus,\n}) => {\n const { t } = useTranslations();\n\n return (\n <header className=\"rnf-notification-feed__header\">\n <div className=\"rnf-notification-feed__selector\">\n <span className=\"rnf-notification-feed__type\">\n {t(\"notifications\")}\n </span>\n <Dropdown\n value={filterStatus}\n onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}\n >\n {OrderedFilterStatuses.map((filterStatus) => (\n <option key={filterStatus} value={filterStatus}>\n {t(filterStatus)}\n </option>\n ))}\n </Dropdown>\n </div>\n <MarkAsRead onClick={onMarkAllAsReadClick} />\n </header>\n );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":"mQAaMA,EAAwB,CAC5BC,EAAAA,aAAaC,IACbD,EAAaE,aAAAA,OACbF,eAAaG,IAAI,EAGNC,EAAgEA,CAAC,CAC5EC,qBAAAA,EACAC,aAAAA,EACAC,gBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EAG5B,OAAAC,EAAA,QAAA,cAAC,UAAO,UAAU,+BAAA,0BACf,MAAI,CAAA,UAAU,iCACb,EAAAA,EAAA,QAAA,cAAC,OAAK,CAAA,UAAU,+BACbF,EAAE,eAAe,CACpB,EACAE,EAAAA,QAAA,cAACC,EAAAA,UACC,MAAOL,EACP,SAAWM,GAAML,EAAgBK,EAAEC,OAAOC,KAAqB,CAAA,EAE9Df,EAAsBgB,IAAKT,GACzBI,EAAAA,QAAA,cAAA,SAAA,CAAO,IAAKJ,EAAc,MAAOA,CAAAA,EAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,EACCI,EAAA,QAAA,cAAAM,EAAA,WAAA,CAAW,QAASX,CAAqB,CAAA,CAC5C,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@knocklabs/react-core"),y=require("@popperjs/core"),i=require("react"),F=require("../../../core/hooks/useComponentVisible.js"),N=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");;/* empty css */;/* empty css */const _=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=_(i),E=({store:e,feedClient:t})=>{e.metadata.unseen_count>0&&t.markAllAsSeen()},g=({isVisible:e,onOpen:t=E,onClose:u,buttonRef:r,closeOnClickOutside:d=!0,placement:c="bottom-end",...l})=>{const{t:p}=s.useTranslations(),{colorMode:m,feedClient:a,useFeedStore:v}=s.useKnockFeed(),f=v(),{ref:o}=F(e,u,{closeOnClickOutside:d});return i.useEffect(()=>{e&&t&&t({store:f,feedClient:a})},[e,t,f,a]),i.useEffect(()=>{if(r.current&&o.current){const q=y.createPopper(r.current,o.current,{strategy:"fixed",placement:c,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return()=>{q.destroy()}}},[r,o,c]),n.default.createElement("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${m}`,style:{visibility:e?"visible":"hidden",opacity:e?1:0},ref:o,role:"dialog","aria-label":p("notifications"),tabIndex:-1},n.default.createElement("div",{className:"rnf-notification-feed-popover__inner"},n.default.createElement(N.NotificationFeed,{...l})))};exports.NotificationFeedPopover=g;
|
|
2
2
|
//# sourceMappingURL=NotificationFeedPopover.js.map
|
package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { t } = useTranslations();\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n closeOnClickOutside,\n });\n\n useEffect(() => {\n // Whenever the feed is opened, we want to invoke the `onOpen` callback\n // function to handle any side effects.\n if (isVisible && onOpen) {\n onOpen({ store, feedClient });\n }\n }, [isVisible, onOpen, store, feedClient]);\n\n useEffect(() => {\n if (buttonRef.current && popperRef.current) {\n const popperInstance = createPopper(\n buttonRef.current,\n popperRef.current,\n {\n strategy: \"fixed\",\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n // Cleanup\n return () => {\n popperInstance.destroy();\n };\n }\n }, [buttonRef, popperRef, placement]);\n\n return (\n <div\n className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n style={{\n visibility: isVisible ? \"visible\" : \"hidden\",\n opacity: isVisible ? 1 : 0,\n }}\n ref={popperRef}\n role=\"dialog\"\n aria-label={t(\"notifications\")}\n tabIndex={-1}\n >\n <div className=\"rnf-notification-feed-popover__inner\">\n <NotificationFeed {...feedProps} />\n </div>\n </div>\n );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","useEffect","current","popperInstance","createPopper","strategy","modifiers","name","options","offset","destroy","visibility","opacity","React","NotificationFeed"],"mappings":"2dAeMA,EAAgBA,CAAC,CAAEC,MAAAA,EAAOC,WAAAA,CAA0B,IAAM,CAC1DD,EAAME,SAASC,aAAe,GAChCF,EAAWG,cAAc,CAE7B,EAWaC,EAETA,CAAC,CACHC,UAAAA,EACAC,OAAAA,EAASR,EACTS,QAAAA,EACAC,UAAAA,EACAC,oBAAAA,EAAsB,GACtBC,UAAAA,EAAY,aACZ,GAAGC,CACL,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAAEC,UAAAA,EAAWd,WAAAA,EAAYe,aAAAA,GAAiBC,eAAa,EACvDjB,EAAQgB,EAAa,EAErB,CAAEE,IAAKC,CAAAA,EAAcC,EAAoBd,EAAWE,EAAS,CACjEE,oBAAAA,CAAAA,CACD,EAEDW,OAAAA,EAAAA,UAAU,IAAM,CAGVf,GAAaC,GACRA,EAAA,CAAEP,MAAAA,EAAOC,WAAAA,CAAAA,CAAY,GAE7B,CAACK,EAAWC,EAAQP,EAAOC,CAAU,CAAC,EAEzCoB,EAAAA,UAAU,IAAM,CACVZ,GAAAA,EAAUa,SAAWH,EAAUG,QAAS,CAC1C,MAAMC,EAAiBC,EAAAA,aACrBf,EAAUa,QACVH,EAAUG,QACV,CACEG,SAAU,QACVd,UAAAA,EACAe,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,CAAC,CAAA,CAEhB,CAAA,CAAA,CAGP,EAGA,MAAO,IAAM,CACXN,EAAeO,QAAQ,CACzB,CAAA,CAED,EAAA,CAACrB,EAAWU,EAAWR,CAAS,CAAC,0BAGjC,MACC,CAAA,UAAW,gEAAgEI,CAAS,GACpF,MAAO,CACLgB,WAAYzB,EAAY,UAAY,SACpC0B,QAAS1B,EAAY,EAAI,CAC3B,EACA,IAAKa,EACL,KAAK,SACL,aAAYN,EAAE,eAAe,EAC7B,SAAU,IAEToB,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,wCACbA,EAAAA,QAAA,cAACC,oBAAiB,GAAItB,CAAAA,CAAU,CAClC,CACF,CAEJ"}
|
package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationIconButton.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n // What value should we use to drive the badge count?\n badgeCountType?: BadgeCountType;\n onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n HTMLButtonElement,\n NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <button\n className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n aria-label=\"Open notification feed\"\n ref={ref}\n onClick={onClick}\n >\n <BellIcon aria-hidden />\n <UnseenBadge badgeCountType={badgeCountType} />\n </button>\n );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":"2UAcaA,EAAyBC,EAAAA,QAAMC,WAG1C,CAAC,CAAEC,QAAAA,EAASC,eAAAA,CAAe,EAAGC,IAAQ,CAChC,KAAA,CAAEC,UAAAA,GAAcC,
|
|
1
|
+
{"version":3,"file":"NotificationIconButton.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n // What value should we use to drive the badge count?\n badgeCountType?: BadgeCountType;\n onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n HTMLButtonElement,\n NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <button\n className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n aria-label=\"Open notification feed\"\n ref={ref}\n onClick={onClick}\n >\n <BellIcon aria-hidden />\n <UnseenBadge badgeCountType={badgeCountType} />\n </button>\n );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":"2UAcaA,EAAyBC,EAAAA,QAAMC,WAG1C,CAAC,CAAEC,QAAAA,EAASC,eAAAA,CAAe,EAAGC,IAAQ,CAChC,KAAA,CAAEC,UAAAA,GAAcC,eAAa,EAEnC,+BACG,SACC,CAAA,UAAW,8DAA8DD,CAAS,GAClF,aAAW,yBACX,IAAAD,EACA,QAAAF,GAEAF,EAAAA,QAAA,cAACO,YAAS,cAAW,EAAA,CAAA,EACpBP,EAAAA,QAAA,cAAAQ,EAAAA,YAAA,CAAY,eAAAL,CAA+B,CAAA,CAC9C,CAEJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnseenBadge.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport { formatBadgeCount, useKnockFeed } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n badgeCountType: BadgeCountType,\n metadata: FeedMetadata,\n) {\n switch (badgeCountType) {\n case \"all\":\n return metadata.total_count;\n case \"unread\":\n return metadata.unread_count;\n case \"unseen\":\n return metadata.unseen_count;\n }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n badgeCountType = \"unseen\",\n}) => {\n const { useFeedStore } = useKnockFeed();\n const badgeCountValue = useFeedStore((state) =>\n selectBadgeCount(badgeCountType, state.metadata),\n );\n\n return badgeCountValue !== 0 ? (\n <div className=\"rnf-unseen-badge\">\n <span className=\"rnf-unseen-badge__count\">\n {formatBadgeCount(badgeCountValue)}\n </span>\n </div>\n ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":"4OAYA,SAASA,EACPC,EACAC,EACA,CACA,OAAQD,EAAc,CACpB,IAAK,MACH,OAAOC,EAASC,YAClB,IAAK,SACH,OAAOD,EAASE,aAClB,IAAK,SACH,OAAOF,EAASG,
|
|
1
|
+
{"version":3,"file":"UnseenBadge.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport { formatBadgeCount, useKnockFeed } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n badgeCountType: BadgeCountType,\n metadata: FeedMetadata,\n) {\n switch (badgeCountType) {\n case \"all\":\n return metadata.total_count;\n case \"unread\":\n return metadata.unread_count;\n case \"unseen\":\n return metadata.unseen_count;\n }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n badgeCountType = \"unseen\",\n}) => {\n const { useFeedStore } = useKnockFeed();\n const badgeCountValue = useFeedStore((state) =>\n selectBadgeCount(badgeCountType, state.metadata),\n );\n\n return badgeCountValue !== 0 ? (\n <div className=\"rnf-unseen-badge\">\n <span className=\"rnf-unseen-badge__count\">\n {formatBadgeCount(badgeCountValue)}\n </span>\n </div>\n ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":"4OAYA,SAASA,EACPC,EACAC,EACA,CACA,OAAQD,EAAc,CACpB,IAAK,MACH,OAAOC,EAASC,YAClB,IAAK,SACH,OAAOD,EAASE,aAClB,IAAK,SACH,OAAOF,EAASG,YAAAA,CAEtB,CAEO,MAAMC,EAA0CA,CAAC,CACtDL,eAAAA,EAAiB,QACnB,IAAM,CACE,KAAA,CAAEM,aAAAA,GAAiBC,eAAa,EAChCC,EAAkBF,EAAcG,GACpCV,EAAiBC,EAAgBS,EAAMR,QAAQ,CACjD,EAEA,OAAOO,IAAoB,EACxBE,UAAA,cAAA,MAAA,CAAI,UAAU,oBACbA,EAAAA,QAAA,cAAC,OAAK,CAAA,UAAU,yBACbC,EAAAA,EAAAA,iBAAiBH,CAAe,CACnC,CACF,EACE,IACN"}
|