@techsee/techsee-nway-media-service-client 2.0.0 → 2.1.0

package/LICENSE.md

@@ -0,0 +1 @@
+.

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaButtonsPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAmB,oBAAoB,EAAC,MAAM,sCAAsC,CAAC;AAC5F,OAAO,EAAC,iBAAiB,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,EAAC,uBAAuB,EAAC,MAAM,8BAA8B,CAAC;AAErE,UAAU,KAAK;IACX,WAAW,EAAE,oBAAoB,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,YAAY,EAAE,uBAAuB,CAAC;IACtC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,oBAAY,cAAc;IACtB,KAAK,IAAA;IACL,MAAM,IAAA;CACT;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkG7C,CAAC"}
+{"version":3,"file":"MediaButtonsPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAmB,oBAAoB,EAAC,MAAM,sCAAsC,CAAC;AAC5F,OAAO,EAAC,iBAAiB,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,EAAC,uBAAuB,EAAC,MAAM,8BAA8B,CAAC;AAErE,UAAU,KAAK;IACX,WAAW,EAAE,oBAAoB,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,YAAY,EAAE,uBAAuB,CAAC;IACtC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,oBAAY,cAAc;IACtB,KAAK,IAAA;IACL,MAAM,IAAA;CACT;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0H7C,CAAC"}

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.js

@@ -17,15 +17,13 @@ require("./MediaButtonsPanel.scss");
 var react_1 = require("react");
 var MultipartyButton_1 = require("../MultipartyButton/MultipartyButton");
 var MediaConstants_1 = require("@techsee/techsee-media-service/lib/MediaConstants");
