@cloudflare/realtimekit-ui 1.1.0-staging.1 → 1.1.0-staging.3

package/dist/collection/components/rtk-meeting/rtk-meeting.js

@@ -9,6 +9,7 @@ import { provideRtkDesignSystem } from "../../index";
 import { generateConfig } from "../../utils/config";
 import ResizeObserver from "resize-observer-polyfill";
 import { createPeerStore, uiStore as legacyGlobalUIStore, } from "../../utils/sync-with-store/ui-store";
+import { defaultOverrides } from "../../lib/overrides";
 /**
  * A single component which renders an entire meeting UI.
  *
@@ -68,6 +69,8 @@ export class RtkMeeting {
         this.gridLayout = 'row';
         /** Icon pack */
         this.iconPack = defaultIconPack;
+        /** UI Kit Overrides */
+        this.overrides = defaultOverrides;
         this.handleChangingMeeting = (destinationMeetingId) => {
             const currentStates = (this.peerStore || legacyGlobalUIStore).state.states;
             this.updateStates({
@@ -96,6 +99,7 @@ export class RtkMeeting {
         this.iconPackChanged(this.iconPack);
         this.tChanged(this.t);
         this.configChanged(this.config);
+        this.overridesChanged(this.overrides);
         this.resizeObserver = new ResizeObserver(() => this.handleResize());
         this.resizeObserver.observe(this.host);
         if (this.applyDesignSystem &&
@@ -180,6 +184,7 @@ export class RtkMeeting {
                 iconPack: this.iconPack,
                 t: this.t,
                 providerId: this.providerId,
+                overrides: deepMerge(Object.assign({}, defaultOverrides), this.overrides),
             });
             // Notify components that peer specific store is now available
             document.dispatchEvent(new CustomEvent('rtkPeerStoreReady', {
@@ -251,6 +256,11 @@ export class RtkMeeting {
             provideRtkDesignSystem(document.documentElement, config.designTokens);
         }
     }
+    overridesChanged(overrides) {
+        if (this.peerStore) {
+            this.peerStore.state.overrides = deepMerge(Object.assign({}, defaultOverrides), overrides);
+        }
+    }
     handleResize() {
         this.size = getSize(this.host.clientWidth);
     }
@@ -552,6 +562,30 @@ export class RtkMeeting {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "defaultIconPack"
+            },
+            "overrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Overrides",
+                    "resolved": "Overrides",
+                    "references": {
+                        "Overrides": {
+                            "location": "import",
+                            "path": "../../lib/overrides",
+                            "id": "src/lib/overrides.ts::Overrides"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "UI Kit Overrides"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultOverrides"
             }
         };
     }
@@ -593,6 +627,9 @@ export class RtkMeeting {
             }, {
                 "propName": "config",
                 "methodName": "configChanged"
+            }, {
+                "propName": "overrides",
+                "methodName": "overridesChanged"
             }];
     }
 }

package/dist/collection/components/rtk-menu-item/rtk-menu-item.css

@@ -37,7 +37,12 @@ p {
 
 :host(:hover) {
   --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
+  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
+}
+
+:host(.primary:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));
 }
 
 :host(.red) {

package/dist/collection/components/rtk-menu-item/rtk-menu-item.js

@@ -21,13 +21,15 @@ import { useLanguage } from "../../lib/lang";
  */
 export class RtkMenuItem {
     constructor() {
+        /** Variant */
+        this.menuVariant = 'secondary';
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: 'a5c802aa2cb8cb235dc1e68d54ec9703c57df0b9' }, h("slot", { key: 'b448160fdd220fd814d471ddc08d7f784af10c49', name: "start" }), h("slot", { key: '0b342d2547a7835ea23d1974c3fd1b2e3507e779' }), h("slot", { key: '6670a8ed947d2bd6fb1651e9c6c1cd52f5ca419c', name: "end" })));
+        return (h(Host, { key: '7ae0e75aa59e0ce3b6a919eb258f218d84033bdd', class: { [this.menuVariant]: true } }, h("slot", { key: '4fd6d31e2ecb9f99bdc7442e796c5dadcb8bcf74', name: "start" }), h("slot", { key: '04ef7d82759ff42015480b3cd789d941ffa574f0' }), h("slot", { key: 'ad3c22309470a6b71d6b6b9f0f8b58cde7f76f3c', name: "end" })));
     }
     static get is() { return "rtk-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -68,6 +70,26 @@ export class RtkMenuItem {
                 "attribute": "size",
                 "reflect": true
             },
