@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/components/p-8ec943fb.js

@@ -0,0 +1,162 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$6 } from './p-92a1602c.js';
+import { d as defineCustomElement$5 } from './p-f1dd271e.js';
+import { d as defineCustomElement$4 } from './p-a262dd1a.js';
+import { d as defineCustomElement$3 } from './p-afce90ce.js';
+import { d as defineCustomElement$2 } from './p-53d81684.js';
+import { d as defineCustomElement$1 } from './p-3d754c34.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))}";
+const RtkDebuggerStyle0 = rtkDebuggerCss;
+
+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 RtkDebugger = /*@__PURE__*/ proxyCustomElement(class RtkDebugger extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.keyPressListener = (e) => {
+            if (e.key === 'Escape') {
+                this.close();
+            }
+        };
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.activeTab = 'audio';
+        this.isMobileMainVisible = false;
+        this.progress = 0;
+    }
+    connectedCallback() {
+        document.addEventListener('keydown', this.keyPressListener);
+    }
+    disconnectedCallback() {
+        this.keyPressListener && document.removeEventListener('keydown', this.keyPressListener);
+    }
+    progressUpdate(event) {
+        this.progress = event.detail;
+    }
+    changeTab(tab) {
+        this.activeTab = tab;
+        if (this.size === 'sm') {
+            if (!this.isMobileMainVisible) {
+                this.isMobileMainVisible = true;
+            }
+        }
+    }
+    close() {
+        this.stateUpdate.emit({ activeDebugger: false });
+    }
+    getActiveTab() {
+        switch (this.activeTab) {
+            case 'audio':
+                return this.t('debugger.audio.troubleshooting.label');
+            case 'screenshare':
+                return this.t('debugger.screenshare.troubleshooting.label');
+            case 'video':
+                return this.t('debugger.video.troubleshooting.label');
+            case 'system':
+                return this.t('debugger.system.troubleshooting.label');
+            default:
+                return this.t('debugger.troubleshooting.label');
+        }
+    }
+    render() {
+        if (this.meeting == null)
+            return null;
+        const defaults = {
+            meeting: this.meeting,
+            states: this.states,
+            iconPack: this.iconPack,
+            t: this.t,
+            size: this.size,
+        };
+        const tab = this.getActiveTab();
+        const showSystemsTab = typeof navigator.getBattery !== 'undefined';
+        return (h(Host, null, h("aside", { class: { hide: this.isMobileMainVisible }, part: "menu" }, h("header", null, h("h3", null, this.t('debugger.troubleshooting.label'))), h("button", { type: "button", class: { active: this.activeTab === 'audio' }, onClick: () => this.changeTab('audio') }, this.t('debugger.audio.label'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.mic_on }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right }))), h("button", { type: "button", class: { active: this.activeTab === 'video' }, onClick: () => this.changeTab('video') }, this.t('debugger.video.label'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.video_on }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right }))), h("button", { type: "button", class: { active: this.activeTab === 'screenshare' }, onClick: () => this.changeTab('screenshare') }, this.t('debugger.screenshare.label'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.share_screen_start }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right }))), h("button", { type: "button", class: { active: this.activeTab === 'system', hidden: !showSystemsTab }, onClick: () => this.changeTab('system') }, this.t('debugger.system.label'), h("div", { class: "right" }, h("rtk-icon", { icon: this.iconPack.settings }), this.size === 'sm' && h("rtk-icon", { icon: this.iconPack.chevron_right })))), h("main", { class: { active: this.isMobileMainVisible }, part: "main-content" }, this.size === 'sm' && (h("header", null, h("rtk-button", { kind: "icon", class: "back-btn", onClick: () => (this.isMobileMainVisible = false) }, h("rtk-icon", { icon: this.iconPack.chevron_left })), h("h4", null, tab))), this.activeTab === 'audio' && h("rtk-debugger-audio", Object.assign({}, defaults)), this.activeTab === 'video' && h("rtk-debugger-video", Object.assign({}, defaults)), this.activeTab === 'screenshare' && (h("rtk-debugger-screenshare", Object.assign({}, defaults))), this.activeTab === 'system' && showSystemsTab && (h("rtk-debugger-system", Object.assign({}, defaults))))));
+    }
+    static get style() { return RtkDebuggerStyle0; }
+}, [1, "rtk-debugger", {
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "activeTab": [32],
+        "isMobileMainVisible": [32],
+        "progress": [32]
+    }, [[0, "testProgress", "progressUpdate"]]]);
+__decorate([
+    SyncWithStore()
+], RtkDebugger.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebugger.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebugger.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebugger.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebugger.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-debugger", "rtk-button", "rtk-debugger-audio", "rtk-debugger-screenshare", "rtk-debugger-system", "rtk-debugger-video", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-debugger":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkDebugger);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-debugger-audio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-debugger-screenshare":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-debugger-system":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-debugger-video":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkDebugger as R, defineCustomElement as d };