-var simple_icon_1 = require("@techsee/techsee-ui-common/lib/icons/simple-icon");
 var ButtonsSpacing;
 (function (ButtonsSpacing) {
     ButtonsSpacing[ButtonsSpacing["Dense"] = 0] = "Dense";
     ButtonsSpacing[ButtonsSpacing["Sparse"] = 1] = "Sparse";
 })(ButtonsSpacing = exports.ButtonsSpacing || (exports.ButtonsSpacing = {}));
 var MediaButtonsPanel = function (_a) {
-    var _b;
-    var buttonsType = _a.buttonsType, isMuted = _a.isMuted, isVideoTurnedOff = _a.isVideoTurnedOff, _c = _a.isBackgroundVisible, isBackgroundVisible = _c === void 0 ? true : _c, _d = _a.isIconTransparencyEnabled, isIconTransparencyEnabled = _d === void 0 ? true : _d, _e = _a.buttonsSpacing, buttonsSpacing = _e === void 0 ? ButtonsSpacing.Sparse : _e, _f = _a.screenShareRole, screenShareRole = _f === void 0 ? undefined : _f, translations = _a.translations, onToggleMute = _a.onToggleMute, onToggleVideo = _a.onToggleVideo, onSwitchCamera = _a.onSwitchCamera, _g = _a.muteButtonDisabled, muteButtonDisabled = _g === void 0 ? false : _g, onShareScreen = _a.onShareScreen, onStopScreenShare = _a.onStopScreenShare, _h = _a.showScreenShareButton, showScreenShareButton = _h === void 0 ? false : _h;
+    var buttonsType = _a.buttonsType, isMuted = _a.isMuted, isVideoTurnedOff = _a.isVideoTurnedOff, _b = _a.isBackgroundVisible, isBackgroundVisible = _b === void 0 ? true : _b, _c = _a.isIconTransparencyEnabled, isIconTransparencyEnabled = _c === void 0 ? true : _c, _d = _a.buttonsSpacing, buttonsSpacing = _d === void 0 ? ButtonsSpacing.Sparse : _d, _e = _a.screenShareRole, screenShareRole = _e === void 0 ? undefined : _e, translations = _a.translations, onToggleMute = _a.onToggleMute, onToggleVideo = _a.onToggleVideo, onSwitchCamera = _a.onSwitchCamera, _f = _a.muteButtonDisabled, muteButtonDisabled = _f === void 0 ? false : _f, onShareScreen = _a.onShareScreen, onStopScreenShare = _a.onStopScreenShare, _g = _a.showScreenShareButton, showScreenShareButton = _g === void 0 ? false : _g;
     var platformClass = 'mobile';
     if (buttonsType === MultipartyButton_1.MultipartyButtonType.Desktop) {
         platformClass = 'desktop';
@@ -34,24 +32,42 @@ var MediaButtonsPanel = function (_a) {
         platformClass = 'desktop-obsolete';
     }
     platformClass += ' ' + (buttonsSpacing === ButtonsSpacing.Dense ? 'dense' : 'sparse');
-    var userIsSharingScreen = !!(screenShareRole === MediaConstants_1.SessionClientRole.USER);
-    var nonUserIsSharingScreen = !!(screenShareRole && screenShareRole !== MediaConstants_1.SessionClientRole.USER);
-    var _j = (0, react_1.useState)(false), displayStopSharingButton = _j[0], setDisplayStopSharingButton = _j[1];
+    var _h = (0, react_1.useState)(false), isLocallySharing = _h[0], setIsLocallySharing = _h[1];
+    var prevScreenShareRoleRef = (0, react_1.useRef)(screenShareRole);
+    // Sync local state with actual screenShareRole when it gets updated
+    (0, react_1.useEffect)(function () {
+        var prevScreenShareRole = prevScreenShareRoleRef.current;
+        if (screenShareRole === MediaConstants_1.SessionClientRole.USER && prevScreenShareRole !== MediaConstants_1.SessionClientRole.USER) {
+            setIsLocallySharing(true);
+        }
+        else if (screenShareRole === undefined && prevScreenShareRole === MediaConstants_1.SessionClientRole.USER) {
+            setIsLocallySharing(false);
+        }
+        prevScreenShareRoleRef.current = screenShareRole;
+    }, [screenShareRole, isLocallySharing]);
+    var userIsSharingScreen = (0, react_1.useMemo)(function () {
+        return !!(screenShareRole === MediaConstants_1.SessionClientRole.USER) || isLocallySharing;
+    }, [screenShareRole, isLocallySharing]);
+    var nonUserIsSharingScreen = (0, react_1.useMemo)(function () {
+        return !!(screenShareRole && screenShareRole !== MediaConstants_1.SessionClientRole.USER);
+    }, [screenShareRole]);
     var onClickScreenShareButton = (0, react_1.useCallback)(function () {
-        if (userIsSharingScreen) {
-            setDisplayStopSharingButton(!displayStopSharingButton);
+        // Don't allow sharing if another user is already sharing
+        if (nonUserIsSharingScreen) {
+            return;
         }
-        if (!userIsSharingScreen && !nonUserIsSharingScreen) {
+        if (!userIsSharingScreen && !nonUserIsSharingScreen && onShareScreen) {
+            setIsLocallySharing(true);
             onShareScreen();
         }
-    }, [userIsSharingScreen, nonUserIsSharingScreen, displayStopSharingButton, screenShareRole, onShareScreen]);
+    }, [userIsSharingScreen, nonUserIsSharingScreen, onShareScreen]);
     var onClickStopScreenShareButton = (0, react_1.useCallback)(function () {
-        if (userIsSharingScreen && displayStopSharingButton) {
-            setDisplayStopSharingButton(false);
+        if (onStopScreenShare) {
+            setIsLocallySharing(false);
             onStopScreenShare();
         }
-    }, [userIsSharingScreen, displayStopSharingButton, screenShareRole, onStopScreenShare]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "media-buttons-panel ".concat(platformClass) }, { children: [(0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onToggleMute, iconName: isMuted ? 'mic-off' : 'mic-on', isSwitchedOn: !isIconTransparencyEnabled || !isMuted, isBackgroundVisible: isBackgroundVisible, disabled: muteButtonDisabled }), onToggleVideo && ((0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onToggleVideo, iconName: isVideoTurnedOff ? 'camera-off' : 'camera-on', isSwitchedOn: !isIconTransparencyEnabled || !isVideoTurnedOff, isBackgroundVisible: isBackgroundVisible })), onSwitchCamera && ((0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onSwitchCamera, iconName: 'switch-camera', isBackgroundVisible: isBackgroundVisible, disabled: isVideoTurnedOff })), onShareScreen && showScreenShareButton && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'share-screen-mobile' }, { children: [(0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onClickScreenShareButton, iconName: 'Screen-Share', isBackgroundVisible: isBackgroundVisible, disabled: nonUserIsSharingScreen }), displayStopSharingButton && onStopScreenShare && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'stop-desktop-sharing', onClick: onClickStopScreenShareButton }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: 'button' }, { children: (0, jsx_runtime_1.jsx)(simple_icon_1.Icon, { iconName: 'end-sharing' }) })), (0, jsx_runtime_1.jsx)("span", { children: (_b = translations.stopSharing) !== null && _b !== void 0 ? _b : 'Stop Sharing' })] })))] })))] })));
+    }, [onStopScreenShare]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "media-buttons-panel ".concat(platformClass) }, { children: [onToggleVideo && ((0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onToggleVideo, iconName: isVideoTurnedOff ? 'camera-off' : 'camera-on', isSwitchedOn: !isIconTransparencyEnabled || !isVideoTurnedOff, isBackgroundVisible: isBackgroundVisible })), onSwitchCamera && ((0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onSwitchCamera, iconName: 'switch-camera', isBackgroundVisible: isBackgroundVisible, disabled: isVideoTurnedOff })), showScreenShareButton && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'share-screen-mobile' }, { children: [!userIsSharingScreen && onShareScreen && ((0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onClickScreenShareButton, iconName: 'Screen-Share', isBackgroundVisible: isBackgroundVisible, disabled: nonUserIsSharingScreen })), userIsSharingScreen && onStopScreenShare && ((0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onClickStopScreenShareButton, iconName: 'end-sharing', isBackgroundVisible: isBackgroundVisible, isSwitchedOn: true }))] }))), (0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onToggleMute, iconName: isMuted ? 'mic-off' : 'mic-on', isSwitchedOn: !isIconTransparencyEnabled || !isMuted, isBackgroundVisible: isBackgroundVisible, disabled: muteButtonDisabled })] })));
 };
 exports.MediaButtonsPanel = MediaButtonsPanel;
 //# sourceMappingURL=MediaButtonsPanel.js.map

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaButtonsPanel.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MediaButtonsPanel.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.tsx"],"names":[],"mappings":"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"}

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.scss

