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

package/dist/cjs/rtk-debugger-toggle.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 
 const rtkDebuggerToggleCss = ":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 RtkDebuggerToggleStyle0 = rtkDebuggerToggleCss;

package/dist/cjs/rtk-dialog-manager.cjs.entry.js

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+const index$2 = require('./index-821d14b7.js');
+
+const rtkDialogManagerCss = ":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 RtkDialogManagerStyle0 = rtkDialogManagerCss;
+
+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 RtkDialogManager = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** UI Config */
+        this.config = uiStore.createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.updateStoreState = (state, value) => {
+            this.stateUpdate.emit({ [state]: value });
+        };
+        this.cancelJoinStage = async () => {
+            var _a, _b, _c;
+            if (((_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.status) === 'ACCEPTED_TO_JOIN_STAGE') {
+                await ((_c = (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.stage) === null || _c === void 0 ? void 0 : _c.leave());
+            }
+            this.updateStoreState('activeJoinStage', false);
+        };
+        this.joinStage = async () => {
+            await this.meeting.stage.join();
+            /** NOTE(ishita1805): We close the modal once the status has changed */
+        };
+        this.stageStatusUpdateListener = (status) => {
+            var _a;
+            if (!((_a = this.states) === null || _a === void 0 ? void 0 : _a.activeJoinStage))
+                return;
+            if (status === 'ON_STAGE')
+                this.updateStoreState('activeJoinStage', false);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.removeListener('stageStatusUpdate', this.stageStatusUpdateListener);
+    }
+    meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        const { stage } = meeting;
+        stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStatusUpdateListener);
+    }
+    render() {
+        var _a, _b, _c, _d;
+        if (!this.meeting) {
+            return;
+        }
+        const defaults = {
+            meeting: this.meeting,
+            states: this.states,
+            config: this.config,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        const states = this.states;
+        if ((states === null || states === void 0 ? void 0 : states.image) != null) {
+            const image = states.image;
+            const onImageClose = () => {
+                this.stateUpdate.emit({ image: null });
+            };
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: onImageClose, hideCloseButton: true, iconPack: this.iconPack, t: this.t }, index$1.h(index$2.Render, { element: "rtk-image-viewer", defaults: defaults, props: { image, onClose: onImageClose } }))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeSettings) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeSettings', false), iconPack: this.iconPack, t: this.t }, index$1.h(index$2.Render, { element: "rtk-settings", defaults: defaults }))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeDebugger) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeDebugger', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-debugger", Object.assign({}, defaults)))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeLeaveConfirmation) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeLeaveConfirmation', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-leave-meeting", Object.assign({}, defaults)))));
+        }
+        else if (((_a = states === null || states === void 0 ? void 0 : states.activePermissionsMessage) === null || _a === void 0 ? void 0 : _a.enabled) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, hideCloseButton: true, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-permissions-message", Object.assign({}, defaults)))));
+        }
+        else if (((_b = states === null || states === void 0 ? void 0 : states.activeBreakoutRoomsManager) === null || _b === void 0 ? void 0 : _b.active) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeBreakoutRoomsManager', {
+                    active: false,
+                    data: undefined,
+                }), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-breakout-rooms-manager", Object.assign({}, defaults)))));
+        }
+        else if (((_c = states === null || states === void 0 ? void 0 : states.activeConfirmationModal) === null || _c === void 0 ? void 0 : _c.active) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeConfirmationModal', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-confirmation-modal", Object.assign({}, defaults)))));
+        }
+        else if (((_d = states === null || states === void 0 ? void 0 : states.activeOverlayModal) === null || _d === void 0 ? void 0 : _d.active) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-overlay-modal", { meeting: this.meeting, states: this.states, iconPack: this.iconPack, t: this.t })));
+        }
+        else if (states === null || states === void 0 ? void 0 : states.activeBroadcastMessageModal) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => this.updateStoreState('activeBroadcastMessageModal', false), iconPack: this.iconPack, t: this.t }, index$1.h("rtk-broadcast-message-modal", Object.assign({}, defaults)))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeJoinStage) === true) {
+            const dataState = {
+                title: this.t('stage.join_title'),
+                label: {
+                    accept: this.t('stage.join_confirm'),
+                    reject: this.t('stage.join_cancel'),
+                },
+                description: this.t('stage.join_summary'),
+            };
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: this.cancelJoinStage, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-join-stage", Object.assign({ dataConfig: dataState, onRtkJoinStage: this.joinStage, onRtkLeaveStage: this.cancelJoinStage }, defaults)))));
+        }
+        else if ((states === null || states === void 0 ? void 0 : states.activeMuteAllConfirmation) === true) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => {
+                    this.updateStoreState('activeMuteAllConfirmation', false);
+                }, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-mute-all-confirmation", Object.assign({}, defaults)))));
+        }
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "config", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialogManager.prototype, "t", void 0);
+RtkDialogManager.style = RtkDialogManagerStyle0;
+
+exports.rtk_dialog_manager = RtkDialogManager;

