@cloudflare/realtimekit-ui 1.0.9-staging.2 → 1.0.9-staging.3

package/dist/components/{p-66bae0d9.js → p-d06d1eac.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, w as writeTask, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage, C as disableSettingSinkId } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { e as defaultIconPack, h as useLanguage, C as disableSettingSinkId } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { d as defineCustomElement$2 } from './p-1391bef0.js';
 import { d as defineCustomElement$1 } from './p-3b29dda1.js';
 

package/dist/components/{p-0abe4b8a.js → p-dab9d3d6.js}

@@ -21,7 +21,7 @@ function alphabeticalSorter(a, b) {
     return a.localeCompare(b);
 }
 /**
- * Generate a unique chat group key used in `<rtk-chat-messages-ui />`
+ * Generate a unique chat group key used in `<rtk-chat /> and <rtk-chat-selector-ui />`
  * @param ids An array of user ids
  * @returns A unique key from the user ids
  */

package/dist/components/{p-01a50790.js → p-e48cd596.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
 import { C as ChatHead } from './p-a54b82e9.js';
 import { a as sanitizeLink } from './p-efabd2ce.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import { g as getExtension, a as getFileSize, d as downloadFile } from './p-47314bc7.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { d as defineCustomElement$2 } from './p-1391bef0.js';
 import { d as defineCustomElement$1 } from './p-3b29dda1.js';
 
@@ -34,10 +34,10 @@ const RtkFileMessage = /*@__PURE__*/ proxyCustomElement(class RtkFileMessage ext
     }
     render() {
         const link = sanitizeLink(this.message.link);
-        return (h(Host, { key: '771fc8ccb2700a3fba83f04676a0c4396c1a8a41' }, !this.isContinued && (h(ChatHead, { key: 'ef2d83897dcae870bb7a2b0eeef397585b873b77', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '841039fcad32f254653bd490a98f268479345b44', class: {
+        return (h(Host, { key: '8796e55e793db9aeb4ede2d57524bc38aa817ddf' }, !this.isContinued && (h(ChatHead, { key: '7018209894272b21e1f5225d7bad92de5107d0d7', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: 'd30878670f4e90b35578ac616761645e5744c7cd', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, h("div", { key: '65e3c8aafa4e9fa55a24264685bb0cf20841048a', class: "file" }, h("div", { key: '1b1e97b1518c5471964ea91889f4500fc0e01e03', class: "file-data" }, h("div", { key: 'ff9d3071b528162f6e796ccb49e2472df2e8d364', class: "name" }, this.message.name), h("div", { key: '1d3ccb1f5bc2a94983de216e77a8ebc0ae07d669', class: "file-data-split" }, h("div", { key: 'ebab32b642e097b3c1c1903269a8d76fbd586f5c', class: "ext" }, getExtension(this.message.name)), h("span", { key: '81ee3600ba18a7689706504befebcf02697a56e7', class: "divider" }), h("div", { key: 'e969a8d6221d8af560a26510c38a92406a18ef2a', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: '482c27659f71cfebf9f88fdf538e32baa6b87073', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '4efaeb927b4ea2010eed09227eb7f511b9253017', icon: this.iconPack.download }))))));
+            }, part: "body" }, h("div", { key: '73ba1a2b1aaacec88930605d5a826d32ad56581e', class: "file" }, h("div", { key: '17234fd57360f3a7953ce898282240e03b94eb58', class: "file-data" }, h("div", { key: '07424973ceeb567efee25cb45eca09792482cd21', class: "name" }, this.message.name), h("div", { key: '255087ceadb46be8da915d2b9134b3922f9a50b7', class: "file-data-split" }, h("div", { key: 'a01185efdf779d87548e1b7d73dfad823dbbd611', class: "ext" }, getExtension(this.message.name)), h("span", { key: 'a129cb26284432bbfad635dc3774309fbadc8fec', class: "divider" }), h("div", { key: '0af8af2f2d18c0a1d72bc5040bdabb1f06209840', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: '522a0378351016927ca644cce5db710336bf348b', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '8d49abfffb8149adc9fd3e9f214b54a1f642edc3', icon: this.iconPack.download }))))));
     }
 }, [0, "rtk-file-message", {
         "message": [16],

package/dist/components/{p-aba9b612.js → p-e732b5ee.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage, H as participantIdentifier, G as getAllConnectedParticipants } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { e as defaultIconPack, h as useLanguage, H as participantIdentifier, G as getAllConnectedParticipants } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { f as formatName, s as shorten } from './p-efabd2ce.js';
-import { d as defineCustomElement$4 } from './p-6fe2233b.js';
+import { d as defineCustomElement$4 } from './p-b1338b4f.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.js';
 import { d as defineCustomElement$1 } from './p-03bdc4c0.js';
 
 const rtkBreakoutRoomParticipantsCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;height:100%;flex-direction:column;font-size:14px}:host input[type='checkbox']{margin:var(--rtk-space-0, 0px);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--rtk-border-radius-sm, 4px);position:relative;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);border-width:var(--rtk-border-width-sm, 1px);border-style:solid;border-color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}:host input[type='checkbox']:checked{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host input[type='checkbox']:checked::before{position:absolute;top:1px;left:1px;height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px);background-color:rgb(var(--rtk-colors-text-1000, 255 255 255));content:'';clip-path:polygon(5% 60%, 35% 93%, 100% 19%, 86% 4%, 36% 62%, 19% 44%)}*{box-sizing:border-box}.participants{margin-top:var(--rtk-space-2, 8px);padding:var(--rtk-space-0, 0px)}.ctr{box-sizing:border-box;padding-top:var(--rtk-space-0, 0px);padding-bottom:var(--rtk-space-0, 0px);overflow-y:auto;flex-grow:1;flex-basis:0}.empty-message{margin-top:var(--rtk-space-10, 40px);margin-bottom:var(--rtk-space-10, 40px);text-align:center;font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.empty-room{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--rtk-space-2, 8px);height:100%;text-align:center;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.empty-room rtk-icon{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}.empty-room p{font-size:16px;font-weight:500;margin:var(--rtk-space-0, 0px)}.empty-room span{font-size:12px;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.search-wrapper{margin-bottom:var(--rtk-space-1, 4px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.search{position:sticky;box-sizing:border-box;display:flex;align-items:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);height:var(--rtk-space-8, 32px)}.search .search-icon{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.search input{box-sizing:border-box;width:100%;padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:inherit;color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);font-size:14px}.search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.header{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-1\\.5, 6px);height:var(--rtk-space-9, 36px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-0\\.5, 2px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));display:flex;align-items:center;justify-content:space-between}.title-wrapper{display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.participant-count{display:flex;align-items:center;font-size:14px}.participant-count rtk-icon{margin-right:var(--rtk-space-0\\.5, 2px);width:var(--rtk-space-3, 12px)}.participant-item{display:flex;align-items:center;justify-content:space-between;margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);cursor:pointer}.participant-item input.hide-checkbox{display:none}.participant-item input:checked{display:inline-block}.dragging input{display:none}.participant-item:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.participant-item:hover input{display:inline-block}.peer-ui-container{position:relative;display:flex;align-items:center;gap:var(--rtk-space-2, 8px);height:var(--rtk-space-10, 40px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.peer-ui-container rtk-avatar{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.peer-ui-container .name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}";

package/dist/components/{p-22d9d3ff.js → p-e87b68de.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import { b as getPreference, s as setPreference } from './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$4 } from './p-3438fd71.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$4 } from './p-6756b222.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-a09aefba.js';
-import { d as defineCustomElement$1 } from './p-ddb2df62.js';
+import { d as defineCustomElement$2 } from './p-7481511c.js';
+import { d as defineCustomElement$1 } from './p-2ea7652f.js';
 
 const rtkSettingsVideoCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5)}:host{display:flex;width:100%;flex-direction:column}.rtk-select{width:100%;text-overflow:ellipsis}rtk-participant-tile{margin-left:auto;margin-right:auto;margin-bottom:var(--rtk-space-4, 16px);max-width:100%}#icon{padding-bottom:var(--rtk-space-1, 4px)}.apply-button{height:var(--rtk-space-10, 40px)}label{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.row{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.section{display:flex;flex-direction:column}@media only screen and (max-height: 480px) and (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}.section[part='tile-preview']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);max-height:90%;max-width:40%;flex-shrink:1}.section[part='video-settings']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);flex-grow:1}}";
 const RtkSettingsVideoStyle0 = rtkSettingsVideoCss;

package/dist/components/{p-22a734a8.js → p-eb7df0eb.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$5 } from './p-6fe2233b.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$5 } from './p-b1338b4f.js';
 import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-f5f0b499.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
-import { d as defineCustomElement$1 } from './p-93e1439e.js';
+import { d as defineCustomElement$3 } from './p-560e7a4f.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.js';
+import { d as defineCustomElement$1 } from './p-566c1155.js';
 import { d as debounce } from './p-1dca17d1.js';
 
 const rtkChannelSelectorViewCss = ".scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n  position: relative;\n  z-index: 10;\n  height: var(--rtk-space-12, 48px);\n  min-height: 48px;\n}\n\n.dropdown-trigger {\n  height: 100%;\n  width: 100%;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  cursor: pointer;\n  position: absolute;\n  z-index: 20;\n}\n\n.dropdown-trigger span {\n  display: flex;\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.dropdown-trigger rtk-icon {\n  margin-left: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  flex-shrink: 0;\n}\n\n@container chatcontainer (height < 360px) {\n  .dropdown-trigger {\n    padding: var(--rtk-space-2, 8px);\n  }\n  .dropdown {\n    top: var(--rtk-space-8, 32px) !important;\n  }\n  .search-container {\n    padding-left: var(--rtk-space-0, 0px) !important;\n    padding-right: var(--rtk-space-0, 0px) !important;\n    padding-top: var(--rtk-space-0, 0px) !important;\n    padding-bottom: var(--rtk-space-0, 0px) !important;\n  }\n  input {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-none, 0) !important;\n  }\n  .channel {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-sm, 4px) !important;\n  }\n  .avatar-icon {\n    height: var(--rtk-space-3, 12px) !important;\n    width: var(--rtk-space-3, 12px) !important;\n    padding: var(--rtk-space-1, 4px) !important;\n  }\n\n  rtk-avatar {\n    height: var(--rtk-space-5, 20px) !important;\n    width: var(--rtk-space-5, 20px) !important;\n  }\n}\n\n.dropdown {\n  position: absolute;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n  top: var(--rtk-space-12, 48px);\n  z-index: 10;\n  animation: 0.3s slide-down ease;\n}\n\n.dropdown .channels-container {\n  max-height: var(--rtk-space-80, 320px);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n}\n\n.list .channel .channel-data {\n  align-items: flex-start;\n}\n\n.unread-count {\n  display: flex;\n  justify-content: center;\n  height: var(--rtk-space-5, 20px);\n  min-width: var(--rtk-space-3, 12px);\n  border-radius: 9999px;\n  padding-left: var(--rtk-space-1, 4px);\n  padding-right: var(--rtk-space-1, 4px);\n  font-size: 12px;\n  line-height: 1.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\ninput {\n  height: var(--rtk-space-9, 36px);\n  width: 100%;\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.search-container {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  align-items: center;\n  padding-top: var(--rtk-space-3, 12px);\n  padding-bottom: var(--rtk-space-3, 12px);\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.search-container rtk-icon {\n  margin-left: calc(var(--rtk-space-8, 32px) * -1);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channels-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rtk-space-1, 4px);\n  padding: var(--rtk-space-2, 8px);\n  flex: 1 1 auto;\n  overflow-y: auto;\n}\n\n.channel {\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  border-radius: var(--rtk-border-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  height: var(--rtk-space-16, 64px);\n  width: 100%;\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.channel:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.channel .channel-data {\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.channel .name {\n  font-size: 16px;\n}\n\n.channel .name, \n  .channel .last-message {\n  max-width: var(--rtk-space-40, 160px);\n  text-align: left;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.channel .no-message {\n  font-style: italic;\n}\n\n.channel rtk-avatar {\n  height: var(--rtk-space-12, 48px);\n  width: var(--rtk-space-12, 48px);\n  overflow: clip;\n  border-radius: 9999px;\n  font-size: 14px;\n}\n\n.channel .avatar-icon {\n  height: var(--rtk-space-6, 24px);\n  width: var(--rtk-space-6, 24px);\n  padding: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n  overflow: clip;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.channel time, \n  .channel .last-message {\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channel.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.channel.active .unread-count {\n  background-color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));\n}\n\n.channel.active time {\n  color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n}\n\n.channel.active .last-message {\n  color: rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)));\n}\n\n.channel.active rtk-avatar {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.col {\n  gap: var(--rtk-space-1, 4px);\n  display: flex;\n  flex-direction: column;\n}\n\n.channel-meta {\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n@keyframes slide-down {\n  from {\n    transform: translateY(-50px);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";

package/dist/components/{p-c40166a9.js → p-ef71b75e.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage, e as defaultIconPack, P as PlayerState, N as getLivestreamViewerAllowedQualityLevels, L as showLivestream } from './p-037e572f.js';
+import { h as useLanguage, e as defaultIconPack, P as PlayerState, N as getLivestreamViewerAllowedQualityLevels, M as showLivestream } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { d as defineCustomElement$5 } from './p-1391bef0.js';
-import { d as defineCustomElement$4 } from './p-9730c398.js';
-import { d as defineCustomElement$3 } from './p-897a04be.js';
+import { d as defineCustomElement$4 } from './p-2590f470.js';
+import { d as defineCustomElement$3 } from './p-a4b26604.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
-import { d as defineCustomElement$1 } from './p-34b580c9.js';
+import { d as defineCustomElement$1 } from './p-b6ee1a32.js';
 
 // https://caniuse.com/mdn-javascript_builtins_number_isfinite
 const isFiniteNumber = Number.isFinite || function (value) {

package/dist/components/{p-00ebd1dc.js → p-fa7412e2.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
 import { d as defineCustomElement$3 } from './p-1391bef0.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';

package/dist/components/{p-1986022b.js → p-fc21299d.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 
 const rtkMenuItemCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);cursor:pointer;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px}::slotted([slot='start']){margin-right:var(--rtk-space-2, 8px)}::slotted([slot='end']){margin-left:var(--rtk-space-2, 8px)}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host(.red){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
 const RtkMenuItemStyle0 = rtkMenuItemCss;

package/dist/components/{p-3051f5f5.js → p-fdb67d1f.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { s as shorten, f as formatName, g as getInitials } from './p-efabd2ce.js';
 import { d as defineCustomElement$1 } from './p-03bdc4c0.js';
 

package/dist/components/rtk-ai-toggle.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$4 } from './p-9730c398.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$4 } from './p-2590f470.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.js';
 
 const rtkAiToggleCss = ":host{display:block}:host([data-hidden]){display:none}";
 const RtkAiToggleStyle0 = rtkAiToggleCss;

package/dist/components/rtk-ai-transcriptions.js

@@ -1,4 +1,4 @@
-import { R as RtkAiTranscriptions$1, d as defineCustomElement$1 } from './p-7f0ee3c6.js';
+import { R as RtkAiTranscriptions$1, d as defineCustomElement$1 } from './p-024ef28a.js';
 
 const RtkAiTranscriptions = RtkAiTranscriptions$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-ai.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$4 } from './p-7f0ee3c6.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$4 } from './p-024ef28a.js';
 import { d as defineCustomElement$3 } from './p-1391bef0.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
 

package/dist/components/rtk-audio-grid.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { R as Render } from './p-60fdbd75.js';
 
 const rtkAudioGridCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{position:relative;height:100%;width:100%;box-sizing:border-box}.content{position:relative;display:flex;height:100%;width:100%;flex-direction:column;overflow-y:auto}.waitlist-area{display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.listening-title{text-align:center;margin-top:var(--rtk-space-5, 20px);margin-bottom:var(--rtk-space-4, 16px)}.waitlist-grid{flex:1 1 0%}.grid{box-sizing:border-box;flex:1 1 0%;gap:var(--rtk-space-6, 24px);display:flex;align-content:center;justify-content:center;flex-wrap:wrap}:host([size='md']) .grid{gap:var(--rtk-space-4, 16px)}:host([size='sm']) .grid{gap:var(--rtk-space-3, 12px)}rtk-audio-tile{aspect-ratio:1 / 1;flex:none;width:calc(20%);max-width:var(--rtk-space-48, 192px);transition:all 0.3s}rtk-audio-tile[size='md']{width:100%;max-width:var(--rtk-space-36, 144px)}rtk-audio-tile[size='sm']{width:100%;max-width:var(--rtk-space-24, 96px)}";

package/dist/components/rtk-audio-tile.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
 import { h as hark } from './p-3f882e7c.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$5 } from './p-6fe2233b.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$5 } from './p-b1338b4f.js';
 import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-72346e7f.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$3 } from './p-afe77b50.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.js';
 
 const rtkAudioTileCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{box-sizing:border-box;display:flex;flex-direction:column}.avatar-ctr{box-sizing:border-box;width:100%;flex:1 1 0%;padding:var(--rtk-space-1\\.5, 6px);border:2px solid transparent;border-radius:calc(var(--rtk-border-radius-xl, 40px) + var(--rtk-space-1\\.5, 6px))}.avatar-ctr.speaking{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity));transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.bar-0{box-shadow:none}.bar-1{box-shadow:0 0 4px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-2{box-shadow:0 0 8px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-3{box-shadow:0 0 16px 1px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-4{box-shadow:0 0 20px 3px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-5{box-shadow:0 0 24px 6px rgb(var(--rtk-colors-brand-500, 33 96 253))}rtk-avatar{aspect-ratio:1 / 1;height:100%;width:100%;position:relative;border-radius:var(--rtk-border-radius-xl, 40px)}rtk-name-tag{display:block;height:var(--rtk-space-10, 40px);width:100%;text-align:center;line-height:2.5rem}:host([size='sm']) .avatar-ctr{border-radius:calc(var(--rtk-border-radius-lg, 12px) + var(--rtk-space-1\\.5, 6px))}:host([size='sm']) rtk-name-tag{height:var(--rtk-space-7, 28px);line-height:1.75rem}:host([size='sm']) rtk-avatar{border-radius:var(--rtk-border-radius-lg, 12px)}.mic-icon{position:absolute;bottom:calc(var(--rtk-space-1, 4px) * -1);right:calc(var(--rtk-space-1, 4px) * -1);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));padding:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.mic-icon rtk-icon{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}:host([size='sm']) .mic-icon rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}:host([size='md']) .mic-icon rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}";
 const RtkAudioTileStyle0 = rtkAudioTileCss;

package/dist/components/rtk-audio-visualizer.js

@@ -1,4 +1,4 @@
-import { R as RtkAudioVisualizer$1, d as defineCustomElement$1 } from './p-f734a4cf.js';
+import { R as RtkAudioVisualizer$1, d as defineCustomElement$1 } from './p-a10b9faa.js';
 
 const RtkAudioVisualizer = RtkAudioVisualizer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-avatar.js

@@ -1,4 +1,4 @@
-import { R as RtkAvatar$1, d as defineCustomElement$1 } from './p-6fe2233b.js';
+import { R as RtkAvatar$1, d as defineCustomElement$1 } from './p-b1338b4f.js';
 
 const RtkAvatar = RtkAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-breakout-room-manager.js

@@ -1,4 +1,4 @@
-import { R as RtkBreakoutRoomManager$1, d as defineCustomElement$1 } from './p-e2e22bf8.js';
+import { R as RtkBreakoutRoomManager$1, d as defineCustomElement$1 } from './p-b397a600.js';
 
 const RtkBreakoutRoomManager = RtkBreakoutRoomManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-breakout-room-participants.js

@@ -1,4 +1,4 @@
-import { R as RtkBreakoutRoomParticipants$1, d as defineCustomElement$1 } from './p-aba9b612.js';
+import { R as RtkBreakoutRoomParticipants$1, d as defineCustomElement$1 } from './p-e732b5ee.js';
 
 const RtkBreakoutRoomParticipants = RtkBreakoutRoomParticipants$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-breakout-rooms-manager.js

@@ -1,4 +1,4 @@
-import { R as RtkBreakoutRoomsManager$1, d as defineCustomElement$1 } from './p-fb46d041.js';
+import { R as RtkBreakoutRoomsManager$1, d as defineCustomElement$1 } from './p-9c2c0760.js';
 
 const RtkBreakoutRoomsManager = RtkBreakoutRoomsManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-breakout-rooms-toggle.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage, J as canToggleBreakout } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$4 } from './p-9730c398.js';
+import { e as defaultIconPack, h as useLanguage, J as canToggleBreakout } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$4 } from './p-2590f470.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.js';
 
 const rtkBreakoutRoomsToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}";
 const RtkBreakoutRoomsToggleStyle0 = rtkBreakoutRoomsToggleCss;

package/dist/components/rtk-broadcast-message-modal.js

@@ -1,4 +1,4 @@
-import { R as RtkBroadcastMessageModal$1, d as defineCustomElement$1 } from './p-511ed3f8.js';
+import { R as RtkBroadcastMessageModal$1, d as defineCustomElement$1 } from './p-498c01a6.js';
 
 const RtkBroadcastMessageModal = RtkBroadcastMessageModal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-camera-selector.js

@@ -1,4 +1,4 @@
-import { R as RtkCameraSelector$1, d as defineCustomElement$1 } from './p-3438fd71.js';
+import { R as RtkCameraSelector$1, d as defineCustomElement$1 } from './p-6756b222.js';
 
 const RtkCameraSelector = RtkCameraSelector$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-camera-toggle.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$5 } from './p-9730c398.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$5 } from './p-2590f470.js';
 import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-34b580c9.js';