@@ -1,12 +1,17 @@
 .media-buttons-panel {
     display: flex;
 
+    // Mobile //
     &.mobile > * {
-        margin: 15px 15px 15px 0;
+        margin: 15px 2px 15px 0;
+
+        &:last-child {
+            margin-right: 0;
+        }
     }
 
     &.desktop.sparse > * {
-        margin: 10px 10px 10px 0;
+        margin: 10px 2px 10px 0;
 
         &:last-child {
             margin-right: 0;
@@ -28,4 +33,60 @@
     & > *:last-child {
         margin-right: 0;
     }
+
+    // Mobile screen sharing styles - no custom styles needed, using MultipartyButton
+    &.mobile {
+        .share-screen-mobile {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+    }
+
+    .btn-rounded:disabled {
+        .border-rounded-icon.color-black.reverse-color.transparent-p50 {
+            background-color: transparent;
+            color: #ffffff;
+            border: none;
+            box-shadow: none;
+            fill: #ffffff;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: transparent;
+                color: #ffffff;
+                border: none;
+                box-shadow: none;
+            }
+
+            // Preserve shadow box circle for switch camera button when disabled
+            &.icon-switch-camera {
+                background-color: black;
+                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07);
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: black;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07);
+                }
+            }
+
+            // Preserve background circle for screen share button when disabled but add opacity
+            &.icon-Screen-Share {
+                background-color: rgba(0, 0, 0, 0.5) !important;
+                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07);
+                opacity: 0.6;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: rgba(0, 0, 0, 0.5) !important;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07);
+                    opacity: 0.6;
+                }
+            }
+        }
+    }
 }

