@100mslive/roomkit-react 0.1.7-alpha.0 → 0.1.8-alpha.0

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
+import { Sheet } from '../../../Sheet';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
+
+export const RequestPrompt = ({
+  open = true,
+  onOpenChange,
+  title,
+  body,
+  actionText = 'Accept',
+  onAction,
+}: {
+  open?: boolean;
+  onOpenChange: (value: boolean) => void;
+  title: string;
+  body: React.ReactNode;
+  actionText?: string;
+  onAction: () => void;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+
+  if (isMobile) {
+    return (
+      <Sheet.Root open={open} onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ py: '$8' }}>
+          <Text css={{ fontWeight: '$semiBold', c: '$on_surface_high', '@md': { px: '$8' } }}>{title}</Text>
+          {body}
+          <RequestActions actionText={actionText} onAction={onAction} />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <PrebuiltDialogPortal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ p: '$10' }}>
+          <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
+            <Text variant="h6">{title}</Text>
+          </Dialog.Title>
+          <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
+          <RequestActions actionText={actionText} onAction={onAction} />
+        </Dialog.Content>
+      </PrebuiltDialogPortal>
+    </Dialog.Root>
+  );
+};
+
+const RequestActions = ({ onAction, actionText }: { actionText?: string; onAction: () => void }) => (
+  <Flex justify="center" align="center" css={{ width: '100%', gap: '$md', '@md': { mt: '$8', px: '$8' } }}>
+    <Box css={{ width: '50%' }}>
+      <Dialog.Close css={{ width: '100%' }}>
+        <Button variant="standard" outlined css={{ width: '100%' }}>
+          Decline
+        </Button>
+      </Dialog.Close>
+    </Box>
+    <Box css={{ width: '50%' }}>
+      <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+        {actionText}
+      </Button>
+    </Box>
+  </Flex>
+);

package/src/Prebuilt/components/{RoleChangeRequestModal.tsx → RoleChangeRequest/RoleChangeRequestModal.tsx}

@@ -7,13 +7,14 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
+import { Flex, Text } from '../../..';
 // @ts-ignore: No implicit Any
-import { PreviewControls, PreviewTile } from './Preview/PreviewJoin';
-import { Box, Button, Dialog, Flex, Text } from '../..';
+import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
+import { RequestPrompt } from './RequestPrompt';
 // @ts-ignore: No implicit Any
-import { useMyMetadata } from './hooks/useMetadata';
+import { useMyMetadata } from '../hooks/useMetadata';
 // @ts-ignore: No implicit Any
