@knocklabs/react 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.2.1
+
+### Patch Changes
+
+- 16ff6b4: Adds an onAuthenticationComplete callback to the SlackAuthButton component and to the example apps.
+- 05826b3: Add optional connected channel list to SlackChannelCombobox + to example apps.
+- 094fb39: Make the SlackCombobox background opaque so that elements underneath aren't visible when it's popped out.
+- Updated dependencies [f37d680]
+  - @knocklabs/client@0.9.1
+  - @knocklabs/react-core@0.2.1
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/cjs/index.css

@@ -1 +1 @@
-:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rnf-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)}.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{--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;display:flex;position:relative;color:var(--rsk-color-gray-200)}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);top:.65rem;position:absolute;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{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{display:flex;align-items:center;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;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);background-color:var(--rsk-color-gray-100)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}
+:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--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{--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{--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-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)}

package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("@knocklabs/react-core"),b=require("react");const l=require("../SlackIcon/SlackIcon.js");const g=u=>{const s=window.screenLeft??window.screenX,c=window.screenTop??window.screenY,t=window.innerWidth??document.documentElement.clientWidth??screen.width,o=window.innerHeight??document.documentElement.clientHeight??screen.height,r=t/2-600/2+s,i=`width=600,height=800,top=${o/2-800/2+c},left=${r}`;window.open(u,"Slack OAuth",i)},m=({slackClientId:u,redirectUrl:h})=>{const{t:e}=a.useTranslations(),s=a.useKnockClient(),{setConnectionStatus:c,connectionStatus:t,setActionLabel:o,actionLabel:r,errorLabel:k}=a.useKnockSlackClient(),{buildSlackAuthUrl:i,disconnectFromSlack:_}=a.useSlackAuth(u,h);b.useEffect(()=>{const w=d=>{if(d.origin===s.host)try{d.data==="authComplete"&&c("connected"),d.data==="authFailed"&&c("error")}catch{c("error")}};return window.addEventListener("message",w,!1),()=>{window.removeEventListener("message",w)}},[s.host,c]);const p=e("slackDisconnect")||null,x=e("slackReconnect")||null;return t==="connecting"||t==="disconnecting"?n.jsxs("div",{className:"rsk-connect__button rsk-connect__button--loading",children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{children:e(t==="connecting"?"slackConnecting":"slackDisconnecting")})]}):t==="error"?n.jsxs("button",{onClick:()=>g(i()),className:"rsk-connect__button rsk-connect__button--error",onMouseEnter:()=>o(x),onMouseLeave:()=>o(null),children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{className:"rsk-connect__button__text--error",children:r||k||e("slackError")})]}):t==="disconnected"?n.jsxs("button",{onClick:()=>g(i()),className:"rsk-connect__button rsk-connect__button--disconnected",children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{children:e("slackConnect")})]}):n.jsxs("button",{onClick:_,className:"rsk-connect__button rsk-connect__button--connected",onMouseEnter:()=>o(p),onMouseLeave:()=>o(null),children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{className:"rsk-connect__button__text--connected",children:r||e("slackConnected")})]})};exports.SlackAuthButton=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("@knocklabs/react-core"),m=require("react");const l=require("../SlackIcon/SlackIcon.js");const _=u=>{const e=window.screenLeft??window.screenX,r=window.screenTop??window.screenY,c=window.innerWidth??document.documentElement.clientWidth??screen.width,t=window.innerHeight??document.documentElement.clientHeight??screen.height,o=c/2-600/2+e,h=`width=600,height=800,top=${t/2-800/2+r},left=${o}`;window.open(u,"Slack OAuth",h)},S=({slackClientId:u,redirectUrl:k,onAuthenticationComplete:s})=>{const{t:e}=a.useTranslations(),r=a.useKnockClient(),{setConnectionStatus:c,connectionStatus:t,setActionLabel:o,actionLabel:d,errorLabel:h}=a.useKnockSlackClient(),{buildSlackAuthUrl:w,disconnectFromSlack:x}=a.useSlackAuth(u,k);m.useEffect(()=>{const g=i=>{if(i.origin===r.host)try{i.data==="authComplete"&&c("connected"),i.data==="authFailed"&&c("error"),s&&s(i.data)}catch{c("error")}};return window.addEventListener("message",g,!1),()=>{window.removeEventListener("message",g)}},[r.host,s,c]);const b=e("slackDisconnect")||null,p=e("slackReconnect")||null;return t==="connecting"||t==="disconnecting"?n.jsxs("div",{className:"rsk-connect__button rsk-connect__button--loading",children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{children:e(t==="connecting"?"slackConnecting":"slackDisconnecting")})]}):t==="error"?n.jsxs("button",{onClick:()=>_(w()),className:"rsk-connect__button rsk-connect__button--error",onMouseEnter:()=>o(p),onMouseLeave:()=>o(null),children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{className:"rsk-connect__button__text--error",children:d||h||e("slackError")})]}):t==="disconnected"?n.jsxs("button",{onClick:()=>_(w()),className:"rsk-connect__button rsk-connect__button--disconnected",children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{children:e("slackConnect")})]}):n.jsxs("button",{onClick:x,className:"rsk-connect__button rsk-connect__button--connected",onMouseEnter:()=>o(b),onMouseLeave:()=>o(null),children:[n.jsx(l.SlackIcon,{height:"16px",width:"16px"}),n.jsx("span",{className:"rsk-connect__button__text--connected",children:d||e("slackConnected")})]})};exports.SlackAuthButton=S;
 //# sourceMappingURL=SlackAuthButton.js.map