+import { d as defineCustomElement$3 } from './p-b6ee1a32.js';
 import { d as defineCustomElement$2 } from './p-03bdc4c0.js';
 
 const rtkCameraToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}:host([data-hidden]){display:none}";

package/dist/components/rtk-caption-toggle.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$4 } from './p-9730c398.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$4 } from './p-2590f470.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.js';
 
 const rtkCaptionToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}";
 const RtkCaptionToggleStyle0 = rtkCaptionToggleCss;

package/dist/components/rtk-channel-creator.js

@@ -1,4 +1,212 @@
-import { R as RtkChannelCreator$1, d as defineCustomElement$1 } from './p-c9a7cf06.js';
+import { p as proxyCustomElement, H, d as createEvent, w as writeTask, f as forceUpdate, h, e as Host } from './p-c3592601.js';
+import { h as useLanguage, e as defaultIconPack } from './p-7fc0dc2f.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$5 } from './p-b1338b4f.js';
+import { d as defineCustomElement$4 } from './p-1391bef0.js';
+import { d as defineCustomElement$3 } from './p-3b29dda1.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.js';
+
+const rtkChannelCreatorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));display:flex;flex-direction:column;width:var(--rtk-space-96, 384px);padding-left:var(--rtk-space-9, 36px);padding-right:var(--rtk-space-9, 36px);padding-top:var(--rtk-space-10, 40px);padding-bottom:var(--rtk-space-10, 40px)}header{margin-bottom:var(--rtk-space-8, 32px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px);font-size:24px;font-weight:600}.channel-name-input{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-3, 12px);font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.25;outline:2px solid transparent;outline-offset:2px}.channel-name-input:focus{outline-width:2px;outline-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}footer{margin-top:var(--rtk-space-5, 20px);display:flex;justify-content:flex-end}.member{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding:var(--rtk-space-2, 8px)}.member rtk-avatar{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.input-container{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.25;outline:2px solid transparent;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5);border-radius:var(--rtk-border-radius-sm, 4px)}.input-container .members{margin:var(--rtk-space-0, 0px);max-height:var(--rtk-space-28, 112px);border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);list-style-type:none;display:flex;flex-wrap:wrap;gap:var(--rtk-space-1, 4px);cursor:text;font-size:16px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));overflow-y:auto;min-height:var(--rtk-space-7, 28px)}.input-container .pill{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.input-container .pill rtk-avatar{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);font-size:14px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.input-container .pill span{max-width:var(--rtk-space-32, 128px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-container .pill rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.input-container input{width:var(--rtk-space-24, 96px);border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-1, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;font-size:16px;line-height:1.25rem}.input-container input.wide-input{width:100%}.search-results{margin:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-1, 4px);max-height:var(--rtk-space-28, 112px);width:100%;padding:var(--rtk-space-0, 0px);position:absolute;list-style-type:none;overflow-y:auto;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-md, 8px);--tw-border-spacing-x:var(--rtk-space-2, 8px);--tw-border-spacing-y:var(--rtk-space-2, 8px);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-style:solid;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}.search-results .member{cursor:pointer}.search-results .member rtk-avatar{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.search-results .member:hover,.search-results .member.selected{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}";
+const RtkChannelCreatorStyle0 = rtkChannelCreatorCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkChannelCreator$1 = /*@__PURE__*/ proxyCustomElement(class RtkChannelCreator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.switchChannel = createEvent(this, "switchChannel", 7);
+        /** Language */
+        this.t = useLanguage();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        this.channelName = '';
+        this.searchQuery = '';
+        this.step = 1;
+        this.loading = false;
+        this.selectedMemberIds = new Set();
+        this.focusedMemberIndex = -1;
+        this.showAllMembersList = false;
+        this.allMembers = new Map();
+        this.inputTextRef = null;
+        this.searchInputTextRef = null;
+        this.focusOnSearch = (selectText = false) => {
+            this.focusedMemberIndex = -1;
+            writeTask(() => {
+                var _a, _b;
+                (_a = this.searchInputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+                if (selectText)
+                    (_b = this.searchInputTextRef) === null || _b === void 0 ? void 0 : _b.select();
+            });
+        };
+        this.onClickHandler = async () => {
+            if (this.channelName.length === 0)
+                return;
+            if (this.step === 1) {
+                const members = this.meeting.participants.all.toArray();
+                const selfId = this.meeting.self.userId;
+                const nonSelfMembers = members.filter((member) => member.userId !== selfId);
+                nonSelfMembers.forEach((member) => this.allMembers.set(member.userId, member));
+                this.step = 2;
+                this.focusOnSearch();
+                return;
+            }
+            // step 2 - add members and create channel
+            await this.createChannel();
+        };
+        this.createChannel = async () => {
+            const members = Array.from(this.selectedMemberIds);
+            const newChannel = await this.meeting.chat.createChannel(this.channelName, members, {
+                displayPictureUrl: '',
+                visibility: 'public',
+                isDirectMessage: false,
+            });
+            this.switchChannel.emit(newChannel.id);
+            this.stateUpdate.emit({ activeChannelCreator: false });
+        };
+        this.onMemberAdd = (id) => {
+            this.showAllMembersList = false;
+            this.selectedMemberIds.add(id);
+            this.searchQuery = '';
+            this.focusOnSearch();
+        };
+        this.keyDownHandler = (e, filteredMembers) => {
+            if (e.key === 'ArrowDown') {
+                this.focusedMemberIndex = Math.min(this.focusedMemberIndex + 1, filteredMembers.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                if (this.focusedMemberIndex === -1)
+                    return;
+                if (this.focusedMemberIndex === 0) {
+                    this.focusOnSearch(true);
+                    return;
+                }
+                this.focusedMemberIndex = Math.max(this.focusedMemberIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                this.onMemberAdd(filteredMembers[this.focusedMemberIndex].userId);
+            }
+            else if (e.key === 'Backspace') {
+                if (this.searchQuery.length !== 0)
+                    return;
+                if (this.selectedMemberIds.size === 0)
+                    return;
+                const lastMemberId = Array.from(this.selectedMemberIds.values()).at(-1);
+                this.selectedMemberIds.delete(lastMemberId);
+                forceUpdate(this.$el);
+            }
+        };
+        this.renderMemberSelector = () => {
+            const filteredMembers = Array.from(this.allMembers.values()).filter((member) => !this.selectedMemberIds.has(member.userId) &&
+                member.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
+            const selectedMembers = Array.from(this.selectedMemberIds.values()).map((id) => this.allMembers.get(id));
+            const disableInput = this.selectedMemberIds.size === this.allMembers.size;
+            return (h("div", { class: "input-container" }, h("ul", { class: "members scrollbar", onClick: () => {
+                    var _a;
+                    (_a = this.searchInputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+                } }, selectedMembers.map((member) => (h("li", { class: "pill" }, h("rtk-avatar", { participant: {
+                    name: member.name,
+                    picture: member.picture,
+                }, size: "sm" }), h("span", null, member.name), h("rtk-icon", { icon: this.iconPack.dismiss, onClick: () => {
+                    this.selectedMemberIds.delete(member.userId);
+                    forceUpdate(this.$el);
+                    this.focusOnSearch();
+                } })))), !disableInput && (h("input", { type: "text", ref: (el) => (this.searchInputTextRef = el), value: this.searchQuery, placeholder: this.selectedMemberIds.size === 0 ? this.t('chat.member_name') : '', class: {
+                    'wide-input': this.selectedMemberIds.size === 0,
+                }, onInput: (e) => {
+                    this.searchQuery = e.target.value.trim();
+                }, onClick: () => {
+                    this.showAllMembersList = !this.showAllMembersList;
+                }, onKeyDown: (e) => this.keyDownHandler(e, filteredMembers) }))), (this.searchQuery.length !== 0 || this.showAllMembersList) && (h("ul", { class: "search-results" }, filteredMembers.map((member, index) => (h("li", { class: { member: true, selected: index === this.focusedMemberIndex }, onClick: () => this.onMemberAdd(member.userId), ref: ($li) => {
+                    if (index === this.focusedMemberIndex) {
+                        writeTask(() => {
+                            if ($li)
+                                $li.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
+                        });
+                    }
+                } }, h("rtk-avatar", { participant: {
+                    name: member.name,
+                    picture: member.picture,
+                }, size: "sm" }), h("span", null, member.name)))), filteredMembers.length === 0 && (h("li", { class: "member" }, h("span", null, this.t('chat.error.empty_results'))))))));
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.inputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h(Host, { key: 'b0d6ee605e9b523d53bcc616d2e91569f25eefb8' }, h("header", { key: '95a37537138ddd6069f445d956bb2fc40d211e0a' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (h("input", { key: '0a91dd51ebddb6d7d153f3650b441b475016941b', class: "channel-name-input", type: "text", placeholder: this.t('chat.channel_name'), ref: (el) => (this.inputTextRef = el), onInput: (e) => {
+                this.channelName = e.target.value.trim();
+            } })), this.step === 2 && this.renderMemberSelector(), h("footer", { key: '18e65d42174a88f7ef34bce3d8ab60ee7a052606' }, h("rtk-button", { key: 'b83ad46229d783ad642b8ae0293f93936353f99c', kind: "button", size: "lg", disabled: this.channelName.length === 0, onClick: this.onClickHandler }, this.step === 1 ? this.t('chat.add_members') : this.t('create')))));
+    }
+    get $el() { return this; }
+    static get style() { return RtkChannelCreatorStyle0; }
+}, [1, "rtk-channel-creator", {
+        "meeting": [16],
+        "t": [16],
+        "iconPack": [16],
+        "channelName": [32],
+        "searchQuery": [32],
+        "step": [32],
+        "loading": [32],
+        "selectedMemberIds": [32],
+        "focusedMemberIndex": [32],
+        "showAllMembersList": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChannelCreator$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelCreator$1.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelCreator$1.prototype, "iconPack", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-channel-creator", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-channel-creator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChannelCreator$1);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const RtkChannelCreator = RtkChannelCreator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-channel-details.js

@@ -1,4 +1,4 @@
-import { R as RtkChannelDetails$1, d as defineCustomElement$1 } from './p-840ef7fe.js';
+import { R as RtkChannelDetails$1, d as defineCustomElement$1 } from './p-724074c4.js';
 
 const RtkChannelDetails = RtkChannelDetails$1;
 const defineCustomElement = defineCustomElement$1;