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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/AudioLevel/AudioLevel.d.ts +5 -8
  2. package/dist/AudioLevel/index.d.ts +2 -1
  3. package/dist/AudioLevel/useBorderAudioLevel.d.ts +8 -0
  4. package/dist/{HLSView-3S74KF3A.js → HLSView-IQRPLYNH.js} +5 -4
  5. package/dist/{HLSView-3S74KF3A.js.map → HLSView-IQRPLYNH.js.map} +2 -2
  6. package/dist/Prebuilt/components/Chip.d.ts +12 -0
  7. package/dist/Prebuilt/components/PrebuiltDialogPortal.d.ts +4 -0
  8. package/dist/{VirtualBackground-3TI5NA4V.js → VirtualBackground-GP4ATXD3.js} +3 -3
  9. package/dist/{chunk-36X4ZCLC.js → chunk-2H5NIZB7.js} +2 -2
  10. package/dist/{chunk-Z7P5WITU.js → chunk-GLYGPYNS.js} +560 -1190
  11. package/dist/chunk-GLYGPYNS.js.map +7 -0
  12. package/dist/{chunk-5DQ3WTED.js → chunk-Z3O2WGWV.js} +2 -2
  13. package/dist/{chunk-5DQ3WTED.js.map → chunk-Z3O2WGWV.js.map} +1 -1
  14. package/dist/{conference-JNABIZBG.js → conference-JD35TNH4.js} +1351 -662
  15. package/dist/conference-JD35TNH4.js.map +7 -0
  16. package/dist/index.cjs.js +3387 -3297
  17. package/dist/index.cjs.js.map +4 -4
  18. package/dist/index.js +4 -2
  19. package/dist/meta.cjs.json +1001 -826
  20. package/dist/meta.esbuild.json +1053 -877
  21. package/package.json +6 -6
  22. package/src/AudioLevel/AudioLevel.tsx +79 -30
  23. package/src/AudioLevel/audio-level.png +0 -0
  24. package/src/AudioLevel/index.ts +2 -1
  25. package/src/AudioLevel/useBorderAudioLevel.tsx +34 -0
  26. package/src/Prebuilt/App.tsx +1 -0
  27. package/src/Prebuilt/common/utils.js +0 -7
  28. package/src/Prebuilt/components/{Chip.jsx → Chip.tsx} +13 -2
  29. package/src/Prebuilt/components/Footer/ParticipantList.jsx +23 -12
  30. package/src/Prebuilt/components/Footer/RoleAccordion.tsx +43 -3
  31. package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +7 -4
  32. package/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx +3 -2
  33. package/src/Prebuilt/components/MoreSettings/EmbedUrl.jsx +3 -2
  34. package/src/Prebuilt/components/MwebLandscapePrompt.jsx +58 -0
  35. package/src/Prebuilt/components/Notifications/HLSFailureModal.jsx +3 -2
  36. package/src/Prebuilt/components/Notifications/PermissionErrorModal.jsx +3 -2
  37. package/src/Prebuilt/components/PrebuiltDialogPortal.tsx +6 -0
  38. package/src/Prebuilt/components/Preview/PreviewJoin.tsx +4 -3
  39. package/src/Prebuilt/components/RoleChangeModal.jsx +3 -2
  40. package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx +3 -2
  41. package/src/Prebuilt/components/Settings/SettingsModal.jsx +3 -2
  42. package/src/Prebuilt/components/Settings/StartRecording.jsx +3 -2
  43. package/src/Prebuilt/components/StatsForNerds.jsx +3 -2
  44. package/src/Prebuilt/components/VideoTile.jsx +22 -69
  45. package/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx +3 -2
  46. package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx +4 -29
  47. package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx +3 -2
  48. package/src/Prebuilt/layouts/HLSView.jsx +1 -0
  49. package/src/Prebuilt/primitives/DialogContent.jsx +5 -4
  50. package/dist/chunk-Z7P5WITU.js.map +0 -7
  51. package/dist/conference-JNABIZBG.js.map +0 -7
  52. /package/dist/{VirtualBackground-3TI5NA4V.js.map → VirtualBackground-GP4ATXD3.js.map} +0 -0
  53. /package/dist/{chunk-36X4ZCLC.js.map → chunk-2H5NIZB7.js.map} +0 -0
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { useMedia } from 'react-use';
3
3
  import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