+            "menuVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "menu-variant",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
             "iconPack": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/rtk-menu-list/rtk-menu-list.css

@@ -17,14 +17,25 @@ p {
   width: -moz-max-content;
   width: max-content;
   flex-direction: column;
-  padding-top: var(--rtk-space-2, 8px);
-  padding-bottom: var(--rtk-space-2, 8px);
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));
+  padding: var(--rtk-space-0, 0px);
   color: rgb(var(--rtk-colors-text-1000, 255 255 255));
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));
   overflow: hidden;
   border-radius: var(--rtk-border-radius-sm, 4px);
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  -webkit-backdrop-filter: blur(60px);
+          backdrop-filter: blur(60px);
+}
+
+:host(.primary) {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));
+  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.3);
 }

package/dist/collection/components/rtk-menu-list/rtk-menu-list.js

@@ -21,11 +21,13 @@ export class RtkMenuList {
     constructor() {
         /** Icon pack */
         this.iconPack = defaultIconPack;
+        /** Variant */
+        this.menuVariant = 'secondary';
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '1357690e48bef0c8c0e953886f1fd7754f0e4e4d' }, h("slot", { key: 'f3a221b7a4d28f53add6b658a0510294a998d6c1' })));
+        return (h(Host, { key: '1dd2702af95e0270488e6be1813b5979bd676697', class: { [this.menuVariant]: true } }, h("slot", { key: 'cbe97d571726800ad4a3e25b8c0e261b9a0cd40a' })));
     }
     static get is() { return "rtk-menu-list"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +67,26 @@ export class RtkMenuList {
                 "setter": false,
                 "defaultValue": "defaultIconPack"
             },
+            "menuVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "menu-variant",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
             "t": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/rtk-message-view/rtk-message-view.css

@@ -112,8 +112,8 @@ p {
 
 rtk-menu {
   position: absolute;
-  right: var(--rtk-space-0, 0px);
-  top: var(--rtk-space-0, 0px);
+  right: var(--rtk-space-1, 4px);
+  top: var(--rtk-space-1, 4px);
   border-radius: var(--rtk-border-radius-lg, 12px);
 }
 
@@ -122,44 +122,42 @@ rtk-menu rtk-icon {
   width: var(--rtk-space-4, 16px);
   cursor: pointer;
 }
+
 .actions {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: var(--rtk-space-2, 8px);
-  padding-bottom: var(--rtk-space-2, 8px);
-  padding-top: var(--rtk-space-1, 4px);
-  padding-right: var(--rtk-space-1, 4px);
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));
+  padding: var(--rtk-space-1, 4px);
   border-radius: var(--rtk-border-radius-md, 8px);
   border-width: var(--rtk-border-width-none, 0);
   border-style: none;
-  background: radial-gradient(
-    at top right,
-    rgb(var(--rtk-colors-brand-300, 73 124 253)) 60%,
-    rgba(255, 255, 255, 0) 80%
-  );
 }
+
 .actions rtk-icon {
   height: var(--rtk-space-4, 16px);
   width: var(--rtk-space-4, 16px);
   color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
 }
-.incoming .actions {
-    background: radial-gradient(
-      at top right,
-      rgb(var(--rtk-colors-background-800, 30 30 30)) 60%,
-      rgba(255, 255, 255, 0) 80%
-    );
-  }
-.incoming .actions rtk-icon {
-  color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));
-}
+
 .incoming rtk-avatar {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
   color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));
 }
 