package/lib/components/ButtonPanels/ParticipantActionsMenu/ParticipantActionsMenu.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './ParticipantActionsMenu.scss';
+type PinCallback = (() => void) | false | undefined;
+type Props = {
+    isVideoHover: boolean;
+    isPinned: boolean;
+    onTogglePin?: PinCallback;
+    onRemove?: () => void;
+    pinLabel?: string;
+    pinnedLabel?: string;
+    removeLabel?: string;
+};
+export declare const ParticipantActionsMenu: React.FC<Props>;
+export {};
+//# sourceMappingURL=ParticipantActionsMenu.d.ts.map

package/lib/components/ButtonPanels/ParticipantActionsMenu/ParticipantActionsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantActionsMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/ParticipantActionsMenu/ParticipantActionsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,+BAA+B,CAAC;AAevC,KAAK,WAAW,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,GAAG,SAAS,CAAC;AAEpD,KAAK,KAAK,GAAG;IACT,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4HlD,CAAC"}

package/lib/components/ButtonPanels/ParticipantActionsMenu/ParticipantActionsMenu.js

@@ -0,0 +1,107 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticipantActionsMenu = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+require("./ParticipantActionsMenu.scss");
+var VIEWPORT_PADDING = 8;
+/** Matches SCSS min-width until we measure the real node */
+var DROPDOWN_WIDTH_ESTIMATE = 200;
+function computeDropdownLeft(rect, dropdownWidth) {
+    var left = rect.left;
+    if (left + dropdownWidth > window.innerWidth - VIEWPORT_PADDING) {
+        left = rect.right - dropdownWidth;
+    }
+    var maxLeft = window.innerWidth - dropdownWidth - VIEWPORT_PADDING;
+    return Math.max(VIEWPORT_PADDING, Math.min(left, maxLeft));
+}
+var ParticipantActionsMenu = function (_a) {
+    var isVideoHover = _a.isVideoHover, isPinned = _a.isPinned, onTogglePin = _a.onTogglePin, onRemove = _a.onRemove, pinLabel = _a.pinLabel, pinnedLabel = _a.pinnedLabel, removeLabel = _a.removeLabel;
+    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = (0, react_1.useState)({}), dropdownStyle = _c[0], setDropdownStyle = _c[1];
+    var containerRef = (0, react_1.useRef)(null);
+    var btnRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var positionDropdown = (0, react_1.useCallback)(function () {
+        var _a;
+        if (!btnRef.current) {
+            return;
+        }
+        var rect = btnRef.current.getBoundingClientRect();
+        var width = ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || DROPDOWN_WIDTH_ESTIMATE;
+        var left = computeDropdownLeft(rect, width);
+        setDropdownStyle({
+            position: 'fixed',
+            top: rect.bottom + 4,
+            left: left,
+            zIndex: 99999
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (e) {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+    }, []);
+    var handleToggle = function () {
+        if (!isOpen && btnRef.current) {
+            var rect = btnRef.current.getBoundingClientRect();
+            var left = computeDropdownLeft(rect, DROPDOWN_WIDTH_ESTIMATE);
+            setDropdownStyle({
+                position: 'fixed',
+                top: rect.bottom + 4,
+                left: left,
+                zIndex: 99999
+            });
+        }
+        setIsOpen(function (prev) { return !prev; });
+    };
+    (0, react_1.useLayoutEffect)(function () {
+        if (isOpen) {
+            positionDropdown();
+        }
+    }, [isOpen, positionDropdown]);
+    (0, react_1.useEffect)(function () {
+        if (!isOpen) {
+            return;
+        }
+        var onResizeOrScroll = function () { return positionDropdown(); };
+        window.addEventListener('resize', onResizeOrScroll);
+        document.addEventListener('scroll', onResizeOrScroll, true);
+        return function () {
+            window.removeEventListener('resize', onResizeOrScroll);
+            document.removeEventListener('scroll', onResizeOrScroll, true);
+        };
+    }, [isOpen, positionDropdown]);
+    var hasPinAction = typeof onTogglePin === 'function';
+    var hasRemoveAction = typeof onRemove === 'function';
+    var hasActions = hasPinAction || hasRemoveAction;
+    if (!hasActions) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'participant-actions-menu', ref: containerRef }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "participant-actions-trigger".concat(isVideoHover || isOpen ? ' visible' : '') }, { children: (0, jsx_runtime_1.jsx)("button", __assign({ ref: btnRef, className: 'participant-actions-btn', onClick: handleToggle }, { children: (0, jsx_runtime_1.jsx)("i", { className: 'icon icon-dots' }) })) })), isOpen && ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: dropdownRef, className: 'participant-actions-dropdown', style: dropdownStyle }, { children: [hasPinAction && ((0, jsx_runtime_1.jsxs)("button", __assign({ className: "participant-action-item".concat(isPinned ? ' pinned' : ''), disabled: isPinned, onClick: function () {
+                            if (!isPinned && onTogglePin) {
+                                onTogglePin();
+                                setIsOpen(false);
+                            }
+                        } }, { children: [(0, jsx_runtime_1.jsx)("i", { className: 'action-icon icon icon-pin' }), (0, jsx_runtime_1.jsx)("span", __assign({ className: 'action-label' }, { children: isPinned ? (pinnedLabel !== null && pinnedLabel !== void 0 ? pinnedLabel : 'Pinned') : pinLabel }))] }))), hasRemoveAction && ((0, jsx_runtime_1.jsxs)("button", __assign({ className: 'participant-action-item', onClick: function () {
+                            onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                            setIsOpen(false);
+                        } }, { children: [(0, jsx_runtime_1.jsx)("i", { className: 'action-icon icon icon-stop-sign' }), (0, jsx_runtime_1.jsx)("span", __assign({ className: 'action-label' }, { children: removeLabel }))] })))] })))] })));
+};
+exports.ParticipantActionsMenu = ParticipantActionsMenu;
+//# sourceMappingURL=ParticipantActionsMenu.js.map