4
4
  import { Sheet } from '../../../Sheet';
5
+ import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
5
6
 
6
7
  export const RequestPrompt = ({
7
8
  open = true,
@@ -34,7 +35,7 @@ export const RequestPrompt = ({
34
35
 
35
36
  return (
36
37
  <Dialog.Root open={open} onOpenChange={onOpenChange}>
37
- <Dialog.Portal>
38
+ <PrebuiltDialogPortal>
38
39
  <Dialog.Overlay />
39
40
  <Dialog.Content css={{ p: '$10' }}>
40
41
  <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
@@ -43,7 +44,7 @@ export const RequestPrompt = ({
43
44
  <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
44
45
  <RequestActions actionText={actionText} onAction={onAction} />
45
46
  </Dialog.Content>
46
- </Dialog.Portal>
47
+ </PrebuiltDialogPortal>
47
48
  </Dialog.Root>
48
49
  );
49
50
  };
@@ -9,6 +9,7 @@ import { Sheet } from '../../../Sheet';
9
9
  import { Tabs } from '../../../Tabs';
10
10
  import { Text } from '../../../Text';
11
11
  import { config as cssConfig } from '../../../Theme';
12
+ import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
12
13
  import { settingContent, settingsList } from './common.js';
13
14
 
14
15
  const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
@@ -186,7 +187,7 @@ const DesktopSettingModal = ({
186
187
  return (
187
188
  <Dialog.Root open={open} onOpenChange={onOpenChange}>
188
189
  <Dialog.Trigger asChild>{children}</Dialog.Trigger>
189
- <Dialog.Portal>
190
+ <PrebuiltDialogPortal>
190
191
  <Dialog.Overlay />
191
192
  <Dialog.Content
192
193
  css={{
@@ -256,7 +257,7 @@ const DesktopSettingModal = ({
256
257
  </IconButton>
257
258
  </Dialog.Close>
258
259
  </Dialog.Content>
259
- </Dialog.Portal>
260
+ </PrebuiltDialogPortal>
260
261
  </Dialog.Root>
261
262
  );
262
263
  };
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
3
3
  import { AlertTriangleIcon } from '@100mslive/react-icons';
4
4
  import { Button, Dialog, Flex, Text } from '../../../';
5
+ import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
5
6
  import { ResolutionInput } from '../Streaming/ResolutionInput';
6
7
  import { getResolution } from '../Streaming/RTMPStreaming';
7
8
  import { ToastManager } from '../Toast/ToastManager';
@@ -21,7 +22,7 @@ const StartRecording = ({ open, onOpenChange }) => {
21
22
  if (isBrowserRecordingOn) {
22
23
  return (
23
24
  <Dialog.Root open={open} onOpenChange={onOpenChange}>
24
- <Dialog.Portal>
25
+ <PrebuiltDialogPortal>
25
26
  <Dialog.Content
26
27
  css={{
27
28
  width: 'min(400px,80%)',
@@ -66,7 +67,7 @@ const StartRecording = ({ open, onOpenChange }) => {
66
67
  </Button>
67
68
  </Flex>
68
69
  </Dialog.Content>
69
- </Dialog.Portal>
70
+ </PrebuiltDialogPortal>
70
71
  </Dialog.Root>
71
72
  );
72
73
  }
@@ -15,6 +15,7 @@ import { Dialog } from '../../Modal';
15
15
  import { Switch } from '../../Switch';
16
16
  import { Text } from '../../Text';
17
17
  import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
18
+ import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
18
19
  import { useSetUiSettings } from './AppData/useUISettings';
19
20
  import { useDropdownSelection } from './hooks/useDropdownSelection';
20
21
  import { UI_SETTINGS } from '../common/constants';
@@ -39,7 +40,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
39
40
 
40
41
  return (
41
42
  <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
42
- <Dialog.Portal>
43
+ <PrebuiltDialogPortal>
43
44
  <Dialog.Overlay />
44
45
  <Dialog.Content
45
46
  css={{
@@ -118,7 +119,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
118
119
  <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
119
120
  )}
120
121
  </Dialog.Content>
121
- </Dialog.Portal>
122
+ </PrebuiltDialogPortal>
122
123
  </Dialog.Root>
123
124
  );
124
125
  };
@@ -1,4 +1,4 @@
1
- import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
1
+ import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
2
2
  import { useMedia } from 'react-use';
3
3
  import {
4
4
  selectAudioTrackByPeerID,
@@ -8,24 +8,21 @@ import {
8
8
  selectPeerMetadata,
9
9
  selectPeerNameByID,
10
10
  selectSessionStore,
11
- selectTrackAudioByID,
12
11
  selectVideoTrackByID,
13
12
  selectVideoTrackByPeerID,
14
13
  useHMSStore,
15
- useHMSVanillaStore,
16
14
  } from '@100mslive/react-sdk';
17
15
  import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
18
16
  import TileConnection from './Connection/TileConnection';
19
17
  import TileMenu, { isSameTile } from './TileMenu/TileMenu';
18
+ import { AudioLevel } from '../../AudioLevel';
20
19
  import { Avatar } from '../../Avatar';
21
- import { Box, Flex } from '../../Layout';
22
20
  import { VideoTileStats } from '../../Stats';
23
- import { config as cssConfig, keyframes } from '../../Theme';
21
+ import { config as cssConfig } from '../../Theme';
24
22
  import { Video } from '../../Video';
25
23
  import { StyledVideoTile } from '../../VideoTile';
26
24
  import { getVideoTileLabel } from './peerTileUtils';
27
25
  import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
28
- import { getAttributeBoxSize } from '../common/utils';
29
26
  import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
30
27
 
31
28
  const Tile = ({
@@ -80,16 +77,22 @@ const Tile = ({
80
77
 
81
78
  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
82
79
 
83
- const avatarSize = useMemo(() => {
80
+ const [avatarSize, attribBoxSize] = useMemo(() => {
84
81
  if (!calculatedWidth || !calculatedHeight) {
85
- return undefined;
82
+ return [undefined, undefined];
86
83
  }
84
+ let avatarSize = 'large';
87
85
  if (calculatedWidth <= 150 || calculatedHeight <= 150) {
88
- return 'small';
86
+ avatarSize = 'small';
89
87
  } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
90
- return 'medium';
88
+ avatarSize = 'medium';
91
89
  }
92
- return 'large';
90
+ let attribBoxSize = 'medium';
91
+ if (calculatedWidth <= 180 || calculatedHeight <= 180) {
92
+ attribBoxSize = 'small';
93
+ }
94
+
95
+ return [avatarSize, attribBoxSize];
93
96
  }, [calculatedWidth, calculatedHeight]);
94
97
 
95
98
  return (
@@ -139,14 +142,13 @@ const Tile = ({
139
142
 
140
143
  {!hideAudioMuteOnTile ? (
141
144
  isAudioMuted ? (
142
- <StyledVideoTile.AudioIndicator
143
- data-testid="participant_audio_mute_icon"
144
- size={getAttributeBoxSize(calculatedWidth, calculatedHeight)}
145
- >
145
+ <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
146
146
  <MicOffIcon />
147
147
  </StyledVideoTile.AudioIndicator>
148
148
  ) : (
149
- <AudioLevel trackId={audioTrack?.id} />
149
+ <StyledVideoTile.AudioIndicator size={attribBoxSize}>
150
+ <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
151
+ </StyledVideoTile.AudioIndicator>
150
152
  )
151
153
  ) : null}
152
154
  {isMouseHovered || (isDragabble && isMobile) ? (
@@ -158,7 +160,7 @@ const Tile = ({
158
160
  enableSpotlightingPeer={enableSpotlightingPeer}
159
161
  />
160
162
  ) : null}
161
- {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={calculatedHeight} width={calculatedWidth} />}
163
+ {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
162
164
 
163
165
  <TileConnection
164
166
  hideLabel={hideParticipantNameOnTile}
@@ -175,56 +177,7 @@ const Tile = ({
175
177
  );
176
178
  };
177
179
 
178
- const heightAnimation = value =>
179
- keyframes({
180
- '50%': {
181
- transform: `scale3d(1,${value},1)`,
182
- },
183
- '100%': {
184
- transform: `scale3d(1,1,1)`,
185
- },
186
- });
187
-
188
- const AudioLevelIndicator = ({ trackId, value, delay }) => {
189
- const vanillaStore = useHMSVanillaStore();
190
- const ref = useRef();
191
-
192
- useEffect(() => {
193
- const unsubscribe = vanillaStore.subscribe(audioLevel => {
194
- if (ref.current) {
195
- ref.current.style['animation'] = `${heightAnimation(
196
- audioLevel ? value : 1,
197
- )} 0.3s cubic-bezier(0.61, 1, 0.88, 1) infinite ${delay}s`;
198
- }
199
- }, selectTrackAudioByID(trackId));
200
- return unsubscribe;
201
- }, [vanillaStore, trackId, value, delay]);
202
- return (
203
- <Box
204
- ref={ref}
205
- css={{
206
- w: 4,
207
- height: 6,
208
- r: 2,
209
- bg: '$on_primary_high',
210
- }}
211
- />
212
- );
213
- };
214
-
215
- export const AudioLevel = ({ trackId }) => {
216
- return (
217
- <StyledVideoTile.AudioIndicator>
218
- <Flex align="center" justify="center" css={{ gap: '$2' }}>
219
- {[3, 2, 3].map((v, i) => (
220
- <AudioLevelIndicator trackId={trackId} value={v} delay={i * 0.15} key={i} />
221
- ))}
222
- </Flex>
223
- </StyledVideoTile.AudioIndicator>
224
- );
225
- };
226
-
227
- const PeerMetadata = ({ peerId, height, width }) => {
180
+ const PeerMetadata = ({ peerId, size }) => {
228
181
  const metaData = useHMSStore(selectPeerMetadata(peerId));
229
182
  const isBRB = metaData?.isBRBOn || false;
230
183
  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -232,12 +185,12 @@ const PeerMetadata = ({ peerId, height, width }) => {
232
185
  return (
233
186
  <Fragment>
234
187
  {isHandRaised ? (
235
- <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="raiseHand_icon_onTile">
188
+ <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
236
189
  <HandIcon width={24} height={24} />
237
190
  </StyledVideoTile.AttributeBox>
238
191
  ) : null}
239
192
  {isBRB ? (
240
- <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="brb_icon_onTile">
193
+ <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
241
194
  <BrbTileIcon width={22} height={22} />
242
195
  </StyledVideoTile.AttributeBox>
243
196
  ) : null}
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react';
2
2
  import { Dialog, Flex } from '../../../';
3
3
  import { DialogInputFile } from '../../primitives/DialogContent';
4
+ import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
4
5
  import { PDFHeader } from './pdfHeader';
5
6
  import { SubmitPDF } from './submitPdf';
6
7
  import { UploadedFile } from './uploadedFile';
@@ -10,7 +11,7 @@ export function PDFFileOptions({ onOpenChange }) {
10
11
 
11
12
  return !pdfFile ? (
12
13
  <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
13
- <Dialog.Portal>
14
+ <PrebuiltDialogPortal>
14
15
  <Dialog.Overlay />
15
16
  <Dialog.Content
16
17
  css={{
@@ -34,7 +35,7 @@ export function PDFFileOptions({ onOpenChange }) {
34
35
  <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
35
36
  </Flex>
36
37
  </Dialog.Content>
37
- </Dialog.Portal>
38
+ </PrebuiltDialogPortal>
38
39
  </Dialog.Root>
39
40
  ) : (
40
41
  <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />
@@ -3,7 +3,7 @@ import { useScreenShare } from '@100mslive/react-sdk';
3
3
  import { StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
4
4
  import PDFShareImg from './../../images/pdf-share.png';
5
5
  import ScreenShareImg from './../../images/screen-share.png';
6
- import { Box, Button, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
6
+ import { Box, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
7
7
  import { ShareMenuIcon } from '../ShareMenuIcon';
8
8
  import { PDFFileOptions } from './pdfFileOptions';
9
9
 
@@ -75,7 +75,8 @@ export function ShareScreenOptions() {
75
75
  alignItems: 'flex-start',
76
76
  gap: '$8',
77
77
  px: '$10',
78
- py: '$6',
78
+ pt: '$6',
79
+ pb: '$10',
79
80
  '&:hover': {
80
81
  bg: '$transparent',
81
82
  cursor: 'default',
@@ -163,7 +164,7 @@ export function ShareScreenOptions() {
163
164
  align="center"
164
165
  css={{
165
166
  position: 'absolute',
166
- top: '29%',
167
+ top: '35%',
167
168
  left: '54%',
168
169
  padding: '$2 $4',
169
170
  r: '$2',
@@ -200,32 +201,6 @@ export function ShareScreenOptions() {
200
201
  </Flex>
201
202
  </Flex>
202
203
  </Dropdown.Item>
203
- <Dropdown.Item
204
- css={{
205
- px: '$10',
206
- pb: '$10',
207
- pt: '$6',
208
- '&:hover': {
209
- bg: '$transparent',
210
- cursor: 'default',
211
- },
212
- }}
213
- >
214
- <Button
215
- variant="standard"
216
- outlined
217
- type="submit"
218
- onClick={() => {
219
- updateState(MODALS.SHARE, false);
220
- }}
221
- data-testid="share_btn"
222
- css={{
223
- w: '100%',
224
- }}
225
- >
226
- Cancel
227
- </Button>
228
- </Dropdown.Item>
229
204
  </Dropdown.Content>
230
205
  </Dropdown.Root>
231
206
  {openModals.has(MODALS.PDF_SHARE) && (
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { TrashIcon } from '@100mslive/react-icons';
3
3
  import { Dialog, Flex, Text } from '../../../';
4
4
  import { DialogRow } from '../../primitives/DialogContent';
5
+ import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
5
6
  import { PDFHeader } from './pdfHeader';
6
7
  import { PDFInfo } from './pdfInfo';
7
8
  import { SubmitPDF } from './submitPdf';
@@ -10,7 +11,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
10
11
  const [fileName, ext] = pdfFile.name.split('.');
11
12
  return (
12
13
  <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
13
- <Dialog.Portal>
14
+ <PrebuiltDialogPortal>
14
15
  <Dialog.Overlay />
15
16
  <Dialog.Content
16
17
  css={{
@@ -65,7 +66,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
65
66
  <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
66
67
  </Flex>
67
68
  </Dialog.Content>
68
- </Dialog.Portal>
69
+ </PrebuiltDialogPortal>
69
70
  </Dialog.Root>
70
71
  );
71
72
  };
@@ -277,6 +277,7 @@ const HLSView = () => {
277
277
  r: '50%',
278
278
  gap: '$1',
279
279
  bg: '$primary_default',
280
+ zIndex: 21,
280
281
  }}
281
282
  >
282
283
  <IconButton onClick={async () => await hlsPlayer?.play()} data-testid="play_btn">
@@ -1,5 +1,6 @@
1
1
  import React, { useRef } from 'react';
2
2
  import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
3
+ import { PrebuiltDialogPortal } from '../components/PrebuiltDialogPortal';
3
4
  import { Button } from '../../Button';
4
5
  import { Checkbox } from '../../Checkbox';
5
6
  import { HorizontalDivider } from '../../Divider';
@@ -14,7 +15,7 @@ import { Text } from '../../Text';
14
15
 
15
16
  export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
16
17
  return (
17
- <Dialog.Portal>
18
+ <PrebuiltDialogPortal>
18
19
  <Dialog.Overlay />
19
20
  <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
20
21
  <Dialog.Title>
@@ -35,7 +36,7 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
35
36
  <HorizontalDivider css={{ mt: '0.8rem' }} />
36
37
  <Box>{children}</Box>
37
38
  </Dialog.Content>
38
- </Dialog.Portal>
39
+ </PrebuiltDialogPortal>
39
40
  );
40
41
  };
41
42
 
@@ -60,7 +61,7 @@ export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...pro
60
61
 
61
62
  export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
62
63
  <Dialog.Root open={open} onOpenChange={onOpenChange}>
63
- <Dialog.Portal>
64
+ <PrebuiltDialogPortal>
64
65
  <Dialog.Overlay />
65
66
  <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
66
67
  <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
@@ -97,7 +98,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
97
98
  </Box>
98
99
  </Flex>
99
100
  </Dialog.Content>
100
- </Dialog.Portal>
101
+ </PrebuiltDialogPortal>
101
102
  </Dialog.Root>
102
103
  );
103
104