package/dist/cjs/rtk-dialog.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+
+const rtkDialogCss = ":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{word-wrap:break-word;overflow-wrap:break-word}#dialog{position:relative;max-height:100%;max-width:100%;padding:var(--rtk-space-0, 0px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#dialog::backdrop{background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / 0.5);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%)}#dismiss-btn{position:absolute;top:var(--rtk-space-3, 12px);right:var(--rtk-space-3, 12px);z-index:50}::slotted(*){max-width:100%;height:auto;min-height:-moz-fit-content;min-height:fit-content}";
+const RtkDialogStyle0 = rtkDialogCss;
+
+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 RtkDialog = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onClose = index$1.createEvent(this, "rtkDialogClose", 7);
+        /** Whether to show the close button */
+        this.hideCloseButton = false;
+        /** Whether Escape key can close the modal */
+        this.disableEscapeKey = false;
+        /** UI Config */
+        this.config = uiStore.createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Whether a dialog is open or not */
+        this.open = true;
+        this.close = () => {
+            this.open = false;
+            this.onClose.emit();
+        };
+        this.keydownListener = (e) => {
+            if (!this.disableEscapeKey && e.key === 'Escape' && this.open) {
+                this.close();
+            }
+        };
+    }
+    connectedCallback() {
+        document.addEventListener('keydown', this.keydownListener);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.keydownListener);
+    }
+    componentDidRender() {
+        if (this.open && !this.dialogEl.open) {
+            // we need to call showModal() to get the ::backdrop
+            this.dialogEl.showModal();
+        }
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        return (index$1.h(index$1.Host, null, index$1.h("dialog", { ref: (el) => (this.dialogEl = el), id: "dialog", part: "container", onClose: this.close, onClick: (e) => {
+                // clicked outside the children of dialog
+                if (!this.disableEscapeKey && e.target === this.dialogEl) {
+                    this.close();
+                }
+            }, onKeyDown: (e) => {
+                if (this.disableEscapeKey && e.key === 'Escape') {
+                    e.preventDefault();
+                }
+            } }, index$1.h("slot", null), !this.hideCloseButton && (index$1.h("rtk-button", { part: "close-button", id: "dismiss-btn", kind: "icon", variant: "ghost", onClick: () => this.close(), type: "button", "aria-label": this.t('dialog.close'), role: "button" }, index$1.h("rtk-icon", { icon: this.iconPack.dismiss }))))));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "config", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkDialog.prototype, "t", void 0);
+RtkDialog.style = RtkDialogStyle0;
+
+exports.rtk_dialog = RtkDialog;

package/dist/cjs/rtk-ended-screen.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 
 const rtkEndedScreenCss = ":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{height:100%;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.ctr{display:flex;flex-direction:column;align-items:center;gap:var(--rtk-space-8, 32px)}rtk-logo.loaded{height:var(--rtk-space-12, 48px)}.rejoin-button{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-6, 24px);padding-bottom:var(--rtk-space-6, 24px);padding-left:var(--rtk-space-16, 64px);padding-right:var(--rtk-space-16, 64px)}.rejoin-icon{margin-right:var(--rtk-space-2, 8px)}p{font-size:16px;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));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}p.breakout{font-size:20px;display:flex;flex-direction:column;align-items:center}p.breakout span{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-0, 0px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}span{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}";
 const RtkEndedScreenStyle0 = rtkEndedScreenCss;

package/dist/cjs/rtk-file-dropzone.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 
 const rtkFileDropzoneCss = "#dropzone{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}#dropzone.active{display:flex;animation:0.2s slide-up ease-in}";
 const RtkFileDropzoneStyle0 = rtkFileDropzoneCss;