package/dist/components/p-8fd7ccbf.js

@@ -0,0 +1,149 @@
+import { p as proxyCustomElement, H, w as writeTask, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$1 } from './p-3d754c34.js';
+
+const rtkCameraSelectorCss = ".rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5);width:100%;max-width:100%;text-overflow:ellipsis}.inline .rtk-select{margin-top:var(--rtk-space-1, 4px);width:100%;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-8, 32px);font-size:14px}.row{margin-bottom:var(--rtk-space-2, 8px);display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.group{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px)}.group>*{margin-bottom:var(--rtk-space-0, 0px)}label{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px}.inline.container{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}";
+const RtkCameraSelectorStyle0 = rtkCameraSelectorCss;
+
+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 RtkCameraSelector = /*@__PURE__*/ proxyCustomElement(class RtkCameraSelector extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** variant */
+        this.variant = 'full';
+        /** Language */
+        this.t = useLanguage();
+        this.videoDevices = [];
+        this.canProduceVideo = true;
+        this.stageStateListener = () => {
+            this.canProduceVideo = this.meeting.self.permissions.canProduceVideo === 'ALLOWED';
+        };
+        this.deviceListUpdateListener = ({ devices }) => {
+            this.videoDevices = devices.filter((device) => device.kind === 'videoinput');
+        };
+        this.deviceUpdateListener = ({ device }) => {
+            if (device.kind !== 'videoinput')
+                return;
+            this.currentDevice = device;
+        };
+        this.mediaPermissionUpdateListener = async ({ kind, message }) => {
+            if (!this.meeting)
+                return;
+            if (kind === 'video' && message === 'ACCEPTED') {
+                this.videoDevices = await this.meeting.self.getVideoDevices();
+            }
+        };
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c;
+        if (meeting == null)
+            return;
+        (_a = meeting.self) === null || _a === void 0 ? void 0 : _a.addListener('deviceListUpdate', this.deviceListUpdateListener);
+        (_b = meeting.self) === null || _b === void 0 ? void 0 : _b.addListener('deviceUpdate', this.deviceUpdateListener);
+        (_c = meeting.self) === null || _c === void 0 ? void 0 : _c.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+        writeTask(async () => {
+            var _a, _b;
+            const videoDevices = await meeting.self.getVideoDevices();
+            const currentVideoDevice = (_a = meeting.self.getCurrentDevices()) === null || _a === void 0 ? void 0 : _a.video;
+            //  NOTE(callmetarush): Setting current video device to show on top of list
+            if (currentVideoDevice != undefined) {
+                this.videoDevices = [
+                    (_b = videoDevices.find((device) => device.deviceId === currentVideoDevice.deviceId)) !== null && _b !== void 0 ? _b : currentVideoDevice,
+                    ...videoDevices.filter((device) => device.deviceId !== currentVideoDevice.deviceId),
+                ];
+            }
+            else {
+                this.videoDevices = videoDevices;
+            }
+        });
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.removeListener('stageStatusUpdate', this.stageStateListener);
+        (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self.removeListener('deviceListUpdate', this.deviceListUpdateListener);
+        (_d = this.meeting) === null || _d === void 0 ? void 0 : _d.self.removeListener('deviceUpdate', this.deviceUpdateListener);
+        (_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+    }
+    async setDevice(deviceId) {
+        var _a;
+        const device = this.videoDevices.find((d) => d.deviceId === deviceId);
+        this.currentDevice = device;
+        if (device != null) {
+            await ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.setDevice(device));
+        }
+    }
+    render() {
+        if (this.meeting == null)
+            return null;
+        let unnamedVideoCount = 0;
+        return (h(Host, null, this.canProduceVideo && (h("div", { class: 'group container ' + this.variant, part: "camera-selection" }, h("label", null, this.variant !== 'inline' && this.t('camera'), h("rtk-icon", { icon: this.iconPack.video_on, size: "sm" })), h("div", { class: "row" }, h("select", { class: "rtk-select", onChange: (e) => this.setDevice(e.target.value) }, this.videoDevices.map(({ deviceId, label }) => {
+            var _a;
+            return (h("option", { selected: ((_a = this.currentDevice) === null || _a === void 0 ? void 0 : _a.deviceId) === deviceId, value: deviceId }, label || `Camera ${++unnamedVideoCount}`));
+        })))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkCameraSelectorStyle0; }
+}, [1, "rtk-camera-selector", {
+        "meeting": [16],
+        "size": [513],
+        "iconPack": [16],
+        "variant": [1],
+        "t": [16],
+        "videoDevices": [32],
+        "currentDevice": [32],
+        "canProduceVideo": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkCameraSelector.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCameraSelector.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCameraSelector.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkCameraSelector.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-camera-selector", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-camera-selector":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkCameraSelector);
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkCameraSelector as R, defineCustomElement as d };

package/dist/components/p-92a1602c.js

@@ -0,0 +1,64 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+
+const rtkButtonCss = ":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{--icon-size:var(--rtk-button-icon-size, var(--rtk-space-5, 20px));--transition-property:var(--rtk-transition-property, all);--transition-duration:100ms;display:inline-flex;height:var(--rtk-space-8, 32px);cursor:pointer;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-sm, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration)}button{box-sizing:border-box;background-color:transparent;color:inherit;border:var(--rtk-border-width-sm, 1px) solid transparent;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);display:inline-flex;flex-grow:1;justify-content:center;vertical-align:baseline;gap:var(--rtk-space-1, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration);outline:none;height:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-weight:inherit;font-family:inherit;font-size:inherit;line-height:inherit}.start,.content,.end{align-self:center}::slotted(rtk-icon),::slotted(rtk-spinner){height:var(--icon-size);width:var(--icon-size)}:host([variant='primary']){color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}button:focus-visible{border-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host(:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity))}:host([disabled]:not([disabled='false'])){cursor:not-allowed;opacity:0.6}:host([variant='secondary']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='secondary']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([variant='secondary']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host([variant='danger']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='danger']:hover){background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.7)}:host([variant='danger']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='ghost']){background-color:transparent;color:inherit}:host([variant='ghost'].active){--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}:host([variant='ghost']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='ghost']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([kind='icon']){--icon-size:var(--rtk-space-5, 20px);width:var(--rtk-space-8, 32px)}:host([kind='icon']) button{padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px)}:host([kind='wide']){width:100%}:host([size='lg']){--icon-size:var(--rtk-space-5, 20px);height:var(--rtk-space-10, 40px);font-size:16px}:host([size='lg'][kind='icon']){--icon-size:var(--rtk-space-6, 24px);height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px)}:host([size='sm']){--icon-size:var(--rtk-space-4, 16px);height:var(--rtk-space-6, 24px);font-size:12px}:host([size='sm'][kind='icon']){height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}";
+const RtkButtonStyle0 = rtkButtonCss;
+
+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 RtkButton = /*@__PURE__*/ proxyCustomElement(class RtkButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Button variant */
+        this.variant = 'primary';
+        /** Button type */
+        this.kind = 'button';
+        /** Whether to reverse order of children */
+        this.reverse = false;
+        /** Where the button is disabled or not */
+        this.disabled = false;
+        /** Button type */
+        this.type = 'button';
+    }
+    render() {
+        return (h(Host, { key: 'c6135911cab1cd37d5ebd46269f76fd175c41d25' }, h("button", { key: 'f1872eb9efc1c00b36ab8729ac27c303cd4d775e', part: "button", type: this.type, disabled: this.disabled }, h("span", { key: '5a56e98710749503987b045bbe9d833e5708a26c', class: "start" }, h("slot", { key: '0963cce1a1788c816503176c05346839fd302fdc', name: "start" })), h("span", { key: 'c19dab69abffcea5926e04799aa29dc946ccedf9', class: "content", part: "content" }, h("slot", { key: 'c89ef75f65e53e26ba85922c2191d411ea445df4' })), h("span", { key: '0eed62f1fcdc33939f41c10e4cf9ddb47dbc379d', class: "end" }, h("slot", { key: '3376b8976558c0265837b4f86fa07300f84f2469', name: "end" })))));
+    }
+    static get delegatesFocus() { return true; }
+    static get style() { return RtkButtonStyle0; }
+}, [17, "rtk-button", {
+        "size": [513],
+        "variant": [513],
+        "kind": [513],
+        "reverse": [516],
+        "disabled": [516],
+        "type": [513]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkButton.prototype, "size", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkButton as R, defineCustomElement as d };

package/dist/components/p-92e527ab.js

@@ -0,0 +1,131 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$1 } from './p-92a1602c.js';
+
+const rtkLeaveMeetingCss = ":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)}.leave-modal{width:var(--rtk-space-72, 288px)}@media (min-width: 768px){.leave-modal{width:var(--rtk-space-96, 384px)}}.leave-modal{position:relative;display:flex;flex-direction:column;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));padding:var(--rtk-space-8, 32px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.leave-modal .header h2{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}.leave-modal .message{color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.leave-modal .content{margin-top:var(--rtk-space-4, 16px);font-size:14px;display:flex;flex-wrap:wrap;gap:var(--rtk-space-4, 16px)}.leave-modal .content rtk-button{height:var(--rtk-space-9, 36px);min-width:var(--rtk-space-44, 176px);flex-grow:1}.leave-modal .content .secondary-btn{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.leave-modal .content .secondary-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.leave-modal .content .secondary-danger-btn{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkLeaveMeetingStyle0 = rtkLeaveMeetingCss;
+
+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 RtkLeaveMeeting = /*@__PURE__*/ proxyCustomElement(class RtkLeaveMeeting extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.keyPressListener = (e) => {
+            if (e.key === 'Escape') {
+                this.close();
+            }
+        };
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.canEndMeeting = false;
+        this.isBreakoutRoomsActive = false;
+        this.isChildMeeting = false;
+        this.canJoinMainRoom = false;
+        this.permissionsUpdateListener = () => {
+            this.canEndMeeting = this.meeting.self.permissions.kickParticipant;
+            this.canJoinMainRoom = this.meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;
+        };
+        this.close = () => {
+            this.stateUpdate.emit({ activeLeaveConfirmation: false });
+        };
+        this.handleLeave = () => {
+            var _a;
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.leaveRoom();
+            this.close();
+        };
+        this.handleJoinMainRoom = () => {
+            this.meeting.connectedMeetings.moveParticipants(this.meeting.meta.meetingId, this.meeting.connectedMeetings.parentMeeting.id, [this.meeting.self.userId]);
+            this.close();
+        };
+        this.handleEndMeeting = () => {
+            var _a;
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants.kickAll();
+            this.close();
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        document.addEventListener('keydown', this.keyPressListener);
+    }
+    disconnectedCallback() {
+        var _a;
+        document.removeEventListener('keydown', this.keyPressListener);
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    meetingChanged(meeting) {
+        if (meeting != null) {
+            this.isBreakoutRoomsActive =
+                this.meeting.connectedMeetings.supportsConnectedMeetings &&
+                    this.meeting.connectedMeetings.isActive;
+            this.isChildMeeting =
+                this.meeting.connectedMeetings.supportsConnectedMeetings &&
+                    this.meeting.connectedMeetings.meetings.some((cMeet) => cMeet.id === meeting.meta.meetingId);
+            this.meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+            this.permissionsUpdateListener();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd6e7a2eba47854f5f3da4008137081383769d159' }, h("div", { key: 'afffb6ce1dd2b38dd3cf2731723dbd0c8e68e046', class: "leave-modal" }, h("div", { key: 'f60a1660e94307fdf36e5e52a513648adc741aa5', class: "header" }, h("h2", { key: '5e80bd3031ed95929d6560e79e5edfcca607b169', class: "title" }, this.t('leave'))), h("p", { key: 'adfd75ca8e0408f90687f39de5de3b237378deb0', class: "message" }, this.isBreakoutRoomsActive && this.isChildMeeting
+            ? this.t('breakout_rooms.leave_confirmation')
+            : this.t('leave_confirmation')), h("div", { key: '395b4f29350512c4c9d512984482bb934aadf983', class: "content" }, h("rtk-button", { key: '85adbf49f8ae02e05e16a349c99152b525ff6520', variant: "secondary", onClick: this.close, class: "secondary-btn" }, this.t('cancel')), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && (h("rtk-button", { key: '6a965a9e4cad6f07624c7ac5255207b7b021b47c', variant: "secondary", onClick: this.handleJoinMainRoom, class: "secondary-btn" }, this.t('breakout_rooms.leave_confirmation.main_room_btn'))), h("rtk-button", { key: '41050c3895eeab4edc56742799505790d881cad9', variant: "danger", title: this.t('leave'), onClick: this.handleLeave }, this.t('leave')), this.canEndMeeting && (h("rtk-button", { key: '15fafd5ba16a9b545ba170ca1c0b113294d65ce9', variant: "danger", class: "secondary-btn secondary-danger-btn", onClick: this.handleEndMeeting }, this.t('end.all')))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkLeaveMeetingStyle0; }
+}, [1, "rtk-leave-meeting", {
+        "meeting": [16],
+        "states": [16],
+        "iconPack": [16],
+        "t": [16],
+        "canEndMeeting": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkLeaveMeeting.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-leave-meeting", "rtk-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-leave-meeting":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkLeaveMeeting);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkLeaveMeeting as R, defineCustomElement as d };

package/dist/components/p-96be234f.js

@@ -0,0 +1,26 @@
+const sm = 640;
+const md = 768;
+const lg = 1080;
+const xl = 2160;
+const breakpoints = {
+	sm: sm,
+	md: md,
+	lg: lg,
+	xl: xl
+};
+
+/**
+ * Get the screen breakpoint from a given width
+ * @param width The width of the container
+ * @returns The screen breakpoint value
+ */
+const getSize = (width) => {
+    if (width >= breakpoints.lg)
+        return 'lg';
+    else if (width >= breakpoints.md)
+        return 'md';
+    else
+        return 'sm';
+};
+
+export { getSize as g };

package/dist/components/p-96d5823f.js

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+
+const rtkMenuListCss = ":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;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));color:rgb(var(--rtk-colors-text-1000, 255 255 255));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)}";
+const RtkMenuListStyle0 = rtkMenuListCss;
+
+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 RtkMenuList = /*@__PURE__*/ proxyCustomElement(class RtkMenuList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+    }
+    render() {
+        return (h(Host, { key: '53cfa1381ea1c0bdfe99362f56cc505bff492774' }, h("slot", { key: 'fffe3a71f857c152d6619514d875893b5899b956' })));
+    }
+    static get style() { return RtkMenuListStyle0; }
+}, [1, "rtk-menu-list", {
+        "iconPack": [16],
+        "t": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMenuList.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMenuList.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-menu-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMenuList);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkMenuList as R, defineCustomElement as d };