-import { ROLE_CHANGE_DECLINED } from '../common/constants';
+import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 export const RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions();
@@ -38,7 +39,14 @@ export const RoleChangeRequestModal = () => {
 
   const body = (
     <>
-      <Text css={{ fontWeight: 400, c: '$on_surface_medium', textAlign: 'center' }}>
+      <Text
+        variant="xs"
+        css={{
+          c: '$on_surface_medium',
+          textAlign: 'center',
+          '@md': { textAlign: 'left', borderBottom: '1px solid $border_bright', pb: '$4', px: '$8' },
+        }}
+      >
         Setup your audio and video before joining
       </Text>
       <Flex
@@ -48,20 +56,22 @@ export const RoleChangeRequestModal = () => {
           '@sm': { width: '100%' },
           flexDirection: 'column',
           mt: '$6',
+          '@md': { px: '$8' },
         }}
       >
         <PreviewTile name={name || ''} />
+
         <PreviewControls hideSettings={true} />
       </Flex>
     </>
   );
 
   return (
-    <RequestDialog
-      title={`You're invited to join the ${roleChangeRequest.role.name} role`}
+    <RequestPrompt
+      title="You're invited to join the stage"
       onOpenChange={async value => {
         if (!value) {
-          await hmsActions.rejectChangeRole(roleChangeRequest);
+          hmsActions.rejectChangeRole(roleChangeRequest);
           sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id });
           await hmsActions.cancelMidCallPreview();
           await hmsActions.lowerLocalPeerHand();
@@ -77,45 +87,3 @@ export const RoleChangeRequestModal = () => {
     />
   );
 };
-
-const RequestDialog = ({
-  open = true,
-  onOpenChange,
-  title,
-  body,
-  actionText = 'Accept',
-  onAction,
-}: {
-  open?: boolean;
-  onOpenChange: (value: boolean) => void;
-  title: string;
-  body: React.ReactNode;
-  actionText?: string;
-  onAction: () => void;
-}) => (
-  <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <Dialog.Portal>
-      <Dialog.Overlay />
-      <Dialog.Content css={{ p: '$10' }}>
-        <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
-          <Text variant="h6">{title}</Text>
-        </Dialog.Title>
-        <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
-        <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
-          <Box css={{ width: '50%' }}>
-            <Dialog.Close css={{ width: '100%' }}>
-              <Button variant="standard" outlined css={{ width: '100%' }}>
-                Cancel
-              </Button>
-            </Dialog.Close>
-          </Box>
-          <Box css={{ width: '50%' }}>
-            <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
-              {actionText}
-            </Button>
-          </Box>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Portal>
-  </Dialog.Root>
-);

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -9,6 +9,7 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { settingContent, settingsList } from './common.js';
 
 const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
@@ -186,7 +187,7 @@ const DesktopSettingModal = ({
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild>{children}</Dialog.Trigger>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -256,7 +257,7 @@ const DesktopSettingModal = ({
             </IconButton>
           </Dialog.Close>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Settings/StartRecording.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
 import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
@@ -21,7 +22,7 @@ const StartRecording = ({ open, onOpenChange }) => {
   if (isBrowserRecordingOn) {
     return (
       <Dialog.Root open={open} onOpenChange={onOpenChange}>
-        <Dialog.Portal>
+        <PrebuiltDialogPortal>
           <Dialog.Content
             css={{
               width: 'min(400px,80%)',
@@ -66,7 +67,7 @@ const StartRecording = ({ open, onOpenChange }) => {
               </Button>
             </Flex>
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.Root>
     );
   }

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -15,6 +15,7 @@ import { Dialog } from '../../Modal';
 import { Switch } from '../../Switch';
 import { Text } from '../../Text';
 import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
+import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useSetUiSettings } from './AppData/useUISettings';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { UI_SETTINGS } from '../common/constants';
@@ -39,7 +40,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -118,7 +119,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
             <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
           )}
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
@@ -8,19 +8,17 @@ import {
   selectPeerMetadata,
   selectPeerNameByID,
   selectSessionStore,
-  selectTrackAudioByID,
   selectVideoTrackByID,
   selectVideoTrackByPeerID,
   useHMSStore,
-  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
 import TileConnection from './Connection/TileConnection';
 import TileMenu, { isSameTile } from './TileMenu/TileMenu';
+import { AudioLevel } from '../../AudioLevel';
 import { Avatar } from '../../Avatar';
-import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig, keyframes } from '../../Theme';
+import { config as cssConfig } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
@@ -72,21 +70,34 @@ const Tile = ({
   const onHoverHandler = useCallback(event => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
-  const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
-  const avatarSize = useMemo(() => {
-    if (!width || !height) {
-      return undefined;
+
+  const ref = useRef(null);
+  const calculatedHeight = ref.current?.clientHeight || '';
+  const calculatedWidth = ref.current?.clientWidth || '';
+
+  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
+
+  const [avatarSize, attribBoxSize] = useMemo(() => {
+    if (!calculatedWidth || !calculatedHeight) {
+      return [undefined, undefined];
     }
-    if (width <= 150 || height <= 150) {
-      return 'small';
-    } else if (width <= 300 || height <= 300) {
-      return 'medium';
+    let avatarSize = 'large';
+    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
+      avatarSize = 'small';
+    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
+      avatarSize = 'medium';
     }
-    return 'large';
-  }, [width, height]);
+    let attribBoxSize = 'medium';
+    if (calculatedWidth <= 180 || calculatedHeight <= 180) {
+      attribBoxSize = 'small';
+    }
+
+    return [avatarSize, attribBoxSize];
+  }, [calculatedWidth, calculatedHeight]);
 
   return (
     <StyledVideoTile.Root
+      ref={ref}
       css={{
         width,
         height,
@@ -131,14 +142,13 @@ const Tile = ({
 
           {!hideAudioMuteOnTile ? (
             isAudioMuted ? (
-              <StyledVideoTile.AudioIndicator
-                data-testid="participant_audio_mute_icon"
-                size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
-              >
+              <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
                 <MicOffIcon />
               </StyledVideoTile.AudioIndicator>
             ) : (
-              <AudioLevel trackId={audioTrack?.id} />
+              <StyledVideoTile.AudioIndicator size={attribBoxSize}>
+                <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
+              </StyledVideoTile.AudioIndicator>
             )
           ) : null}
           {isMouseHovered || (isDragabble && isMobile) ? (
@@ -150,7 +160,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -167,58 +177,7 @@ const Tile = ({
   );
 };
 
-const metaStyles = { top: '$4', left: '$4', width: '$14', height: '$14' };
-
-const heightAnimation = value =>
-  keyframes({
-    '50%': {
-      transform: `scale3d(1,${value},1)`,
-    },
-    '100%': {
-      transform: `scale3d(1,1,1)`,
-    },
-  });
-
-const AudioLevelIndicator = ({ trackId, value, delay }) => {
-  const vanillaStore = useHMSVanillaStore();
-  const ref = useRef();
-
-  useEffect(() => {
-    const unsubscribe = vanillaStore.subscribe(audioLevel => {
-      if (ref.current) {
-        ref.current.style['animation'] = `${heightAnimation(
-          audioLevel ? value : 1,
-        )} 0.3s cubic-bezier(0.61, 1, 0.88, 1) infinite ${delay}s`;
-      }
-    }, selectTrackAudioByID(trackId));
-    return unsubscribe;
-  }, [vanillaStore, trackId, value, delay]);
-  return (
-    <Box
-      ref={ref}
-      css={{
-        w: 4,
-        height: 6,
-        r: 2,
-        bg: '$on_primary_high',
-      }}
-    />
-  );
-};
-
-export const AudioLevel = ({ trackId }) => {
-  return (
-    <StyledVideoTile.AudioIndicator>
-      <Flex align="center" justify="center" css={{ gap: '$2' }}>
-        {[3, 2, 3].map((v, i) => (
-          <AudioLevelIndicator trackId={trackId} value={v} delay={i * 0.15} key={i} />
-        ))}
-      </Flex>
-    </StyledVideoTile.AudioIndicator>
-  );
-};
-
-const PeerMetadata = ({ peerId }) => {
+const PeerMetadata = ({ peerId, size }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isBRB = metaData?.isBRBOn || false;
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -226,12 +185,12 @@ const PeerMetadata = ({ peerId }) => {
   return (
     <Fragment>
       {isHandRaised ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="raiseHand_icon_onTile">
+        <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
           <HandIcon width={24} height={24} />
         </StyledVideoTile.AttributeBox>
       ) : null}
       {isBRB ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
+        <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
           <BrbTileIcon width={22} height={22} />
         </StyledVideoTile.AttributeBox>
       ) : null}

package/src/Prebuilt/components/conference.jsx

@@ -13,12 +13,12 @@ import { Footer } from './Footer/Footer';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
 import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
+import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
-import { RoleChangeRequestModal } from './RoleChangeRequestModal';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,

package/src/Prebuilt/components/hooks/useMetadata.jsx

@@ -31,12 +31,13 @@ export const useMyMetadata = () => {
       await hmsActions.lowerLocalPeerHand();
     } else {
       await hmsActions.raiseLocalPeerHand();
+      await update({ isBRBOn: false });
     }
   }, [isHandRaised]); //eslint-disable-line
 
   const toggleBRB = useCallback(async () => {
     const newValue = !metaData?.isBRBOn;
-    await update({ isBRBOn: !metaData?.isBRBOn });
+    await update({ isBRBOn: newValue });
     if (newValue) {
       await hmsActions.lowerLocalPeerHand();
     }

package/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Dialog, Flex } from '../../../';
 import { DialogInputFile } from '../../primitives/DialogContent';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { PDFHeader } from './pdfHeader';
 import { SubmitPDF } from './submitPdf';
 import { UploadedFile } from './uploadedFile';
@@ -10,7 +11,7 @@ export function PDFFileOptions({ onOpenChange }) {
 
   return !pdfFile ? (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -34,7 +35,7 @@ export function PDFFileOptions({ onOpenChange }) {
             <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   ) : (
     <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />

package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -3,7 +3,7 @@ import { useScreenShare } from '@100mslive/react-sdk';
 import { StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import PDFShareImg from './../../images/pdf-share.png';
 import ScreenShareImg from './../../images/screen-share.png';
-import { Box, Button, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
+import { Box, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
 import { ShareMenuIcon } from '../ShareMenuIcon';
 import { PDFFileOptions } from './pdfFileOptions';
 
@@ -75,7 +75,8 @@ export function ShareScreenOptions() {
               alignItems: 'flex-start',
               gap: '$8',
               px: '$10',
-              py: '$6',
+              pt: '$6',
+              pb: '$10',
               '&:hover': {
                 bg: '$transparent',
                 cursor: 'default',
@@ -163,7 +164,7 @@ export function ShareScreenOptions() {
                   align="center"
                   css={{
                     position: 'absolute',
-                    top: '29%',
+                    top: '35%',
                     left: '54%',
                     padding: '$2 $4',
                     r: '$2',
@@ -200,32 +201,6 @@ export function ShareScreenOptions() {
               </Flex>
             </Flex>
           </Dropdown.Item>
-          <Dropdown.Item
-            css={{
-              px: '$10',
-              pb: '$10',
-              pt: '$6',
-              '&:hover': {
-                bg: '$transparent',
-                cursor: 'default',
-              },
-            }}
-          >
-            <Button
-              variant="standard"
-              outlined
-              type="submit"
-              onClick={() => {
-                updateState(MODALS.SHARE, false);
-              }}
-              data-testid="share_btn"
-              css={{
-                w: '100%',
-              }}
-            >
-              Cancel
-            </Button>
-          </Dropdown.Item>
         </Dropdown.Content>
       </Dropdown.Root>
       {openModals.has(MODALS.PDF_SHARE) && (

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { TrashIcon } from '@100mslive/react-icons';
 import { Dialog, Flex, Text } from '../../../';
 import { DialogRow } from '../../primitives/DialogContent';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { PDFHeader } from './pdfHeader';
 import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
@@ -10,7 +11,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
   const [fileName, ext] = pdfFile.name.split('.');
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -65,7 +66,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
             <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/layouts/HLSView.jsx

@@ -272,10 +272,12 @@ const HLSView = () => {
                   top: '40%',
                   left: '50%',
                   transform: 'translateY(-40%) translateX(-50%)',
-                  padding: '$4 $14',
+                  padding: '$8 14px $8 18px',
                   display: 'inline-flex',
-                  r: '$0',
+                  r: '50%',
+                  gap: '$1',
                   bg: '$primary_default',
+                  zIndex: 21,
                 }}
               >
                 <IconButton onClick={async () => await hlsPlayer?.play()} data-testid="play_btn">

package/src/Prebuilt/layouts/SidePane.tsx

@@ -64,7 +64,6 @@ const SidePane = ({
         <VideoTile
           peerId={activeScreensharePeerId}
           trackId={trackId}
-          width="100%"
           height={225}
           rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
           {...tileLayout}

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
+import { PrebuiltDialogPortal } from '../components/PrebuiltDialogPortal';
 import { Button } from '../../Button';
 import { Checkbox } from '../../Checkbox';
 import { HorizontalDivider } from '../../Divider';
@@ -14,7 +15,7 @@ import { Text } from '../../Text';
 
 export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
   return (
-    <Dialog.Portal>
+    <PrebuiltDialogPortal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
         <Dialog.Title>
@@ -35,7 +36,7 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
         <HorizontalDivider css={{ mt: '0.8rem' }} />
         <Box>{children}</Box>
       </Dialog.Content>
-    </Dialog.Portal>
+    </PrebuiltDialogPortal>
   );
 };
 
@@ -60,7 +61,7 @@ export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...pro
 
 export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
   <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <Dialog.Portal>
+    <PrebuiltDialogPortal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
         <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
@@ -97,7 +98,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
           </Box>
         </Flex>
       </Dialog.Content>
-    </Dialog.Portal>
+    </PrebuiltDialogPortal>
   </Dialog.Root>
 );