package/dist/cjs/rtk-file-message_3.cjs.entry.js

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const ChatHead = require('./ChatHead-e13f3b0e.js');
+const string = require('./string-9bce3253.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const file = require('./file-0b9afa34.js');
+const index = require('./index-8d07e125.js');
+const TextMessage = require('./TextMessage-7bb3e1fd.js');
+require('./date-61ffcd0a.js');
+require('./chat-717e517d.js');
+
+var __decorate$2 = (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 RtkFileMessage = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Date object of now, to calculate distance between dates */
+        this.now = new Date();
+        /** Whether the message is continued by same user */
+        this.isContinued = false;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+    }
+    render() {
+        const link = string.sanitizeLink(this.message.link);
+        return (index$1.h(index$1.Host, { key: '8796e55e793db9aeb4ede2d57524bc38aa817ddf' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: '7018209894272b21e1f5225d7bad92de5107d0d7', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: 'd30878670f4e90b35578ac616761645e5744c7cd', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: '73ba1a2b1aaacec88930605d5a826d32ad56581e', class: "file" }, index$1.h("div", { key: '17234fd57360f3a7953ce898282240e03b94eb58', class: "file-data" }, index$1.h("div", { key: '07424973ceeb567efee25cb45eca09792482cd21', class: "name" }, this.message.name), index$1.h("div", { key: '255087ceadb46be8da915d2b9134b3922f9a50b7', class: "file-data-split" }, index$1.h("div", { key: 'a01185efdf779d87548e1b7d73dfad823dbbd611', class: "ext" }, file.getExtension(this.message.name)), index$1.h("span", { key: 'a129cb26284432bbfad635dc3774309fbadc8fec', class: "divider" }), index$1.h("div", { key: '0af8af2f2d18c0a1d72bc5040bdabb1f06209840', class: "size" }, file.getFileSize(this.message.size)))), index$1.h("rtk-button", { key: '522a0378351016927ca644cce5db710336bf348b', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '8d49abfffb8149adc9fd3e9f214b54a1f642edc3', icon: this.iconPack.download }))))));
+    }
+};
+__decorate$2([
+    index.SyncWithStore()
+], RtkFileMessage.prototype, "iconPack", void 0);
+__decorate$2([
+    index.SyncWithStore()
+], RtkFileMessage.prototype, "t", void 0);
+
+const rtkImageMessageCss = ":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)}.image-spinner{cursor:wait}.image-errored{cursor:not-allowed}";
+const RtkImageMessageStyle0 = rtkImageMessageCss;
+
+var __decorate$1 = (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 RtkImageMessage = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** Date object of now, to calculate distance between dates */
+        this.now = new Date();
+        /** Whether the message is continued by same user */
+        this.isContinued = false;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+        this.status = 'loading';
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'bcbf806340704a0f288efdf06bc0712e2e296e1b' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: 'c7c64c22e4a0d37dd405d83f537e0ac858ee85f4', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: '61bff7a6569ea50b9c6bc54fe71c1591a4079bb0', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: '56740ce9648a6b580c338dc69eec4f0bb09e200b', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: '46616303b6eaca3831083a5603aade677e8e27f1', src: string.sanitizeLink(this.message.link), onLoad: () => {
+                this.status = 'loaded';
+            }, onError: () => {
+                this.status = 'errored';
+            }, onClick: () => {
+                if (this.status === 'loaded') {
+                    this.stateUpdate.emit({ image: this.message });
+                }
+            } }), this.status === 'loading' && (index$1.h("div", { key: 'dac71a4e7e4d02b7e92386f92e2b066d31dc1c94', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: '6c7b01868932f2ed0e6602d68caecb9b38d4f47b', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: '87c343f4a62662bc100361acf7aba9d3df31705f', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, index$1.h("rtk-icon", { key: '35851cf346c3d873cf0f27d8520df278c9b7cfa1', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: '37e07aef242ef26e57a5ec96e4a127d8ad27dc82', class: "actions" }, index$1.h("rtk-button", { key: 'f32b44c453061e7ba41a67f1c266f634ad0a6cc3', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+                this.stateUpdate.emit({ image: this.message });
+            } }, index$1.h("rtk-icon", { key: '4a6c1cfe87d356e1f39db04b3536f9e9e3ca1b34', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: 'e22f94520b0ead2db124e6a65ad110ea029855f3', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.message.link, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: 'a5f7b58d27a12e8754db70c9d56facc547883d4f', icon: this.iconPack.download }))))))));
+    }
+};
+__decorate$1([
+    index.SyncWithStore()
+], RtkImageMessage.prototype, "iconPack", void 0);
+__decorate$1([
+    index.SyncWithStore()
+], RtkImageMessage.prototype, "t", void 0);
+RtkImageMessage.style = RtkImageMessageStyle0;
+
+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 RtkTextMessage = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Date object of now, to calculate distance between dates */
+        this.now = new Date();
+        /** Whether the message is continued by same user */
+        this.isContinued = false;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** show message in bubble */
+        this.showBubble = false;
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'd47fae980df369efeb4351a933cc4e06ebac586e' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: '6bf4892ca718cda199ad2a19371cd9e8724421de', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: 'b2b50f3f716d5cdfb45f1826c4e4fcab43a13a7c', class: {
+                body: true,
+                bubble: this.showBubble,
+            }, part: "body" }, index$1.h("div", { key: 'cc3f081fefaf8004386991bd307c61a9e5526ae6', class: { text: true, emoji: string.hasOnlyEmojis(this.message.message) } }, index$1.h(TextMessage.TextMessageView, { key: '579a167e4ae6213d84ca65a581ec88fadb1db574', message: this.message.message })))));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkTextMessage.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkTextMessage.prototype, "t", void 0);
+
+exports.rtk_file_message = RtkFileMessage;
+exports.rtk_image_message = RtkImageMessage;
+exports.rtk_text_message = RtkTextMessage;