package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map

@@ -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\ntype Props = {\n  slackClientId: string;\n  redirectUrl?: string;\n};\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: React.FC<Props> = ({\n  slackClientId,\n  redirectUrl,\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      } 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, setConnectionStatus]);\n\nconst disconnectLabel = t(\"slackDisconnect\") || null\nconst 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","screenTop","innerWidth","innerHeight","left","features","SlackAuthButton","slackClientId","redirectUrl","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":"iRAkBA,MAAMA,EAAuBC,GAAgB,CAIrC,MAAAC,EAAa,OAAO,YAAc,OAAO,QACzCC,EAAY,OAAO,WAAa,OAAO,QAEvCC,EACJ,OAAO,YAAc,SAAS,gBAAgB,aAAe,OAAO,MAChEC,EACJ,OAAO,aACP,SAAS,gBAAgB,cACzB,OAAO,OAEHC,EAAOF,EAAa,EAAI,IAAQ,EAAIF,EAIpCK,EAAW,4BAHLF,EAAc,EAAI,IAAS,EAAIF,CAGgB,SAASG,CAAI,GAEjE,OAAA,KAAKL,EAAK,cAAeM,CAAQ,CAC1C,EAEaC,EAAmC,CAAC,CAC/C,cAAAC,EACA,YAAAC,CACF,IAAM,CACE,KAAA,CAAE,EAAAC,GAAMC,EAAAA,kBACRC,EAAQC,EAAAA,iBAER,CACJ,oBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,YAAAC,EACA,WAAAC,GACEC,EAAoB,oBAAA,EAElB,CAAE,kBAAAC,EAAmB,oBAAAC,CAAA,EAAwBC,EAAA,aACjDd,EACAC,CAAA,EAGFc,EAAAA,UAAU,IAAM,CACR,MAAAC,EAAkBC,GAAwB,CAC1C,GAAAA,EAAM,SAAWb,EAAM,KAIvB,GAAA,CACEa,EAAM,OAAS,gBACjBX,EAAoB,WAAW,EAG7BW,EAAM,OAAS,cACjBX,EAAoB,OAAO,OAEf,CACdA,EAAoB,OAAO,CAC7B,CAAA,EAGK,cAAA,iBAAiB,UAAWU,EAAgB,EAAK,EAGjD,IAAM,CACJ,OAAA,oBAAoB,UAAWA,CAAc,CAAA,CAErD,EAAA,CAACZ,EAAM,KAAME,CAAmB,CAAC,EAEhC,MAAAY,EAAkBhB,EAAE,iBAAiB,GAAK,KAC1CiB,EAAiBjB,EAAE,gBAAgB,GAAK,KAI1C,OAAAK,IAAqB,cACrBA,IAAqB,gBAGnBa,EAAA,KAAC,MAAI,CAAA,UAAU,mDACb,SAAA,CAAAC,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACtCD,EAAAA,IAAC,QACE,SACGnB,EADkBK,IAAA,aAChB,kBACA,oBADiB,CAEzB,CAAA,CACF,CAAA,CAAA,EAKAA,IAAqB,QAErBa,EAAA,KAAC,SAAA,CACC,QAAS,IAAM7B,EAAoBqB,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAeW,CAAc,EACjD,aAAc,IAAMX,EAAe,IAAI,EAEvC,SAAA,CAAAa,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACtCD,EAAAA,IAAC,QAAK,UAAU,mCACb,YAAeX,GAAcR,EAAE,YAAY,EAC9C,CAAA,CAAA,CAAA,EAMFK,IAAqB,eAErBa,EAAA,KAAC,SAAA,CACC,QAAS,IAAM7B,EAAoBqB,GAAmB,EACtD,UAAU,wDAEV,SAAA,CAAAS,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACrCD,EAAA,IAAA,OAAA,CAAM,SAAEnB,EAAA,cAAc,CAAE,CAAA,CAAA,CAAA,CAAA,EAO7BkB,EAAA,KAAC,SAAA,CACC,QAASP,EACT,UAAU,qDACV,aAAc,IAAML,EAAeU,CAAe,EAClD,aAAc,IAAMV,EAAe,IAAI,EAEvC,SAAA,CAAAa,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,QACrC,OAAK,CAAA,UAAU,uCACb,SAAeb,GAAAP,EAAE,gBAAgB,EACpC,CAAA,CAAA,CAAA,CAGN"}
+{"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\ntype Props = {\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: React.FC<Props> = ({\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","screenTop","innerWidth","innerHeight","left","features","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":"iRAmBA,MAAMA,EAAuBC,GAAgB,CAIrC,MAAAC,EAAa,OAAO,YAAc,OAAO,QACzCC,EAAY,OAAO,WAAa,OAAO,QAEvCC,EACJ,OAAO,YAAc,SAAS,gBAAgB,aAAe,OAAO,MAChEC,EACJ,OAAO,aACP,SAAS,gBAAgB,cACzB,OAAO,OAEHC,EAAOF,EAAa,EAAI,IAAQ,EAAIF,EAIpCK,EAAW,4BAHLF,EAAc,EAAI,IAAS,EAAIF,CAGgB,SAASG,CAAI,GAEjE,OAAA,KAAKL,EAAK,cAAeM,CAAQ,CAC1C,EAEaC,EAAmC,CAAC,CAC/C,cAAAC,EACA,YAAAC,EACA,yBAAAC,CACF,IAAM,CACE,KAAA,CAAE,EAAAC,GAAMC,EAAAA,kBACRC,EAAQC,EAAAA,iBAER,CACJ,oBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,YAAAC,EACA,WAAAC,GACEC,EAAoB,oBAAA,EAElB,CAAE,kBAAAC,EAAmB,oBAAAC,CAAA,EAAwBC,EAAA,aACjDf,EACAC,CAAA,EAGFe,EAAAA,UAAU,IAAM,CACR,MAAAC,EAAkBC,GAAwB,CAC1C,GAAAA,EAAM,SAAWb,EAAM,KAIvB,GAAA,CACEa,EAAM,OAAS,gBACjBX,EAAoB,WAAW,EAG7BW,EAAM,OAAS,cACjBX,EAAoB,OAAO,EAGzBL,GACFA,EAAyBgB,EAAM,IAAI,OAEvB,CACdX,EAAoB,OAAO,CAC7B,CAAA,EAGK,cAAA,iBAAiB,UAAWU,EAAgB,EAAK,EAGjD,IAAM,CACJ,OAAA,oBAAoB,UAAWA,CAAc,CAAA,GAErD,CAACZ,EAAM,KAAMH,EAA0BK,CAAmB,CAAC,EAExD,MAAAY,EAAkBhB,EAAE,iBAAiB,GAAK,KAC1CiB,EAAiBjB,EAAE,gBAAgB,GAAK,KAI5C,OAAAK,IAAqB,cACrBA,IAAqB,gBAGnBa,EAAA,KAAC,MAAI,CAAA,UAAU,mDACb,SAAA,CAAAC,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACtCD,EAAAA,IAAC,QACE,SACGnB,EADkBK,IAAA,aAChB,kBACA,oBADiB,CAEzB,CAAA,CACF,CAAA,CAAA,EAKAA,IAAqB,QAErBa,EAAA,KAAC,SAAA,CACC,QAAS,IAAM9B,EAAoBsB,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAeW,CAAc,EACjD,aAAc,IAAMX,EAAe,IAAI,EAEvC,SAAA,CAAAa,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACtCD,EAAAA,IAAC,QAAK,UAAU,mCACb,YAAeX,GAAcR,EAAE,YAAY,EAC9C,CAAA,CAAA,CAAA,EAMFK,IAAqB,eAErBa,EAAA,KAAC,SAAA,CACC,QAAS,IAAM9B,EAAoBsB,GAAmB,EACtD,UAAU,wDAEV,SAAA,CAAAS,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACrCD,EAAA,IAAA,OAAA,CAAM,SAAEnB,EAAA,cAAc,CAAE,CAAA,CAAA,CAAA,CAAA,EAO7BkB,EAAA,KAAC,SAAA,CACC,QAASP,EACT,UAAU,qDACV,aAAc,IAAML,EAAeU,CAAe,EAClD,aAAc,IAAMV,EAAe,IAAI,EAEvC,SAAA,CAAAa,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,QACrC,OAAK,CAAA,UAAU,uCACb,SAAeb,GAAAP,EAAE,gBAAgB,EACpC,CAAA,CAAA,CAAA,CAGN"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),m=require("@knocklabs/react-core"),H=require("@radix-ui/react-popover"),K=require("@radix-ui/react-visually-hidden"),i=require("react"),w=require("react-aria"),z=require("../../../core/components/Spinner/Spinner.js");require("lodash.debounce");const B=require("../../../core/hooks/useOutsideClick.js");const G=require("../SlackAddChannelInput/SlackAddChannelInput.js"),W=require("./SlackChannelListBox.js"),X=require("./SlackConnectionError.js"),J=require("./icons/SearchIcon.js");function A(t){if(t&&typeof t=="object"&&"default"in t)return t;const C=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const h in t)if(h!=="default"){const b=Object.getOwnPropertyDescriptor(t,h);Object.defineProperty(C,h,b.get?b:{enumerable:!0,get:()=>t[h]})}}return C.default=t,Object.freeze(C)}const L=A(H),Q=A(K),Y=1e3,Z=({slackChannelsRecipientObject:t,queryOptions:C,inputProps:h,inputContainerProps:b,listBoxProps:P,channelOptionProps:R,inputMessages:n})=>{const{t:s}=m.useTranslations(),[k,p]=i.useState(!1),[y,v]=i.useState(""),N=i.useRef(null);B({ref:N,fn:()=>{v(""),p(!1)}});const{connectionStatus:a,errorLabel:O}=m.useKnockSlackClient(),{data:l,isLoading:S}=m.useSlackChannels({queryOptions:C}),{data:_,updateConnectedChannels:x,loading:D,error:u,updating:T}=m.useConnectedSlackChannels({slackChannelsRecipientObject:t}),[r,j]=i.useState(null);i.useEffect(()=>{k&&setTimeout(()=>{var e;(e=document.getElementById("slack-channel-search"))==null||e.focus()},0)},[k]),i.useEffect(()=>{const e=new Map(l.map(o=>[o.id,o])),d=(_==null?void 0:_.filter(o=>e.has(o.channel_id||"")))||[];j(d)},[_,l]);const f=i.useMemo(()=>a==="disconnected"||a==="error"||u,[u,a]),q=i.useMemo(()=>a==="connecting"||a==="disconnecting"||S,[a,S]),I=i.useMemo(()=>{const e={disconnected:s("slackSearchbarDisconnected"),multipleChannelsConnected:s("slackSearchbarMultipleChannels"),noChannelsConnected:s("slackSearchbarNoChannelsConnected"),noSlackChannelsFound:s("slackSearchbarNoChannelsFound"),channelsError:s("slackSearchbarChannelsError")};if(a==="disconnected")return(n==null?void 0:n.disconnected)||e.disconnected;if(a==="error")return(n==null?void 0:n.error)||O;if(!q&&l.length===0)return(n==null?void 0:n.noSlackChannelsFound)||e.noSlackChannelsFound;if(u)return u;const d=(r==null?void 0:r.length)||0;if(r&&d===0)return(n==null?void 0:n.noChannelsConnected)||e.noChannelsConnected;if(r&&d===1){const o=l==null?void 0:l.find(E=>{var F;return E.id===((F=r[0])==null?void 0:F.channel_id)});return(n==null?void 0:n.singleChannelConnected)||`# ${o==null?void 0:o.name}`}return r&&d>1?(n==null?void 0:n.multipleChannelsConnected)||`${d} channels connected`:""},[a,q,l,u,r,n,O,s]),U=async e=>{if(!r)return;if(r.find(o=>o.channel_id===e)){const o=r.filter(E=>E.channel_id!==e);j(o),x(o)}else{const o=[...r,{channel_id:e}];j(o),x(o)}},{contains:V}=w.useFilter({sensitivity:"base"}),$=l.filter(e=>V(e.name,y));return l.length>Y?c.jsx(G,{inErrorState:!!f,connectedChannels:r||[],updateConnectedChannels:x,connectedChannelsError:u,connectedChannelsUpdating:T}):c.jsx("div",{ref:N,className:"rsk-combobox",children:c.jsxs(L.Root,{open:a!=="disconnected"?k:!1,children:[c.jsx(Q.Root,{children:c.jsx("label",{htmlFor:"slack-channel-search",children:s("slackSearchChannels")})}),c.jsx(L.Trigger,{asChild:!0,children:c.jsxs("div",{className:"rsk-combobox__searchbar",children:[c.jsxs("div",{className:"rsk-combobox__searchbar__input-container",...b,children:[c.jsx("div",{className:`rsk-combobox__searchbar__input-container__icon ${f&&"rsk-combobox__searchbar__input-container__icon--error"}`,children:q?c.jsx(z.Spinner,{size:"15px",thickness:3}):c.jsx(J,{})}),c.jsx("input",{className:`rsk-combobox__searchbar__input-container__input ${f?"rsk-combobox__searchbar__input-container__input--error":""}`,tabIndex:-1,id:"slack-channel-search",type:"text",onFocus:()=>l.length>0&&p(!0),onChange:e=>v(e.target.value),value:y,placeholder:I||"",disabled:!!f,...h})]}),c.jsx(X,{})]})}),c.jsx(L.Content,{children:c.jsx(W,{isLoading:S||D,isUpdating:T,connectedChannels:r,onClick:U,slackChannels:$,listBoxProps:P,channelOptionProps:R})})]})})};exports.SlackChannelCombobox=Z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),m=require("@knocklabs/react-core"),K=require("@radix-ui/react-popover"),w=require("@radix-ui/react-visually-hidden"),i=require("react"),z=require("react-aria"),B=require("../../../core/components/Spinner/Spinner.js");require("lodash.debounce");const G=require("../../../core/hooks/useOutsideClick.js");const W=require("../SlackAddChannelInput/SlackAddChannelInput.js"),X=require("./SlackChannelListBox.js"),J=require("./SlackConnectedChannelTagList.js"),Q=require("./SlackConnectionError.js"),Y=require("./icons/SearchIcon.js");function P(t){if(t&&typeof t=="object"&&"default"in t)return t;const C=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const h in t)if(h!=="default"){const b=Object.getOwnPropertyDescriptor(t,h);Object.defineProperty(C,h,b.get?b:{enumerable:!0,get:()=>t[h]})}}return C.default=t,Object.freeze(C)}const L=P(K),Z=P(w),g=1e3,M=({slackChannelsRecipientObject:t,queryOptions:C,inputProps:h,inputContainerProps:b,listBoxProps:R,channelOptionProps:D,inputMessages:n,showConnectedChannelTags:I=!1})=>{const{t:s}=m.useTranslations(),[k,p]=i.useState(!1),[y,T]=i.useState(""),v=i.useRef(null);G({ref:v,fn:()=>{T(""),p(!1)}});const{connectionStatus:l,errorLabel:N}=m.useKnockSlackClient(),{data:a,isLoading:S}=m.useSlackChannels({queryOptions:C}),{data:_,updateConnectedChannels:x,loading:U,error:u,updating:O}=m.useConnectedSlackChannels({slackChannelsRecipientObject:t}),[r,j]=i.useState(null);i.useEffect(()=>{k&&setTimeout(()=>{var e;(e=document.getElementById("slack-channel-search"))==null||e.focus()},0)},[k]),i.useEffect(()=>{const e=new Map(a.map(o=>[o.id,o])),d=(_==null?void 0:_.filter(o=>e.has(o.channel_id||"")))||[];j(d)},[_,a]);const f=i.useMemo(()=>l==="disconnected"||l==="error"||u,[u,l]),q=i.useMemo(()=>l==="connecting"||l==="disconnecting"||S,[l,S]),V=i.useMemo(()=>{const e={disconnected:s("slackSearchbarDisconnected"),multipleChannelsConnected:s("slackSearchbarMultipleChannels"),noChannelsConnected:s("slackSearchbarNoChannelsConnected"),noSlackChannelsFound:s("slackSearchbarNoChannelsFound"),channelsError:s("slackSearchbarChannelsError")};if(l==="disconnected")return(n==null?void 0:n.disconnected)||e.disconnected;if(l==="error")return(n==null?void 0:n.error)||N;if(!q&&a.length===0)return(n==null?void 0:n.noSlackChannelsFound)||e.noSlackChannelsFound;if(u)return u;const d=(r==null?void 0:r.length)||0;if(r&&d===0)return(n==null?void 0:n.noChannelsConnected)||e.noChannelsConnected;if(r&&d===1){const o=a==null?void 0:a.find(E=>{var A;return E.id===((A=r[0])==null?void 0:A.channel_id)});return(n==null?void 0:n.singleChannelConnected)||`# ${o==null?void 0:o.name}`}return r&&d>1?(n==null?void 0:n.multipleChannelsConnected)||`${d} channels connected`:""},[l,q,a,u,r,n,N,s]),F=async e=>{if(!r)return;if(r.find(o=>o.channel_id===e)){const o=r.filter(E=>E.channel_id!==e);j(o),x(o)}else{const o=[...r,{channel_id:e}];j(o),x(o)}},{contains:$}=z.useFilter({sensitivity:"base"}),H=a.filter(e=>$(e.name,y));return a.length>g?c.jsx(W,{inErrorState:!!f,connectedChannels:r||[],updateConnectedChannels:x,connectedChannelsError:u,connectedChannelsUpdating:O}):c.jsxs("div",{ref:v,className:"rsk-combobox",children:[c.jsxs(L.Root,{open:l!=="disconnected"?k:!1,children:[c.jsx(Z.Root,{children:c.jsx("label",{htmlFor:"slack-channel-search",children:s("slackSearchChannels")})}),c.jsx(L.Trigger,{asChild:!0,children:c.jsxs("div",{className:"rsk-combobox__searchbar",children:[c.jsxs("div",{className:"rsk-combobox__searchbar__input-container",...b,children:[c.jsx("div",{className:`rsk-combobox__searchbar__input-container__icon ${f&&"rsk-combobox__searchbar__input-container__icon--error"}`,children:q?c.jsx(B.Spinner,{size:"15px",thickness:3}):c.jsx(Y,{})}),c.jsx("input",{className:`rsk-combobox__searchbar__input-container__input ${f?"rsk-combobox__searchbar__input-container__input--error":""}`,tabIndex:-1,id:"slack-channel-search",type:"text",onFocus:()=>a.length>0&&p(!0),onChange:e=>T(e.target.value),value:y,placeholder:V||"",disabled:!!f,...h})]}),c.jsx(Q,{})]})}),c.jsx(L.Content,{children:c.jsx(X,{isLoading:S||U,isUpdating:O,connectedChannels:r,onClick:F,slackChannels:H,listBoxProps:R,channelOptionProps:D})})]}),I&&c.jsx(J,{connectedChannels:r,slackChannels:a,updateConnectedChannels:F})]})};exports.SlackChannelCombobox=M;
 //# sourceMappingURL=SlackChannelCombobox.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map

