@100mslive/roomkit-react 0.3.3-alpha.7 → 0.3.3-alpha.9

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-D73DSBZU.js";
+} from "./chunk-YOZJ7OPW.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -2419,7 +2419,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
-      "bytes": 3523,
+      "bytes": 3545,
       "imports": [
         {
           "path": "react",
@@ -4201,8 +4201,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/hooks/useMetadata.tsx": {
-      "bytes": 1631,
+    "src/Prebuilt/components/hooks/useMetadata.jsx": {
+      "bytes": 1700,
       "imports": [
         {
           "path": "react",
@@ -4228,7 +4228,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx": {
-      "bytes": 8164,
+      "bytes": 8195,
       "imports": [
         {
           "path": "react",
@@ -4321,7 +4321,7 @@
           "original": "../../hooks/useDropdownList"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../../hooks/useMetadata"
         },
@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 328460,
+      "bytes": 328471,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5201,7 +5201,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-      "bytes": 12899,
+      "bytes": 13053,
       "imports": [
         {
           "path": "react",
@@ -5309,7 +5309,7 @@
           "original": "../../hooks/useDropdownList"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../../hooks/useMetadata"
         },
@@ -5393,7 +5393,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RaiseHand.tsx": {
-      "bytes": 986,
+      "bytes": 798,
       "imports": [
         {
           "path": "react",
@@ -5421,12 +5421,7 @@
           "original": "../IconButton"
         },
         {
-          "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
-          "kind": "import-statement",
-          "original": "../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
-        },
-        {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "./hooks/useMetadata"
         },
@@ -6342,7 +6337,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/Footer.tsx": {
-      "bytes": 3777,
+      "bytes": 3967,
       "imports": [
         {
           "path": "react",
@@ -6364,6 +6359,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/index.ts",
           "kind": "import-statement",
@@ -8243,7 +8243,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatFooter.tsx": {
-      "bytes": 10287,
+      "bytes": 10438,
       "imports": [
         {
           "path": "react",
@@ -9794,7 +9794,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx": {
-      "bytes": 2927,
+      "bytes": 2958,
       "imports": [
         {
           "path": "react",
@@ -9827,7 +9827,7 @@
           "original": "../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../hooks/useMetadata"
         },
@@ -11934,7 +11934,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/PreviousRoleInMetadata.tsx": {
-      "bytes": 738,
+      "bytes": 769,
       "imports": [
         {
           "path": "react",
@@ -11947,7 +11947,7 @@
           "external": true
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "./hooks/useMetadata"
         },
@@ -11960,7 +11960,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8106,
+      "bytes": 8259,
       "imports": [
         {
           "path": "react",
@@ -13770,7 +13770,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3291775
+      "bytes": 3292815
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15054,6 +15054,11 @@
           "kind": "require-call",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "require-call",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "require-call",
@@ -16709,7 +16714,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18255
+          "bytesInOutput": 18252
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -17021,7 +17026,7 @@
           "bytesInOutput": 743
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
-          "bytesInOutput": 4182
+          "bytesInOutput": 4204
         },
         "src/Sheet/Sheet.tsx": {
           "bytesInOutput": 3610
@@ -17134,8 +17139,8 @@
         "src/Prebuilt/components/MoreSettings/MuteAllModal.tsx": {
           "bytesInOutput": 2378
         },
-        "src/Prebuilt/components/hooks/useMetadata.tsx": {
-          "bytesInOutput": 2163
+        "src/Prebuilt/components/hooks/useMetadata.jsx": {
+          "bytesInOutput": 2305
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx": {
           "bytesInOutput": 8565
@@ -17228,13 +17233,13 @@
           "bytesInOutput": 938
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-          "bytesInOutput": 13388
+          "bytesInOutput": 13528
         },
         "src/Prebuilt/components/MoreSettings/MoreSettings.tsx": {
           "bytesInOutput": 831
         },
         "src/Prebuilt/components/RaiseHand.tsx": {
-          "bytesInOutput": 1306
+          "bytesInOutput": 1149
         },
         "src/Prebuilt/images/pdf-share.png": {
           "bytesInOutput": 25548
@@ -17303,7 +17308,7 @@
           "bytesInOutput": 1804
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
-          "bytesInOutput": 4294
+          "bytesInOutput": 4540
         },
         "src/Prebuilt/components/Notifications/HLSFailureModal.tsx": {
           "bytesInOutput": 2811
@@ -17429,7 +17434,7 @@
           "bytesInOutput": 1440
         },
         "src/Prebuilt/components/Chat/ChatFooter.tsx": {
-          "bytesInOutput": 11558
+          "bytesInOutput": 11726
         },
         "src/Prebuilt/components/Chat/ChatStates.tsx": {
           "bytesInOutput": 3529
@@ -17633,7 +17638,7 @@
           "bytesInOutput": 2182
         },
         "src/Prebuilt/components/Header/common.jsx": {
-          "bytesInOutput": 7375
+          "bytesInOutput": 7389
         },
         "src/Prebuilt/components/Header/Header.tsx": {
           "bytesInOutput": 2332
@@ -17645,7 +17650,7 @@
           "bytesInOutput": 1024
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 8920
+          "bytesInOutput": 9089
         },
         "src/Prebuilt/components/ErrorBoundary.jsx": {
           "bytesInOutput": 4366
@@ -17762,7 +17767,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1568183
+      "bytes": 1568924
     }
   }
 }

package/dist/meta.esbuild.json

@@ -2419,7 +2419,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
-      "bytes": 3523,
+      "bytes": 3545,
       "imports": [
         {
           "path": "react",
@@ -4201,8 +4201,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/hooks/useMetadata.tsx": {
-      "bytes": 1631,
+    "src/Prebuilt/components/hooks/useMetadata.jsx": {
+      "bytes": 1700,
       "imports": [
         {
           "path": "react",
@@ -4228,7 +4228,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx": {
-      "bytes": 8164,
+      "bytes": 8195,
       "imports": [
         {
           "path": "react",
@@ -4321,7 +4321,7 @@
           "original": "../../hooks/useDropdownList"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../../hooks/useMetadata"
         },
@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 328460,
+      "bytes": 328471,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5201,7 +5201,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-      "bytes": 12899,
+      "bytes": 13053,
       "imports": [
         {
           "path": "react",
@@ -5309,7 +5309,7 @@
           "original": "../../hooks/useDropdownList"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../../hooks/useMetadata"
         },
@@ -5393,7 +5393,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RaiseHand.tsx": {
-      "bytes": 986,
+      "bytes": 798,
       "imports": [
         {
           "path": "react",
@@ -5421,12 +5421,7 @@
           "original": "../IconButton"
         },
         {
-          "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
-          "kind": "import-statement",
-          "original": "../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
-        },
-        {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "./hooks/useMetadata"
         },
@@ -6342,7 +6337,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/Footer.tsx": {
-      "bytes": 3777,
+      "bytes": 3967,
       "imports": [
         {
           "path": "react",
@@ -6364,6 +6359,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/index.ts",
           "kind": "import-statement",
@@ -8243,7 +8243,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatFooter.tsx": {
-      "bytes": 10287,
+      "bytes": 10438,
       "imports": [
         {
           "path": "react",
@@ -9794,7 +9794,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx": {
-      "bytes": 2927,
+      "bytes": 2958,
       "imports": [
         {
           "path": "react",
@@ -9827,7 +9827,7 @@
           "original": "../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../hooks/useMetadata"
         },
@@ -11934,7 +11934,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/PreviousRoleInMetadata.tsx": {
-      "bytes": 738,
+      "bytes": 769,
       "imports": [
         {
           "path": "react",
@@ -11947,7 +11947,7 @@
           "external": true
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "./hooks/useMetadata"
         },
@@ -11960,7 +11960,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8106,
+      "bytes": 8259,
       "imports": [
         {
           "path": "react",
@@ -13775,7 +13775,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-D73DSBZU.js",
+          "path": "dist/chunk-YOZJ7OPW.js",
           "kind": "import-statement"
         }
       ],
@@ -13848,16 +13848,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-UJVFWWXD.js.map": {
+    "dist/HLSView-TG3T5EM7.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 99220
     },
-    "dist/HLSView-UJVFWWXD.js": {
+    "dist/HLSView-TG3T5EM7.js": {
       "imports": [
         {
-          "path": "dist/chunk-D73DSBZU.js",
+          "path": "dist/chunk-YOZJ7OPW.js",
           "kind": "import-statement"
         },
         {
@@ -14093,13 +14093,13 @@
       },
       "bytes": 61275
     },
-    "dist/chunk-D73DSBZU.js.map": {
+    "dist/chunk-YOZJ7OPW.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3187728
+      "bytes": 3188914
     },
-    "dist/chunk-D73DSBZU.js": {
+    "dist/chunk-YOZJ7OPW.js": {
       "imports": [
         {
           "path": "react",
@@ -14536,6 +14536,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -16482,7 +16487,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-UJVFWWXD.js",
+          "path": "dist/HLSView-TG3T5EM7.js",
           "kind": "dynamic-import"
         },
         {
@@ -16958,7 +16963,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18255
+          "bytesInOutput": 18252
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224291
@@ -17258,16 +17263,16 @@
           "bytesInOutput": 4698
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 7205
+          "bytesInOutput": 7373
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
-          "bytesInOutput": 3145
+          "bytesInOutput": 3350
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
           "bytesInOutput": 10284
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
-          "bytesInOutput": 3151
+          "bytesInOutput": 3173
         },
         "src/Prebuilt/IconButton.tsx": {
           "bytesInOutput": 487
@@ -17386,11 +17391,11 @@
         "src/Prebuilt/components/MoreSettings/constants.ts": {
           "bytesInOutput": 437
         },
-        "src/Prebuilt/components/hooks/useMetadata.tsx": {
-          "bytesInOutput": 1826
+        "src/Prebuilt/components/hooks/useMetadata.jsx": {
+          "bytesInOutput": 1948
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-          "bytesInOutput": 10902
+          "bytesInOutput": 11042
         },
         "src/Prebuilt/components/Header/StreamActions.tsx": {
           "bytesInOutput": 10031
@@ -17459,7 +17464,7 @@
           "bytesInOutput": 658
         },
         "src/Prebuilt/components/RaiseHand.tsx": {
-          "bytesInOutput": 905
+          "bytesInOutput": 796
         },
         "src/Prebuilt/components/ScreenShareToggle.jsx": {
           "bytesInOutput": 1619
@@ -17654,7 +17659,7 @@
           "bytesInOutput": 710
         },
         "src/Prebuilt/components/Chat/ChatFooter.tsx": {
-          "bytesInOutput": 9627
+          "bytesInOutput": 9793
         },
         "src/Prebuilt/components/Chat/ChatSelectorContainer.tsx": {
           "bytesInOutput": 5318
@@ -17918,7 +17923,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1307000
+      "bytes": 1307711
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.3-alpha.7",
+  "version": "0.3.3-alpha.9",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,12 +82,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.3-alpha.7",
+    "@100mslive/hls-player": "0.3.3-alpha.9",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.5",
-    "@100mslive/hms-virtual-background": "1.13.3-alpha.7",
-    "@100mslive/react-icons": "0.10.3-alpha.7",
-    "@100mslive/react-sdk": "0.10.3-alpha.7",
-    "@100mslive/types-prebuilt": "0.12.8",
+    "@100mslive/hms-virtual-background": "1.13.3-alpha.9",
+    "@100mslive/react-icons": "0.10.3-alpha.9",
+    "@100mslive/react-sdk": "0.10.3-alpha.9",
+    "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "cc984a3923cf9dc6fee242eb9623eba3be5a4a99"
+  "gitHead": "8e809b083ba0c8ad44ceb7373dc05cb68402b605"
 }

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
@@ -89,6 +89,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isMwebHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
 
@@ -273,7 +275,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 }}
                 gap="2"
               >
-                <RaiseHand css={{ bg: '$surface_default' }} />
+                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
                 <MoreSettings elements={elements} screenType={screenType} />
               </Flex>
             </>

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,6 +6,7 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -53,6 +54,8 @@ export const ConferenceScreen = () => {
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
@@ -199,7 +202,7 @@ export const ConferenceScreen = () => {
             justify="end"
             gap="2"
           >
-            <RaiseHand />
+            {noAVPermissions ? <RaiseHand /> : null}
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
             <Box
               css={{

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
+import { useAVToggle } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -40,6 +41,8 @@ export const Footer = ({
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const { showPolls } = useShowPolls();
@@ -87,7 +90,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
-            <RaiseHand />
+            {noAVPermissions ? <RaiseHand /> : null}
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>