@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/dist/Prebuilt/components/Leave/LeaveCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CSS } from '../../../Theme';
+export declare const LeaveCard: ({ icon, title, subtitle, onClick, bg, titleColor, css, }: {
+    icon: React.JSX.Element;
+    title: string;
+    subtitle: string;
+    onClick: () => void;
+    titleColor: string;
+    bg: string;
+    css?: CSS | undefined;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Leave/LeaveRoom.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+export declare const LeaveRoom: ({ screenType }: {
+    screenType: keyof ConferencingScreen;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Leave/LeaveSessionContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const LeaveSessionContent: ({ setShowLeaveRoomAlert, leaveRoom, isModal, }: {
+    setShowLeaveRoomAlert: (value: boolean) => void;
+    leaveRoom: (args: {
+        endstream: boolean;
+    }) => void;
+    isModal?: boolean | undefined;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Leave/MwebLeaveRoom.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+export declare const MwebLeaveRoom: ({ leaveRoom, screenType, }: {
+    leaveRoom: (args: {
+        endstream: boolean;
+    }) => void;
+    screenType: keyof ConferencingScreen;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/MoreSettings/MoreSettings.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ConferencingScreen, DefaultConferencingScreen_Elements, HLSLiveStreamingScreen_Elements } from '@100mslive/types-prebuilt';
+export declare const MoreSettings: ({ elements, screenType, }: {
+    elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+    screenType: keyof ConferencingScreen;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ConferencingScreen, DefaultConferencingScreen_Elements, HLSLiveStreamingScreen_Elements } from '@100mslive/types-prebuilt';
+export declare const DesktopOptions: ({ elements, screenType, }: {
+    elements: DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
+    screenType: keyof ConferencingScreen;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+export declare const MwebOptions: ({ elements, screenType, }: {
+    elements: DefaultConferencingScreen_Elements;
+    screenType: keyof ConferencingScreen;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Pagination.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Pagination: ({ page, onPageChange, numPages, }: {
+    page: number;
+    onPageChange: (page: number) => void;
+    numPages: number;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Preview/PreviewContainer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PreviewContainer: () => React.JSX.Element;
+export default PreviewContainer;

package/dist/Prebuilt/components/Preview/PreviewForm.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const PreviewForm: ({ name, onChange, onJoin, enableJoin, cannotPublishVideo, cannotPublishAudio, }: {
+    name: string;
+    onChange: (name: string) => void;
+    onJoin: () => void;
+    enableJoin: boolean;
+    cannotPublishVideo: boolean;
+    cannotPublishAudio: boolean;
+}) => React.JSX.Element;
+export default PreviewForm;

package/dist/Prebuilt/components/Preview/PreviewJoin.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare const PreviewJoin: ({ onJoin, skipPreview, initialName, asRole, }: {
+    onJoin: () => void;
+    skipPreview?: boolean | undefined;
+    initialName?: string | undefined;
+    asRole?: string | undefined;
+}) => React.JSX.Element;
+export declare const PreviewTile: ({ name, error }: {
+    name: string;
+    error?: boolean | undefined;
+}) => React.JSX.Element;
+export declare const PreviewControls: ({ hideSettings }: {
+    hideSettings: boolean;
+}) => React.JSX.Element;
+export declare const PreviewSettings: React.MemoExoticComponent<() => React.JSX.Element>;
+export default PreviewJoin;

package/dist/Prebuilt/components/RoleChangeRequestModal.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RoleChangeRequestModal: () => React.JSX.Element | null;

package/dist/Prebuilt/components/SecondaryTiles.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LayoutProps } from './VideoLayouts/interface';
+export declare const SecondaryTiles: ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/EqualProminence.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LayoutProps } from './interface';
+export declare function EqualProminence({ isInsetEnabled, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps): React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/Grid.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
+export declare const Grid: React.ForwardRefExoticComponent<{
+    tiles: TrackWithPeerAndDimensions[];
+    edgeToEdge?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/Prebuilt/components/VideoLayouts/GridLayout.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
+export declare type TileCustomisationProps = {
+    hide_participant_name_on_tile: boolean;
+    rounded_video_tile: boolean;
+    hide_audio_mute_on_tile: boolean;
+    video_object_fit: 'contain' | 'cover';
+    edge_to_edge: boolean;
+    hide_metadata_on_tile: boolean;
+};
+export declare type GridLayoutProps = GridVideoTileLayout & TileCustomisationProps;
+export declare const GridLayout: ({ enable_local_tile_inset: isInsetEnabled, prominent_roles: prominentRoles, enable_spotlighting_peer, hide_participant_name_on_tile, rounded_video_tile, hide_audio_mute_on_tile, video_object_fit, edge_to_edge, hide_metadata_on_tile, }: GridLayoutProps) => React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/ProminenceLayout.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
+import { CSS } from '../../../Theme';
+export declare const ProminenceLayout: {
+    Root: ({ children, edgeToEdge }: React.PropsWithChildren<{
+        edgeToEdge?: boolean | undefined;
+    }>) => React.JSX.Element;
+    ProminentSection: ({ children, css }: React.PropsWithChildren<{
+        css?: CSS | undefined;
+    }>) => React.JSX.Element;
+    SecondarySection: ({ tiles, children, edgeToEdge, }: React.PropsWithChildren<{
+        tiles: TrackWithPeerAndDimensions[];
+        edgeToEdge?: boolean | undefined;
+    }>) => React.JSX.Element | null;
+};

package/dist/Prebuilt/components/VideoLayouts/RoleProminence.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LayoutProps } from './interface';
+export declare function RoleProminence({ isInsetEnabled, prominentRoles, peers, onPageChange, onPageSize, edgeToEdge, }: LayoutProps): React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/ScreenshareLayout.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LayoutProps } from './interface';
+export declare const ScreenshareLayout: ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/interface.d.ts

@@ -0,0 +1,9 @@
+import { HMSPeer } from '@100mslive/react-sdk';
+export interface LayoutProps {
+    isInsetEnabled?: boolean;
+    edgeToEdge?: boolean;
+    prominentRoles?: string[];
+    peers: HMSPeer[];
+    onPageChange?: (page: number) => void;
+    onPageSize?: (size: number) => void;
+}

package/dist/Prebuilt/components/hooks/useAutoStartStreaming.d.ts

@@ -0,0 +1 @@
+export declare const useAutoStartStreaming: () => void;

package/dist/Prebuilt/components/hooks/useRedirectToLeave.d.ts

@@ -0,0 +1,3 @@
+export declare const useRedirectToLeave: () => {
+    redirectToLeave: (timeout?: number) => void;
+};

package/dist/Prebuilt/components/hooks/useRoleProminencePeers.d.ts

@@ -0,0 +1,5 @@
+import { HMSPeer } from '@100mslive/react-sdk';
+export declare const useRoleProminencePeers: (prominentRoles: string[], peers: HMSPeer[], isInsetEnabled: boolean) => {
+    prominentPeers: HMSPeer[];
+    secondaryPeers: HMSPeer[];
+};

package/dist/Prebuilt/components/hooks/useTileLayout.d.ts

@@ -0,0 +1,13 @@
+import { HMSPeer, TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
+export declare const usePagesWithTiles: ({ peers, maxTileCount }: {
+    peers: HMSPeer[];
+    maxTileCount: number;
+}) => TrackWithPeerAndDimensions[][];
+export declare const useTileLayout: ({ pageList, maxTileCount, edgeToEdge, }: {
+    pageList: TrackWithPeerAndDimensions[][];
+    maxTileCount: number;
+    edgeToEdge?: boolean | undefined;
+}) => {
+    pagesWithTiles: TrackWithPeerAndDimensions[][];
+    ref: import("react-use/lib/useMeasure").UseMeasureRef<HTMLDivElement>;
+};

package/dist/Prebuilt/components/hooks/useVideoTileLayout.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type TileContextType = {
+    enableSpotlightingPeer: boolean;
+    hideParticipantNameOnTile?: boolean;
+    roundedVideoTile?: boolean;
+    hideAudioMuteOnTile?: boolean;
+    hideAudioLevelOnTile?: boolean;
+    objectFit?: 'cover' | 'contain';
+    hideMetadataOnTile?: boolean;
+};
+export declare const VideoTileContext: React.Context<TileContextType>;
+export declare const useVideoTileContext: () => TileContextType;
+export {};

package/dist/Prebuilt/layouts/SidePane.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
+declare const SidePane: ({ screenType, tileProps, hideControls, }: {
+    screenType: keyof ConferencingScreen;
+    tileProps: TileCustomisationProps;
+    hideControls: boolean;
+}) => React.JSX.Element | null;
+export default SidePane;

package/dist/Prebuilt/layouts/VideoStreamingSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ConferencingScreen, DefaultConferencingScreen_Elements, HLSLiveStreamingScreen_Elements } from '@100mslive/types-prebuilt';
+export declare const VideoStreamingSection: ({ screenType, elements, hideControls, }: {
+    screenType: keyof ConferencingScreen;
+    elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+    hideControls: boolean;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/plugins/whiteboard/ToggleWhiteboard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+export declare const ToggleWhiteboard: ({ screenType }: {
+    screenType: keyof ConferencingScreen;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.d.ts

@@ -5,5 +5,6 @@ export declare type useFetchRoomLayoutProps = {
 };
 export declare type useFetchRoomLayoutResponse = {
     layout: Layout | undefined;
+    updateRoomLayoutForRole: (role: string) => void;
 };
 export declare const useFetchRoomLayout: ({ endpoint, authToken, }: useFetchRoomLayoutProps) => useFetchRoomLayoutResponse;

package/dist/Prebuilt/provider/roomLayoutProvider/hooks/useInsetEnabled.d.ts

@@ -0,0 +1 @@
+export declare const useInsetEnabled: () => boolean;

package/dist/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.d.ts

@@ -0,0 +1,17 @@
+import { ConferencingScreen, DefaultPreviewScreen_Elements, Screens } from '@100mslive/types-prebuilt';
+export declare type useRoomLayoutScreenProps = {
+    screen: keyof Screens;
+};
+export declare function useRoomLayoutPreviewScreen(): {
+    isPreviewScreenEnabled: boolean;
+    elements: DefaultPreviewScreen_Elements | undefined;
+    screenType: "default" | undefined;
+};
+export declare function useRoomLayoutConferencingScreen(): {
+    hideSections: string[];
+    elements: import("@100mslive/types-prebuilt").DefaultConferencingScreen_Elements | import("@100mslive/types-prebuilt").HLSLiveStreamingScreen_Elements | undefined;
+    screenType: keyof ConferencingScreen;
+};
+export declare function useRoomLayoutLeaveScreen(): {
+    isLeaveScreenEnabled: boolean;
+};

package/dist/Prebuilt/provider/roomLayoutProvider/index.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 import type { Layout } from '@100mslive/types-prebuilt';
+import { useFetchRoomLayoutResponse } from './hooks/useFetchRoomLayout';
 export declare type RoomLayoutProviderProps = {
     roomLayoutEndpoint?: string;
     overrideLayout?: Partial<Layout>;
 };
-export declare const RoomLayoutContext: React.Context<Layout | undefined>;
+export declare const RoomLayoutContext: React.Context<{
+    layout: Layout | undefined;
+    updateRoomLayoutForRole: useFetchRoomLayoutResponse['updateRoomLayoutForRole'] | undefined;
+} | undefined>;
 export declare const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>>;
 export declare const useRoomLayout: () => Layout | undefined;
+export declare const useUpdateRoomLayout: () => ((role: string) => void) | undefined;

package/dist/{VirtualBackground-GGCQJ5JM.js → VirtualBackground-UM2FOUHQ.js}

@@ -1,18 +1,14 @@
 import {
   ActionTile
-} from "./chunk-P5X32KOD.js";
+} from "./chunk-364HP22I.js";
 import {
-  FEATURE_LIST,
   IconButton_default,
   Loading,
   Tooltip,
-  __async,
-  init_define_process_env,
-  useIsFeatureEnabled
-} from "./chunk-RVCZPPTL.js";
+  __async
+} from "./chunk-POE7H4IE.js";
 
 // src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
-init_define_process_env();
 import React, { useEffect, useRef, useState } from "react";
 import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes2 } from "@100mslive/hms-virtual-background";
 import {
@@ -26,7 +22,6 @@ import {
 import { VirtualBackgroundIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/plugins/VirtualBackground/vbutils.js
-init_define_process_env();
 import { HMSVirtualBackgroundTypes } from "@100mslive/hms-virtual-background";
 function getRandomVirtualBackground() {
   const backgroundList = [
@@ -94,7 +89,6 @@ var VirtualBackground = ({
   const [isVBOn, setIsVBOn] = useState(false);
   const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
   const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent("HMSVB"));
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.VIDEO_PLUGINS);
   function createPlugin() {
     return __async(this, null, function* () {
       if (!pluginRef.current) {
@@ -135,7 +129,7 @@ var VirtualBackground = ({
       }
     });
   }
-  if (!isAllowedToPublish.video || !isVBSupported || !isFeatureEnabled) {
+  if (!isAllowedToPublish.video || !isVBSupported) {
     return null;
   }
   if (asActionTile) {
@@ -180,4 +174,4 @@ export {
   VirtualBackground,
   VirtualBackground_default as default
 };
-//# sourceMappingURL=VirtualBackground-GGCQJ5JM.js.map
+//# sourceMappingURL=VirtualBackground-UM2FOUHQ.js.map

package/dist/VirtualBackground-UM2FOUHQ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx", "../src/Prebuilt/plugins/VirtualBackground/vbutils.js"],
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nimport {\n  selectIsAllowedToPublish,\n  selectIsLocalVideoPluginPresent,\n  selectLocalPeerRole,\n  selectLocalVideoTrackID,\n  useHMSActions,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { VirtualBackgroundIcon } from '@100mslive/react-icons';\nimport { ActionTile } from '../../components/MoreSettings/ActionTile';\nimport { Loading } from '../../../Loading';\nimport { Tooltip } from '../../../Tooltip';\nimport IconButton from '../../IconButton';\nimport { getRandomVirtualBackground } from './vbutils';\n\nexport const VirtualBackground = ({\n  asActionTile = false,\n  onVBClick = () => {\n    return;\n  },\n}) => {\n  const pluginRef = useRef(null);\n  const hmsActions = useHMSActions();\n  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);\n  const role = useHMSStore(selectLocalPeerRole);\n  const [isVBLoading, setIsVBLoading] = useState(false);\n  const [isVBSupported, setIsVBSupported] = useState(false);\n  const [isVBOn, setIsVBOn] = useState(false);\n  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);\n  const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));\n\n  async function createPlugin() {\n    if (!pluginRef.current) {\n      const { HMSVBPlugin } = await import('@100mslive/hms-virtual-background');\n      pluginRef.current = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);\n    }\n  }\n  useEffect(() => {\n    if (!localPeerVideoTrackID) {\n      return;\n    }\n    createPlugin().then(() => {\n      //check support of plugin\n      const pluginSupport = hmsActions.validateVideoPluginSupport(pluginRef.current);\n      setIsVBSupported(pluginSupport.isSupported);\n    });\n  }, [hmsActions, localPeerVideoTrackID]);\n\n  async function addPlugin() {\n    setIsVBLoading(true);\n    try {\n      await createPlugin();\n      window.HMS.virtualBackground = pluginRef.current;\n      const { background, backgroundType } = getRandomVirtualBackground();\n      await pluginRef.current.setBackground(background, backgroundType);\n      await hmsActions.addPluginToVideoTrack(pluginRef.current, Math.floor(role.publishParams.video.frameRate / 2));\n    } catch (err) {\n      console.error('add virtual background plugin failed', err);\n    }\n    setIsVBLoading(false);\n  }\n\n  async function removePlugin() {\n    if (pluginRef.current) {\n      await hmsActions.removePluginFromVideoTrack(pluginRef.current);\n      pluginRef.current = null;\n    }\n  }\n\n  if (!isAllowedToPublish.video || !isVBSupported) {\n    return null;\n  }\n  if (asActionTile) {\n    return (\n      <ActionTile.Root\n        data-testid=\"virtual_bg_btn\"\n        active={isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          setIsVBOn(!isVBOn);\n          !isVBPresent ? addPlugin() : removePlugin();\n          onVBClick();\n        }}\n      >\n        <VirtualBackgroundIcon />\n        <ActionTile.Title>Virtual Background</ActionTile.Title>\n      </ActionTile.Root>\n    );\n  }\n\n  return (\n    <Tooltip\n      boxCss={{ zIndex: '100' }}\n      title={isVBLoading ? 'Adding virtual background' : `Turn ${!isVBPresent ? 'on' : 'off'} virtual background`}\n    >\n      <IconButton\n        active={!isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          !isVBPresent ? addPlugin() : removePlugin();\n        }}\n        data-testid=\"virtual_bg_btn\"\n      >\n        {isVBLoading ? <Loading /> : <VirtualBackgroundIcon />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nexport default VirtualBackground;\n", "/* eslint-disable no-case-declarations */\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nexport function getRandomVirtualBackground() {\n  const backgroundList = [\n    {\n      background: HMSVirtualBackgroundTypes.BLUR,\n      backgroundType: HMSVirtualBackgroundTypes.BLUR,\n    },\n  ];\n\n  const images = [\n    'https://www.100ms.live/images/vb-1.jpeg',\n    'https://www.100ms.live/images/vb-2.jpg',\n    'https://www.100ms.live/images/vb-3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms1.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms2.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms4.png',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.IMAGE,\n  }));\n\n  backgroundList.push(...images);\n\n  /* \n   //TODO: update with a better quality gif.\n  const gifList = [\n    {\n      background: \"https://www.100ms.live/images/vb-1.gif\",\n      backgroundType: HMSVirtualBackgroundTypes.GIF,\n    },\n  ];\n  backgroundList.push(...gifList); \n  */\n\n  const videoList = [\n    'https://www.100ms.live/images/video-1.mp4',\n    'https://www.100ms.live/images/video-2.mp4',\n    'https://www.100ms.live/images/video-5.mp4',\n    'https://www.100ms.live/images/video-7.mp4',\n    'https://www.100ms.live/images/video-8.mp4',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.VIDEO,\n  }));\n  backgroundList.push(...videoList);\n\n  const randomIdx = Math.floor(Math.random() * backgroundList.length);\n  const virtualBackground = backgroundList[randomIdx];\n  switch (virtualBackground.backgroundType) {\n    case HMSVirtualBackgroundTypes.IMAGE:\n      const img = document.createElement('img');\n      img.alt = 'VB';\n      img.src = backgroundList[randomIdx].background;\n      virtualBackground.background = img;\n      return virtualBackground;\n    case HMSVirtualBackgroundTypes.VIDEO:\n      const videoEl = document.createElement('video');\n      videoEl.src = backgroundList[randomIdx].background;\n      virtualBackground.background = videoEl;\n      return virtualBackground;\n    default:\n      return virtualBackground;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAAA,OAAO,SAAS,WAAW,QAAQ,gBAAgB;AACnD,SAAS,6BAAAA,kCAAiC;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;;;ACTtC,SAAS,iCAAiC;AACnC,SAAS,6BAA6B;AAC3C,QAAM,iBAAiB;AAAA,IACrB;AAAA,MACE,YAAY,0BAA0B;AAAA,MACtC,gBAAgB,0BAA0B;AAAA,IAC5C;AAAA,EACF;AAEA,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,IAAI,UAAQ;AAAA,IACZ,YAAY;AAAA,IACZ,gBAAgB,0BAA0B;AAAA,EAC5C,EAAE;AAEF,iBAAe,KAAK,GAAG,MAAM;AAa7B,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,IAAI,UAAQ;AAAA,IACZ,YAAY;AAAA,IACZ,gBAAgB,0BAA0B;AAAA,EAC5C,EAAE;AACF,iBAAe,KAAK,GAAG,SAAS;AAEhC,QAAM,YAAY,KAAK,MAAM,KAAK,OAAO,IAAI,eAAe,MAAM;AAClE,QAAM,oBAAoB,eAAe,SAAS;AAClD,UAAQ,kBAAkB,gBAAgB;AAAA,IACxC,KAAK,0BAA0B;AAC7B,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,MAAM;AACV,UAAI,MAAM,eAAe,SAAS,EAAE;AACpC,wBAAkB,aAAa;AAC/B,aAAO;AAAA,IACT,KAAK,0BAA0B;AAC7B,YAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,cAAQ,MAAM,eAAe,SAAS,EAAE;AACxC,wBAAkB,aAAa;AAC/B,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;;;ADhDO,IAAM,oBAAoB,CAAC;AAAA,EAChC,eAAe;AAAA,EACf,YAAY,MAAM;AAChB;AAAA,EACF;AACF,MAAM;AACJ,QAAM,YAAY,OAAO,IAAI;AAC7B,QAAM,aAAa,cAAc;AACjC,QAAM,qBAAqB,YAAY,wBAAwB;AAC/D,QAAM,OAAO,YAAY,mBAAmB;AAC5C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,wBAAwB,YAAY,uBAAuB;AACjE,QAAM,cAAc,YAAY,gCAAgC,OAAO,CAAC;AAExE,WAAe,eAAe;AAAA;AAC5B,UAAI,CAAC,UAAU,SAAS;AACtB,cAAM,EAAE,YAAY,IAAI,MAAM,OAAO,mCAAmC;AACxE,kBAAU,UAAU,IAAI,YAAYC,2BAA0B,MAAMA,2BAA0B,IAAI;AAAA,MACpG;AAAA,IACF;AAAA;AACA,YAAU,MAAM;AACd,QAAI,CAAC,uBAAuB;AAC1B;AAAA,IACF;AACA,iBAAa,EAAE,KAAK,MAAM;AAExB,YAAM,gBAAgB,WAAW,2BAA2B,UAAU,OAAO;AAC7E,uBAAiB,cAAc,WAAW;AAAA,IAC5C,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,qBAAqB,CAAC;AAEtC,WAAe,YAAY;AAAA;AACzB,qBAAe,IAAI;AACnB,UAAI;AACF,cAAM,aAAa;AACnB,eAAO,IAAI,oBAAoB,UAAU;AACzC,cAAM,EAAE,YAAY,eAAe,IAAI,2BAA2B;AAClE,cAAM,UAAU,QAAQ,cAAc,YAAY,cAAc;AAChE,cAAM,WAAW,sBAAsB,UAAU,SAAS,KAAK,MAAM,KAAK,cAAc,MAAM,YAAY,CAAC,CAAC;AAAA,MAC9G,SAAS,KAAK;AACZ,gBAAQ,MAAM,wCAAwC,GAAG;AAAA,MAC3D;AACA,qBAAe,KAAK;AAAA,IACtB;AAAA;AAEA,WAAe,eAAe;AAAA;AAC5B,UAAI,UAAU,SAAS;AACrB,cAAM,WAAW,2BAA2B,UAAU,OAAO;AAC7D,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF;AAAA;AAEA,MAAI,CAAC,mBAAmB,SAAS,CAAC,eAAe;AAC/C,WAAO;AAAA,EACT;AACA,MAAI,cAAc;AAChB,WACE;AAAA,MAAC,WAAW;AAAA,MAAX;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS,MAAM;AACb,oBAAU,CAAC,MAAM;AACjB,WAAC,cAAc,UAAU,IAAI,aAAa;AAC1C,oBAAU;AAAA,QACZ;AAAA;AAAA,MAEA,oCAAC,2BAAsB;AAAA,MACvB,oCAAC,WAAW,OAAX,MAAiB,oBAAkB;AAAA,IACtC;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,EAAE,QAAQ,MAAM;AAAA,MACxB,OAAO,cAAc,8BAA8B,QAAQ,CAAC,cAAc,OAAO,KAAK;AAAA;AAAA,IAEtF;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,CAAC;AAAA,QACT,UAAU;AAAA,QACV,SAAS,MAAM;AACb,WAAC,cAAc,UAAU,IAAI,aAAa;AAAA,QAC5C;AAAA,QACA,eAAY;AAAA;AAAA,MAEX,cAAc,oCAAC,aAAQ,IAAK,oCAAC,2BAAsB;AAAA,IACtD;AAAA,EACF;AAEJ;AAEA,IAAO,4BAAQ;",
+  "names": ["HMSVirtualBackgroundTypes", "HMSVirtualBackgroundTypes"]
+}

package/dist/{chunk-P5X32KOD.js → chunk-364HP22I.js}

@@ -4,12 +4,10 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues,
-  init_define_process_env,
   styled
-} from "./chunk-RVCZPPTL.js";
+} from "./chunk-POE7H4IE.js";
 
 // src/Prebuilt/components/MoreSettings/ActionTile.jsx
-init_define_process_env();
 import React from "react";
 var ActionTileRoot = (_a) => {
   var _b = _a, { active, disabled = false, children, onClick } = _b, props = __objRest(_b, ["active", "disabled", "children", "onClick"]);
@@ -45,9 +43,14 @@ var ActionTileCount = styled(Text, {
   fontWeight: "$semiBold",
   color: "$on_surface_high",
   p: "$1 $2",
+  minWidth: "$9",
+  textAlign: "center",
+  boxSizing: "border-box",
   bg: "$surface_bright",
   r: "$round",
-  fontSize: "$tiny !important"
+  letterSpacing: "1.5px",
+  fontSize: "$tiny !important",
+  lineHeight: "$tiny !important"
 });
 var ActionTileTitle = styled(Text, {
   fontWeight: "$semiBold",
@@ -64,4 +67,4 @@ var ActionTile = {
 export {
   ActionTile
 };
-//# sourceMappingURL=chunk-P5X32KOD.js.map
+//# sourceMappingURL=chunk-364HP22I.js.map

package/dist/chunk-364HP22I.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/MoreSettings/ActionTile.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport { Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { styled } from '../../../Theme';\n\nconst ActionTileRoot = ({ active, disabled = false, children, onClick, ...props }) => (\n  <Flex\n    {...props}\n    css={{\n      flexDirection: 'column',\n      alignItems: 'center',\n      p: '$4 $2',\n      position: 'relative',\n      bg: active ? '$surface_bright' : '',\n      color: disabled ? '$on_surface_low' : '$on_surface_high',\n      gap: '$4',\n      r: '$1',\n      '&:hover': {\n        bg: '$surface_bright',\n      },\n    }}\n    onClick={() => {\n      if (!disabled) {\n        onClick();\n      }\n    }}\n  >\n    {children}\n  </Flex>\n);\n\nconst ActionTileCount = styled(Text, {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  fontWeight: '$semiBold',\n  color: '$on_surface_high',\n  p: '$1 $2',\n  minWidth: '$9',\n  textAlign: 'center',\n  boxSizing: 'border-box',\n  bg: '$surface_bright',\n  r: '$round',\n  letterSpacing: '1.5px',\n  fontSize: '$tiny !important',\n  lineHeight: '$tiny !important',\n});\n\nconst ActionTileTitle = styled(Text, {\n  fontWeight: '$semiBold',\n  color: 'inherit',\n  textAlign: 'center',\n  fontSize: '$xs !important',\n});\n\nexport const ActionTile = {\n  Root: ActionTileRoot,\n  Title: ActionTileTitle,\n  Count: ActionTileCount,\n};\n"],
+  "mappings": ";;;;;;;;;;AAAA,OAAO,WAAW;AAKlB,IAAM,iBAAiB,CAAC,OAA2D;AAA3D,eAAE,UAAQ,WAAW,OAAO,UAAU,QAL9D,IAKwB,IAAkD,kBAAlD,IAAkD,CAAhD,UAAQ,YAAkB,YAAU;AAC5D;AAAA,IAAC;AAAA,qCACK,QADL;AAAA,MAEC,KAAK;AAAA,QACH,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,GAAG;AAAA,QACH,UAAU;AAAA,QACV,IAAI,SAAS,oBAAoB;AAAA,QACjC,OAAO,WAAW,oBAAoB;AAAA,QACtC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,WAAW;AAAA,UACT,IAAI;AAAA,QACN;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,UAAU;AACb,kBAAQ;AAAA,QACV;AAAA,MACF;AAAA;AAAA,IAEC;AAAA,EACH;AAAA;AAGF,IAAM,kBAAkB,OAAO,MAAM;AAAA,EACnC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,GAAG;AAAA,EACH,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,eAAe;AAAA,EACf,UAAU;AAAA,EACV,YAAY;AACd,CAAC;AAED,IAAM,kBAAkB,OAAO,MAAM;AAAA,EACnC,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AACZ,CAAC;AAEM,IAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;",
+  "names": []
+}