package/dist/cjs/rtk-fullscreen-toggle.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
 const fullScreen = require('./full-screen-de3e9caf.js');
-const index = require('./index-fb18156f.js');
+const index = require('./index-8d07e125.js');
 
 const rtkFullscreenToggleCss = ":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}";
 const RtkFullscreenToggleStyle0 = rtkFullscreenToggleCss;

package/dist/cjs/rtk-grid-pagination.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 const debounce = require('./debounce-6080cc73.js');
 
 const rtkGridPaginationCss = ":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;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;font-size:16px}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}:host([size='sm']) .center{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px)}:host([size='sm']) rtk-button{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}:host([size='sm']) rtk-button rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}rtk-button{--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)}.center{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.center .page{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.center .slash{margin-left:var(--rtk-space-0\\.5, 2px);margin-right:var(--rtk-space-0\\.5, 2px)}.center .pages{align-self:flex-end;font-size:12px}:host([variant='rounded']){overflow:hidden;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([variant='rounded']) rtk-button{border-radius:9999px;border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));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}:host([variant='rounded']) rtk-button:not([disabled]):hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='rounded']) rtk-button:not([disabled]):focus{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='grid']) rtk-button{position:absolute;top:50%;height:var(--rtk-space-20, 80px);width:var(--rtk-space-20, 80px);opacity:0.2;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}:host([variant='grid']) rtk-button:hover{opacity:1}:host([variant='grid']) rtk-button{transform:translateY(-50%)}:host([variant='grid']) rtk-button.prev{left:var(--rtk-space-0, 0px);border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host([variant='grid']) rtk-button.next{right:var(--rtk-space-0, 0px);border-top-left-radius:9999px;border-bottom-left-radius:9999px}:host([variant='grid']) rtk-button.auto{left:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host([variant='grid']) .dots{position:absolute;left:50%;bottom:var(--rtk-space-3, 12px);display:flex;align-items:center;transform:translateX(-50%)}:host([variant='grid']) .dots .dot{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);cursor:pointer;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([variant='grid']) .dots .dot:last-child{margin-right:var(--rtk-space-0, 0px)}:host([variant='grid']) .dots .dot.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host([variant='grid'][size='sm']) rtk-button{height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);opacity:0.1}";

package/dist/cjs/rtk-grid.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
 const debounce = require('./debounce-6080cc73.js');
 const index$2 = require('./index-821d14b7.js');