package/lib/components/ButtonPanels/ParticipantActionsMenu/ParticipantActionsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantActionsMenu.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/ParticipantActionsMenu/ParticipantActionsMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAuF;AACvF,yCAAuC;AAEvC,IAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,4DAA4D;AAC5D,IAAM,uBAAuB,GAAG,GAAG,CAAC;AAEpC,SAAS,mBAAmB,CAAC,IAAa,EAAE,aAAqB;IAC7D,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACrB,IAAI,IAAI,GAAG,aAAa,GAAG,MAAM,CAAC,UAAU,GAAG,gBAAgB,EAAE;QAC7D,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;KACrC;IACD,IAAM,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,aAAa,GAAG,gBAAgB,CAAC;IACrE,OAAO,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;AAC/D,CAAC;AAcM,IAAM,sBAAsB,GAAoB,UAAC,EAQvD;QAPG,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,WAAW,iBAAA;IAEL,IAAA,KAAsB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IACtC,IAAA,KAAoC,IAAA,gBAAQ,EAAsB,EAAE,CAAC,EAApE,aAAa,QAAA,EAAE,gBAAgB,QAAqC,CAAC;IAC5E,IAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,IAAM,MAAM,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAC/C,IAAM,WAAW,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEjD,IAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC;;QACjC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACjB,OAAO;SACV;QACD,IAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACpD,IAAM,KAAK,GAAG,CAAA,MAAA,WAAW,CAAC,OAAO,0CAAE,WAAW,KAAI,uBAAuB,CAAC;QAC1E,IAAM,IAAI,GAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAE9C,gBAAgB,CAAC;YACb,QAAQ,EAAE,OAAO;YACjB,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC;YACpB,IAAI,MAAA;YACJ,MAAM,EAAE,KAAK;SAChB,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC;QACN,IAAM,kBAAkB,GAAG,UAAC,CAAa;YACrC,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;gBAC1E,SAAS,CAAC,KAAK,CAAC,CAAC;aACpB;QACL,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO,cAAM,OAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,EAA7D,CAA6D,CAAC;IAC/E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,YAAY,GAAG;QACjB,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,EAAE;YAC3B,IAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACpD,IAAM,IAAI,GAAG,mBAAmB,CAAC,IAAI,EAAE,uBAAuB,CAAC,CAAC;YAEhE,gBAAgB,CAAC;gBACb,QAAQ,EAAE,OAAO;gBACjB,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC;gBACpB,IAAI,MAAA;gBACJ,MAAM,EAAE,KAAK;aAChB,CAAC,CAAC;SACN;QACD,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,EAAL,CAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,IAAA,uBAAe,EAAC;QACZ,IAAI,MAAM,EAAE;YACR,gBAAgB,EAAE,CAAC;SACtB;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/B,IAAA,iBAAS,EAAC;QACN,IAAI,CAAC,MAAM,EAAE;YACT,OAAO;SACV;QACD,IAAM,gBAAgB,GAAG,cAAM,OAAA,gBAAgB,EAAE,EAAlB,CAAkB,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC;QAE5D,OAAO;YACH,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC;QACnE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/B,IAAM,YAAY,GAAG,OAAO,WAAW,KAAK,UAAU,CAAC;IACvD,IAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC;IACvD,IAAM,UAAU,GAAG,YAAY,IAAI,eAAe,CAAC;IAEnD,IAAI,CAAC,UAAU,EAAE;QACb,OAAO,kDAAK,CAAC;KAChB;IAED,OAAO,CACH,0CAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,YAAY,iBACvD,yCAAK,SAAS,EAAE,qCAA8B,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAE,gBACpF,4CAAQ,GAAG,EAAE,MAAM,EAAE,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,YAAY,gBAC1E,8BAAG,SAAS,EAAC,gBAAgB,GAAG,IAC3B,IACP,EACL,MAAM,IAAI,CACP,0CAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,aAAa,iBAC/E,YAAY,IAAI,CACb,6CACI,SAAS,EAAE,iCAA0B,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EAChE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE;4BACL,IAAI,CAAC,QAAQ,IAAI,WAAW,EAAE;gCAC1B,WAAW,EAAE,CAAC;gCACd,SAAS,CAAC,KAAK,CAAC,CAAC;6BACpB;wBACL,CAAC,iBACD,8BAAG,SAAS,EAAC,2BAA2B,GAAG,EAC3C,0CAAM,SAAS,EAAC,cAAc,gBAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAQ,KAClF,CACZ,EACA,eAAe,IAAI,CAChB,6CACI,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE;4BACL,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;4BACb,SAAS,CAAC,KAAK,CAAC,CAAC;wBACrB,CAAC,iBACD,8BAAG,SAAS,EAAC,iCAAiC,GAAG,EACjD,0CAAM,SAAS,EAAC,cAAc,gBAAE,WAAW,IAAQ,KAC9C,CACZ,KACC,CACT,KACC,CACT,CAAC;AACN,CAAC,CAAC;AA5HW,QAAA,sBAAsB,0BA4HjC"}