@@ -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\";\nimport { useFilter } from \"react-aria\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectionError from \"./SlackConnectionError\";\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};\n\nexport const SlackChannelCombobox = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\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 { contains } = useFilter({ sensitivity: \"base\" });\n  const matchedChannels = slackChannels.filter((slackChannel) =>\n    contains(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    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","connectionStatus","connectionErrorLabel","useKnockSlackClient","slackChannels","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","connectedChannelsLoading","connectedChannelsError","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","_a","slackChannelsMap","channel","channels","connectedChannel","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","numberConnectedChannels","slackChannel","handleOptionClick","channelId","channelsToSendToKnock","contains","useFilter","matchedChannels","jsx","SlackAddChannelInput","jsxs","Popover","VisuallyHidden","Spinner","SearchIcon","SlackConnectionError","SlackChannelListBox"],"mappings":"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"}
+{"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 { useFilter } from \"react-aria\";\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 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 { contains } = useFilter({ sensitivity: \"base\" });\n  const matchedChannels = slackChannels.filter((slackChannel) =>\n    contains(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","connectionStatus","connectionErrorLabel","useKnockSlackClient","slackChannels","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","connectedChannelsLoading","connectedChannelsError","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","_a","slackChannelsMap","channel","channels","connectedChannel","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","numberConnectedChannels","slackChannel","handleOptionClick","channelId","channelsToSendToKnock","contains","useFilter","matchedChannels","jsx","SlackAddChannelInput","jsxs","Popover","VisuallyHidden","Spinner","SearchIcon","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),o=require("./icons/CloseIcon.js"),s=require("./icons/HashtagIcon.js"),t=require("./icons/LockIcon.js");const _=({channel:c,updateConnectedChannels:n})=>e.jsxs("div",{className:"rsk-combobox__connected_channel_tag",children:[e.jsx("div",{className:"rsk-combobox__connected_channel_tag__channel_type_icon",children:c.is_private?e.jsx(t,{}):e.jsx(s,{})}),e.jsx("div",{className:"rsk-combobox__connected_channel_tag__text",children:c.name}),e.jsx("button",{onClick:()=>n(c.id),className:"rsk-combobox__connected_channel_tag__delete_button",children:e.jsx(o,{})})]});module.exports=_;
+//# sourceMappingURL=SlackConnectedChannelTag.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.js.map

@@ -0,0 +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\ntype Props = {\n\tchannel: SlackChannel;\n\tupdateConnectedChannels: (channelId: string) => void;\n}\n\nconst SlackConnectedChannelTag = ({\n\tchannel,\n\tupdateConnectedChannels,\n}: Props) => {\n\treturn (\n\t\t<div className=\"rsk-combobox__connected_channel_tag\">\n\t\t\t<div className=\"rsk-combobox__connected_channel_tag__channel_type_icon\">\n\t\t\t\t{channel.is_private ? <LockIcon /> : <HashtagIcon />}\n\t\t\t</div>\n\t\t\t<div className=\"rsk-combobox__connected_channel_tag__text\">\n\t\t\t\t{channel.name}\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\tonClick={() => updateConnectedChannels(channel.id)}\n\t\t\t\tclassName=\"rsk-combobox__connected_channel_tag__delete_button\"\n\t\t\t>\n\t\t\t\t<CloseIcon />\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n\nexport default SlackConnectedChannelTag;\n"],"names":["SlackConnectedChannelTag","channel","updateConnectedChannels","jsxs","jsx","LockIcon","HashtagIcon","CloseIcon"],"mappings":"oLAYA,MAAMA,EAA2B,CAAC,CACjC,QAAAC,EACA,wBAAAC,CACD,IAEEC,EAAA,KAAC,MAAI,CAAA,UAAU,sCACd,SAAA,CAACC,EAAA,IAAA,MAAA,CAAI,UAAU,yDACb,SAAQH,EAAA,iBAAcI,EAAS,CAAA,CAAA,EAAMD,EAAA,IAAAE,EAAA,CAAY,CAAA,EACnD,EACCF,EAAA,IAAA,MAAA,CAAI,UAAU,4CACb,WAAQ,KACV,EACAA,EAAA,IAAC,SAAA,CACA,QAAS,IAAMF,EAAwBD,EAAQ,EAAE,EACjD,UAAU,qDAEV,eAACM,EAAU,EAAA,CAAA,CACZ,CACD,CAAA,CAAA"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),c=require("./SlackConnectedChannelTag.js");const _=({connectedChannels:t,slackChannels:i,updateConnectedChannels:o})=>{const s=new Map(t==null?void 0:t.map(r=>[r.channel_id,r])),u=(i==null?void 0:i.filter(r=>s.has(r.id||"")))||[];return e.jsx("div",{className:"rsk-combobox__connected_channel_tag_list",children:u.map(r=>e.jsx(c,{channel:r,updateConnectedChannels:o},r.id))})};module.exports=_;
+//# sourceMappingURL=SlackConnectedChannelTagList.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.js.map

@@ -0,0 +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\ntype Props = {\n\tconnectedChannels: SlackChannelConnection[] | null;\n\tslackChannels: SlackChannel[];\n\tupdateConnectedChannels: (channelId: string) => void;\n}\n\nconst SlackConnectedChannelTagList = ({\n\tconnectedChannels,\n\tslackChannels,\n\tupdateConnectedChannels,\n}: Props) => {\n\tconst connectedChannelsMap = new Map(\n\t\tconnectedChannels?.map((channel) => [channel.channel_id, channel]),\n\t);\n\n\tconst channels =\n\t\tslackChannels?.filter((slackChannel) => {\n\t\t\treturn connectedChannelsMap.has(slackChannel.id || \"\");\n\t\t}) || [];\n\n\treturn (\n\t\t<div className=\"rsk-combobox__connected_channel_tag_list\">\n\t\t\t{channels.map((channel) => (\n\t\t\t\t<SlackConnectedChannelTag key={channel.id} channel={channel} updateConnectedChannels={updateConnectedChannels} />\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default SlackConnectedChannelTagList;\n"],"names":["SlackConnectedChannelTagList","connectedChannels","slackChannels","updateConnectedChannels","connectedChannelsMap","channel","channels","slackChannel","jsx","SlackConnectedChannelTag"],"mappings":"wHAWA,MAAMA,EAA+B,CAAC,CACrC,kBAAAC,EACA,cAAAC,EACA,wBAAAC,CACD,IAAa,CACZ,MAAMC,EAAuB,IAAI,IAChCH,GAAA,YAAAA,EAAmB,IAAKI,GAAY,CAACA,EAAQ,WAAYA,CAAO,EAAC,EAG5DC,GACLJ,GAAA,YAAAA,EAAe,OAAQK,GACfH,EAAqB,IAAIG,EAAa,IAAM,EAAE,KAChD,CAAA,EAEP,OACEC,EAAA,IAAA,MAAA,CAAI,UAAU,2CACb,WAAS,IAAKH,GACdG,EAAAA,IAACC,GAA0C,QAAAJ,EAAkB,wBAAAF,CAAA,EAA9BE,EAAQ,EAAwE,CAC/G,CACF,CAAA,CAEF"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.js

@@ -0,0 +1,2 @@
+"use strict";const L=require("react/jsx-runtime"),s=()=>L.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:L.jsx("path",{d:"M8.53037 7.46917L7.99988 7.99967L8.53054 8.53L11.501 11.4986L11.5014 11.4995L11.501 11.5004L11.5001 11.5008L11.4992 11.5004L8.53041 8.53167L8.00008 8.00134L7.46975 8.53167L4.501 11.5004L4.50008 11.5008L4.49916 11.5004L4.49878 11.4995L4.49916 11.4986L7.46791 8.52983L7.99824 7.9995L7.46791 7.46917L4.49916 4.50042L4.49878 4.4995L4.49916 4.49858L4.50008 4.4982L4.501 4.49858L7.46975 7.46733L8.00008 7.99766L8.53041 7.46733L11.4987 4.49905L11.4991 4.49886L11.4996 4.49905L11.4998 4.4995L11.4996 4.49995L11.4991 4.50042L8.53037 7.46917Z",fill:"#697386",stroke:"#697386",strokeWidth:"1.5"})});module.exports=s;
+//# sourceMappingURL=CloseIcon.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseIcon.js","sources":["../../../../../../../src/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.tsx"],"sourcesContent":["const CloseIcon = () => (\n\t<svg\n\t\twidth=\"16\"\n\t\theight=\"16\"\n\t\tviewBox=\"0 0 16 16\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path\n\t\t\td=\"M8.53037 7.46917L7.99988 7.99967L8.53054 8.53L11.501 11.4986L11.5014 11.4995L11.501 11.5004L11.5001 11.5008L11.4992 11.5004L8.53041 8.53167L8.00008 8.00134L7.46975 8.53167L4.501 11.5004L4.50008 11.5008L4.49916 11.5004L4.49878 11.4995L4.49916 11.4986L7.46791 8.52983L7.99824 7.9995L7.46791 7.46917L4.49916 4.50042L4.49878 4.4995L4.49916 4.49858L4.50008 4.4982L4.501 4.49858L7.46975 7.46733L8.00008 7.99766L8.53041 7.46733L11.4987 4.49905L11.4991 4.49886L11.4996 4.49905L11.4998 4.4995L11.4996 4.49995L11.4991 4.50042L8.53037 7.46917Z\"\n\t\t\tfill=\"#697386\"\n\t\t\tstroke=\"#697386\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t/>\n\t</svg>\n);\n\nexport default CloseIcon;\n"],"names":["CloseIcon","jsx"],"mappings":"kDAAMA,EAAY,IACjBC,EAAA,IAAC,MAAA,CACA,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAA,EAAA,IAAC,OAAA,CACA,EAAE,uhBACF,KAAK,UACL,OAAO,UACP,YAAY,KAAA,CACb,CAAA,CACD"}

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs

@@ -1,80 +1,81 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useTranslations as b, useKnockClient as f, useKnockSlackClient as x, useSlackAuth as L } from "@knocklabs/react-core";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useTranslations as f, useKnockClient as x, useKnockSlackClient as L, useSlackAuth as S } from "@knocklabs/react-core";
 import { useEffect as C } from "react";
 