-const index = require('./index-fb18156f.js');
+const index = require('./index-8d07e125.js');
 const grid = require('./grid-edc342a7.js');
 
 const rtkGridCss = ":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;height:100%;width:100%}.offline-grid{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}.offline-grid h3{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);font-size:20px;font-weight:500;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.offline-grid p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);text-align:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.offline-grid rtk-icon{margin-bottom:var(--rtk-space-2, 8px)}.webinar-stage{box-sizing:border-box;height:100%;display:flex;align-content:center;align-items:center;justify-content:center;text-align:center}.webinar-stage h2{margin:var(--rtk-space-0, 0px);font-weight:normal}rtk-viewer-count{display:none}.ctr{display:flex;flex-direction:column;align-items:center}.message{font-size:16px;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));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.description{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}rtk-livestream-indicator{display:none}@media only screen and (max-device-height: 480px) and (orientation: landscape){rtk-viewer-count[variant='embedded']{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}rtk-livestream-indicator{position:absolute;top:var(--rtk-space-0, 0px);left:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}}";

package/dist/cjs/rtk-header.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
 const index$2 = require('./index-821d14b7.js');
-const index = require('./index-fb18156f.js');
+const index = require('./index-8d07e125.js');
 
 const rtkHeaderCss = ":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;height:var(--rtk-space-12, 48px);align-items:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host{display:none !important}}@media only screen and (max-height: 480px) and (orientation: landscape){:host{display:none !important}}";
 const RtkHeaderStyle0 = rtkHeaderCss;

package/dist/cjs/rtk-idle-screen.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 
 const rtkIdleScreenCss = ":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{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.ctr{display:flex;flex-direction:column;align-items:center;gap:var(--rtk-space-8, 32px)}rtk-logo.loaded{height:var(--rtk-space-12, 48px)}rtk-spinner{height:var(--rtk-space-12, 48px);width:var(--rtk-space-12, 48px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}";
 const RtkIdleScreenStyle0 = rtkIdleScreenCss;

package/dist/cjs/rtk-image-viewer.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
 const file = require('./file-0b9afa34.js');
-const index = require('./index-fb18156f.js');
+const index = require('./index-8d07e125.js');
 const string = require('./string-9bce3253.js');
 
 const rtkImageViewerCss = ":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{width:1140px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-6, 24px);padding-top:var(--rtk-space-5, 20px);overflow-y:auto;color:rgb(var(--rtk-colors-text-1000, 255 255 255));z-index:40;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.displayName{font-weight:700}.image-ctr{margin-top:var(--rtk-space-2, 8px);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden}.actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rtk-space-2, 8px)}img{box-sizing:border-box;display:block;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--rtk-space-4, 16px)}.shared-by-user{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}:host([size='sm']) .header{flex-direction:column}:host([size='sm']) .header .actions{margin-top:var(--rtk-space-4, 16px)}";

package/dist/cjs/rtk-information-tooltip.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const index = require('./index-fb18156f.js');
-const uiStore = require('./ui-store-e096fdc6.js');
+const index = require('./index-8d07e125.js');
+const uiStore = require('./ui-store-1cb28da8.js');
 
 const rtkInformationTooltipCss = ":host{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);cursor:pointer}.tooltip-container{position:relative;display:flex;flex-direction:row;align-items:center}.tooltip-container rtk-icon{cursor:pointer;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.tooltip-container rtk-icon:hover+.tooltip{display:flex !important}.tooltip{position:absolute;margin-left:var(--rtk-space-2, 8px);display:none !important;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));padding:var(--rtk-space-2, 8px);font-weight:400;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));z-index:50;display:flex;min-width:var(--rtk-space-60, 240px);flex-direction:column;--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);left:14px}";
 const RtkInformationTooltipStyle0 = rtkInformationTooltipCss;

package/dist/cjs/rtk-leave-button.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 
 const rtkLeaveButtonCss = ":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 RtkLeaveButtonStyle0 = rtkLeaveButtonCss;

package/dist/cjs/rtk-livestream-indicator_3.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 
 const rtkLivestreamIndicatorCss = ":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{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);display:flex}:host([data-hidden]){display:none}:host[size='sm']{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px)}.indicator{display:flex;flex-direction:row;align-items:center;font-size:14px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);animation:blink 4s linear infinite}:host([size='sm']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}:host([size='sm']) .indicator span{display:none}@keyframes blink{0%,10%{opacity:0}11%,100%{opacity:1}}";
 const RtkLivestreamIndicatorStyle0 = rtkLivestreamIndicatorCss;

package/dist/cjs/rtk-livestream-toggle.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-e096fdc6.js');
-const index = require('./index-fb18156f.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
 
 const rtkLivestreamToggleCss = ":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}";
 const RtkLivestreamToggleStyle0 = rtkLivestreamToggleCss;