package/lib/components/ButtonPanels/ParticipantActionsMenu/ParticipantActionsMenu.scss

@@ -0,0 +1,104 @@
+.participant-actions-menu {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 30;
+
+    @media screen and (max-width: 768px) {
+        // CSS max() — interpolate so Sass does not treat it as built-in max()
+        top: #{'max(6px, env(safe-area-inset-top, 0px))'};
+        right: 4px;
+    }
+
+    .participant-actions-trigger {
+        opacity: 0;
+        transition: opacity 0.15s;
+
+        &.visible {
+            opacity: 1;
+        }
+
+        .participant-actions-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            border: none;
+            background: rgba(80, 80, 80, 0.75);
+            cursor: pointer;
+            padding: 0;
+
+            &:hover {
+                background: rgba(80, 80, 80, 0.95);
+            }
+
+            i {
+                color: #fff;
+                font-size: 18px;
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    .participant-actions-dropdown {
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        min-width: 200px;
+        overflow: hidden;
+        z-index: 1050;
+
+        .participant-action-item {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            width: 100%;
+            padding: 14px 18px;
+            background: none;
+            border: none;
+            border-bottom: 1px solid #ebebeb;
+            cursor: pointer;
+            font-size: 15px;
+            color: #222;
+            text-align: left;
+            transition: background 0.15s;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &:hover:not(:disabled) {
+                background: #e8f0fe;
+                color: #1a73e8;
+
+                .action-icon {
+                    color: #1a73e8;
+                }
+            }
+
+            &.pinned,
+            &:disabled {
+                color: #aaa;
+                cursor: default;
+
+                .action-icon {
+                    color: #aaa;
+                }
+            }
+
+            .action-icon {
+                font-size: 18px;
+                color: #555;
+                flex-shrink: 0;
+                transition: color 0.15s;
+            }
+
+            .action-label {
+                white-space: nowrap;
+                font-weight: 500;
+            }
+        }
+    }
+}

package/lib/components/ButtonPanels/RemoveButtonPanel/RemoveButtonPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    isVideoHover: boolean;
+    onRemove?: () => void;
+};
+export declare const RemoveButtonPanel: React.FC<Props>;
+export {};
+//# sourceMappingURL=RemoveButtonPanel.d.ts.map

package/lib/components/ButtonPanels/RemoveButtonPanel/RemoveButtonPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveButtonPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/RemoveButtonPanel/RemoveButtonPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,KAAK,GAAG;IACT,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAY7C,CAAC"}

package/lib/components/ButtonPanels/RemoveButtonPanel/RemoveButtonPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoveButtonPanel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var MultipartyButton_1 = require("../MultipartyButton/MultipartyButton");
+var RemoveButtonPanel = function (_a) {
+    var onRemove = _a.onRemove, isVideoHover = _a.isVideoHover;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'remove-buttons-panel' }, { children: onRemove && ((0, jsx_runtime_1.jsx)(MultipartyButton_1.MultipartyButton, { type: MultipartyButton_1.MultipartyButtonType.Desktop, onClick: onRemove, iconName: 'close', isSwitchedOn: true, isBackgroundVisible: isVideoHover })) })));
+};
+exports.RemoveButtonPanel = RemoveButtonPanel;
+//# sourceMappingURL=RemoveButtonPanel.js.map