-import { SlackIcon as a } from "../SlackIcon/SlackIcon.mjs";
+import { SlackIcon as l } from "../SlackIcon/SlackIcon.mjs";
 
 const m = (d) => {
-  const s = window.screenLeft ?? window.screenX, c = window.screenTop ?? window.screenY, e = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, o = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, i = e / 2 - 600 / 2 + s, r = `width=600,height=800,top=${o / 2 - 800 / 2 + c},left=${i}`;
-  window.open(d, "Slack OAuth", r);
-}, H = ({
+  const n = window.screenLeft ?? window.screenX, r = window.screenTop ?? window.screenY, c = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, e = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, o = c / 2 - 600 / 2 + n, u = `width=600,height=800,top=${e / 2 - 800 / 2 + r},left=${o}`;
+  window.open(d, "Slack OAuth", u);
+}, T = ({
   slackClientId: d,
-  redirectUrl: u
+  redirectUrl: k,
+  onAuthenticationComplete: s
 }) => {
-  const { t: n } = b(), s = f(), {
+  const { t: n } = f(), r = x(), {
     setConnectionStatus: c,
     connectionStatus: e,
     setActionLabel: o,
-    actionLabel: i,
-    errorLabel: k
-  } = x(), { buildSlackAuthUrl: r, disconnectFromSlack: w } = L(
+    actionLabel: h,
+    errorLabel: u
+  } = L(), { buildSlackAuthUrl: p, disconnectFromSlack: _ } = S(
     d,
-    u
+    k
   );
   C(() => {
-    const p = (h) => {
-      if (h.origin === s.host)
+    const w = (i) => {
+      if (i.origin === r.host)
         try {
-          h.data === "authComplete" && c("connected"), h.data === "authFailed" && c("error");
+          i.data === "authComplete" && c("connected"), i.data === "authFailed" && c("error"), s && s(i.data);
         } catch {
           c("error");
         }
     };
-    return window.addEventListener("message", p, !1), () => {
-      window.removeEventListener("message", p);
+    return window.addEventListener("message", w, !1), () => {
+      window.removeEventListener("message", w);
     };
-  }, [s.host, c]);
-  const _ = n("slackDisconnect") || null, g = n("slackReconnect") || null;
-  return e === "connecting" || e === "disconnecting" ? /* @__PURE__ */ l("div", { className: "rsk-connect__button rsk-connect__button--loading", children: [
-    /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+  }, [r.host, s, c]);
+  const g = n("slackDisconnect") || null, b = n("slackReconnect") || null;
+  return e === "connecting" || e === "disconnecting" ? /* @__PURE__ */ a("div", { className: "rsk-connect__button rsk-connect__button--loading", children: [
+    /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
     /* @__PURE__ */ t("span", { children: n(e === "connecting" ? "slackConnecting" : "slackDisconnecting") })
-  ] }) : e === "error" ? /* @__PURE__ */ l(
+  ] }) : e === "error" ? /* @__PURE__ */ a(
     "button",
     {
-      onClick: () => m(r()),
+      onClick: () => m(p()),
       className: "rsk-connect__button rsk-connect__button--error",
-      onMouseEnter: () => o(g),
+      onMouseEnter: () => o(b),
       onMouseLeave: () => o(null),
       children: [
-        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
-        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--error", children: i || k || n("slackError") })
+        /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--error", children: h || u || n("slackError") })
       ]
     }
-  ) : e === "disconnected" ? /* @__PURE__ */ l(
+  ) : e === "disconnected" ? /* @__PURE__ */ a(
     "button",
     {
-      onClick: () => m(r()),
+      onClick: () => m(p()),
       className: "rsk-connect__button rsk-connect__button--disconnected",
       children: [
-        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
         /* @__PURE__ */ t("span", { children: n("slackConnect") })
       ]
     }
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ a(
     "button",
     {
-      onClick: w,
+      onClick: _,
       className: "rsk-connect__button rsk-connect__button--connected",
-      onMouseEnter: () => o(_),
+      onMouseEnter: () => o(g),
       onMouseLeave: () => o(null),
       children: [
-        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
-        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--connected", children: i || n("slackConnected") })
+        /* @__PURE__ */ t(l, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--connected", children: h || n("slackConnected") })
       ]
     }
   );
 };
 export {
-  H as SlackAuthButton
+  T as SlackAuthButton
 };
 //# sourceMappingURL=SlackAuthButton.mjs.map

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthButton.mjs","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\ntype Props = {\n  slackClientId: string;\n  redirectUrl?: string;\n};\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: React.FC<Props> = ({\n  slackClientId,\n  redirectUrl,\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      } 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, setConnectionStatus]);\n\nconst disconnectLabel = t(\"slackDisconnect\") || null\nconst 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","screenTop","innerWidth","innerHeight","left","features","SlackAuthButton","slackClientId","redirectUrl","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":";;;;;;AAkBA,MAAMA,IAAsB,CAACC,MAAgB;AAIrC,QAAAC,IAAa,OAAO,cAAc,OAAO,SACzCC,IAAY,OAAO,aAAa,OAAO,SAEvCC,IACJ,OAAO,cAAc,SAAS,gBAAgB,eAAe,OAAO,OAChEC,IACJ,OAAO,eACP,SAAS,gBAAgB,gBACzB,OAAO,QAEHC,IAAOF,IAAa,IAAI,MAAQ,IAAIF,GAIpCK,IAAW,4BAHLF,IAAc,IAAI,MAAS,IAAIF,CAGgB,SAASG,CAAI;AAEjE,SAAA,KAAKL,GAAK,eAAeM,CAAQ;AAC1C,GAEaC,IAAmC,CAAC;AAAA,EAC/C,eAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC,KACRC,IAAQC,KAER;AAAA,IACJ,qBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,MACEC,EAAoB,GAElB,EAAE,mBAAAC,GAAmB,qBAAAC,EAAA,IAAwBC;AAAA,IACjDd;AAAA,IACAC;AAAA,EAAA;AAGF,EAAAc,EAAU,MAAM;AACR,UAAAC,IAAiB,CAACC,MAAwB;AAC1C,UAAAA,EAAM,WAAWb,EAAM;AAIvB,YAAA;AACE,UAAAa,EAAM,SAAS,kBACjBX,EAAoB,WAAW,GAG7BW,EAAM,SAAS,gBACjBX,EAAoB,OAAO;AAAA,gBAEf;AACd,UAAAA,EAAoB,OAAO;AAAA,QAC7B;AAAA,IAAA;AAGK,kBAAA,iBAAiB,WAAWU,GAAgB,EAAK,GAGjD,MAAM;AACJ,aAAA,oBAAoB,WAAWA,CAAc;AAAA,IAAA;AAAA,EAErD,GAAA,CAACZ,EAAM,MAAME,CAAmB,CAAC;AAEhC,QAAAY,IAAkBhB,EAAE,iBAAiB,KAAK,MAC1CiB,IAAiBjB,EAAE,gBAAgB,KAAK;AAI1C,SAAAK,MAAqB,gBACrBA,MAAqB,kBAGnB,gBAAAa,EAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,IACtC,gBAAAD,EAAC,UACE,UACGnB,EADkBK,MAAA,eAChB,oBACA,oBADiB,EAEzB,CAAA;AAAA,EACF,EAAA,CAAA,IAKAA,MAAqB,UAErB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM7B,EAAoBqB,GAAmB;AAAA,MACtD,WAAU;AAAA,MACV,cAAc,MAAMJ,EAAeW,CAAc;AAAA,MACjD,cAAc,MAAMX,EAAe,IAAI;AAAA,MAEvC,UAAA;AAAA,QAAA,gBAAAa,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,QACtC,gBAAAD,EAAC,UAAK,WAAU,oCACb,eAAeX,KAAcR,EAAE,YAAY,GAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMFK,MAAqB,iBAErB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM7B,EAAoBqB,GAAmB;AAAA,MACtD,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAS,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,QACrC,gBAAAD,EAAA,QAAA,EAAM,UAAEnB,EAAA,cAAc,EAAE,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAO7B,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASP;AAAA,MACT,WAAU;AAAA,MACV,cAAc,MAAML,EAAeU,CAAe;AAAA,MAClD,cAAc,MAAMV,EAAe,IAAI;AAAA,MAEvC,UAAA;AAAA,QAAA,gBAAAa,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,0BACrC,QAAK,EAAA,WAAU,wCACb,UAAeb,KAAAP,EAAE,gBAAgB,GACpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SlackAuthButton.mjs","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\ntype Props = {\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: React.FC<Props> = ({\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","screenTop","innerWidth","innerHeight","left","features","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":"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"}