+.incoming .actions {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));
+}
+
 @media (min-width: 400px) {
   .avatar {
     display: flex;

package/dist/collection/components/rtk-message-view/rtk-message-view.js

@@ -32,10 +32,10 @@ export class RtkMessageView {
         this.iconPack = defaultIconPack;
     }
     renderActions() {
-        return (h("rtk-menu", { placement: "top-end", offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", null, this.actions.map((action) => (h("rtk-menu-item", { onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
+        return (h("rtk-menu", { placement: this.isSelf ? 'bottom-start' : 'bottom-end', offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", { menuVariant: this.isSelf ? 'primary' : 'secondary' }, this.actions.map((action) => (h("rtk-menu-item", { menuVariant: this.isSelf ? 'primary' : 'secondary', onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
     }
     render() {
-        return (h(Host, { key: '61882011f477f816296277a4f2d5622d224e47f0' }, h("div", { key: 'ae21bfc0c499879da6a2167f0cad5203475de696', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: '73b10ebb1dccdc4e2c9258f185eb14f07d11d542', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'e07971bf9d7738fb2dcc015d339a13d5dca7c6f7', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '1e24801f717589e598c4160bea7ab10a59acfcc2', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: '3178f750ad798b7d83508f82ead36ee5407fee4c', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: '056445ef0c557d7d756330df5778ad8bc2d41e60', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '6d5486666ce2238e4387c2621d562b24704a9317' }), !this.hideMetadata && !!this.time && (h("div", { key: '1d4b9bdbb3aaf288dce4b43a31354df3d413b2b4', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+        return (h(Host, { key: '96feddf08120ae0e2aa89e955a16e8e4a43c78fb' }, h("div", { key: '79184165b5312ea52f0cbb57e25cfd4a757fc65f', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'a2ccd72fbec0153282db018fb3473bf10f2176e9', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'ecc9f5f77de0a47dfb5985c6f48e5f117c64b45e', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '3a72dc77c04eeb4d6015bf46dd9cc0bc9f533943', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: '153a94b9fa6b23dac3fe4da62a22cbf66e4e73dc', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: 'a36d44da27ea1a4d18feb91726d22e7adf983914', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '4ef8ca3766b562201e4e4443438c91679f09d471' }), !this.hideMetadata && !!this.time && (h("div", { key: '66754f1dd1a65ebdcda24449475b1f603db3ff1e', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
     static get is() { return "rtk-message-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-ui-provider/rtk-ui-provider.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { createDefaultConfig, useLanguage, defaultIconPack, provideRtkDesignSystem, } from "../../exports";
+import { createDefaultConfig, useLanguage, defaultIconPack, provideRtkDesignSystem, defaultOverrides, } from "../../exports";
 import { uiStore as legacyGlobalUIStore, createPeerStore, } from "../../utils/sync-with-store/ui-store";
 import deepMerge from "lodash-es/merge";
 const LEAVE_ROOM_TIMER = 10000;
@@ -19,6 +19,8 @@ export class RtkUiProvider {
         this.mode = 'fixed';
         /** Whether to show setup screen or not */
         this.showSetupScreen = false;
+        /** UI Kit Overrides */
+        this.overrides = defaultOverrides;
         this.roomJoinedListener = () => {
             this.updateStates({ meeting: 'joined' });
         };
@@ -71,6 +73,7 @@ export class RtkUiProvider {
         this.iconPackChanged(this.iconPack);
         this.tChanged(this.t);
         this.configChanged(this.config);
+        this.overridesChanged(this.overrides);
     }
     disconnectedCallback() {
         window.removeEventListener('rtkError', this.authErrorListener);
@@ -143,6 +146,7 @@ export class RtkUiProvider {
                 iconPack: this.iconPack,
                 t: this.t,
                 providerId: this.providerId,
+                overrides: deepMerge(Object.assign({}, defaultOverrides), this.overrides),
             });
             // Notify components that peer specific store is now available
             document.dispatchEvent(new CustomEvent('rtkPeerStoreReady', {
@@ -199,6 +203,11 @@ export class RtkUiProvider {
             provideRtkDesignSystem(document.documentElement, config.designTokens);
         }
     }
+    overridesChanged(overrides) {
+        if (this.peerStore) {
+            this.peerStore.state.overrides = deepMerge(Object.assign({}, defaultOverrides), overrides);
+        }
+    }
     render() {
         // Don't render children until meeting is properly initialized
         if (!this.meeting) {
@@ -360,6 +369,30 @@ export class RtkUiProvider {
                 "attribute": "show-setup-screen",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "overrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Overrides",
+                    "resolved": "Overrides",
+                    "references": {
+                        "Overrides": {
+                            "location": "import",
+                            "path": "../../exports",
+                            "id": "src/exports.ts::Overrides"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "UI Kit Overrides"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultOverrides"
             }
         };
     }
@@ -401,6 +434,9 @@ export class RtkUiProvider {
             }, {
                 "propName": "config",
                 "methodName": "configChanged"
+            }, {
+                "propName": "overrides",
+                "methodName": "overridesChanged"
             }];
     }
 }

package/dist/collection/exports.js

@@ -5,12 +5,13 @@ export { provideRtkDesignSystem } from './utils/provide-design-system';
 export { extendConfig, generateConfig } from './utils/config';
 export { sendNotification } from './utils/notification';
 export { RtkUiBuilder } from './lib/builder';
-export { uiStore, uiState, getInitialStates, createPeerStore } from './utils/sync-with-store/ui-store';
+export { uiStore, uiState, getInitialStates, createPeerStore, } from './utils/sync-with-store/ui-store';
 // addons
 export { registerAddons } from './lib/addons';
 // UIConfig, Icon Pack, i18n and Notification Sounds
 export { defaultConfig, createDefaultConfig } from './lib/default-ui-config';
 export { defaultIconPack } from './lib/icons';
+export { defaultOverrides } from './lib/overrides';
 export { defaultLanguage, useLanguage } from './lib/lang';
 export { default as RtkNotificationsAudio } from './lib/notification';
 export { generateChatGroupKey, getChatGroups, getUnreadChatCounts, getParticipantUserId, } from './utils/chat';

package/dist/collection/lib/overrides.js

@@ -0,0 +1,6 @@
+/**
+ * Default UI Kit Overrides
+ */
+export const defaultOverrides = {
+    disableEmojiPicker: false,
+};

package/dist/collection/utils/flags.js

@@ -1,6 +1,5 @@
 export const FlagsmithFeatureFlags = {
     PLAY_PARTICIPANT_TILE_VIDEO_ON_PAUSE: 'play_participant_tile_video_on_pause',
-    DISABLE_EMOJI_PICKER: 'disable_emoji_picker',
     FEAT_PAGINATED_CHAT: 'feat_paginated_chat',
     LOG_PLAYING_FAILURES: 'log_playing_failures',
     FEAT_CHANNEL_CHAT: 'feat_channel_chat',

package/dist/collection/utils/sync-with-store/ui-store.js

@@ -3,6 +3,7 @@ import { useLanguage } from "../../lib/lang";
 import { defaultIconPack } from "../../lib/icons";
 import { getUserPreferences } from "../user-prefs";
 import { createDefaultConfig } from "../../exports";
+import { defaultOverrides } from "../../lib/overrides";
 export const getInitialStates = (peerId) => ({
     meeting: 'idle',
     prefs: getUserPreferences(),
@@ -17,6 +18,7 @@ const uiStore = createStore({
     peerId: 'global',
     storeType: 'global',
     storeId: 'store-global',
+    overrides: defaultOverrides,
 });
 const elementsMap = new Map();
 // Attach elementsMap to global store for consistency
@@ -41,7 +43,7 @@ uiStore.use({
 const uiState = uiStore.state;
 export { uiStore, uiState };
 // Function to create a new store instance for peer-specific stores
-export function createPeerStore({ meeting, config, providerId, iconPack, t }) {
+export function createPeerStore({ meeting, config, providerId, iconPack, t, overrides, }) {
     const store = createStore({
         meeting: meeting,
         t,
@@ -52,6 +54,7 @@ export function createPeerStore({ meeting, config, providerId, iconPack, t }) {
         storeType: 'peer',
         // Use provider id's numeric portion as store id for easier debugging
         storeId: 'store-' + providerId.replace('provider-', ''),
+        overrides: overrides,
     });
     const peerElementsMap = new Map();
     // Attach elementsMap to store so appendElement/removeElement can access it

package/dist/components/index.js

@@ -1,10 +1,10 @@
 export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-c3592601.js';
-import { c as createDefaultConfig } from './p-7fc0dc2f.js';
-export { B as BreakoutRoomsManager, c as createDefaultConfig, b as createPeerStore, d as defaultConfig, e as defaultIconPack, f as defaultLanguage, g as getInitialStates, a as uiState, u as uiStore, h as useLanguage } from './p-7fc0dc2f.js';
-export { p as provideRtkDesignSystem } from './p-51de7af3.js';
-import { g as generateConfig } from './p-121e073d.js';
-export { e as extendConfig, g as generateConfig } from './p-121e073d.js';
-export { R as RtkNotificationsAudio } from './p-78b61cce.js';
+import { c as createDefaultConfig } from './p-e847fee9.js';
+export { B as BreakoutRoomsManager, c as createDefaultConfig, b as createPeerStore, d as defaultConfig, e as defaultIconPack, h as defaultLanguage, f as defaultOverrides, g as getInitialStates, a as uiState, u as uiStore, i as useLanguage } from './p-e847fee9.js';
+export { p as provideRtkDesignSystem } from './p-da87cc71.js';
+import { g as generateConfig } from './p-35e93724.js';
+export { e as extendConfig, g as generateConfig } from './p-35e93724.js';
+export { R as RtkNotificationsAudio } from './p-ad873f2d.js';
 export { g as generateChatGroupKey, a as getChatGroups, c as getParticipantUserId, b as getUnreadChatCounts } from './p-dab9d3d6.js';
 
 /**

package/dist/components/{p-488d88a8.js → p-01c968b1.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-7fc0dc2f.js';
+import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
 import { g as getExtension, a as getFileSize, d as downloadFile } from './p-47314bc7.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { d as defineCustomElement$2 } from './p-1391bef0.js';
 import { d as defineCustomElement$1 } from './p-3b29dda1.js';
 

package/dist/components/{p-6f340109.js → p-05df465d.js}

@@ -1,4 +1,4 @@
-import { L as isLiveStreamViewer } from './p-7fc0dc2f.js';
+import { M as isLiveStreamViewer } from './p-e847fee9.js';
 
 const canViewChat = (meeting) => {
     if (meeting && !meeting.chat)

package/dist/components/{p-9e87b2c9.js → p-0a31ef52.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-7fc0dc2f.js';
+import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { g as getBitrateVerdict, a as getPacketLossVerdict, b as getJitterVerdict, c as getNetworkBasedMediaHealth } from './p-0e02697c.js';
 
 const rtkDebuggerVideoCss = ":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;display:flex;flex-direction:column;overflow:hidden;height:100%;width:100%;color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.tab-body::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px);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))}.tab-body::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}h3{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:600}#header{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-5, 20px);display:flex;align-items:center;justify-content:space-evenly}.tab-body{margin:var(--rtk-space-4, 16px);display:flex;height:100%;flex-direction:column;justify-content:space-between;overflow-y:auto}.status-container{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;padding:16px}.status-section{margin-bottom:12px}.section-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;padding:8px 0}.section-header.only-child{justify-content:center}.section-body.missing-stats{display:flex;text-align:center;justify-content:center}.section-header .status{color:rgba(var(--rtk-colors-success));font-weight:bold}.section-header .arrow{font-size:14px}.network-table{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;margin-top:8px;overflow:hidden}.network-row{display:flex;justify-content:space-between;padding:12px;border-bottom:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.network-row:last-child{border-bottom:none}.network-cell{display:flex;flex-direction:column}.network-cell.label strong{font-size:14px}.network-cell.label .description{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}.network-cell.value{text-align:right}.status.good{color:rgba(var(--rtk-colors-success))}.status.average{color:rgba(var(--rtk-colors-warning))}.status.poor{color:rgba(var(--rtk-colors-danger))}.value{font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}rtk-settings-video{display:flex;flex-direction:column}";

package/dist/components/{p-10ef077c.js → p-0c512fd1.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { i as useLanguage } from './p-e847fee9.js';
+import { S as SyncWithStore } from './p-6f7c46d2.js';
 
 const rtkTranscriptCss = ":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{pointer-events:none;display:block;color:rgb(var(--rtk-colors-text-1000, 255 255 255));display:flex;justify-content:center;vertical-align:middle;animation:show 0.4s ease;transition:0.4s;z-index:5;width:100%}.ctr{box-sizing:border-box;display:inline-flex;height:100%;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto;padding:var(--rtk-space-3, 12px);overflow:auto;max-width:50%}.message{margin:var(--rtk-space-0, 0px);display:inline-block;justify-content:center;max-width:100%;text-wrap:wrap;line-height:1.5rem}.message .name{font-weight:bold}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateY(120px)}100%{opacity:1;transform:translateY(0px)}}@keyframes exit{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-120px)}}:host([size='sm']){font-size:14px}";
 const RtkTranscriptStyle0 = rtkTranscriptCss;

package/dist/components/{p-a6296b02.js → p-0e8ff1cc.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
+import { S as SyncWithStore } from './p-6f7c46d2.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 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-900, 26 26 26) / var(--tw-bg-opacity))}:host(.primary:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 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;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -20,17 +20,20 @@ const RtkMenuItem = /*@__PURE__*/ proxyCustomElement(class RtkMenuItem extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        /** Variant */
+        this.menuVariant = 'secondary';
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: 'a5c802aa2cb8cb235dc1e68d54ec9703c57df0b9' }, h("slot", { key: 'b448160fdd220fd814d471ddc08d7f784af10c49', name: "start" }), h("slot", { key: '0b342d2547a7835ea23d1974c3fd1b2e3507e779' }), h("slot", { key: '6670a8ed947d2bd6fb1651e9c6c1cd52f5ca419c', name: "end" })));
+        return (h(Host, { key: '7ae0e75aa59e0ce3b6a919eb258f218d84033bdd', class: { [this.menuVariant]: true } }, h("slot", { key: '4fd6d31e2ecb9f99bdc7442e796c5dadcb8bcf74', name: "start" }), h("slot", { key: '04ef7d82759ff42015480b3cd789d941ffa574f0' }), h("slot", { key: 'ad3c22309470a6b71d6b6b9f0f8b58cde7f76f3c', name: "end" })));
     }
     static get style() { return RtkMenuItemStyle0; }
 }, [1, "rtk-menu-item", {
         "size": [513],
+        "menuVariant": [1, "menu-variant"],
         "iconPack": [16],
         "t": [16]
     }]);

package/dist/components/{p-adf73364.js → p-1614fe8f.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage, e as defaultIconPack } from './p-7fc0dc2f.js';
+import { i as useLanguage, e as defaultIconPack } from './p-e847fee9.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$3 } from './p-f4e75ea9.js';
+import { S as SyncWithStore } from './p-6f7c46d2.js';
+import { d as defineCustomElement$3 } from './p-ff320cbb.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
-import { d as defineCustomElement$1 } from './p-0a35a909.js';
+import { d as defineCustomElement$1 } from './p-8b4e32b7.js';
 
 const rtkChannelDetailsCss = ":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-72, 288px);padding-top:var(--rtk-space-5, 20px);padding-bottom:var(--rtk-space-5, 20px);padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px)}header{font-size:20px}rtk-spinner{margin-top:var(--rtk-space-10, 40px);margin-bottom:var(--rtk-space-10, 40px);margin-left:auto;margin-right:auto}ul{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-6, 24px);margin-bottom:var(--rtk-space-4, 16px);height:var(--rtk-space-48, 192px);padding:var(--rtk-space-0, 0px);overflow-y:auto;list-style-type:none;display:flex;flex-direction:column;gap:var(--rtk-space-2, 8px)}ul li{margin-right:var(--rtk-space-2, 8px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-2, 8px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px)}ul li:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}ul li 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))}";
 const RtkChannelDetailsStyle0 = rtkChannelDetailsCss;

package/dist/components/{p-5f26bba3.js → p-193d8051.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-7fc0dc2f.js';
+import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { g as getBitrateVerdict, a as getPacketLossVerdict, b as getJitterVerdict, c as getNetworkBasedMediaHealth } from './p-0e02697c.js';
 
 const rtkDebuggerScreenshareCss = ":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;display:flex;flex-direction:column;overflow:hidden;height:100%;width:100%;color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.tab-body::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px);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))}.tab-body::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}h3{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:600}#header{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-5, 20px);display:flex;align-items:center;justify-content:space-evenly}.tab-body{margin:var(--rtk-space-4, 16px);display:flex;height:100%;flex-direction:column;justify-content:space-between;overflow-y:auto}.status-container{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;padding:16px}.status-section{margin-bottom:12px}.section-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;padding:8px 0}.section-header.only-child{justify-content:center}.section-body.missing-stats{display:flex;text-align:center;justify-content:center}.section-header .status{color:rgba(var(--rtk-colors-success));font-weight:bold}.section-header .arrow{font-size:14px}.network-table{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;margin-top:8px;overflow:hidden}.network-row{display:flex;justify-content:space-between;padding:12px;border-bottom:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.network-row:last-child{border-bottom:none}.network-cell{display:flex;flex-direction:column}.network-cell.label strong{font-size:14px}.network-cell.label .description{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}.network-cell.value{text-align:right}.status.good{color:rgba(var(--rtk-colors-success))}.status.average{color:rgba(var(--rtk-colors-warning))}.status.poor{color:rgba(var(--rtk-colors-danger))}.value{font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}";

package/dist/components/{p-bb8f2597.js → p-1a8b46bb.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-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
+import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { d as defineCustomElement$6 } from './p-1391bef0.js';
-import { d as defineCustomElement$5 } from './p-84e5b453.js';
-import { d as defineCustomElement$4 } from './p-5f26bba3.js';
-import { d as defineCustomElement$3 } from './p-102b6df8.js';
-import { d as defineCustomElement$2 } from './p-9e87b2c9.js';
+import { d as defineCustomElement$5 } from './p-6f8d2043.js';
+import { d as defineCustomElement$4 } from './p-193d8051.js';
+import { d as defineCustomElement$3 } from './p-c05530c8.js';
+import { d as defineCustomElement$2 } from './p-0a31ef52.js';
 import { d as defineCustomElement$1 } from './p-3b29dda1.js';
 
 const rtkDebuggerCss = ":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;display:flex;overflow:hidden;border-radius:var(--rtk-border-radius-md, 8px);width:100%;--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))}header{margin-right:var(--rtk-space-2, 8px);display:flex;align-items:center;justify-content:space-between;padding-top:var(--rtk-space-0, 0px);padding-bottom:var(--rtk-space-0, 0px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}header h3{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px)}.back-btn{border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.back-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}aside{box-sizing:border-box;display:flex;max-width:var(--rtk-space-56, 224px) !important;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));padding-left:var(--rtk-space-2, 8px)}aside button{margin-top:var(--rtk-space-4, 16px);box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;border-top-left-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);background-color:transparent;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));cursor:default;font-size:14px;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px}aside button .right{display:flex;align-items:center}aside button .right rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}aside button .right rtk-icon:last-child{margin-left:var(--rtk-space-4, 16px)}aside button[type='button']{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}aside button[type='button']:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}aside button[type='button']{border-right:var(--rtk-border-width-md, 2px) solid transparent}aside button.active{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}aside button.active:hover{background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / 0.2)}aside button.hidden{display:none}main{position:relative;box-sizing:border-box;display:flex;height:100%;width:100%;flex-direction:column}:host([size='sm']) aside{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));width:100% !important;max-width:100% !important;padding-left:var(--rtk-space-0, 0px)}:host([size='sm']) aside button{border-radius:var(--rtk-border-radius-none, 0)}:host([size='sm']) aside button.active{border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent}:host([size='sm']) aside button.active:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) aside button.hidden{display:none}:host([size='sm']) aside.hide{display:none}aside button:host([size='sm']) aside.hide{display:none}:host([size='sm']) aside button:host([size='sm']) aside.hide{display:none}:host([size='sm']) main{display:none;height:100%;width:100%;padding:var(--rtk-space-0, 0px)}aside button:host([size='sm']) main{display:none}:host([size='sm']) aside button:host([size='sm']) main{display:none}:host([size='sm']) main.active{display:block}:host([size='sm']) header{margin:var(--rtk-space-0, 0px);justify-content:center}:host([size='sm']) header rtk-button{position:absolute;left:var(--rtk-space-4, 16px)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}::-webkit-scrollbar-thumb:hover{border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.progress-bar{height:var(--rtk-space-1, 4px);width:100%;overflow:hidden;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.progress-indicator{height:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}";