package/lib/components/ButtonPanels/RemoveButtonPanel/RemoveButtonPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveButtonPanel.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/RemoveButtonPanel/RemoveButtonPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,yEAA4F;AAOrF,IAAM,iBAAiB,GAAoB,UAAC,EAAwB;QAAvB,QAAQ,cAAA,EAAE,YAAY,kBAAA;IAAmB,OAAA,CACzF,yCAAK,SAAS,EAAC,sBAAsB,gBAChC,QAAQ,IAAI,CACT,uBAAC,mCAAgB,IACb,IAAI,EAAE,uCAAoB,CAAC,OAAO,EAClC,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAC,OAAO,EAChB,YAAY,EAAE,IAAI,EAClB,mBAAmB,EAAE,YAAY,GACnC,CACL,IACC,CACT;AAZ4F,CAY5F,CAAC;AAZW,QAAA,iBAAiB,qBAY5B"}

package/lib/components/ButtonPanels/index.d.ts

@@ -3,4 +3,6 @@ export { MediaButtonsPanel } from './MediaButtonsPanel/MediaButtonsPanel';
 export { MultipartyButtonType } from './MultipartyButton/MultipartyButton';
 export { SnapshotButtonPanel } from './SnapshotButtonPanel/SnapshotButtonPanel';
 export { EndMeetingButtonPanel } from './EndMeetingButtonPanel/EndMeetingButtonPanel';
+export { RemoveButtonPanel } from './RemoveButtonPanel/RemoveButtonPanel';
+export { ParticipantActionsMenu } from './ParticipantActionsMenu/ParticipantActionsMenu';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/ButtonPanels/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonPanels/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAC,mBAAmB,EAAC,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAC,qBAAqB,EAAC,MAAM,+CAA+C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonPanels/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAC,mBAAmB,EAAC,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAC,qBAAqB,EAAC,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAC,sBAAsB,EAAC,MAAM,iDAAiD,CAAC"}

