@knocklabs/react 0.2.10 → 0.2.11
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 +9 -0
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/modules/core/components/Button/Button.js +1 -1
- package/dist/cjs/modules/core/components/Button/Button.js.map +1 -1
- package/dist/cjs/modules/core/components/Button/ButtonGroup.js.map +1 -1
- package/dist/cjs/modules/core/components/Button/ButtonSpinner.js.map +1 -1
- package/dist/cjs/modules/core/components/Icons/Bell.js +1 -1
- package/dist/cjs/modules/core/components/Icons/Bell.js.map +1 -1
- package/dist/cjs/modules/core/components/Icons/CheckmarkCircle.js +1 -1
- package/dist/cjs/modules/core/components/Icons/CheckmarkCircle.js.map +1 -1
- package/dist/cjs/modules/core/components/Icons/ChevronDown.js +1 -1
- package/dist/cjs/modules/core/components/Icons/ChevronDown.js.map +1 -1
- package/dist/cjs/modules/core/components/Icons/CloseCircle.js +1 -1
- package/dist/cjs/modules/core/components/Icons/CloseCircle.js.map +1 -1
- package/dist/cjs/modules/core/components/Spinner/Spinner.js.map +1 -1
- package/dist/cjs/modules/feed/components/EmptyFeed/EmptyFeed.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthContainer/SlackAuthContainer.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelOption.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectionError.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.js +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.js +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/HashtagIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/InfoIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/LockIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/SearchIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackIcon/SlackIcon.js.map +1 -1
- package/dist/esm/modules/core/components/Button/Button.mjs +1 -1
- package/dist/esm/modules/core/components/Button/Button.mjs.map +1 -1
- package/dist/esm/modules/core/components/Button/ButtonGroup.mjs.map +1 -1
- package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs.map +1 -1
- package/dist/esm/modules/core/components/Icons/Bell.mjs +2 -4
- package/dist/esm/modules/core/components/Icons/Bell.mjs.map +1 -1
- package/dist/esm/modules/core/components/Icons/CheckmarkCircle.mjs +5 -2
- package/dist/esm/modules/core/components/Icons/CheckmarkCircle.mjs.map +1 -1
- package/dist/esm/modules/core/components/Icons/ChevronDown.mjs +5 -2
- package/dist/esm/modules/core/components/Icons/ChevronDown.mjs.map +1 -1
- package/dist/esm/modules/core/components/Icons/CloseCircle.mjs +5 -2
- package/dist/esm/modules/core/components/Icons/CloseCircle.mjs.map +1 -1
- package/dist/esm/modules/core/components/Spinner/Spinner.mjs.map +1 -1
- package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelOption.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectionError.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.mjs +4 -5
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.mjs +5 -2
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/HashtagIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/InfoIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/LockIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/SearchIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackIcon/SlackIcon.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/types/App.d.ts +2 -1
- package/dist/types/App.d.ts.map +1 -1
- package/dist/types/modules/core/components/Button/Button.d.ts +2 -1
- package/dist/types/modules/core/components/Button/Button.d.ts.map +1 -1
- package/dist/types/modules/core/components/Button/ButtonGroup.d.ts +2 -2
- package/dist/types/modules/core/components/Button/ButtonGroup.d.ts.map +1 -1
- package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts +2 -2
- package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts.map +1 -1
- package/dist/types/modules/core/components/Icons/Bell.d.ts +6 -4
- package/dist/types/modules/core/components/Icons/Bell.d.ts.map +1 -1
- package/dist/types/modules/core/components/Icons/CheckmarkCircle.d.ts +6 -1
- package/dist/types/modules/core/components/Icons/CheckmarkCircle.d.ts.map +1 -1
- package/dist/types/modules/core/components/Icons/ChevronDown.d.ts +6 -1
- package/dist/types/modules/core/components/Icons/ChevronDown.d.ts.map +1 -1
- package/dist/types/modules/core/components/Icons/CloseCircle.d.ts +6 -1
- package/dist/types/modules/core/components/Icons/CloseCircle.d.ts.map +1 -1
- package/dist/types/modules/core/components/Spinner/Spinner.d.ts +2 -2
- package/dist/types/modules/core/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts +2 -2
- package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.d.ts +4 -2
- package/dist/types/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackAuthButton/SlackAuthButton.d.ts +4 -5
- package/dist/types/modules/slack/components/SlackAuthButton/SlackAuthButton.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackAuthContainer/SlackAuthContainer.d.ts +5 -2
- package/dist/types/modules/slack/components/SlackAuthContainer/SlackAuthContainer.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.d.ts +5 -6
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.d.ts +4 -4
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelOption.d.ts +4 -4
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelOption.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.d.ts +4 -3
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.d.ts +4 -3
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectionError.d.ts +2 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackConnectionError.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.d.ts +5 -3
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.d.ts +6 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/HashtagIcon.d.ts +2 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/HashtagIcon.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/InfoIcon.d.ts +2 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/InfoIcon.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/LockIcon.d.ts +2 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/LockIcon.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/SearchIcon.d.ts +2 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/icons/SearchIcon.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackIcon/SlackIcon.d.ts +4 -2
- package/dist/types/modules/slack/components/SlackIcon/SlackIcon.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/cjs/modules/core/components/Button/styles.css.js +0 -2
- package/dist/cjs/modules/core/components/Button/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/EmptyFeed/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/EmptyFeed/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/NotificationCell/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationCell/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationFeed/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/NotificationFeedContainer/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationFeedContainer/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/NotificationIconButton/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationIconButton/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/UnseenBadge/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/UnseenBadge/styles.css.js.map +0 -1
- package/dist/cjs/modules/slack/components/SlackAddChannelInput/styles.css.js +0 -2
- package/dist/cjs/modules/slack/components/SlackAddChannelInput/styles.css.js.map +0 -1
- package/dist/cjs/modules/slack/components/SlackAuthButton/styles.css.js +0 -2
- package/dist/cjs/modules/slack/components/SlackAuthButton/styles.css.js.map +0 -1
- package/dist/cjs/modules/slack/components/SlackAuthContainer/styles.css.js +0 -2
- package/dist/cjs/modules/slack/components/SlackAuthContainer/styles.css.js.map +0 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/styles.css.js +0 -2
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/styles.css.js.map +0 -1
- package/dist/cjs/modules/slack/theme.css.js +0 -2
- package/dist/cjs/modules/slack/theme.css.js.map +0 -1
- package/dist/cjs/theme.css.js.map +0 -1
package/CHANGELOG.md
CHANGED
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-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}.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-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--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-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)}: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)}: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)}.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)}
|
1
|
+
:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.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}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}.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)}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),d=require("
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@knocklabs/react-core"),d=require("react"),i=require("./ButtonSpinner.js");const m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=m(d),p=({variant:t="primary",loadingText:o,isLoading:e=!1,isDisabled:u=!1,isFullWidth:a=!1,onClick:l,children:r})=>{const{colorMode:s}=b.useKnockFeed(),c=["rnf-button",`rnf-button--${t}`,a?"rnf-button--full-width":"",e?"rnf-button--is-loading":"",`rnf-button--${s}`].join(" "),f=o||n.default.createElement("span",{className:"rnf-button__button-text-hidden"},r);return n.default.createElement("button",{onClick:l,className:c,disabled:e||u,type:"button"},e&&n.default.createElement(i.ButtonSpinner,{hasLabel:!!o}),e?f:r)};exports.Button=p;
|
2
2
|
//# sourceMappingURL=Button.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport {
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { ButtonSpinner } from \"./ButtonSpinner\";\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n variant: \"primary\" | \"secondary\";\n loadingText?: string;\n isLoading?: boolean;\n isDisabled?: boolean;\n isFullWidth?: boolean;\n onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: FunctionComponent<PropsWithChildren<ButtonProps>> = ({\n variant = \"primary\",\n loadingText,\n isLoading = false,\n isDisabled = false,\n isFullWidth = false,\n onClick,\n children,\n}) => {\n const { colorMode } = useKnockFeed();\n\n const classNames = [\n \"rnf-button\",\n `rnf-button--${variant}`,\n isFullWidth ? \"rnf-button--full-width\" : \"\",\n isLoading ? \"rnf-button--is-loading\" : \"\",\n `rnf-button--${colorMode}`,\n ].join(\" \");\n\n // In this case when there's no loading text, we still want to display the original\n // content of the button, but make it hidden. That allows us to keep the button width\n // consistent and show the spinner in the middle, meaning no layout shift.\n const textToShowWhileLoading = loadingText || (\n <span className=\"rnf-button__button-text-hidden\">{children}</span>\n );\n\n return (\n <button\n onClick={onClick}\n className={classNames}\n disabled={isLoading || isDisabled}\n type=\"button\"\n >\n {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n {isLoading ? textToShowWhileLoading : children}\n </button>\n );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","join","textToShowWhileLoading","React","ButtonSpinner"],"mappings":"4QAgBaA,EAA4DA,CAAC,CACxEC,QAAAA,EAAU,UACVC,YAAAA,EACAC,UAAAA,EAAY,GACZC,WAAAA,EAAa,GACbC,YAAAA,EAAc,GACdC,QAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAE7BC,EAAa,CACjB,aACC,eAAcT,CAAQ,GACvBI,EAAc,yBAA2B,GACzCF,EAAY,yBAA2B,GACtC,eAAcK,CAAU,EAAC,EAC1BG,KAAK,GAAG,EAKJC,EAAyBV,GAC7BW,EAAAA,QAAA,cAAC,OAAK,CAAA,UAAU,kCAAkCN,CAAS,EAI3D,OAAAM,UAAA,cAAC,UACC,QAAAP,EACA,UAAWI,EACX,SAAUP,GAAaC,EACvB,KAAK,QAAA,EAEJD,GAAcU,UAAA,cAAAC,EAAA,cAAA,CAAc,SAAU,CAAC,CAACZ,EAAe,EACvDC,EAAYS,EAAyBL,CACxC,CAEJ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ButtonGroup.js","sources":["../../../../../../src/modules/core/components/Button/ButtonGroup.tsx"],"sourcesContent":["import
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sources":["../../../../../../src/modules/core/components/Button/ButtonGroup.tsx"],"sourcesContent":["import { FunctionComponent, PropsWithChildren } from \"react\";\n\nimport \"./styles.css\";\n\nexport const ButtonGroup: FunctionComponent<PropsWithChildren> = ({\n children,\n}) => <div className=\"rnf-button-group\">{children}</div>;\n"],"names":["ButtonGroup","children","React"],"mappings":"yMAIaA,EAAoDA,CAAC,CAChEC,SAAAA,CACF,IAAOC,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,kBAAA,EAAoBD,CAAS"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ButtonSpinner.js","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"sourcesContent":["import
|
1
|
+
{"version":3,"file":"ButtonSpinner.js","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../Spinner\";\n\nimport \"./styles.css\";\n\ntype ButtonSpinnerProps = {\n hasLabel: boolean;\n};\n\nexport const ButtonSpinner: FunctionComponent<ButtonSpinnerProps> = ({\n hasLabel,\n}) => (\n <div\n className={`rnf-button-spinner rnf-button-spinner--${\n hasLabel ? \"with-label\" : \"without-label\"\n }`}\n >\n <Spinner />\n </div>\n);\n"],"names":["ButtonSpinner","hasLabel","React","Spinner"],"mappings":"4OAUaA,EAAuDA,CAAC,CACnEC,SAAAA,CACF,IACEC,EAAAA,QAAA,cAAC,MACC,CAAA,UAAY,0CACVD,EAAW,aAAe,eAC3B,EAAA,EAEAC,EAAA,QAAA,cAAAC,EAAA,QAAA,IAAO,CACV"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(r)
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(r),l=({width:e=24,height:o=24})=>t.default.createElement("svg",{width:e,viewBox:"0 0 24 24",fill:"none",height:o},t.default.createElement("path",{d:"M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.default.createElement("path",{d:"M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}));exports.BellIcon=l;
|
2
2
|
//# sourceMappingURL=Bell.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Bell.js","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"sourcesContent":["
|
1
|
+
{"version":3,"file":"Bell.js","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype BellIconProps = {\n width?: number;\n height?: number;\n};\n\nconst BellIcon: FunctionComponent<BellIconProps> = ({\n width = 24,\n height = 24,\n}) => {\n return (\n <svg width={width} viewBox=\"0 0 24 24\" fill=\"none\" height={height}>\n <path\n d=\"M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\n\nexport { BellIcon };\n"],"names":["BellIcon","width","height","React"],"mappings":"wKAOMA,EAA6CA,CAAC,CAClDC,MAAAA,EAAQ,GACRC,OAAAA,EAAS,EACX,IAEKC,EAAA,QAAA,cAAA,MAAA,CAAI,MAAAF,EAAc,QAAQ,YAAY,KAAK,OAAO,OAAAC,CACjD,EAAAC,EAAA,QAAA,cAAC,OACC,CAAA,EAAE,qfACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAO,CAAA,EAExBA,EAAAA,QAAA,cAAC,QACC,EAAE,mOACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAO,CAAA,CAE1B"}
|
@@ -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 o=require("react"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(o),n=({width:e=16,height:r=16})=>t.default.createElement("svg",{width:e,height:r,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.default.createElement("path",{d:"M14 8.00012C14 4.68762 11.3125 2.00012 7.99997 2.00012C4.68747 2.00012 1.99997 4.68762 1.99997 8.00012C1.99997 11.3126 4.68747 14.0001 7.99997 14.0001C11.3125 14.0001 14 11.3126 14 8.00012Z",stroke:"currentColor",strokeWidth:"1.5",strokeMiterlimit:"10"}),t.default.createElement("path",{d:"M10.9999 5.5004L6.79994 10.5004L4.99994 8.5004",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}));exports.CheckmarkCircle=n;
|
2
2
|
//# sourceMappingURL=CheckmarkCircle.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CheckmarkCircle.js","sources":["../../../../../../src/modules/core/components/Icons/CheckmarkCircle.tsx"],"sourcesContent":["
|
1
|
+
{"version":3,"file":"CheckmarkCircle.js","sources":["../../../../../../src/modules/core/components/Icons/CheckmarkCircle.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype CheckmarkCircleProps = {\n width?: number;\n height?: number;\n};\n\nconst CheckmarkCircle: FunctionComponent<CheckmarkCircleProps> = ({\n width = 16,\n height = 16,\n}) => (\n <svg\n width={width}\n height={height}\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 8.00012C14 4.68762 11.3125 2.00012 7.99997 2.00012C4.68747 2.00012 1.99997 4.68762 1.99997 8.00012C1.99997 11.3126 4.68747 14.0001 7.99997 14.0001C11.3125 14.0001 14 11.3126 14 8.00012Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeMiterlimit=\"10\"\n />\n <path\n d=\"M10.9999 5.5004L6.79994 10.5004L4.99994 8.5004\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport { CheckmarkCircle };\n"],"names":["CheckmarkCircle","width","height","React"],"mappings":"wKAOMA,EAA2DA,CAAC,CAChEC,MAAAA,EAAQ,GACRC,OAAAA,EAAS,EACX,IACGC,EAAA,QAAA,cAAA,MAAA,CACC,MAAAF,EACA,OAAAC,EACA,QAAQ,YACR,KAAK,OACL,MAAM,4BAEN,EAAAC,UAAA,cAAC,OACC,CAAA,EAAE,gMACF,OAAO,eACP,YAAY,MACZ,iBAAiB,IAAA,CAAI,EAEvBA,UAAA,cAAC,QACC,EAAE,iDACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QAAO,CAE1B"}
|
@@ -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 n=require("react"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=({width:e=8,height:o=6})=>t.default.createElement("svg",{width:e,height:o,viewBox:"0 0 8 6",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.default.createElement("path",{d:"M1.74994 1.87512L3.99994 4.12512L6.24994 1.87512",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}));exports.ChevronDown=a;
|
2
2
|
//# sourceMappingURL=ChevronDown.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ChevronDown.js","sources":["../../../../../../src/modules/core/components/Icons/ChevronDown.tsx"],"sourcesContent":["
|
1
|
+
{"version":3,"file":"ChevronDown.js","sources":["../../../../../../src/modules/core/components/Icons/ChevronDown.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype ChevronDownProps = {\n width?: number;\n height?: number;\n};\n\nconst ChevronDown: FunctionComponent<ChevronDownProps> = ({\n width = 8,\n height = 6,\n}) => (\n <svg\n width={width}\n height={height}\n viewBox=\"0 0 8 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.74994 1.87512L3.99994 4.12512L6.24994 1.87512\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport { ChevronDown };\n"],"names":["ChevronDown","width","height","React"],"mappings":"wKAOMA,EAAmDA,CAAC,CACxDC,MAAAA,EAAQ,EACRC,OAAAA,EAAS,CACX,IACEC,EAAA,QAAA,cAAC,OACC,MAAAF,EACA,OAAAC,EACA,QAAQ,UACR,KAAK,OACL,MAAM,4BAEN,EAAAC,EAAAA,QAAA,cAAC,QACC,EAAE,mDACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAAA,CAAO,CAE1B"}
|
@@ -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 l=require("react"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(l),r=({width:e=14,height:C=14})=>t.default.createElement("svg",{width:e,height:C,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.default.createElement("path",{d:"M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z",fill:"currentColor"}));exports.CloseCircle=r;
|
2
2
|
//# sourceMappingURL=CloseCircle.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CloseCircle.js","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"sourcesContent":["
|
1
|
+
{"version":3,"file":"CloseCircle.js","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype CloseCircleProps = {\n width?: number;\n height?: number;\n};\n\nconst CloseCircle: FunctionComponent<CloseCircleProps> = ({\n width = 14,\n height = 14,\n}) => (\n <svg\n width={width}\n height={height}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport { CloseCircle };\n"],"names":["CloseCircle","width","height"],"mappings":"wKAOMA,EAAmDA,CAAC,CACxDC,MAAAA,EAAQ,GACRC,OAAAA,EAAS,EACX,4BACG,MACC,CAAA,MAAAD,EACA,OAAAC,EACA,QAAQ,YACR,KAAK,OACL,MAAM,4BAAA,0BAEL,OACC,CAAA,EAAE,4xCACF,KAAK,eAAc,CAEvB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n if (speed === \"fast\") return 600;\n if (speed === \"slow\") return 900;\n return 750;\n}\n\nexport interface SpinnerProps {\n color?: string;\n speed?: Speed;\n gap?: number;\n thickness?: number;\n size?: string;\n}\n\nexport const Spinner: FunctionComponent<SpinnerProps> = ({\n color = \"rgba(0,0,0,0.4)\",\n speed = \"medium\",\n gap = 4,\n thickness = 4,\n size = \"1em\",\n ...props\n}) => (\n <svg\n height={size}\n width={size}\n {...props}\n style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n className=\"__react-svg-spinner_circle\"\n role=\"img\"\n aria-labelledby=\"title desc\"\n viewBox=\"0 0 32 32\"\n >\n <title id=\"title\">Circle loading spinner</title>\n <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n <style\n dangerouslySetInnerHTML={{\n __html: `\n .__react-svg-spinner_circle{\n transition-property: transform;\n animation-name: __react-svg-spinner_infinite-spin;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n @keyframes __react-svg-spinner_infinite-spin {\n from {transform: rotate(0deg)}\n to {transform: rotate(360deg)}\n }\n `,\n }}\n />\n <circle\n role=\"presentation\"\n cx={16}\n cy={16}\n r={14 - thickness / 2}\n stroke={color}\n fill=\"none\"\n strokeWidth={thickness}\n strokeDasharray={Math.PI * 2 * (11 - gap)}\n strokeLinecap=\"round\"\n />\n </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","React","animationDuration","__html","Math","PI"],"mappings":"wKAIA,SAASA,EAAYC,EAAc,CACjC,OAAIA,IAAU,OAAe,IACzBA,IAAU,OAAe,IACtB,GACT,CAUO,MAAMC,EAA2CA,CAAC,CACvDC,MAAAA,EAAQ,kBACRF,MAAAA,EAAQ,SACRG,IAAAA,EAAM,EACNC,UAAAA,EAAY,EACZC,KAAAA,EAAO,MACP,GAAGC,CACL,IACEC,UAAA,cAAC,OACC,OAAQF,EACR,MAAOA,EACP,GAAIC,EACJ,MAAO,CAAEE,kBAAoB,GAAET,EAAYC,CAAK,CAAE,IAAI,EACtD,UAAU,6BACV,KAAK,MACL,kBAAgB,aAChB,QAAQ,WAER,EAAAO,EAAA,QAAA,cAAC,QAAM,CAAA,GAAG,SAAQ,wBAAsB,0BACvC,OAAK,CAAA,GAAG,QAAO,iDAA+C,EAC9DA,EAAA,QAAA,cAAA,QAAA,CACC,wBAAyB,CACvBE,OAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYX,CAAE,CAAA,EAEHF,EAAA,QAAA,cAAA,SAAA,CACC,KAAK,eACL,GAAI,GACJ,GAAI,GACJ,EAAG,GAAKH,EAAY,EACpB,OAAQF,EACR,KAAK,OACL,YAAaE,EACb,gBAAiBM,KAAKC,GAAK,GAAK,GAAKR,GACrC,cAAc,OAAA,CAAO,CAEzB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EmptyFeed.js","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import
|
1
|
+
{"version":3,"file":"EmptyFeed.js","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n const { colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n return (\n <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n <div className=\"rnf-empty-feed__inner\">\n <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n </div>\n </div>\n );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","React"],"mappings":"4OAKaA,EAA+BA,IAAM,CAC1C,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAC7B,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAG5B,OAAAC,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAY,kCAAiCJ,CAAU,EAC1D,EAAAI,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,uBACb,EAAAA,UAAA,cAAC,KAAG,CAAA,UAAU,0BAA0BF,EAAE,gBAAgB,CAAE,EAC3DE,UAAA,cAAA,IAAA,CAAE,UAAU,sBAAA,EAAwBF,EAAE,eAAe,CAAE,CAC1D,CACF,CAEJ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\
|
1
|
+
{"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAddChannelInputProps {\n inErrorState: boolean;\n connectedChannels: SlackChannelConnection[];\n updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n connectedChannelsError: string | null;\n connectedChannelsUpdating: boolean;\n}\n\nconst SlackAddChannelInput: FunctionComponent<SlackAddChannelInputProps> = ({\n inErrorState,\n connectedChannels = [],\n updateConnectedChannels,\n connectedChannelsError,\n connectedChannelsUpdating,\n}) => {\n const { t } = useTranslations();\n const [value, setValue] = useState<string | null>(null);\n const [localError, setLocalError] = useState<string | null>(null);\n\n const submitChannel = () => {\n if (!value) {\n return;\n }\n\n if (localError) {\n setLocalError(null);\n }\n\n const alreadyConnected = connectedChannels.find(\n (channel) => channel.channel_id === value,\n );\n\n if (alreadyConnected) {\n setValue(\"\");\n return setLocalError(t(\"slackChannelAlreadyConnected\") || \"\");\n }\n\n const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n updateConnectedChannels(channelsToSendToKnock);\n setValue(\"\");\n };\n\n return (\n <div className=\"rsk-connect-channel\">\n <input\n className={`rsk-connect-channel__input ${(inErrorState || !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n tabIndex={-1}\n id=\"slack-channel-search\"\n type=\"text\"\n placeholder={\n localError || connectedChannelsError || t(\"slackChannelId\")\n }\n onChange={(e) => setValue(e.target.value)}\n value={value || \"\"}\n />\n <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n {connectedChannelsUpdating ? (\n <Spinner size=\"15px\" thickness={3} />\n ) : (\n <SlackIcon height=\"16px\" width=\"16px\" />\n )}\n {t(\"slackConnectChannel\")}\n </button>\n <ConnectionErrorInfoBoxes />\n </div>\n );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","find","channel","channel_id","channelsToSendToKnock","React","e","target","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":"8bAoBMA,EAAqEA,CAAC,CAC1EC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxB,CAACC,EAAOC,CAAQ,EAAIC,WAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,WAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CAAA,EAGb,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAY,+BAA8BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAoC,GACzH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAK,CAAA,EAErCH,EAAAA,QAAA,cAACI,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAChC,CAAA,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}
|
@@ -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 { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\
|
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}\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}) => {\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 );\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","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":"uTAoBMA,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,EAAY,4BAHNJ,EAAc,EAAIE,IAAS,EAAIV,CAGiB,SAAQW,CAAK,GAElEE,OAAAA,KAAKjB,EAAK,cAAegB,CAAQ,CAC1C,EAEaE,EAA2DA,CAAC,CACvEC,cAAAA,EACAC,YAAAA,EACAC,yBAAAA,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,CAAAA,EAAwBC,EACjDf,aAAAA,EACAC,CACF,EAEAe,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,EAGzBL,GACFA,EAAyBgB,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,KAAMlB,EAA0BK,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,IAAM5B,EAAoBiC,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,IAAM9C,EAAoBiC,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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackAuthContainer.js","sources":["../../../../../../src/modules/slack/components/SlackAuthContainer/SlackAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport
|
1
|
+
{"version":3,"file":"SlackAuthContainer.js","sources":["../../../../../../src/modules/slack/components/SlackAuthContainer/SlackAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthContainerProps {\n actionButton: React.ReactElement;\n}\n\nexport const SlackAuthContainer: FunctionComponent<SlackAuthContainerProps> = ({\n actionButton,\n}) => {\n const { t } = useTranslations();\n\n return (\n <div className=\"rsk-auth\">\n <div className=\"rsk-auth__header\">\n <SlackIcon height=\"32px\" width=\"32px\" />\n <div>{actionButton}</div>\n </div>\n <div className=\"rsk-auth__title\">Slack</div>\n <div className=\"rsk-auth__description\">\n {t(\"slackConnectContainerDescription\")}\n </div>\n </div>\n );\n};\n"],"names":["SlackAuthContainer","actionButton","t","useTranslations","React","SlackIcon"],"mappings":"uTAYaA,EAAiEA,CAAC,CAC7EC,aAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAE9B,OACGC,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,oCACZ,MAAI,CAAA,UAAU,kBACb,EAAAA,UAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,EAAAA,QAAA,cAAC,MAAKH,KAAAA,CAAa,CACrB,EACCG,UAAA,cAAA,MAAA,CAAI,UAAU,iBAAkB,EAAA,OAAK,EACtCA,EAAA,QAAA,cAAC,OAAI,UAAU,uBAAA,EACZF,EAAE,kCAAkC,CACvC,CACF,CAEJ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackChannelCombobox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n ContainerObject,\n SlackChannelQueryOptions,\n useConnectedSlackChannels,\n useKnockSlackClient,\n useSlackChannels,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\ntype SlackChannelComboboxInputMessages = {\n disconnected: string;\n error: string;\n singleChannelConnected: string;\n multipleChannelsConnected: string;\n noChannelsConnected: string;\n noSlackChannelsFound: string;\n};\n\ntype Props = {\n slackChannelsRecipientObject: ContainerObject;\n queryOptions?: SlackChannelQueryOptions;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n inputMessages?: SlackChannelComboboxInputMessages;\n showConnectedChannelTags?: boolean;\n};\n\nexport const SlackChannelCombobox = ({\n slackChannelsRecipientObject,\n queryOptions,\n inputProps,\n inputContainerProps,\n listBoxProps,\n channelOptionProps,\n inputMessages,\n showConnectedChannelTags = false,\n}: Props) => {\n const { t } = useTranslations();\n\n const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState(\"\");\n\n // Used to close the combobox when clicking outside of it\n const comboboxRef = useRef(null);\n useOutsideClick({\n ref: comboboxRef,\n fn: () => {\n setInputValue(\"\");\n setComboboxListOpen(false);\n },\n });\n\n // Gather API data\n const { connectionStatus, errorLabel: connectionErrorLabel } =\n useKnockSlackClient();\n\n const { data: slackChannels, isLoading: slackChannelsLoading } =\n useSlackChannels({ queryOptions });\n\n const {\n data: connectedChannels,\n updateConnectedChannels,\n loading: connectedChannelsLoading,\n error: connectedChannelsError,\n updating: connectedChannelsUpdating,\n } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n SlackChannelConnection[] | null\n >(null);\n\n useEffect(() => {\n if (comboboxListOpen) {\n // Timeout to allow for the state to update and the component to re-render\n // when we change the `comboboxListOpen` state upon focus\n setTimeout(() => {\n document.getElementById(\"slack-channel-search\")?.focus();\n }, 0);\n }\n }, [comboboxListOpen]);\n\n useEffect(() => {\n // Used to make sure we're only showing currently available channels to select from.\n // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n // posting to it if the channel is private and the Slackbot doesn't belong to it,\n // so the channel won't show up here and it won't be posted to.\n const slackChannelsMap = new Map(\n slackChannels.map((channel) => [channel.id, channel]),\n );\n\n const channels =\n connectedChannels?.filter((connectedChannel) => {\n return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n }) || [];\n\n setCurrentConnectedChannels(channels);\n }, [connectedChannels, slackChannels]);\n\n const inErrorState = useMemo(\n () =>\n connectionStatus === \"disconnected\" ||\n connectionStatus === \"error\" ||\n connectedChannelsError,\n [connectedChannelsError, connectionStatus],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\" ||\n slackChannelsLoading,\n\n [connectionStatus, slackChannelsLoading],\n );\n\n // Construct placeholder text\n const searchPlaceholder = useMemo(() => {\n const DEFAULT_INPUT_MESSAGES = {\n disconnected: t(\"slackSearchbarDisconnected\"),\n multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n channelsError: t(\"slackSearchbarChannelsError\"),\n };\n\n // Connection status message\n if (connectionStatus === \"disconnected\") {\n return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n }\n\n if (connectionStatus === \"error\") {\n return inputMessages?.error || connectionErrorLabel;\n }\n\n // Channels status messages\n if (!inLoadingState && slackChannels.length === 0) {\n return (\n inputMessages?.noSlackChannelsFound ||\n DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n );\n }\n\n if (connectedChannelsError) {\n return connectedChannelsError;\n }\n\n const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n if (currentConnectedChannels && numberConnectedChannels === 0) {\n return (\n inputMessages?.noChannelsConnected ||\n DEFAULT_INPUT_MESSAGES.noChannelsConnected\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels === 1) {\n const connectedChannel = slackChannels?.find(\n (slackChannel) =>\n slackChannel.id === currentConnectedChannels[0]?.channel_id,\n );\n\n return (\n inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels > 1) {\n return (\n inputMessages?.multipleChannelsConnected ||\n `${numberConnectedChannels} channels connected`\n );\n }\n\n return \"\";\n }, [\n connectionStatus,\n inLoadingState,\n slackChannels,\n connectedChannelsError,\n currentConnectedChannels,\n inputMessages,\n connectionErrorLabel,\n t,\n ]);\n\n // Handle channel click\n const handleOptionClick = async (channelId: string) => {\n if (!currentConnectedChannels) {\n return;\n }\n\n const isChannelConnected = currentConnectedChannels.find(\n (channel) => channel.channel_id === channelId,\n );\n\n if (isChannelConnected) {\n const channelsToSendToKnock = currentConnectedChannels.filter(\n (connectedChannel) => connectedChannel.channel_id !== channelId,\n );\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n } else {\n const channelsToSendToKnock = [\n ...currentConnectedChannels,\n { channel_id: channelId } as SlackChannelConnection,\n ];\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n }\n };\n\n // Handle channel search\n const matchedChannels = slackChannels.filter((slackChannel) =>\n strContains(slackChannel.name, inputValue),\n );\n\n if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n return (\n <SlackAddChannelInput\n inErrorState={!!inErrorState}\n connectedChannels={currentConnectedChannels || []}\n updateConnectedChannels={updateConnectedChannels}\n connectedChannelsError={connectedChannelsError}\n connectedChannelsUpdating={connectedChannelsUpdating}\n />\n );\n }\n\n return (\n <div ref={comboboxRef} className=\"rsk-combobox\">\n <Popover.Root\n open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n >\n <VisuallyHidden.Root>\n <label htmlFor=\"slack-channel-search\">\n {t(\"slackSearchChannels\")}\n </label>\n </VisuallyHidden.Root>\n <Popover.Trigger asChild>\n <div className=\"rsk-combobox__searchbar\">\n <div\n className={\"rsk-combobox__searchbar__input-container\"}\n {...inputContainerProps}\n >\n <div\n className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n >\n {inLoadingState ? (\n <Spinner size=\"15px\" thickness={3} />\n ) : (\n <SearchIcon />\n )}\n </div>\n\n <input\n className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n tabIndex={-1}\n id=\"slack-channel-search\"\n type=\"text\"\n onFocus={() =>\n slackChannels.length > 0 && setComboboxListOpen(true)\n }\n onChange={(e) => setInputValue(e.target.value)}\n value={inputValue}\n placeholder={searchPlaceholder || \"\"}\n disabled={!!inErrorState}\n {...inputProps}\n />\n </div>\n\n <SlackConnectionError />\n </div>\n </Popover.Trigger>\n\n <Popover.Content>\n <SlackChannelListBox\n isLoading={slackChannelsLoading || connectedChannelsLoading}\n isUpdating={connectedChannelsUpdating}\n connectedChannels={currentConnectedChannels}\n onClick={handleOptionClick}\n slackChannels={matchedChannels}\n listBoxProps={listBoxProps}\n channelOptionProps={channelOptionProps}\n />\n </Popover.Content>\n </Popover.Root>\n {showConnectedChannelTags && (\n <SlackConnectedChannelTagList\n connectedChannels={currentConnectedChannels}\n slackChannels={slackChannels}\n updateConnectedChannels={handleOptionClick}\n />\n )}\n </div>\n );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","ref","fn","connectionStatus","errorLabel","connectionErrorLabel","useKnockSlackClient","data","slackChannels","isLoading","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","loading","connectedChannelsLoading","error","connectedChannelsError","updating","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","setTimeout","getElementById","focus","slackChannelsMap","Map","map","channel","id","channels","filter","connectedChannel","has","channel_id","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","disconnected","multipleChannelsConnected","noChannelsConnected","noSlackChannelsFound","channelsError","length","numberConnectedChannels","find","slackChannel","singleChannelConnected","name","handleOptionClick","channelId","channelsToSendToKnock","matchedChannels","strContains","React","SlackAddChannelInput","Popover","VisuallyHidden","Spinner","SearchIcon","e","target","value","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"SlackChannelCombobox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n ContainerObject,\n SlackChannelQueryOptions,\n useConnectedSlackChannels,\n useKnockSlackClient,\n useSlackChannels,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\nexport type SlackChannelComboboxInputMessages = {\n disconnected: string;\n error: string;\n singleChannelConnected: string;\n multipleChannelsConnected: string;\n noChannelsConnected: string;\n noSlackChannelsFound: string;\n};\n\nexport interface SlackChannelComboboxProps {\n slackChannelsRecipientObject: ContainerObject;\n queryOptions?: SlackChannelQueryOptions;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n inputMessages?: SlackChannelComboboxInputMessages;\n showConnectedChannelTags?: boolean;\n}\n\nexport const SlackChannelCombobox: FunctionComponent<\n SlackChannelComboboxProps\n> = ({\n slackChannelsRecipientObject,\n queryOptions,\n inputProps,\n inputContainerProps,\n listBoxProps,\n channelOptionProps,\n inputMessages,\n showConnectedChannelTags = false,\n}) => {\n const { t } = useTranslations();\n\n const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState(\"\");\n\n // Used to close the combobox when clicking outside of it\n const comboboxRef = useRef(null);\n useOutsideClick({\n ref: comboboxRef,\n fn: () => {\n setInputValue(\"\");\n setComboboxListOpen(false);\n },\n });\n\n // Gather API data\n const { connectionStatus, errorLabel: connectionErrorLabel } =\n useKnockSlackClient();\n\n const { data: slackChannels, isLoading: slackChannelsLoading } =\n useSlackChannels({ queryOptions });\n\n const {\n data: connectedChannels,\n updateConnectedChannels,\n loading: connectedChannelsLoading,\n error: connectedChannelsError,\n updating: connectedChannelsUpdating,\n } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n SlackChannelConnection[] | null\n >(null);\n\n useEffect(() => {\n if (comboboxListOpen) {\n // Timeout to allow for the state to update and the component to re-render\n // when we change the `comboboxListOpen` state upon focus\n setTimeout(() => {\n document.getElementById(\"slack-channel-search\")?.focus();\n }, 0);\n }\n }, [comboboxListOpen]);\n\n useEffect(() => {\n // Used to make sure we're only showing currently available channels to select from.\n // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n // posting to it if the channel is private and the Slackbot doesn't belong to it,\n // so the channel won't show up here and it won't be posted to.\n const slackChannelsMap = new Map(\n slackChannels.map((channel) => [channel.id, channel]),\n );\n\n const channels =\n connectedChannels?.filter((connectedChannel) => {\n return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n }) || [];\n\n setCurrentConnectedChannels(channels);\n }, [connectedChannels, slackChannels]);\n\n const inErrorState = useMemo(\n () =>\n connectionStatus === \"disconnected\" ||\n connectionStatus === \"error\" ||\n connectedChannelsError,\n [connectedChannelsError, connectionStatus],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\" ||\n slackChannelsLoading,\n\n [connectionStatus, slackChannelsLoading],\n );\n\n // Construct placeholder text\n const searchPlaceholder = useMemo(() => {\n const DEFAULT_INPUT_MESSAGES = {\n disconnected: t(\"slackSearchbarDisconnected\"),\n multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n channelsError: t(\"slackSearchbarChannelsError\"),\n };\n\n // Connection status message\n if (connectionStatus === \"disconnected\") {\n return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n }\n\n if (connectionStatus === \"error\") {\n return inputMessages?.error || connectionErrorLabel;\n }\n\n // Channels status messages\n if (!inLoadingState && slackChannels.length === 0) {\n return (\n inputMessages?.noSlackChannelsFound ||\n DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n );\n }\n\n if (connectedChannelsError) {\n return connectedChannelsError;\n }\n\n const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n if (currentConnectedChannels && numberConnectedChannels === 0) {\n return (\n inputMessages?.noChannelsConnected ||\n DEFAULT_INPUT_MESSAGES.noChannelsConnected\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels === 1) {\n const connectedChannel = slackChannels?.find(\n (slackChannel) =>\n slackChannel.id === currentConnectedChannels[0]?.channel_id,\n );\n\n return (\n inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels > 1) {\n return (\n inputMessages?.multipleChannelsConnected ||\n `${numberConnectedChannels} channels connected`\n );\n }\n\n return \"\";\n }, [\n connectionStatus,\n inLoadingState,\n slackChannels,\n connectedChannelsError,\n currentConnectedChannels,\n inputMessages,\n connectionErrorLabel,\n t,\n ]);\n\n // Handle channel click\n const handleOptionClick = async (channelId: string) => {\n if (!currentConnectedChannels) {\n return;\n }\n\n const isChannelConnected = currentConnectedChannels.find(\n (channel) => channel.channel_id === channelId,\n );\n\n if (isChannelConnected) {\n const channelsToSendToKnock = currentConnectedChannels.filter(\n (connectedChannel) => connectedChannel.channel_id !== channelId,\n );\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n } else {\n const channelsToSendToKnock = [\n ...currentConnectedChannels,\n { channel_id: channelId } as SlackChannelConnection,\n ];\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n }\n };\n\n // Handle channel search\n const matchedChannels = slackChannels.filter((slackChannel) =>\n strContains(slackChannel.name, inputValue),\n );\n\n if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n return (\n <SlackAddChannelInput\n inErrorState={!!inErrorState}\n connectedChannels={currentConnectedChannels || []}\n updateConnectedChannels={updateConnectedChannels}\n connectedChannelsError={connectedChannelsError}\n connectedChannelsUpdating={connectedChannelsUpdating}\n />\n );\n }\n\n return (\n <div ref={comboboxRef} className=\"rsk-combobox\">\n <Popover.Root\n open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n >\n <VisuallyHidden.Root>\n <label htmlFor=\"slack-channel-search\">\n {t(\"slackSearchChannels\")}\n </label>\n </VisuallyHidden.Root>\n <Popover.Trigger asChild>\n <div className=\"rsk-combobox__searchbar\">\n <div\n className={\"rsk-combobox__searchbar__input-container\"}\n {...inputContainerProps}\n >\n <div\n className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n >\n {inLoadingState ? (\n <Spinner size=\"15px\" thickness={3} />\n ) : (\n <SearchIcon />\n )}\n </div>\n\n <input\n className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n tabIndex={-1}\n id=\"slack-channel-search\"\n type=\"text\"\n onFocus={() =>\n slackChannels.length > 0 && setComboboxListOpen(true)\n }\n onChange={(e) => setInputValue(e.target.value)}\n value={inputValue}\n placeholder={searchPlaceholder || \"\"}\n disabled={!!inErrorState}\n {...inputProps}\n />\n </div>\n\n <SlackConnectionError />\n </div>\n </Popover.Trigger>\n\n <Popover.Content>\n <SlackChannelListBox\n isLoading={slackChannelsLoading || connectedChannelsLoading}\n isUpdating={connectedChannelsUpdating}\n connectedChannels={currentConnectedChannels}\n onClick={handleOptionClick}\n slackChannels={matchedChannels}\n listBoxProps={listBoxProps}\n channelOptionProps={channelOptionProps}\n />\n </Popover.Content>\n </Popover.Root>\n {showConnectedChannelTags && (\n <SlackConnectedChannelTagList\n connectedChannels={currentConnectedChannels}\n slackChannels={slackChannels}\n updateConnectedChannels={handleOptionClick}\n />\n )}\n </div>\n );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","ref","fn","connectionStatus","errorLabel","connectionErrorLabel","useKnockSlackClient","data","slackChannels","isLoading","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","loading","connectedChannelsLoading","error","connectedChannelsError","updating","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","setTimeout","getElementById","focus","slackChannelsMap","Map","map","channel","id","channels","filter","connectedChannel","has","channel_id","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","disconnected","multipleChannelsConnected","noChannelsConnected","noSlackChannelsFound","channelsError","length","numberConnectedChannels","find","slackChannel","singleChannelConnected","name","handleOptionClick","channelId","channelsToSendToKnock","matchedChannels","strContains","React","SlackAddChannelInput","Popover","VisuallyHidden","Spinner","SearchIcon","e","target","value","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackChannelListBox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\n\nimport \"../../theme.css\";\n\nimport SlackChannelOption from \"./SlackChannelOption\";\nimport \"./styles.css\";\n\
|
1
|
+
{"version":3,"file":"SlackChannelListBox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\nimport { FunctionComponent } from \"react\";\n\nimport \"../../theme.css\";\n\nimport SlackChannelOption from \"./SlackChannelOption\";\nimport \"./styles.css\";\n\nexport interface SlackChannelListBoxProps {\n slackChannels: SlackChannel[];\n isLoading: boolean;\n connectedChannels: SlackChannelConnection[] | null;\n onClick: (channelId: string) => void;\n listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n isUpdating: boolean;\n}\n\nconst SlackChannelListBox: FunctionComponent<SlackChannelListBoxProps> = ({\n slackChannels,\n isLoading,\n connectedChannels,\n onClick,\n listBoxProps,\n channelOptionProps,\n isUpdating,\n}) => {\n return (\n <div className=\"rsk-combobox__list-box\" {...listBoxProps}>\n {slackChannels.map((channel) => {\n return (\n <SlackChannelOption\n key={channel.id}\n tabIndex={0}\n channel={channel}\n isLoading={isLoading}\n isConnected={\n !!connectedChannels?.find(\n (connectedChannel) =>\n connectedChannel.channel_id === channel.id,\n )\n }\n onClick={onClick}\n channelOptionProps={channelOptionProps}\n isUpdating={isUpdating}\n />\n );\n })}\n </div>\n );\n};\n\nexport default SlackChannelListBox;\n"],"names":["SlackChannelListBox","slackChannels","isLoading","connectedChannels","onClick","listBoxProps","channelOptionProps","isUpdating","React","map","channel","SlackChannelOption","id","find","connectedChannel","channel_id"],"mappings":"+MAkBMA,EAAmEA,CAAC,CACxEC,cAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,mBAAAA,EACAC,WAAAA,CACF,IAEIC,UAAA,cAAC,OAAI,UAAU,yBAA6BH,GAAAA,GACzCJ,EAAcQ,IAAiBC,GAE5BF,UAAA,cAACG,GACC,IAAKD,EAAQE,GACb,SAAU,EACV,QAAAF,EACA,UAAAR,EACA,YACE,CAAC,EAACC,GAAAA,MAAAA,EAAmBU,QAEjBC,EAAiBC,aAAeL,EAAQE,KAG9C,QAAAR,EACA,mBAAAE,EACA,WAAAC,CACA,CAAA,CAEL,CACH"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackChannelOption.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelOption.tsx"],"sourcesContent":["import { SlackChannel } from \"@knocklabs/client\";\nimport { useEffect, useState } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\n\nimport CheckmarkIcon from \"./icons/CheckmarkIcon\";\nimport HashtagIcon from \"./icons/HashtagIcon\";\nimport LockIcon from \"./icons/LockIcon\";\nimport \"./styles.css\";\n\
|
1
|
+
{"version":3,"file":"SlackChannelOption.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelOption.tsx"],"sourcesContent":["import { SlackChannel } from \"@knocklabs/client\";\nimport { useEffect, useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\n\nimport CheckmarkIcon from \"./icons/CheckmarkIcon\";\nimport HashtagIcon from \"./icons/HashtagIcon\";\nimport LockIcon from \"./icons/LockIcon\";\nimport \"./styles.css\";\n\nexport interface SlackChannelOptionProps {\n channel: SlackChannel;\n isLoading: boolean;\n isConnected: boolean;\n onClick: (id: string) => void;\n tabIndex: number;\n channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n isUpdating: boolean;\n}\n\nconst SlackChannelOption: FunctionComponent<SlackChannelOptionProps> = ({\n channel,\n isLoading,\n isConnected,\n onClick,\n tabIndex,\n channelOptionProps,\n isUpdating,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n const [submittedId, setSubmittedId] = useState<string | null>(null);\n\n const icon = () => {\n if (submittedId === channel.id && (isUpdating || isLoading)) {\n return <Spinner thickness={3} />;\n }\n\n if (isHovered || isConnected) {\n return <CheckmarkIcon isConnected={isConnected} />;\n }\n\n return <div className=\"rsk-combobox__option__text-container__empty-icon\" />;\n };\n\n const handleOptionClick = (channelId: string) => {\n setSubmittedId(channelId);\n onClick(channelId);\n };\n\n useEffect(() => {\n if (submittedId && !isUpdating) {\n return setSubmittedId(null);\n }\n }, [isLoading, isUpdating, submittedId]);\n\n return (\n <button\n key={channel.id}\n className=\"rsk-combobox__option__button\"\n onClick={() => !isLoading && handleOptionClick(channel.id)}\n disabled={isLoading || isUpdating}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n tabIndex={tabIndex}\n {...channelOptionProps}\n >\n <div className=\"rsk-combobox__option__text-container\">\n <div className=\"rsk-combobox__option__text-container__connection-icon\">\n {icon()}\n </div>\n <div className=\"rsk-combobox__option__text-container__channel-icon\">\n {channel.is_private ? <LockIcon /> : <HashtagIcon />}\n </div>\n <div className=\"rsk-combobox__option__text-container__text\">\n {channel.name}\n </div>\n </div>\n </button>\n );\n};\n\nexport default SlackChannelOption;\n"],"names":["SlackChannelOption","channel","isLoading","isConnected","onClick","tabIndex","channelOptionProps","isUpdating","isHovered","setIsHovered","useState","submittedId","setSubmittedId","icon","id","React","Spinner","CheckmarkIcon","handleOptionClick","channelId","useEffect","is_private","LockIcon","HashtagIcon","name"],"mappings":"ycAsBMA,EAAiEA,CAAC,CACtEC,QAAAA,EACAC,UAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,mBAAAA,EACAC,WAAAA,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIC,WAAS,EAAK,EAC1C,CAACC,EAAaC,CAAc,EAAIF,WAAwB,IAAI,EAE5DG,EAAOA,IACPF,IAAgBV,EAAQa,KAAOP,GAAcL,GACxCa,EAAAA,QAAA,cAACC,EAAAA,QAAQ,CAAA,UAAW,CAAK,CAAA,EAG9BR,GAAaL,EACRY,EAAA,QAAA,cAACE,GAAc,YAAAd,CAA4B,CAAA,EAG7CY,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,kDAAqD,CAAA,EAGvEG,EAAqBC,GAAsB,CAC/CP,EAAeO,CAAS,EACxBf,EAAQe,CAAS,CAAA,EAGnBC,OAAAA,EAAAA,UAAU,IAAM,CACVT,GAAAA,GAAe,CAACJ,EAClB,OAAOK,EAAe,IAAI,CAE3B,EAAA,CAACV,EAAWK,EAAYI,CAAW,CAAC,EAGpCI,EAAAA,QAAA,cAAA,SAAA,CACC,IAAKd,EAAQa,GACb,UAAU,+BACV,QAAS,IAAM,CAACZ,GAAagB,EAAkBjB,EAAQa,EAAE,EACzD,SAAUZ,GAAaK,EACvB,aAAc,IAAME,EAAa,EAAI,EACrC,aAAc,IAAMA,EAAa,EAAK,EACtC,SAAAJ,EACA,GAAIC,CAAAA,EAEHS,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,sCAAA,EACZA,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,uDAAA,EACZF,EAAK,CACR,EACAE,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,oDACZd,EAAAA,EAAQoB,WAAaN,UAAA,cAACO,EAAW,IAAA,EAAIP,UAAA,cAAAQ,EAAA,IAAc,CACtD,EACCR,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,4CAAA,EACZd,EAAQuB,IACX,CACF,CACF,CAEJ"}
|
package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackConnectedChannelTag.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.tsx"],"sourcesContent":["import { SlackChannel } from \"@knocklabs/client\";\n\nimport CloseIcon from \"./icons/CloseIcon\";\nimport HashtagIcon from \"./icons/HashtagIcon\";\nimport LockIcon from \"./icons/LockIcon\";\nimport \"./styles.css\";\n\
|
1
|
+
{"version":3,"file":"SlackConnectedChannelTag.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.tsx"],"sourcesContent":["import { SlackChannel } from \"@knocklabs/client\";\nimport { FunctionComponent } from \"react\";\n\nimport CloseIcon from \"./icons/CloseIcon\";\nimport HashtagIcon from \"./icons/HashtagIcon\";\nimport LockIcon from \"./icons/LockIcon\";\nimport \"./styles.css\";\n\nexport interface SlackConnectedChannelTagProps {\n channel: SlackChannel;\n updateConnectedChannels: (channelId: string) => void;\n}\n\nconst SlackConnectedChannelTag: FunctionComponent<\n SlackConnectedChannelTagProps\n> = ({ channel, updateConnectedChannels }) => {\n return (\n <div className=\"rsk-combobox__connected_channel_tag\">\n <div className=\"rsk-combobox__connected_channel_tag__channel_type_icon\">\n {channel.is_private ? <LockIcon /> : <HashtagIcon />}\n </div>\n <div className=\"rsk-combobox__connected_channel_tag__text\">\n {channel.name}\n </div>\n <button\n onClick={() => updateConnectedChannels(channel.id)}\n className=\"rsk-combobox__connected_channel_tag__delete_button\"\n >\n <CloseIcon />\n </button>\n </div>\n );\n};\n\nexport default SlackConnectedChannelTag;\n"],"names":["SlackConnectedChannelTag","channel","updateConnectedChannels","React","is_private","LockIcon","HashtagIcon","name","id","CloseIcon"],"mappings":"6OAaMA,EAEFA,CAAC,CAAEC,QAAAA,EAASC,wBAAAA,CAAwB,4BAEnC,MAAI,CAAA,UAAU,qCACb,EAAAC,UAAA,cAAC,OAAI,UAAU,0DACZF,EAAQG,mCAAcC,EAAW,IAAA,EAAIF,UAAA,cAAAG,EAAA,IAAc,CACtD,EACAH,UAAA,cAAC,MAAI,CAAA,UAAU,6CACZF,EAAQM,IACX,EACAJ,EAAAA,QAAA,cAAC,UACC,QAAS,IAAMD,EAAwBD,EAAQO,EAAE,EACjD,UAAU,sDAETL,EAAA,QAAA,cAAAM,EAAA,IAAS,CACZ,CACF"}
|
package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackConnectedChannelTagList.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\n\nimport SlackConnectedChannelTag from \"./SlackConnectedChannelTag\";\nimport \"./styles.css\";\n\
|
1
|
+
{"version":3,"file":"SlackConnectedChannelTagList.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\nimport { FunctionComponent } from \"react\";\n\nimport SlackConnectedChannelTag from \"./SlackConnectedChannelTag\";\nimport \"./styles.css\";\n\nexport interface SlackConnectedChannelTagListProps {\n connectedChannels: SlackChannelConnection[] | null;\n slackChannels: SlackChannel[];\n updateConnectedChannels: (channelId: string) => void;\n}\n\nconst SlackConnectedChannelTagList: FunctionComponent<\n SlackConnectedChannelTagListProps\n> = ({ connectedChannels, slackChannels, updateConnectedChannels }) => {\n const connectedChannelsMap = new Map(\n connectedChannels?.map((channel) => [channel.channel_id, channel]),\n );\n\n const channels =\n slackChannels?.filter((slackChannel) => {\n return connectedChannelsMap.has(slackChannel.id || \"\");\n }) || [];\n\n return (\n <div className=\"rsk-combobox__connected_channel_tag_list\">\n {channels.map((channel) => (\n <SlackConnectedChannelTag\n key={channel.id}\n channel={channel}\n updateConnectedChannels={updateConnectedChannels}\n />\n ))}\n </div>\n );\n};\n\nexport default SlackConnectedChannelTagList;\n"],"names":["SlackConnectedChannelTagList","connectedChannels","slackChannels","updateConnectedChannels","connectedChannelsMap","Map","map","channel","channel_id","channels","filter","slackChannel","has","id","React","SlackConnectedChannelTag"],"mappings":"iLAYMA,EAEFA,CAAC,CAAEC,kBAAAA,EAAmBC,cAAAA,EAAeC,wBAAAA,CAAwB,IAAM,CAC/DC,MAAAA,EAAuB,IAAIC,IAC/BJ,GAAAA,YAAAA,EAAmBK,IAAiBC,GAAA,CAACA,EAAQC,WAAYD,CAAO,EAClE,EAEME,GACJP,GAAAA,YAAAA,EAAeQ,OAAyBC,GAC/BP,EAAqBQ,IAAID,EAAaE,IAAM,EAAE,KACjD,CAAA,EAER,OACGC,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,4CACZL,EAASH,IAAKC,GACZO,EAAA,QAAA,cAAAC,EAAA,CACC,IAAKR,EAAQM,GACb,QAAAN,EACA,wBAAAJ,GAEH,CACH,CAEJ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackConnectionError.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectionError.tsx"],"sourcesContent":["import { useKnockSlackClient, useTranslations } from \"@knocklabs/react-core\";\n\nimport InfoIcon from \"./icons/InfoIcon\";\n\nconst SlackConnectionError = () => {\n const { t } = useTranslations();\n const { connectionStatus } = useKnockSlackClient();\n\n if (connectionStatus === \"disconnected\" || connectionStatus === \"error\") {\n return (\n <div className=\"rsk-combobox__error\">\n <span>\n <InfoIcon />\n </span>\n\n <div className=\"rsk-combobox__error__text\">\n {connectionStatus === \"disconnected\"\n ? t(\"slackConnectionErrorOccurred\")\n : t(\"slackConnectionErrorExists\")}\n </div>\n </div>\n );\n }\n\n return <div />;\n};\n\nexport default SlackConnectionError;\n"],"names":["SlackConnectionError","t","useTranslations","connectionStatus","useKnockSlackClient","React","InfoIcon"],"mappings":"
|
1
|
+
{"version":3,"file":"SlackConnectionError.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectionError.tsx"],"sourcesContent":["import { useKnockSlackClient, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport InfoIcon from \"./icons/InfoIcon\";\n\nconst SlackConnectionError: FunctionComponent = () => {\n const { t } = useTranslations();\n const { connectionStatus } = useKnockSlackClient();\n\n if (connectionStatus === \"disconnected\" || connectionStatus === \"error\") {\n return (\n <div className=\"rsk-combobox__error\">\n <span>\n <InfoIcon />\n </span>\n\n <div className=\"rsk-combobox__error__text\">\n {connectionStatus === \"disconnected\"\n ? t(\"slackConnectionErrorOccurred\")\n : t(\"slackConnectionErrorExists\")}\n </div>\n </div>\n );\n }\n\n return <div />;\n};\n\nexport default SlackConnectionError;\n"],"names":["SlackConnectionError","t","useTranslations","connectionStatus","useKnockSlackClient","React","InfoIcon"],"mappings":"yKAKMA,EAA0CA,IAAM,CAC9C,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxB,CAAEC,iBAAAA,GAAqBC,EAAoB,oBAAA,EAE7CD,OAAAA,IAAqB,gBAAkBA,IAAqB,QAE5DE,EAAA,QAAA,cAAC,OAAI,UAAU,qBAAA,0BACZ,OACC,KAAAA,EAAA,QAAA,cAACC,EAAQ,IAAA,CACX,EAEAD,EAAAA,QAAA,cAAC,OAAI,UAAU,2BAAA,EAETJ,EADHE,IAAqB,eAChB,+BACA,4BAD8B,CAEtC,CACF,0BAII,MAAM,IAAA,CAChB"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";const
|
1
|
+
"use strict";const n=require("react"),r=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=r(n),a=({isConnected:t,size:e="1rem"})=>o.default.createElement("svg",{height:e,width:e,role:"img",viewBox:"0 0 14 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o.default.createElement("path",{d:"M11.3751 3.9996L5.25006 10.9996L2.62506 8.3746",stroke:t?"#5469D4":"#A5ACB8",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}));module.exports=a;
|
2
2
|
//# sourceMappingURL=CheckmarkIcon.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CheckmarkIcon.js","sources":["../../../../../../../src/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.tsx"],"sourcesContent":["
|
1
|
+
{"version":3,"file":"CheckmarkIcon.js","sources":["../../../../../../../src/modules/slack/components/SlackChannelCombobox/icons/CheckmarkIcon.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\nexport interface CheckmarkIconProps {\n isConnected: boolean;\n size?: string;\n}\n\nconst CheckmarkIcon: FunctionComponent<CheckmarkIconProps> = ({\n isConnected,\n size = \"1rem\",\n}) => (\n <svg\n height={size}\n width={size}\n role=\"img\"\n viewBox=\"0 0 14 15\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11.3751 3.9996L5.25006 10.9996L2.62506 8.3746\"\n stroke={isConnected ? \"#5469D4\" : \"#A5ACB8\"}\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport default CheckmarkIcon;\n"],"names":["CheckmarkIcon","isConnected","size","React"],"mappings":"qGAOMA,EAAuDA,CAAC,CAC5DC,YAAAA,EACAC,KAAAA,EAAO,MACT,IACGC,EAAAA,QAAA,cAAA,MAAA,CACC,OAAQD,EACR,MAAOA,EACP,KAAK,MACL,QAAQ,YACR,KAAK,OACL,MAAM,4BAAA,EAELC,EAAAA,QAAA,cAAA,OAAA,CACC,EAAE,iDACF,OAAQF,EAAc,UAAY,UAClC,YAAY,MACZ,cAAc,QACd,eAAe,QAAO,CAE1B"}
|