@knocklabs/react 0.2.33 → 0.3.0-rc-2.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 +8 -25
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js.map +1 -1
- package/dist/cjs/modules/in-app-messages/components/Banner/Banner.js +2 -0
- package/dist/cjs/modules/in-app-messages/components/Banner/Banner.js.map +1 -0
- package/dist/cjs/modules/in-app-messages/components/Card/Card.js +2 -0
- package/dist/cjs/modules/in-app-messages/components/Card/Card.js.map +1 -0
- package/dist/cjs/modules/in-app-messages/components/Modal/Modal.js +2 -0
- package/dist/cjs/modules/in-app-messages/components/Modal/Modal.js.map +1 -0
- package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map +1 -1
- package/dist/esm/index.mjs +45 -36
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map +1 -1
- package/dist/esm/modules/in-app-messages/components/Banner/Banner.mjs +99 -0
- package/dist/esm/modules/in-app-messages/components/Banner/Banner.mjs.map +1 -0
- package/dist/esm/modules/in-app-messages/components/Card/Card.mjs +111 -0
- package/dist/esm/modules/in-app-messages/components/Card/Card.mjs.map +1 -0
- package/dist/esm/modules/in-app-messages/components/Modal/Modal.mjs +115 -0
- package/dist/esm/modules/in-app-messages/components/Modal/Modal.mjs.map +1 -0
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs +3 -3
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/types/App.d.ts +1 -0
- package/dist/types/App.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/main.d.ts +1 -0
- package/dist/types/modules/core/components/Button/Button.d.ts +1 -0
- package/dist/types/modules/core/components/Button/ButtonGroup.d.ts +1 -0
- package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts +1 -0
- package/dist/types/modules/core/components/Icons/Bell.d.ts +1 -0
- package/dist/types/modules/core/components/Icons/CheckmarkCircle.d.ts +1 -0
- package/dist/types/modules/core/components/Icons/ChevronDown.d.ts +1 -0
- package/dist/types/modules/core/components/Icons/CloseCircle.d.ts +1 -0
- package/dist/types/modules/core/components/Spinner/Spinner.d.ts +1 -0
- package/dist/types/modules/core/hooks/useOnBottomScroll.d.ts +1 -0
- package/dist/types/modules/core/hooks/useOutsideClick.d.ts +1 -0
- package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationCell/Avatar.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationCell/NotificationCell.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationFeed/Dropdown.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationFeed/MarkAsRead.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationFeed/NotificationFeed.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationFeed/NotificationFeedHeader.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts +1 -0
- package/dist/types/modules/feed/components/NotificationIconButton/NotificationIconButton.d.ts +1 -0
- package/dist/types/modules/feed/components/UnseenBadge/UnseenBadge.d.ts +1 -0
- package/dist/types/modules/in-app-messages/components/Banner/Banner.d.ts +52 -0
- package/dist/types/modules/in-app-messages/components/Banner/Banner.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/components/Banner/index.d.ts +2 -0
- package/dist/types/modules/in-app-messages/components/Banner/index.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/components/Card/Card.d.ts +57 -0
- package/dist/types/modules/in-app-messages/components/Card/Card.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/components/Card/index.d.ts +2 -0
- package/dist/types/modules/in-app-messages/components/Card/index.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/components/Modal/Modal.d.ts +70 -0
- package/dist/types/modules/in-app-messages/components/Modal/Modal.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/components/Modal/index.d.ts +2 -0
- package/dist/types/modules/in-app-messages/components/Modal/index.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/components/index.d.ts +4 -0
- package/dist/types/modules/in-app-messages/components/index.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/components/types.d.ts +5 -0
- package/dist/types/modules/in-app-messages/components/types.d.ts.map +1 -0
- package/dist/types/modules/in-app-messages/index.d.ts +2 -0
- package/dist/types/modules/in-app-messages/index.d.ts.map +1 -0
- package/dist/types/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackAuthButton/SlackAuthButton.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackAuthContainer/SlackAuthContainer.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelOption.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectionError.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/HashtagIcon.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/InfoIcon.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/LockIcon.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/SearchIcon.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackIcon/SlackIcon.d.ts +1 -0
- package/package.json +15 -11
package/CHANGELOG.md
CHANGED
@@ -1,35 +1,18 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
-
## 0.2.
|
3
|
+
## 0.3.0-rc-2.0
|
4
4
|
|
5
|
-
###
|
6
|
-
|
7
|
-
- Updated dependencies [26db496]
|
8
|
-
- Updated dependencies [988aaf9]
|
9
|
-
- @knocklabs/client@0.10.17
|
10
|
-
- @knocklabs/react-core@0.2.29
|
11
|
-
|
12
|
-
## 0.2.32
|
13
|
-
|
14
|
-
### Patch Changes
|
15
|
-
|
16
|
-
- Updated dependencies [bc99374]
|
17
|
-
- @knocklabs/client@0.10.16
|
18
|
-
- @knocklabs/react-core@0.2.28
|
19
|
-
|
20
|
-
## 0.2.31
|
21
|
-
|
22
|
-
### Patch Changes
|
23
|
-
|
24
|
-
- Updated dependencies [26166e3]
|
25
|
-
- @knocklabs/client@0.10.15
|
26
|
-
- @knocklabs/react-core@0.2.27
|
5
|
+
### Minor Changes
|
27
6
|
|
28
|
-
|
7
|
+
- 4fe529a: new prerelease version
|
8
|
+
- f442962: feat: add in app messages client, hooks, provider, and components
|
29
9
|
|
30
10
|
### Patch Changes
|
31
11
|
|
32
|
-
-
|
12
|
+
- Updated dependencies [1b3ad4b]
|
13
|
+
- Updated dependencies [f442962]
|
14
|
+
- @knocklabs/client@0.11.0-rc-2.0
|
15
|
+
- @knocklabs/react-core@0.3.0-rc-2.0
|
33
16
|
|
34
17
|
## 0.2.29
|
35
18
|
|
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{--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)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}
|
1
|
+
:root{--knock-border-style-solid: solid;--knock-border-style-dashed: dashed;--knock-transparent: transparent;--knock-white: #fff;--knock-black: #000;--knock-alpha-white-1: #ffffff0d;--knock-alpha-white-2: #ffffff1a;--knock-alpha-white-3: #ffffff26;--knock-alpha-white-4: #fff3;--knock-alpha-white-5: #ffffff4d;--knock-alpha-white-6: #fff6;--knock-alpha-white-7: #ffffff80;--knock-alpha-white-8: #fff9;--knock-alpha-white-9: #ffffffb3;--knock-alpha-white-10: #fffc;--knock-alpha-white-11: #ffffffe6;--knock-alpha-white-12: #fffffff2;--knock-alpha-black-1: #0000000d;--knock-alpha-black-2: #0000001a;--knock-alpha-black-3: #00000026;--knock-alpha-black-4: #0003;--knock-alpha-black-5: #0000004d;--knock-alpha-black-6: #0006;--knock-alpha-black-7: #00000080;--knock-alpha-black-8: #0009;--knock-alpha-black-9: #000000b3;--knock-alpha-black-10: #000c;--knock-alpha-black-11: #000000e6;--knock-alpha-black-12: #000000f2;--knock-rounded-0: 0px;--knock-rounded-1: .125rem;--knock-rounded-2: .25rem;--knock-rounded-3: .375rem;--knock-rounded-4: .5rem;--knock-rounded-5: .75rem;--knock-rounded-6: 1rem;--knock-rounded-full: 9999px;--knock-shadow-0: 0px 0px 0px 0px #0000;--knock-shadow-1: 0px 5px 2px 0px #1c202403, 0px 3px 2px 0px #1c202408, 0px 1px 1px 0px #1c20240d, 0px 0px 1px 0px #1c20240f;--knock-shadow-2: 0px 16px 7px 0px #1c202403, 0px 9px 6px 0px #1c202408, 0px 4px 4px 0px #1c20240d, 0px 1px 2px 0px #1c20240f;--knock-shadow-3: 0px 29px 12px 0px #1c202403, 0px 16px 10px 0px #1c202408, 0px 7px 7px 0px #1c20240d, 0px 2px 4px 0px #1c20240f;--knock-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;--knock-spacing-0: 0px;--knock-spacing-1: .25rem;--knock-spacing-2: .5rem;--knock-spacing-3: .75rem;--knock-spacing-4: 1rem;--knock-spacing-5: 1.25rem;--knock-spacing-6: 1.5rem;--knock-spacing-7: 1.75rem;--knock-spacing-8: 2rem;--knock-spacing-9: 2.25rem;--knock-spacing-10: 2.5rem;--knock-spacing-11: 2.75rem;--knock-spacing-12: 3rem;--knock-spacing-14: 3.5rem;--knock-spacing-16: 4rem;--knock-spacing-20: 5rem;--knock-spacing-24: 6rem;--knock-spacing-28: 7rem;--knock-spacing-32: 8rem;--knock-spacing-36: 9rem;--knock-spacing-40: 10rem;--knock-spacing-44: 11rem;--knock-spacing-48: 12rem;--knock-spacing-52: 13rem;--knock-spacing-56: 14rem;--knock-spacing-60: 15rem;--knock-spacing-64: 16rem;--knock-spacing-72: 18rem;--knock-spacing-80: 20rem;--knock-spacing-96: 24rem;--knock-spacing-140: 35rem;--knock-spacing-160: 40rem;--knock-spacing-px: 1px;--knock-spacing-full: 100%;--knock-spacing-auto: auto;--knock-family-sans: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--knock-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--knock-leading-0: 1rem;--knock-leading-1: 1rem;--knock-leading-2: 1.25rem;--knock-leading-3: 1.5rem;--knock-leading-4: 1.75rem;--knock-leading-5: 1.75rem;--knock-leading-6: 2rem;--knock-leading-7: 2.25rem;--knock-leading-8: 2.5rem;--knock-leading-9: 3.5rem;--knock-leading-code-0: 1rem;--knock-leading-code-1: 1rem;--knock-leading-code-2: 1.25rem;--knock-leading-code-3: 1.5rem;--knock-leading-code-4: 1.75rem;--knock-leading-code-5: 1.75rem;--knock-leading-code-6: 2rem;--knock-leading-code-7: 2.25rem;--knock-leading-code-8: 2.5rem;--knock-leading-code-9: 3rem;--knock-tracking-0: .25%;--knock-tracking-1: .25%;--knock-tracking-2: 0;--knock-tracking-3: 0;--knock-tracking-4: -.25%;--knock-tracking-5: -.5%;--knock-tracking-6: -.625%;--knock-tracking-7: -.75%;--knock-tracking-8: -1%;--knock-tracking-9: -2.5%;--knock-text-0: .6875rem;--knock-text-1: .75rem;--knock-text-2: .875rem;--knock-text-3: 1rem;--knock-text-4: 1.125rem;--knock-text-5: 1.25rem;--knock-text-6: 1.5rem;--knock-text-7: 1.875rem;--knock-text-8: 2.25rem;--knock-text-9: 3rem;--knock-text-code-0: .625rem;--knock-text-code-1: .688rem;--knock-text-code-2: .812rem;--knock-text-code-4: 1.062rem;--knock-text-code-5: 1.188rem;--knock-text-code-6: 1.438rem;--knock-text-code-7: 1.75rem;--knock-text-code-8: 2.125rem;--knock-text-code-9: 2.875rem;--knock-weight-regular: 400;--knock-weight-medium: 500;--knock-weight-semi-bold: 600;--knock-breakpoint-sm: 640px;--knock-breakpoint-md: 768px;--knock-breakpoint-lg: 1024px;--knock-breakpoint-xl: 1280px;--knock-breakpoint-2xl: 1536px;--knock-zIndex-hidden: -1;--knock-zIndex-base: 0;--knock-zIndex-auto: auto;--knock-zIndex-dropdown: 1000;--knock-zIndex-sticky: 1100;--knock-zIndex-banner: 1200;--knock-zIndex-overlay: 1300;--knock-zIndex-modal: 1400;--knock-zIndex-popover: 1500;--knock-zIndex-skipLink: 1600;--knock-zIndex-toast: 1700;--knock-zIndex-tooltip: 1800}[data-knock-color-mode=light]{--knock-surface-1: #fff;--knock-surface-2: #f9f9f8;--knock-gray-1: #fcfcfd;--knock-gray-2: #f9f9fb;--knock-gray-3: #f0f0f3;--knock-gray-4: #e8e8ec;--knock-gray-5: #e0e1e6;--knock-gray-6: #d9d9e0;--knock-gray-7: #cdced6;--knock-gray-8: #b9bbc6;--knock-gray-9: #8b8d98;--knock-gray-10: #80838d;--knock-gray-11: #60646c;--knock-gray-12: #1c2024;--knock-beige-1: #fdfdfc;--knock-beige-2: #f9f9f8;--knock-beige-3: #f1f0ef;--knock-beige-4: #e9e8e6;--knock-beige-5: #e2e1de;--knock-beige-6: #dad9d6;--knock-beige-7: #cfceca;--knock-beige-8: #bcbbb5;--knock-beige-9: #8d8d86;--knock-beige-10: #82827c;--knock-beige-11: #63635e;--knock-beige-12: #21201c;--knock-orange-1: #fffcfc;--knock-orange-2: #fff8f7;--knock-orange-3: #feebe7;--knock-orange-4: #ffdcd3;--knock-orange-5: #ffcdc2;--knock-orange-6: #fdbdaf;--knock-orange-7: #f5a898;--knock-orange-8: #ec8e7b;--knock-orange-9: #e54d2e;--knock-orange-10: #dd4425;--knock-orange-11: #d13415;--knock-orange-12: #5c271f;--knock-green-1: #fbfefd;--knock-green-2: #f4fbf7;--knock-green-3: #e6f7ed;--knock-green-4: #d6f1e3;--knock-green-5: #c3e9d7;--knock-green-6: #acdec8;--knock-green-7: #8bceb6;--knock-green-8: #56ba9f;--knock-green-9: #29a383;--knock-green-10: #26997b;--knock-green-11: #208368;--knock-green-12: #1d3b31;--knock-yellow-1: #fefdfb;--knock-yellow-2: #fefbe9;--knock-yellow-3: #fff7c2;--knock-yellow-4: #ffee9c;--knock-yellow-5: #fbe577;--knock-yellow-6: #f3d673;--knock-yellow-7: #e9c162;--knock-yellow-8: #f3d673;--knock-yellow-9: #ffc53d;--knock-yellow-10: #ffba18;--knock-yellow-11: #ab6400;--knock-yellow-12: #4f3422;--knock-blue-1: #fdfdfe;--knock-blue-2: #f7f9ff;--knock-blue-3: #edf2fe;--knock-blue-4: #e1e9ff;--knock-blue-5: #d2deff;--knock-blue-6: #c1d0ff;--knock-blue-7: #abbdf9;--knock-blue-8: #8da4ef;--knock-blue-9: #3e63dd;--knock-blue-10: #3358d4;--knock-blue-11: #3a5bc7;--knock-blue-12: #1f2d5c;--knock-red-1: #fffcfd;--knock-red-2: #fff7f8;--knock-red-3: #feeaed;--knock-red-4: #ffdce1;--knock-red-5: #ffced6;--knock-red-6: #f8bfc8;--knock-red-7: #efacb8;--knock-red-8: #e592a3;--knock-red-9: #e54666;--knock-red-10: #dc3b5d;--knock-red-11: #ca244d;--knock-red-12: #64172b;--knock-purple-1: #fdfcfe;--knock-purple-2: #faf8ff;--knock-purple-3: #f4f0fe;--knock-purple-4: #ebe4ff;--knock-purple-5: #e1d9ff;--knock-purple-6: #d4cafe;--knock-purple-7: #c2b5f5;--knock-purple-8: #aa99ec;--knock-purple-9: #654dc4;--knock-purple-10: #654dc4;--knock-purple-11: #6550b9;--knock-purple-12: #2f265f}[data-knock-color-mode=dark]{--knock-surface-1: #18191b;--knock-surface-2: #111110;--knock-gray-1: #111113;--knock-gray-2: #18191b;--knock-gray-3: #212225;--knock-gray-4: #272a2d;--knock-gray-5: #2e3135;--knock-gray-6: #363a3f;--knock-gray-7: #43484e;--knock-gray-8: #5a6169;--knock-gray-9: #696e77;--knock-gray-10: #777b84;--knock-gray-11: #b0b4ba;--knock-gray-12: #edeef0;--knock-beige-1: #111110;--knock-beige-2: #191918;--knock-beige-3: #222221;--knock-beige-4: #2a2a28;--knock-beige-5: #31312e;--knock-beige-6: #3b3a37;--knock-beige-7: #494844;--knock-beige-8: #62605b;--knock-beige-9: #6f6d66;--knock-beige-10: #7c7b74;--knock-beige-11: #b5b3ad;--knock-beige-12: #eeeeec;--knock-orange-1: #181111;--knock-orange-2: #1f1513;--knock-orange-3: #391714;--knock-orange-4: #4e1511;--knock-orange-5: #5e1c16;--knock-orange-6: #6e2920;--knock-orange-7: #853a2d;--knock-orange-8: #ac4d39;--knock-orange-9: #e54d2e;--knock-orange-10: #ec6142;--knock-orange-11: #ff977d;--knock-orange-12: #fbd3cb;--knock-green-1: #0d1512;--knock-green-2: #121c18;--knock-green-3: #0f2e22;--knock-green-4: #0b3b2c;--knock-green-5: #114837;--knock-green-6: #1b5745;--knock-green-7: #246854;--knock-green-8: #2a7e68;--knock-green-9: #29a383;--knock-green-10: #27b08b;--knock-green-11: #1fd8a4;--knock-green-12: #adf0d4;--knock-yellow-1: #16120c;--knock-yellow-2: #1d180f;--knock-yellow-3: #302008;--knock-yellow-4: #3f2700;--knock-yellow-5: #4d3000;--knock-yellow-6: #5c3d05;--knock-yellow-7: #714f19;--knock-yellow-8: #8f6424;--knock-yellow-9: #ffc53d;--knock-yellow-10: #ffd60a;--knock-yellow-11: #ffca16;--knock-yellow-12: #ffe7b3;--knock-blue-1: #11131f;--knock-blue-2: #141726;--knock-blue-3: #182449;--knock-blue-4: #1d2e62;--knock-blue-5: #253974;--knock-blue-6: #304384;--knock-blue-7: #3a4f97;--knock-blue-8: #435db1;--knock-blue-9: #3e63dd;--knock-blue-10: #5472e4;--knock-blue-11: #9eb1ff;--knock-blue-12: #d6e1ff;--knock-red-1: #191113;--knock-red-2: #1e1517;--knock-red-3: #3a141e;--knock-red-4: #4e1325;--knock-red-5: #5e1a2e;--knock-red-6: #6f2539;--knock-red-7: #883447;--knock-red-8: #b3445a;--knock-red-9: #e54666;--knock-red-10: #ec5a72;--knock-red-11: #ff949d;--knock-red-12: #fed2e1;--knock-purple-1: #14121f;--knock-purple-2: #1b1525;--knock-purple-3: #291f43;--knock-purple-4: #33255b;--knock-purple-5: #3c2e69;--knock-purple-6: #473876;--knock-purple-7: #56468b;--knock-purple-8: #6958ad;--knock-purple-9: #6e56cf;--knock-purple-10: #7d66d9;--knock-purple-11: #baa7ff;--knock-purple-12: #e2ddfe}[data-knock-color-mode=light]{--knock-iam-accent: var(--knock-gray-12);--knock-iam-accent-light: var(--knock-gray-4);--knock-iam-accent-dark: var(--knock-gray-12);--knock-iam-secondary: var(--knock-gray-9);--knock-iam-secondary-light: var(--knock-gray-3);--knock-iam-secondary-dark: var(--knock-gray-11);--knock-iam-content: var(--knock-gray-12);--knock-iam-content-light: var(--knock-gray-11);--knock-iam-content-disabled: var(--knock-gray-9);--knock-iam-content-contrast: var(--knock-white);--knock-iam-border: var(--knock-gray-5);--knock-iam-border-light: var(--knock-gray-4);--knock-iam-border-dark: var(--knock-gray-7);--knock-iam-surface: var(--knock-white);--knock-iam-surface-2: var(--knock-gray-2)}[data-knock-color-mode=dark]{--knock-iam-surface: var(--knock-white);--knock-iam-surface-2: var(--knock-gray-2);--knock-iam-accent: var(--knock-white);--knock-iam-accent-light: var(--knock-gray-4);--knock-iam-accent-dark: var(--knock-gray-12);--knock-iam-secondary: var(--knock-gray-9);--knock-iam-secondary-light: var(--knock-gray-3);--knock-iam-secondary-dark: var(--knock-gray-11);--knock-iam-content: var(--knock-gray-12);--knock-iam-content-light: var(--knock-gray-11);--knock-iam-content-disabled: var(--knock-gray-9);--knock-iam-content-contrast: var(--knock-gray-1);--knock-iam-border: var(--knock-gray-5);--knock-iam-border-light: var(--knock-gray-4);--knock-iam-border-dark: var(--knock-gray-7);--knock-iam-surface: var(--knock-gray-2);--knock-iam-surface-2: var(--knock-gray-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}.knock-iam-banner{display:flex;align-items:center;justify-content:space-between;background:var(--knock-iam-surface);padding:var(--knock-spacing-4) var(--knock-spacing-6);border-radius:var(--knock-rounded-4);border:.5px solid var(--knock-iam-border);box-shadow:var(--knock-shadow-2);gap:var(--knock-spacing-4)}.knock-iam-banner__message{min-width:var(--knock-spacing-96)}.knock-iam-banner__title{color:var(--knock-iam-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4)}.knock-iam-banner__body{color:var(--knock-iam-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3)}.knock-iam-banner__body>:first-child{margin-top:0}.knock-iam-banner__body>:last-child{margin-bottom:0}.knock-iam-banner__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-3)}.knock-iam-banner__action{text-decoration:none;font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-iam-accent);background:var(--knock-iam-accent);color:var(--knock-iam-content-contrast)}.knock-iam-banner__action--secondary{border-color:var(--knock-iam-border-dark);background:var(--knock-iam-surface);color:var(--knock-iam-content)}.knock-iam-banner__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0}.knock-iam-card{background:var(--knock-iam-surface);padding:var(--knock-spacing-4);border-radius:var(--knock-rounded-2);border:.5px solid var(--knock-iam-border);display:flex;flex-direction:column;gap:var(--knock-spacing-4);max-width:var(--knock-spacing-96)}.knock-iam-card__header{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:var(--knock-spacing-2)}.knock-iam-card__headline{color:var(--knock-iam-accent-dark);font-size:var(--knock-text-1);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-1);letter-spacing:var(--knock-tracking-1)}.knock-iam-card__message{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.knock-iam-card__title{color:var(--knock-iam-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4)}.knock-iam-card__body{color:var(--knock-iam-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3)}.knock-iam-card__body>:first-child{margin-top:0}.knock-iam-card__body>:last-child{margin-bottom:0}.knock-iam-card__actions{display:flex;align-items:center;gap:var(--knock-spacing-3)}.knock-iam-card__action{text-decoration:none;font-size:var(--knock-text-3);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-iam-accent);background:var(--knock-iam-accent);color:var(--knock-iam-content-contrast)}.knock-iam-card__action--secondary{border-color:var(--knock-iam-border-dark);background:var(--knock-iam-surface);color:var(--knock-iam-content)}.knock-iam-card__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0}.knock-iam-modal{font-family:var(--knock-family-sans);background:var(--knock-iam-surface);padding:var(--knock-spacing-4) var(--knock-spacing-6) var(--knock-spacing-6);border-radius:var(--knock-rounded-4);border:.5px solid var(--knock-iam-border);box-shadow:var(--knock-shadow-3);max-width:var(--knock-spacing-96);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-height:calc(100vh - var(--knock-spacing-32));max-width:min(100vw - var(--knock-spacing-8),var(--knock-spacing-140))}.knock-iam-modal__overlay{background-color:var(--knock-alpha-black-6);position:fixed;top:0;right:0;bottom:0;left:0}.knock-iam-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-2);padding-bottom:var(--knock-spacing-1)}.knock-iam-modal__title{color:var(--knock-iam-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4);margin:0}.knock-iam-modal__body{color:var(--knock-iam-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3);margin:0}.knock-iam-modal__body>:first-child{margin-top:0}.knock-iam-modal__body>:last-child{margin-bottom:0}.knock-iam-modal__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-3);margin-top:var(--knock-spacing-4)}.knock-iam-modal__action{text-decoration:none;text-align:center;font-size:var(--knock-text-3);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-iam-accent);background:var(--knock-iam-accent);color:var(--knock-iam-content-contrast);width:100%}.knock-iam-modal__action--secondary{border-color:var(--knock-iam-border-dark);background:var(--knock-iam-surface);color:var(--knock-iam-content)}.knock-iam-modal__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0}: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)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}
|
package/dist/cjs/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */const
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */const i=require("./modules/core/components/Button/Button.js"),a=require("./modules/core/components/Button/ButtonGroup.js"),c=require("./modules/core/components/Icons/Bell.js"),u=require("./modules/core/components/Icons/CheckmarkCircle.js"),l=require("./modules/core/components/Icons/ChevronDown.js"),s=require("./modules/core/components/Icons/CloseCircle.js"),d=require("./modules/core/components/Spinner/Spinner.js"),C=require("./modules/core/hooks/useOnBottomScroll.js"),q=require("./modules/core/hooks/useOutsideClick.js"),B=require("./modules/feed/components/EmptyFeed/EmptyFeed.js"),f=require("./modules/feed/components/NotificationCell/NotificationCell.js"),k=require("./modules/feed/components/NotificationCell/Avatar.js"),N=require("./modules/feed/components/NotificationFeed/NotificationFeed.js"),h=require("./modules/feed/components/NotificationFeed/NotificationFeedHeader.js"),p=require("./modules/feed/components/NotificationFeed/MarkAsRead.js"),S=require("./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js"),F=require("./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js"),m=require("./modules/feed/components/NotificationIconButton/NotificationIconButton.js"),b=require("./modules/feed/components/UnseenBadge/UnseenBadge.js"),t=require("./modules/in-app-messages/components/Banner/Banner.js"),r=require("./modules/in-app-messages/components/Card/Card.js"),n=require("./modules/in-app-messages/components/Modal/Modal.js"),A=require("./modules/slack/components/SlackAuthButton/SlackAuthButton.js"),v=require("./modules/slack/components/SlackAuthContainer/SlackAuthContainer.js"),w=require("./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js"),o=require("@knocklabs/react-core");exports.Button=i.Button;exports.ButtonGroup=a.ButtonGroup;exports.BellIcon=c.BellIcon;exports.CheckmarkCircle=u.CheckmarkCircle;exports.ChevronDown=l.ChevronDown;exports.CloseCircle=s.CloseCircle;exports.Spinner=d.Spinner;exports.useOnBottomScroll=C;exports.useOutsideClick=q;exports.EmptyFeed=B.EmptyFeed;exports.NotificationCell=f.NotificationCell;exports.Avatar=k.Avatar;exports.NotificationFeed=N.NotificationFeed;exports.NotificationFeedHeader=h.NotificationFeedHeader;exports.MarkAsRead=p.MarkAsRead;exports.NotificationFeedContainer=S.NotificationFeedContainer;exports.NotificationFeedPopover=F.NotificationFeedPopover;exports.NotificationIconButton=m.NotificationIconButton;exports.UnseenBadge=b.UnseenBadge;exports.Banner=t.Banner;exports.BannerView=t.BannerView;exports.Card=r.Card;exports.CardView=r.CardView;exports.Modal=n.Modal;exports.ModalView=n.ModalView;exports.SlackAuthButton=A.SlackAuthButton;exports.SlackAuthContainer=v.SlackAuthContainer;exports.SlackChannelCombobox=w.SlackChannelCombobox;Object.keys(o).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})});
|
2
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +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 (
|
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 <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\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","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("@knocklabs/react-core"),w=require("clsx"),p=require("react");;/* empty css */const b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=b(w),a=b(p),g="banner",s=({children:e,className:n,...t})=>a.default.createElement("div",{className:r.default("knock-iam-banner",n),...t},e);s.displayName="BannerView.Root";const c=({children:e,className:n,...t})=>a.default.createElement("div",{className:r.default("knock-iam-banner__message",n),...t},e);c.displayName="BannerView.Content";const i=({title:e,className:n,...t})=>a.default.createElement("div",{className:r.default("knock-iam-banner__title",n),...t},e);i.displayName="BannerView.Title";const o=({body:e,className:n,...t})=>a.default.createElement("div",{className:r.default("knock-iam-banner__body",n),dangerouslySetInnerHTML:{__html:e},...t});o.displayName="BannerView.Body";const d=({children:e,className:n,...t})=>a.default.createElement("div",{className:r.default("knock-iam-banner__actions",n),...t},e);d.displayName="BannerView.Actions";const u=({text:e,action:n,className:t,...l})=>a.default.createElement("a",{href:n,className:r.default("knock-iam-banner__action",t),...l},e);u.displayName="BannerView.PrimaryAction";const m=({text:e,action:n,className:t,...l})=>a.default.createElement("a",{href:n,className:r.default("knock-iam-banner__action knock-iam-banner__action--secondary",t),...l},e);m.displayName="BannerView.SecondaryAction";const f=({className:e,...n})=>a.default.createElement("button",{className:r.default("knock-iam-banner__close",e),...n},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},a.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},a.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),a.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));f.displayName="BannerView.DismissButton";const _=({content:e,colorMode:n="light",onInteract:t,onDismiss:l})=>a.default.createElement(s,{"data-knock-color-mode":n,onClick:t},a.default.createElement(c,null,a.default.createElement(i,{title:e.title}),a.default.createElement(o,{body:e.body})),a.default.createElement(d,null,e.secondary_button&&a.default.createElement(m,{text:e.secondary_button.text,action:e.secondary_button.action}),e.primary_button&&a.default.createElement(u,{text:e.primary_button.text,action:e.primary_button.action}),e.dismissible&&a.default.createElement(f,{onClick:l})));_.displayName="BannerView.Default";const k=({filters:e})=>{const{colorMode:n}=y.useInAppMessagesChannel(),{message:t,inAppMessagesClient:l}=y.useInAppMessage(g,e);if(p.useEffect(()=>{!t||t.seen_at!==null||l.markAsSeen(t)},[t,l]),!t||t.archived_at)return null;const B=()=>{l.markAsArchived(t)},N=()=>{l.markAsInteracted(t)};return a.default.createElement(_,{content:t.content,colorMode:n,onDismiss:B,onInteract:N})};k.displayName="Banner";const E={};Object.assign(E,{Default:_,Root:s,Content:c,Title:i,Body:o,Actions:d,PrimaryAction:u,SecondaryAction:m,DismissButton:f});exports.Banner=k;exports.BannerView=E;
|
2
|
+
//# sourceMappingURL=Banner.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../../../../../src/modules/in-app-messages/components/Banner/Banner.tsx"],"sourcesContent":["import {\n ColorMode,\n UseInAppMessageOptions,\n useInAppMessage,\n useInAppMessagesChannel,\n} from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React, { useEffect } from \"react\";\n\nimport { ActionContent } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nexport interface BannerProps {\n filters?: UseInAppMessageOptions;\n}\n\nexport interface BannerContent {\n title: string;\n body: string;\n primary_button?: {\n text: string;\n action: string;\n };\n secondary_button?: {\n text: string;\n action: string;\n };\n dismissible?: boolean;\n}\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-banner\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-banner__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-banner__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-iam-banner__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-banner__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryAction: React.FC<\n ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n return (\n <a\n href={action}\n className={clsx(\"knock-iam-banner__action\", className)}\n {...props}\n >\n {text}\n </a>\n );\n};\nPrimaryAction.displayName = \"BannerView.PrimaryAction\";\n\nconst SecondaryAction: React.FC<\n ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n return (\n <a\n href={action}\n className={clsx(\n \"knock-iam-banner__action knock-iam-banner__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </a>\n );\n};\nSecondaryAction.displayName = \"BannerView.SecondaryAction\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-iam-banner__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\nconst DefaultView: React.FC<{\n content: BannerContent;\n colorMode?: ColorMode;\n onInteract?: () => void;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({ content, colorMode = \"light\", onInteract, onDismiss }) => {\n return (\n <Root data-knock-color-mode={colorMode} onClick={onInteract}>\n <Content>\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n <Actions>\n {content.secondary_button && (\n <SecondaryAction\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n />\n )}\n\n {content.primary_button && (\n <PrimaryAction\n text={content.primary_button.text}\n action={content.primary_button.action}\n />\n )}\n\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Actions>\n </Root>\n );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\nconst Banner: React.FC<BannerProps> = ({ filters }) => {\n const { colorMode } = useInAppMessagesChannel();\n\n const { message, inAppMessagesClient } = useInAppMessage<BannerContent>(\n MESSAGE_TYPE,\n filters,\n );\n\n // Mark the message as seen on render\n useEffect(() => {\n if (!message || message.seen_at !== null) return;\n\n inAppMessagesClient.markAsSeen(message);\n }, [message, inAppMessagesClient]);\n\n // Exclude archived messages\n if (!message || message.archived_at) return null;\n\n const onDismiss = () => {\n inAppMessagesClient.markAsArchived(message);\n };\n\n const onInteract = () => {\n inAppMessagesClient.markAsInteracted(message);\n };\n\n return (\n <DefaultView\n content={message.content}\n colorMode={colorMode}\n onDismiss={onDismiss}\n onInteract={onInteract}\n />\n );\n};\nBanner.displayName = \"Banner\";\n\nconst BannerView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryAction: typeof PrimaryAction;\n SecondaryAction: typeof SecondaryAction;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Actions,\n PrimaryAction,\n SecondaryAction,\n DismissButton,\n});\n\nexport { Banner, BannerView };\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryAction","text","action","SecondaryAction","DismissButton","DefaultView","content","colorMode","onInteract","onDismiss","secondary_button","primary_button","dismissible","Banner","filters","useInAppMessagesChannel","message","inAppMessagesClient","useInAppMessage","useEffect","seen_at","markAsSeen","archived_at","markAsArchived","markAsInteracted","BannerView","Object","assign","Default"],"mappings":"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"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("@knocklabs/react-core"),g=require("clsx"),k=require("react");;/* empty css */const p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=p(g),t=p(k),v="card",d=({children:e,className:l,...a})=>t.default.createElement("div",{className:r.default("knock-iam-card",l),...a},e);d.displayName="CardView.Root";const c=({children:e,className:l,...a})=>t.default.createElement("div",{className:r.default("knock-iam-card__message",l),...a},e);c.displayName="CardView.Content";const E=({children:e,className:l,...a})=>t.default.createElement("div",{className:r.default("knock-iam-card__header",l),...a},e);E.displayName="CardView.Header";const C=({headline:e,className:l,...a})=>t.default.createElement("div",{className:r.default("knock-iam-card__headline",l),...a},e);C.displayName="CardView.Headline";const i=({title:e,className:l,...a})=>t.default.createElement("div",{className:r.default("knock-iam-card__title",l),...a},e);i.displayName="CardView.Title";const s=({body:e,className:l,...a})=>t.default.createElement("div",{className:r.default("knock-iam-card__body",l),dangerouslySetInnerHTML:{__html:e},...a});s.displayName="CardView.Body";const o=({children:e,className:l,...a})=>t.default.createElement("div",{className:r.default("knock-iam-card__actions",l),...a},e);o.displayName="CardView.Actions";const u=({text:e,action:l,className:a,...n})=>t.default.createElement("a",{href:l,className:r.default("knock-iam-card__action",a),...n},e);u.displayName="CardView.PrimaryAction";const m=({text:e,action:l,className:a,...n})=>t.default.createElement("a",{href:l,className:r.default("knock-iam-card__action knock-iam-card__action--secondary",a),...n},e);m.displayName="CardView.SecondaryAction";const f=({className:e,...l})=>t.default.createElement("button",{className:r.default("knock-iam-card__close",e),...l},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));f.displayName="CardView.DismissButton";const _=({content:e,colorMode:l="light",onInteract:a,onDismiss:n})=>t.default.createElement(d,{"data-knock-color-mode":l,onClick:a},t.default.createElement(c,null,t.default.createElement(E,null,t.default.createElement(C,{headline:e.headline}),e.dismissible&&t.default.createElement(f,{onClick:n})),t.default.createElement(i,{title:e.title}),t.default.createElement(s,{body:e.body})),t.default.createElement(o,null,e.primary_button&&t.default.createElement(u,{text:e.primary_button.text,action:e.primary_button.action}),e.secondary_button&&t.default.createElement(m,{text:e.secondary_button.text,action:e.secondary_button.action})));_.displayName="CardView.Default";const N=({filters:e})=>{const{colorMode:l}=y.useInAppMessagesChannel(),{message:a,inAppMessagesClient:n}=y.useInAppMessage(v,e);if(k.useEffect(()=>{!a||a.seen_at!==null||n.markAsSeen(a)},[a,n]),!a||a.archived_at)return null;const h=()=>{n.markAsArchived(a)},b=()=>{n.markAsInteracted(a)};return t.default.createElement(_,{content:a.content,colorMode:l,onDismiss:h,onInteract:b})};N.displayName="Card";const w={};Object.assign(w,{Default:_,Root:d,Content:c,Title:i,Body:s,Actions:o,PrimaryAction:u,SecondaryAction:m,DismissButton:f});exports.Card=N;exports.CardView=w;
|
2
|
+
//# sourceMappingURL=Card.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../../../src/modules/in-app-messages/components/Card/Card.tsx"],"sourcesContent":["import {\n ColorMode,\n UseInAppMessageOptions,\n useInAppMessage,\n useInAppMessagesChannel,\n} from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React, { useEffect } from \"react\";\n\nimport { ActionContent } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nexport interface CardProps {\n filters?: UseInAppMessageOptions;\n}\n\nexport interface CardContent {\n headline: string;\n title: string;\n body: string;\n primary_button?: {\n text: string;\n action: string;\n };\n secondary_button?: {\n text: string;\n action: string;\n };\n dismissible?: boolean;\n}\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-card\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-card__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-card__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-card__headline\", className)} {...props}>\n {headline}\n </div>\n );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-card__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-iam-card__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-card__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryAction: React.FC<\n ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n return (\n <a\n href={action}\n className={clsx(\"knock-iam-card__action\", className)}\n {...props}\n >\n {text}\n </a>\n );\n};\nPrimaryAction.displayName = \"CardView.PrimaryAction\";\n\nconst SecondaryAction: React.FC<\n ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n return (\n <a\n href={action}\n className={clsx(\n \"knock-iam-card__action knock-iam-card__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </a>\n );\n};\nSecondaryAction.displayName = \"CardView.SecondaryAction\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-iam-card__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\nconst DefaultView: React.FC<{\n content: CardContent;\n colorMode?: ColorMode;\n onInteract?: () => void;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({ content, colorMode = \"light\", onInteract, onDismiss }) => {\n return (\n <Root data-knock-color-mode={colorMode} onClick={onInteract}>\n <Content>\n <Header>\n <Headline headline={content.headline} />\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Header>\n\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n <Actions>\n {content.primary_button && (\n <PrimaryAction\n text={content.primary_button.text}\n action={content.primary_button.action}\n />\n )}\n\n {content.secondary_button && (\n <SecondaryAction\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n />\n )}\n </Actions>\n </Root>\n );\n};\nDefaultView.displayName = \"CardView.Default\";\n\nconst Card: React.FC<CardProps> = ({ filters }) => {\n const { colorMode } = useInAppMessagesChannel();\n const { message, inAppMessagesClient } = useInAppMessage<CardContent>(\n MESSAGE_TYPE,\n filters,\n );\n\n // Mark the message as seen on render\n useEffect(() => {\n if (!message || message.seen_at !== null) return;\n\n inAppMessagesClient.markAsSeen(message);\n }, [message, inAppMessagesClient]);\n\n // Exclude archived messages\n if (!message || message.archived_at) return null;\n\n const onDismiss = () => {\n inAppMessagesClient.markAsArchived(message);\n };\n\n const onInteract = () => {\n inAppMessagesClient.markAsInteracted(message);\n };\n\n return (\n <DefaultView\n content={message.content}\n colorMode={colorMode}\n onDismiss={onDismiss}\n onInteract={onInteract}\n />\n );\n};\nCard.displayName = \"Card\";\n\nconst CardView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Headline: typeof Headline;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryAction: typeof PrimaryAction;\n SecondaryAction: typeof SecondaryAction;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Actions,\n PrimaryAction,\n SecondaryAction,\n DismissButton,\n});\n\nexport { Card, CardView };\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Actions","PrimaryAction","text","action","SecondaryAction","DismissButton","DefaultView","content","colorMode","onInteract","onDismiss","dismissible","primary_button","secondary_button","Card","filters","useInAppMessagesChannel","message","inAppMessagesClient","useInAppMessage","useEffect","seen_at","markAsSeen","archived_at","markAsArchived","markAsInteracted","CardView","Object","assign","Default"],"mappings":"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"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("@knocklabs/react-core"),C=require("@radix-ui/react-dialog"),V=require("clsx"),M=require("react");;/* empty css */const g=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function O(e){if(e&&typeof e=="object"&&"default"in e)return e;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(l,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return l.default=e,Object.freeze(l)}const r=O(C),o=g(V),a=g(M),S="modal",c=({children:e,onOpenChange:l,...t})=>a.default.createElement(r.Root,{defaultOpen:!0,onOpenChange:l,...t},a.default.createElement(r.Portal,null,e));c.displayName="ModalView.Root";const i=a.default.forwardRef(({className:e,...l},t)=>a.default.createElement(r.Overlay,{className:o.default("knock-iam-modal__overlay",e),ref:t,...l}));i.displayName="ModalView.Overlay";const s=a.default.forwardRef(({children:e,className:l,...t},n)=>a.default.createElement(r.Content,{className:o.default("knock-iam-modal",l),ref:n,...t},e));s.displayName="ModalView.Content";const w=({children:e,className:l,...t})=>a.default.createElement("div",{className:o.default("knock-iam-modal__header",l),...t},e);w.displayName="ModalView.Header";const u=({title:e,className:l,...t})=>a.default.createElement(r.Title,{className:o.default("knock-iam-modal__title",l),...t},e);u.displayName="ModalView.Title";const m=({body:e,className:l,...t})=>a.default.createElement(r.Description,{className:o.default("knock-iam-modal__body",l),dangerouslySetInnerHTML:{__html:e},...t});m.displayName="ModalView.Body";const f=({children:e,className:l,...t})=>a.default.createElement("div",{className:o.default("knock-iam-modal__actions",l),...t},e);f.displayName="ModalView.Actions";const p=({text:e,action:l,className:t,...n})=>a.default.createElement("a",{href:l,className:o.default("knock-iam-modal__action",t),...n},e);p.displayName="ModalView.PrimaryAction";const y=({text:e,action:l,className:t,...n})=>a.default.createElement("a",{href:l,className:o.default("knock-iam-modal__action knock-iam-modal__action--secondary",t),...n},e);y.displayName="ModalView.SecondaryAction";const _=({className:e,...l})=>a.default.createElement(r.Close,{className:o.default("knock-iam-modal__close",e),...l},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},a.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},a.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),a.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));_.displayName="ModalView.Close";const E=({content:e,colorMode:l="light",onOpenChange:t,onInteract:n,onDismiss:d})=>a.default.createElement(c,{onOpenChange:t,onClick:n},a.default.createElement(i,null),a.default.createElement(s,{"data-knock-color-mode":l},a.default.createElement(w,null,a.default.createElement(u,{title:e.title}),e.dismissible&&a.default.createElement(_,{onClick:d})),a.default.createElement(m,{body:e.body}),a.default.createElement(f,null,e.secondary_button&&a.default.createElement(y,{text:e.secondary_button.text,action:e.secondary_button.action}),e.primary_button&&a.default.createElement(p,{text:e.primary_button.text,action:e.primary_button.action}))));E.displayName="ModalView.Default";const N=({filters:e})=>{const{colorMode:l}=k.useInAppMessagesChannel(),{message:t,inAppMessagesClient:n}=k.useInAppMessage(S,e);if(M.useEffect(()=>{!t||t.seen_at!==null||n.markAsSeen(t)},[t,n]),!t||t.archived_at)return null;const d=v=>{v||n.markAsArchived(t)},h=()=>{n.markAsArchived(t)},A=()=>{n.markAsInteracted(t)};return a.default.createElement(E,{content:t.content,colorMode:l,onOpenChange:d,onDismiss:h,onInteract:A})};N.displayName="Modal";const b={};Object.assign(b,{Default:E,Root:c,Overlay:i,Content:s,Title:u,Body:m,Actions:f,PrimaryAction:p,SecondaryAction:y,Close:_});exports.Modal=N;exports.ModalView=b;
|
2
|
+
//# sourceMappingURL=Modal.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../../../../src/modules/in-app-messages/components/Modal/Modal.tsx"],"sourcesContent":["import {\n ColorMode,\n UseInAppMessageOptions,\n useInAppMessage,\n useInAppMessagesChannel,\n} from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport clsx from \"clsx\";\nimport React, { useEffect } from \"react\";\n\nimport { ActionContent } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\nexport interface ModalProps {\n filters?: UseInAppMessageOptions;\n}\n\nexport interface ModalContent {\n title: string;\n body: string;\n primary_button?: {\n text: string;\n action: string;\n };\n secondary_button?: {\n text: string;\n action: string;\n };\n dismissible?: boolean;\n}\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n return (\n <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n <Dialog.Portal>{children}</Dialog.Portal>\n </Dialog.Root>\n );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\n// TODO: Causes layout shift...\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n ({ className, ...props }, forwardedRef) => {\n return (\n <Dialog.Overlay\n className={clsx(\"knock-iam-modal__overlay\", className)}\n ref={forwardedRef}\n {...props}\n />\n );\n },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n ({ children, className, ...props }, forwardedRef) => {\n return (\n <Dialog.Content\n className={clsx(\"knock-iam-modal\", className)}\n ref={forwardedRef}\n {...props}\n >\n {children}\n </Dialog.Content>\n );\n },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-modal__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n React.ComponentPropsWithRef<\"div\"> & {\n title: string;\n };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n return (\n <Dialog.Title\n className={clsx(\"knock-iam-modal__title\", className)}\n {...props}\n >\n {title}\n </Dialog.Title>\n );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <Dialog.Description\n className={clsx(\"knock-iam-modal__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-iam-modal__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryAction: React.FC<\n ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n return (\n <a\n href={action}\n className={clsx(\"knock-iam-modal__action\", className)}\n {...props}\n >\n {text}\n </a>\n );\n};\nPrimaryAction.displayName = \"ModalView.PrimaryAction\";\n\nconst SecondaryAction: React.FC<\n ActionContent & React.ComponentPropsWithRef<\"a\">\n> = ({ text, action, className, ...props }) => {\n return (\n <a\n href={action}\n className={clsx(\n \"knock-iam-modal__action knock-iam-modal__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </a>\n );\n};\nSecondaryAction.displayName = \"ModalView.SecondaryAction\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n return (\n <Dialog.Close\n className={clsx(\"knock-iam-modal__close\", className)}\n {...props}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </Dialog.Close>\n );\n};\nClose.displayName = \"ModalView.Close\";\n\nconst DefaultView: React.FC<{\n content: ModalContent;\n colorMode?: ColorMode;\n onOpenChange?: (open: boolean) => void;\n onInteract?: () => void;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({\n content,\n colorMode = \"light\",\n onOpenChange,\n onInteract,\n onDismiss,\n}) => {\n return (\n <Root onOpenChange={onOpenChange} onClick={onInteract}>\n <Overlay />\n {/* Must pass color mode to content for css variables to be set properly */}\n <Content data-knock-color-mode={colorMode}>\n <Header>\n <Title title={content.title} />\n {content.dismissible && <Close onClick={onDismiss} />}\n </Header>\n\n <Body body={content.body} />\n\n <Actions>\n {content.secondary_button && (\n <SecondaryAction\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n />\n )}\n {content.primary_button && (\n <PrimaryAction\n text={content.primary_button.text}\n action={content.primary_button.action}\n />\n )}\n </Actions>\n </Content>\n </Root>\n );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\nconst Modal: React.FC<ModalProps> = ({ filters }) => {\n const { colorMode } = useInAppMessagesChannel();\n const { message, inAppMessagesClient } = useInAppMessage<ModalContent>(\n MESSAGE_TYPE,\n filters,\n );\n\n // Mark the message as seen on render\n useEffect(() => {\n if (!message || message.seen_at !== null) return;\n\n inAppMessagesClient.markAsSeen(message);\n }, [message, inAppMessagesClient]);\n\n // Exclude archived messages\n if (!message || message.archived_at) return null;\n\n const onOpenChange = (open: boolean) => {\n if (!open) {\n inAppMessagesClient.markAsArchived(message);\n }\n };\n\n const onDismiss = () => {\n inAppMessagesClient.markAsArchived(message);\n };\n\n const onInteract = () => {\n inAppMessagesClient.markAsInteracted(message);\n };\n\n return (\n <DefaultView\n content={message.content}\n colorMode={colorMode}\n onOpenChange={onOpenChange}\n onDismiss={onDismiss}\n onInteract={onInteract}\n />\n );\n};\nModal.displayName = \"Modal\";\n\nconst ModalView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Overlay: typeof Overlay;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryAction: typeof PrimaryAction;\n SecondaryAction: typeof SecondaryAction;\n Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n Default: DefaultView,\n Root,\n Overlay,\n Content,\n Title,\n Body,\n Actions,\n PrimaryAction,\n SecondaryAction,\n Close,\n});\n\nexport { Modal, ModalView };\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","clsx","Content","Header","Title","title","Body","body","__html","Actions","PrimaryAction","text","action","SecondaryAction","Close","DefaultView","content","colorMode","onInteract","onDismiss","dismissible","secondary_button","primary_button","Modal","filters","useInAppMessagesChannel","message","inAppMessagesClient","useInAppMessage","useEffect","seen_at","markAsSeen","archived_at","open","markAsArchived","markAsInteracted","ModalView","Object","assign","Default"],"mappings":"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"}
|
@@ -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 _=require("react"),u=require("@knocklabs/react-core");;/* empty css */const d=require("../SlackIcon/SlackIcon.js");;/* empty css */const S=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=S(_),w=t=>{const h=window.screenLeft??window.screenX,n=window.screenTop??window.screenY,a=window.innerWidth??document.documentElement.clientWidth??screen.width,o=window.innerHeight??document.documentElement.clientHeight??screen.height,c=a/2-600/2+h,l=`width=600,height=800,top=${o/2-800/2+n},left=${c}`;window.open(t,"Slack OAuth",l)},L=({slackClientId:t,redirectUrl:k,onAuthenticationComplete:s,additionalScopes:h})=>{const{t:n}=u.useTranslations(),a=u.useKnockClient(),{setConnectionStatus:o,connectionStatus:c,setActionLabel:r,actionLabel:l,errorLabel:g}=u.useKnockSlackClient(),{buildSlackAuthUrl:f,disconnectFromSlack:p}=u.useSlackAuth(t,k,h);_.useEffect(()=>{const m=i=>{if(i.origin===a.host)try{i.data==="authComplete"&&o("connected"),i.data==="authFailed"&&o("error"),s&&s(i.data)}catch{o("error")}};return window.addEventListener("message",m,!1),()=>{window.removeEventListener("message",m)}},[a.host,s,o]);const b=n("slackDisconnect")||null,E=n("slackReconnect")||null;return c==="connecting"||c==="disconnecting"?e.default.createElement("div",{className:"rsk-connect__button rsk-connect__button--loading"},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n(c==="connecting"?"slackConnecting":"slackDisconnecting"))):c==="error"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--error",onMouseEnter:()=>r(E),onMouseLeave:()=>r(null)},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--error"},l||g||n("slackError"))):c==="disconnected"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--disconnected"},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n("slackConnect"))):e.default.createElement("button",{onClick:p,className:"rsk-connect__button rsk-connect__button--connected",onMouseEnter:()=>r(b),onMouseLeave:()=>r(null)},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--connected"},l||n("slackConnected")))};exports.SlackAuthButton=L;
|
2
2
|
//# sourceMappingURL=SlackAuthButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackAuthButton.js","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n slackClientId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n additionalScopes?: string[];\n}\n\nconst openSlackOauthPopup = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n additionalScopes,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockSlackClient();\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n additionalScopes,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n if (onAuthenticationComplete) {\n onAuthenticationComplete(event.data);\n }\n } catch (
|
1
|
+
{"version":3,"file":"SlackAuthButton.js","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n slackClientId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n additionalScopes?: string[];\n}\n\nconst openSlackOauthPopup = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n additionalScopes,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockSlackClient();\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n additionalScopes,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n if (onAuthenticationComplete) {\n onAuthenticationComplete(event.data);\n }\n } catch (error) {\n setConnectionStatus(\"error\");\n }\n };\n\n window.addEventListener(\"message\", receiveMessage, false);\n\n // Cleanup the event listener when the component unmounts\n return () => {\n window.removeEventListener(\"message\", receiveMessage);\n };\n }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n const disconnectLabel = t(\"slackDisconnect\") || null;\n const reconnectLabel = t(\"slackReconnect\") || null;\n\n // Loading states\n if (\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\"\n ) {\n return (\n <div className=\"rsk-connect__button rsk-connect__button--loading\">\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>\n {connectionStatus === \"connecting\"\n ? t(\"slackConnecting\")\n : t(\"slackDisconnecting\")}\n </span>\n </div>\n );\n }\n\n // Error state\n if (connectionStatus === \"error\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--error\"\n onMouseEnter={() => setActionLabel(reconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--error\">\n {actionLabel || errorLabel || t(\"slackError\")}\n </span>\n </button>\n );\n }\n\n // Disconnected state\n if (connectionStatus === \"disconnected\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--disconnected\"\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>{t(\"slackConnect\")}</span>\n </button>\n );\n }\n\n // Connected state\n return (\n <button\n onClick={disconnectFromSlack}\n className=\"rsk-connect__button rsk-connect__button--connected\"\n onMouseEnter={() => setActionLabel(disconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--connected\">\n {actionLabel || t(\"slackConnected\")}\n </span>\n </button>\n );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":"uTAqBMA,EAAuBC,GAAgB,CAIrCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAW,4BAHLJ,EAAc,EAAIE,IAAS,EAAIV,CAGgB,SAASW,CAAI,GAEjEE,OAAAA,KAAKjB,EAAK,cAAegB,CAAQ,CAC1C,EAEaE,EAA2DA,CAAC,CACvEC,cAAAA,EACAC,YAAAA,EACAC,yBAAAA,EACAC,iBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxBC,EAAQC,EAAAA,iBAER,CACJC,oBAAAA,EACAC,iBAAAA,EACAC,eAAAA,EACAC,YAAAA,EACAC,WAAAA,GACEC,EAAoB,oBAAA,EAElB,CAAEC,kBAAAA,EAAmBC,oBAAAA,CAAwBC,EAAAA,eACjDhB,EACAC,EACAE,CACF,EAEAc,EAAAA,UAAU,IAAM,CACRC,MAAAA,EAAkBC,GAAwB,CAC1CA,GAAAA,EAAMC,SAAWd,EAAMe,KAIvB,GAAA,CACEF,EAAMG,OAAS,gBACjBd,EAAoB,WAAW,EAG7BW,EAAMG,OAAS,cACjBd,EAAoB,OAAO,EAGzBN,GACFA,EAAyBiB,EAAMG,IAAI,OAEvB,CACdd,EAAoB,OAAO,CAC7B,CAAA,EAGKe,cAAAA,iBAAiB,UAAWL,EAAgB,EAAK,EAGjD,IAAM,CACJM,OAAAA,oBAAoB,UAAWN,CAAc,CAAA,GAErD,CAACZ,EAAMe,KAAMnB,EAA0BM,CAAmB,CAAC,EAExDiB,MAAAA,EAAkBrB,EAAE,iBAAiB,GAAK,KAC1CsB,EAAiBtB,EAAE,gBAAgB,GAAK,KAI5CK,OAAAA,IAAqB,cACrBA,IAAqB,gBAGnBkB,EAAA,QAAA,cAAC,OAAI,UAAU,kDAAA,0BACZC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACpCD,EAAAA,QAAA,cAAA,OAAA,KAEKvB,EADHK,IAAqB,aAChB,kBACA,oBADiB,CAEzB,CACF,EAKAA,IAAqB,gCAEpB,SACC,CAAA,QAAS,IAAM7B,EAAoBkC,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAegB,CAAc,EACjD,aAAc,IAAMhB,EAAe,IAAI,CAAA,0BAEtCkB,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,oCACbhB,GAAeC,GAAcR,EAAE,YAAY,CAC9C,CACF,EAKAK,IAAqB,eAErBkB,EAAA,QAAA,cAAC,UACC,QAAS,IAAM/C,EAAoBkC,EAAkB,CAAC,EACtD,UAAU,uDAEV,EAAAa,EAAA,QAAA,cAACC,aAAU,OAAO,OAAO,MAAM,MAAM,CAAA,0BACpC,OAAMxB,KAAAA,EAAE,cAAc,CAAE,CAC3B,EAMDuB,EAAAA,QAAA,cAAA,SAAA,CACC,QAASZ,EACT,UAAU,qDACV,aAAc,IAAML,EAAee,CAAe,EAClD,aAAc,IAAMf,EAAe,IAAI,CAEvC,EAAAiB,EAAA,QAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,sCACbhB,EAAAA,GAAeP,EAAE,gBAAgB,CACpC,CACF,CAEJ"}
|
package/dist/esm/index.mjs
CHANGED
@@ -1,49 +1,58 @@
|
|
1
1
|
/* empty css */
|
2
2
|
import { Button as t } from "./modules/core/components/Button/Button.mjs";
|
3
3
|
import { ButtonGroup as m } from "./modules/core/components/Button/ButtonGroup.mjs";
|
4
|
-
import { BellIcon as
|
5
|
-
import { CheckmarkCircle as
|
6
|
-
import { ChevronDown as
|
7
|
-
import { CloseCircle as
|
8
|
-
import { Spinner as
|
9
|
-
import { default as
|
4
|
+
import { BellIcon as a } from "./modules/core/components/Icons/Bell.mjs";
|
5
|
+
import { CheckmarkCircle as n } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
|
6
|
+
import { ChevronDown as l } from "./modules/core/components/Icons/ChevronDown.mjs";
|
7
|
+
import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.mjs";
|
8
|
+
import { Spinner as u } from "./modules/core/components/Spinner/Spinner.mjs";
|
9
|
+
import { default as s } from "./modules/core/hooks/useOnBottomScroll.mjs";
|
10
10
|
import { default as N } from "./modules/core/hooks/useOutsideClick.mjs";
|
11
11
|
import { EmptyFeed as F } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
|
12
|
-
import { NotificationCell as
|
13
|
-
import { Avatar as
|
14
|
-
import { NotificationFeed as
|
15
|
-
import { NotificationFeedHeader as
|
16
|
-
import { MarkAsRead as
|
17
|
-
import { NotificationFeedContainer as
|
18
|
-
import { NotificationFeedPopover as
|
19
|
-
import { NotificationIconButton as
|
20
|
-
import { UnseenBadge as
|
21
|
-
import {
|
22
|
-
import {
|
23
|
-
import {
|
12
|
+
import { NotificationCell as w } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
|
13
|
+
import { Avatar as v } from "./modules/feed/components/NotificationCell/Avatar.mjs";
|
14
|
+
import { NotificationFeed as V } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
|
15
|
+
import { NotificationFeedHeader as I } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
|
16
|
+
import { MarkAsRead as g } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
|
17
|
+
import { NotificationFeedContainer as D } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
|
18
|
+
import { NotificationFeedPopover as G } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
|
19
|
+
import { NotificationIconButton as P } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
|
20
|
+
import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
|
21
|
+
import { Banner as q, BannerView as z } from "./modules/in-app-messages/components/Banner/Banner.mjs";
|
22
|
+
import { Card as K, CardView as L } from "./modules/in-app-messages/components/Card/Card.mjs";
|
23
|
+
import { Modal as T, ModalView as W } from "./modules/in-app-messages/components/Modal/Modal.mjs";
|
24
|
+
import { SlackAuthButton as Y } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
|
25
|
+
import { SlackAuthContainer as _ } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
|
26
|
+
import { SlackChannelCombobox as oo } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
|
24
27
|
export * from "@knocklabs/react-core";
|
25
28
|
export {
|
26
|
-
|
27
|
-
|
29
|
+
v as Avatar,
|
30
|
+
q as Banner,
|
31
|
+
z as BannerView,
|
32
|
+
a as BellIcon,
|
28
33
|
t as Button,
|
29
34
|
m as ButtonGroup,
|
30
|
-
|
31
|
-
|
32
|
-
|
35
|
+
K as Card,
|
36
|
+
L as CardView,
|
37
|
+
n as CheckmarkCircle,
|
38
|
+
l as ChevronDown,
|
39
|
+
d as CloseCircle,
|
33
40
|
F as EmptyFeed,
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
41
|
+
g as MarkAsRead,
|
42
|
+
T as Modal,
|
43
|
+
W as ModalView,
|
44
|
+
w as NotificationCell,
|
45
|
+
V as NotificationFeed,
|
46
|
+
D as NotificationFeedContainer,
|
47
|
+
I as NotificationFeedHeader,
|
48
|
+
G as NotificationFeedPopover,
|
49
|
+
P as NotificationIconButton,
|
50
|
+
Y as SlackAuthButton,
|
51
|
+
_ as SlackAuthContainer,
|
52
|
+
oo as SlackChannelCombobox,
|
53
|
+
u as Spinner,
|
54
|
+
U as UnseenBadge,
|
55
|
+
s as useOnBottomScroll,
|
47
56
|
N as useOutsideClick
|
48
57
|
};
|
49
58
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|