package/lib/components/ButtonPanels/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EndMeetingButtonPanel = exports.SnapshotButtonPanel = exports.MultipartyButtonType = exports.MediaButtonsPanel = exports.PinButtonPanel = void 0;
+exports.ParticipantActionsMenu = exports.RemoveButtonPanel = exports.EndMeetingButtonPanel = exports.SnapshotButtonPanel = exports.MultipartyButtonType = exports.MediaButtonsPanel = exports.PinButtonPanel = void 0;
 var PinButtonPanel_1 = require("./PinButtonPanel/PinButtonPanel");
 Object.defineProperty(exports, "PinButtonPanel", { enumerable: true, get: function () { return PinButtonPanel_1.PinButtonPanel; } });
 var MediaButtonsPanel_1 = require("./MediaButtonsPanel/MediaButtonsPanel");
@@ -11,4 +11,8 @@ var SnapshotButtonPanel_1 = require("./SnapshotButtonPanel/SnapshotButtonPanel")
 Object.defineProperty(exports, "SnapshotButtonPanel", { enumerable: true, get: function () { return SnapshotButtonPanel_1.SnapshotButtonPanel; } });
 var EndMeetingButtonPanel_1 = require("./EndMeetingButtonPanel/EndMeetingButtonPanel");
 Object.defineProperty(exports, "EndMeetingButtonPanel", { enumerable: true, get: function () { return EndMeetingButtonPanel_1.EndMeetingButtonPanel; } });
+var RemoveButtonPanel_1 = require("./RemoveButtonPanel/RemoveButtonPanel");
+Object.defineProperty(exports, "RemoveButtonPanel", { enumerable: true, get: function () { return RemoveButtonPanel_1.RemoveButtonPanel; } });
+var ParticipantActionsMenu_1 = require("./ParticipantActionsMenu/ParticipantActionsMenu");
+Object.defineProperty(exports, "ParticipantActionsMenu", { enumerable: true, get: function () { return ParticipantActionsMenu_1.ParticipantActionsMenu; } });
 //# sourceMappingURL=index.js.map

package/lib/components/ButtonPanels/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonPanels/index.ts"],"names":[],"mappings":";;;AAAA,kEAA+D;AAAvD,gHAAA,cAAc,OAAA;AACtB,2EAAwE;AAAhE,sHAAA,iBAAiB,OAAA;AACzB,wEAAyE;AAAjE,wHAAA,oBAAoB,OAAA;AAC5B,iFAA8E;AAAtE,0HAAA,mBAAmB,OAAA;AAC3B,uFAAoF;AAA5E,8HAAA,qBAAqB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonPanels/index.ts"],"names":[],"mappings":";;;AAAA,kEAA+D;AAAvD,gHAAA,cAAc,OAAA;AACtB,2EAAwE;AAAhE,sHAAA,iBAAiB,OAAA;AACzB,wEAAyE;AAAjE,wHAAA,oBAAoB,OAAA;AAC5B,iFAA8E;AAAtE,0HAAA,mBAAmB,OAAA;AAC3B,uFAAoF;AAA5E,8HAAA,qBAAqB,OAAA;AAC7B,2EAAwE;AAAhE,sHAAA,iBAAiB,OAAA;AACzB,0FAAuF;AAA/E,gIAAA,sBAAsB,OAAA"}

package/lib/components/JoinRequestBanner/JoinRequestBanner.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './JoinRequestBanner.scss';
+export type PendingParticipant = {
+    participantId: string;
+    firstName: string;
+    lastName: string;
+};
+type JoinRequestBannerProps = {
+    pendingParticipants: PendingParticipant[];
+    titleLabel: string;
+    bannerTemplate: string;
+    admitLabel: string;
+    rejectLabel: string;
+    onAdmit: (participantId: string) => Promise<void>;
+    onReject: (participantId: string) => Promise<void>;
+};
+export declare const JoinRequestBanner: React.FC<JoinRequestBannerProps>;
+export {};
+//# sourceMappingURL=JoinRequestBanner.d.ts.map

package/lib/components/JoinRequestBanner/JoinRequestBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JoinRequestBanner.d.ts","sourceRoot":"","sources":["../../../src/components/JoinRequestBanner/JoinRequestBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC1B,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD,CAAC;AAsEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2B9D,CAAC"}