@100mslive/roomkit-react 0.5.4-alpha.0 → 0.5.4-alpha.1

package/dist/VBPicker-FAHHMUQI.js

@@ -1,313 +0,0 @@
-import {
-  APP_DATA,
-  Box,
-  Flex,
-  Loading,
-  MS,
-  SIDE_PANE_OPTIONS,
-  Slider,
-  Text,
-  UI_SETTINGS,
-  US,
-  VBHandler,
-  Video,
-  config,
-  kS,
-  useSetAppDataByKey,
-  useSidepaneResetOnLayoutUpdate,
-  useSidepaneToggle,
-  useUISettings,
-  ut
-} from "./chunk-NBFKVN6C.js";
-import {
-  __async,
-  __spreadProps,
-  __spreadValues,
-  init_define_process_env
-} from "./chunk-WS5Q67XX.js";
-
-// src/Prebuilt/components/VirtualBackground/VBPicker.tsx
-init_define_process_env();
-import React3, { useEffect, useRef, useState } from "react";
-import { useMedia } from "react-use";
-import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes2 } from "@100mslive/hms-virtual-background/hmsvbplugin";
-import {
-  HMSRoomState,
-  selectIsLargeRoom,
-  selectIsLocalVideoEnabled,
-  selectIsLocalVideoPluginPresent,
-  selectLocalPeer,
-  selectRoomState,
-  selectVideoTrackByID,
-  useHMSActions,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/VirtualBackground/VBCollection.tsx
-init_define_process_env();
-import React2 from "react";
-import { HMSVirtualBackgroundTypes } from "@100mslive/hms-virtual-background/hmsvbplugin";
-
-// src/Prebuilt/components/VirtualBackground/VBOption.tsx
-init_define_process_env();
-import React from "react";
-var Root = ({
-  onClick,
-  mediaURL,
-  isActive,
-  children,
-  testid = ""
-}) => /* @__PURE__ */ React.createElement(
-  Flex,
-  {
-    "data-testid": testid,
-    direction: "column",
-    align: "center",
-    css: __spreadValues({
-      p: "$5",
-      borderRadius: "$1",
-      bg: "$surface_bright",
-      border: `4px solid ${isActive ? "$primary_default" : "$surface_dim"}`,
-      cursor: "pointer",
-      "@media (hover:hover)": {
-        "&:hover": { border: "4px solid $primary_dim" }
-      }
-    }, mediaURL ? { height: "$20", backgroundImage: `url("${mediaURL}")`, backgroundSize: "cover" } : {}),
-    onClick: () => __async(null, null, function* () {
-      yield onClick == null ? void 0 : onClick();
-    })
-  },
-  children
-);
-var Title = ({ children }) => {
-  return children ? /* @__PURE__ */ React.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, children) : null;
-};
-var Icon = ({ children }) => {
-  return children ? /* @__PURE__ */ React.createElement(Box, { css: { color: "$on_surface_high" } }, children) : null;
-};
-var VBOption = {
-  Root,
-  Title,
-  Icon
-};
-
-// src/Prebuilt/components/VirtualBackground/VBCollection.tsx
-var VBCollection = ({
-  options,
-  title,
-  activeBackground = ""
-}) => {
-  if (options.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(Box, { css: { mt: "$10" } }, /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ React2.createElement(Box, { css: { py: "$4", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "$8" } }, options.map(
-    (option, index) => option.supported ? /* @__PURE__ */ React2.createElement(
-      VBOption.Root,
-      __spreadProps(__spreadValues({
-        key: option.value,
-        testid: option.value === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.value
-      }, option), {
-        isActive: activeBackground === option.value
-      }),
-      /* @__PURE__ */ React2.createElement(VBOption.Icon, null, option == null ? void 0 : option.icon),
-      /* @__PURE__ */ React2.createElement(VBOption.Title, null, option == null ? void 0 : option.title)
-    ) : ""
-  )));
-};
-
-// src/Prebuilt/components/VirtualBackground/VBPicker.tsx
-var iconDims = { height: "40px", width: "40px" };
-var VBPicker = ({ backgroundMedia = [] }) => {
-  var _a, _b;
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const hmsActions = useHMSActions();
-  const localPeer = useHMSStore(selectLocalPeer);
-  const role = useHMSStore(ut);
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
-  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const trackSelector = selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack);
-  const track = useHMSStore(trackSelector);
-  const [blurAmount, setBlurAmount] = useState(VBHandler.getBlurAmount() || 0.5);
-  const roomState = useHMSStore(selectRoomState);
-  const isLargeRoom = useHMSStore(selectIsLargeRoom);
-  const isEffectsSupported = VBHandler.isEffectsSupported();
-  const isEffectsEnabled = useHMSStore(MS);
-  const effectsKey = useHMSStore(kS);
-  const isMobile = useMedia(config.media.md);
-  const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
-  const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(((_a = VBHandler) == null ? void 0 : _a.getName()) || ""));
-  const background = useHMSStore(US(APP_DATA.background));
-  const mediaList = backgroundMedia.map((media) => media.url || "");
-  const pluginLoadingRef = useRef(false);
-  const isBlurSupported = (_b = VBHandler) == null ? void 0 : _b.isBlurSupported();
-  const inPreview = roomState === HMSRoomState.Preview;
-  const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
-  useEffect(() => {
-    const addHMSVBPlugin = () => __async(null, null, function* () {
-      setLoadingEffects(false);
-      if (!role) {
-        return;
-      }
-      yield VBHandler.initialisePlugin();
-      yield hmsActions.addPluginToVideoTrack(
-        VBHandler.getVBObject(),
-        Math.floor(role.publishParams.video.frameRate / 2)
-      );
-    });
-    const initializeVirtualBackground = () => __async(null, null, function* () {
-      if (!(track == null ? void 0 : track.id) || pluginLoadingRef.current || isPluginAdded) {
-        return;
-      }
-      try {
-        pluginLoadingRef.current = true;
-        if (isEffectsEnabled && isEffectsSupported && effectsKey) {
-          setLoadingEffects(true);
-          yield VBHandler.initialisePlugin(effectsKey, () => {
-            setLoadingEffects(false);
-          });
-          const vbInstance = VBHandler.getVBObject();
-          if (vbInstance.getName() === "HMSEffects") {
-            hmsActions.addPluginsToVideoStream([VBHandler.getVBObject()]);
-          } else {
-            yield addHMSVBPlugin();
-          }
-        } else {
-          yield addHMSVBPlugin();
-        }
-        const handleDefaultBackground = () => __async(null, null, function* () {
-          switch (background) {
-            case HMSVirtualBackgroundTypes2.NONE:
-              break;
-            case HMSVirtualBackgroundTypes2.BLUR:
-              yield VBHandler.setBlur(blurAmount);
-              break;
-            default:
-              yield VBHandler.setBackground(background);
-          }
-        });
-        yield handleDefaultBackground();
-      } catch (error) {
-        console.error("Error initializing virtual background:", error);
-        setLoadingEffects(false);
-      }
-    });
-    initializeVirtualBackground();
-  }, [
-    hmsActions,
-    role,
-    isPluginAdded,
-    isEffectsEnabled,
-    isEffectsSupported,
-    effectsKey,
-    track == null ? void 0 : track.id,
-    background,
-    blurAmount,
-    setLoadingEffects
-  ]);
-  useEffect(() => {
-    if (!isVideoOn) {
-      toggleVB();
-    }
-    return () => setLoadingEffects(false);
-  }, [isVideoOn, setLoadingEffects, toggleVB]);
-  useSidepaneResetOnLayoutUpdate("virtual_background", SIDE_PANE_OPTIONS.VB);
-  return /* @__PURE__ */ React3.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ React3.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ React3.createElement(Text, { variant: "h6", css: { color: "$on_surface_high", display: "flex", alignItems: "center" } }, "Virtual Background ", isMobile && loadingEffects ? /* @__PURE__ */ React3.createElement(Loading, { size: 18, style: { marginLeft: "0.5rem" } }) : ""), /* @__PURE__ */ React3.createElement(
-    Box,
-    {
-      css: { color: "$on_surface_high", "&:hover": { color: "$on_surface_medium" }, cursor: "pointer" },
-      onClick: toggleVB
-    },
-    /* @__PURE__ */ React3.createElement(CrossIcon, null)
-  )), showVideoTile ? /* @__PURE__ */ React3.createElement(
-    Video,
-    {
-      mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
-      trackId: localPeer == null ? void 0 : localPeer.videoTrack,
-      "data-testid": "preview_tile",
-      css: { width: "100%", height: "16rem" }
-    }
-  ) : null, /* @__PURE__ */ React3.createElement(
-    Box,
-    {
-      css: {
-        mt: "$4",
-        overflowY: "auto",
-        flex: "1 1 0",
-        mr: "-$10",
-        pr: "$10"
-      }
-    },
-    /* @__PURE__ */ React3.createElement(
-      VBCollection,
-      {
-        title: "Effects",
-        options: [
-          {
-            title: "No effect",
-            icon: /* @__PURE__ */ React3.createElement(CrossCircleIcon, { style: iconDims }),
-            value: HMSVirtualBackgroundTypes2.NONE,
-            onClick: () => __async(null, null, function* () {
-              yield VBHandler.removeEffects();
-              hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes2.NONE);
-              if (isMobile) {
-                toggleVB();
-              }
-            }),
-            supported: true
-          },
-          {
-            title: "Blur",
-            icon: /* @__PURE__ */ React3.createElement(BlurPersonHighIcon, { style: iconDims }),
-            value: HMSVirtualBackgroundTypes2.BLUR,
-            onClick: () => __async(null, null, function* () {
-              var _a2;
-              yield (_a2 = VBHandler) == null ? void 0 : _a2.setBlur(blurAmount);
-              hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes2.BLUR);
-            }),
-            supported: isBlurSupported
-          }
-        ],
-        activeBackground: background
-      }
-    ),
-    /* @__PURE__ */ React3.createElement(Flex, { direction: "column", css: { w: "100%", gap: "$8", mt: "$8" } }, background === HMSVirtualBackgroundTypes2.BLUR && isBlurSupported ? /* @__PURE__ */ React3.createElement(Box, null, /* @__PURE__ */ React3.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold", mb: "$4" } }, "Blur intensity"), /* @__PURE__ */ React3.createElement(Flex, { css: { w: "100%", justifyContent: "space-between", alignItems: "center", gap: "$4" } }, /* @__PURE__ */ React3.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "Low"), /* @__PURE__ */ React3.createElement(
-      Slider,
-      {
-        showTooltip: false,
-        value: [blurAmount],
-        onValueChange: (e) => __async(null, null, function* () {
-          setBlurAmount(e[0]);
-          yield VBHandler.setBlur(e[0]);
-        }),
-        step: 0.1,
-        min: 0.1,
-        max: 1
-      }
-    ), /* @__PURE__ */ React3.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "High"))) : null),
-    /* @__PURE__ */ React3.createElement(
-      VBCollection,
-      {
-        title: "Backgrounds",
-        options: mediaList.map((mediaURL) => ({
-          mediaURL,
-          value: mediaURL,
-          onClick: () => __async(null, null, function* () {
-            var _a2;
-            yield (_a2 = VBHandler) == null ? void 0 : _a2.setBackground(mediaURL);
-            hmsActions.setAppData(APP_DATA.background, mediaURL);
-            if (isMobile) {
-              toggleVB();
-            }
-          }),
-          supported: true
-        })),
-        activeBackground: background
-      }
-    )
-  ));
-};
-export {
-  VBPicker
-};
-//# sourceMappingURL=VBPicker-FAHHMUQI.js.map

package/dist/VBPicker-FAHHMUQI.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/VirtualBackground/VBPicker.tsx", "../src/Prebuilt/components/VirtualBackground/VBCollection.tsx", "../src/Prebuilt/components/VirtualBackground/VBOption.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport {\n  HMSMediaStreamPlugin,\n  selectAppData,\n  selectEffectsKey,\n  selectIsEffectsEnabled,\n  selectLocalPeerRole,\n} from '@100mslive/hms-video-store';\n// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810\n// eslint-disable-next-line\nimport { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';\nimport { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';\nimport {\n  HMSRoomState,\n  selectIsLargeRoom,\n  selectIsLocalVideoEnabled,\n  selectIsLocalVideoPluginPresent,\n  selectLocalPeer,\n  selectRoomState,\n  selectVideoTrackByID,\n  useHMSActions,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Box, config as cssConfig, Flex, Loading, Slider, Video } from '../../../index';\nimport { Text } from '../../../Text';\nimport { VBCollection } from './VBCollection';\nimport { VBHandler } from './VBHandler';\n// @ts-ignore\nimport { useSidepaneToggle } from '../AppData/useSidepane';\nimport { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';\n// @ts-ignore\nimport { useSetAppDataByKey, useUISettings } from '../AppData/useUISettings';\nimport { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';\n\nconst iconDims = { height: '40px', width: '40px' };\n\nexport const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBackgroundMedia[] }) => {\n  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);\n  const hmsActions = useHMSActions();\n  const localPeer = useHMSStore(selectLocalPeer);\n  const role = useHMSStore(selectLocalPeerRole);\n  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);\n  const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);\n  const track = useHMSStore(trackSelector);\n  const [blurAmount, setBlurAmount] = useState(VBHandler.getBlurAmount() || 0.5);\n  const roomState = useHMSStore(selectRoomState);\n  const isLargeRoom = useHMSStore(selectIsLargeRoom);\n  const isEffectsSupported = VBHandler.isEffectsSupported();\n  const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);\n  const effectsKey = useHMSStore(selectEffectsKey);\n  const isMobile = useMedia(cssConfig.media.md);\n  const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);\n  const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));\n  const background = useHMSStore(selectAppData(APP_DATA.background));\n  const mediaList = backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || '');\n  const pluginLoadingRef = useRef(false);\n  const isBlurSupported = VBHandler?.isBlurSupported();\n\n  const inPreview = roomState === HMSRoomState.Preview;\n  // Hidden in preview as the effect will be visible in the preview tile\n  const showVideoTile = isVideoOn && isLargeRoom && !inPreview;\n\n  useEffect(() => {\n    const addHMSVBPlugin = async () => {\n      setLoadingEffects(false);\n      if (!role) {\n        return;\n      }\n      await VBHandler.initialisePlugin();\n      await hmsActions.addPluginToVideoTrack(\n        VBHandler.getVBObject() as HMSVBPlugin,\n        Math.floor(role.publishParams.video.frameRate / 2),\n      );\n    };\n    const initializeVirtualBackground = async () => {\n      if (!track?.id || pluginLoadingRef.current || isPluginAdded) {\n        return;\n      }\n\n      try {\n        pluginLoadingRef.current = true;\n        if (isEffectsEnabled && isEffectsSupported && effectsKey) {\n          setLoadingEffects(true);\n          await VBHandler.initialisePlugin(effectsKey, () => {\n            setLoadingEffects(false);\n          });\n          const vbInstance = VBHandler.getVBObject();\n          if (vbInstance.getName() === 'HMSEffects') {\n            hmsActions.addPluginsToVideoStream([VBHandler.getVBObject() as HMSMediaStreamPlugin]);\n          } else {\n            await addHMSVBPlugin();\n          }\n        } else {\n          await addHMSVBPlugin();\n        }\n\n        const handleDefaultBackground = async () => {\n          switch (background) {\n            case HMSVirtualBackgroundTypes.NONE:\n              break;\n            case HMSVirtualBackgroundTypes.BLUR:\n              await VBHandler.setBlur(blurAmount);\n              break;\n            default:\n              await VBHandler.setBackground(background);\n          }\n        };\n\n        await handleDefaultBackground();\n      } catch (error) {\n        console.error('Error initializing virtual background:', error);\n        setLoadingEffects(false);\n      }\n    };\n\n    initializeVirtualBackground();\n  }, [\n    hmsActions,\n    role,\n    isPluginAdded,\n    isEffectsEnabled,\n    isEffectsSupported,\n    effectsKey,\n    track?.id,\n    background,\n    blurAmount,\n    setLoadingEffects,\n  ]);\n\n  useEffect(() => {\n    if (!isVideoOn) {\n      toggleVB();\n    }\n    return () => setLoadingEffects(false);\n  }, [isVideoOn, setLoadingEffects, toggleVB]);\n\n  useSidepaneResetOnLayoutUpdate('virtual_background', SIDE_PANE_OPTIONS.VB);\n\n  return (\n    <Flex css={{ pr: '$6', size: '100%' }} direction=\"column\">\n      <Flex align=\"center\" justify=\"between\" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>\n        <Text variant=\"h6\" css={{ color: '$on_surface_high', display: 'flex', alignItems: 'center' }}>\n          Virtual Background {isMobile && loadingEffects ? <Loading size={18} style={{ marginLeft: '0.5rem' }} /> : ''}\n        </Text>\n        <Box\n          css={{ color: '$on_surface_high', '&:hover': { color: '$on_surface_medium' }, cursor: 'pointer' }}\n          onClick={toggleVB}\n        >\n          <CrossIcon />\n        </Box>\n      </Flex>\n\n      {showVideoTile ? (\n        <Video\n          mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}\n          trackId={localPeer?.videoTrack}\n          data-testid=\"preview_tile\"\n          css={{ width: '100%', height: '16rem' }}\n        />\n      ) : null}\n      <Box\n        css={{\n          mt: '$4',\n          overflowY: 'auto',\n          flex: '1 1 0',\n          mr: '-$10',\n          pr: '$10',\n        }}\n      >\n        <VBCollection\n          title=\"Effects\"\n          options={[\n            {\n              title: 'No effect',\n              icon: <CrossCircleIcon style={iconDims} />,\n              value: HMSVirtualBackgroundTypes.NONE,\n              onClick: async () => {\n                await VBHandler.removeEffects();\n                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);\n                if (isMobile) {\n                  toggleVB();\n                }\n              },\n              supported: true,\n            },\n            {\n              title: 'Blur',\n              icon: <BlurPersonHighIcon style={iconDims} />,\n              value: HMSVirtualBackgroundTypes.BLUR,\n              onClick: async () => {\n                await VBHandler?.setBlur(blurAmount);\n                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);\n              },\n              supported: isBlurSupported,\n            },\n          ]}\n          activeBackground={background}\n        />\n\n        {/* Slider */}\n        <Flex direction=\"column\" css={{ w: '100%', gap: '$8', mt: '$8' }}>\n          {background === HMSVirtualBackgroundTypes.BLUR && isBlurSupported ? (\n            <Box>\n              <Text variant=\"sm\" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mb: '$4' }}>\n                Blur intensity\n              </Text>\n              <Flex css={{ w: '100%', justifyContent: 'space-between', alignItems: 'center', gap: '$4' }}>\n                <Text variant=\"caption\" css={{ fontWeight: '$medium', color: '$on_surface_medium' }}>\n                  Low\n                </Text>\n                <Slider\n                  showTooltip={false}\n                  value={[blurAmount]}\n                  onValueChange={async e => {\n                    setBlurAmount(e[0]);\n                    await VBHandler.setBlur(e[0]);\n                  }}\n                  step={0.1}\n                  min={0.1}\n                  max={1}\n                />\n                <Text variant=\"caption\" css={{ fontWeight: '$medium', color: '$on_surface_medium' }}>\n                  High\n                </Text>\n              </Flex>\n            </Box>\n          ) : null}\n        </Flex>\n\n        <VBCollection\n          title=\"Backgrounds\"\n          options={mediaList.map(mediaURL => ({\n            mediaURL,\n            value: mediaURL,\n            onClick: async () => {\n              await VBHandler?.setBackground(mediaURL);\n              hmsActions.setAppData(APP_DATA.background, mediaURL);\n              if (isMobile) {\n                toggleVB();\n              }\n            },\n            supported: true,\n          }))}\n          activeBackground={background}\n        />\n      </Box>\n    </Flex>\n  );\n};\n", "import React from 'react';\n// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810\n// eslint-disable-next-line\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';\nimport { Box } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { VBOption } from './VBOption';\n\nexport const VBCollection = ({\n  options,\n  title,\n  activeBackground = '',\n}: {\n  options: {\n    title?: string;\n    icon?: React.JSX.Element;\n    onClick?: () => Promise<void>;\n    mediaURL?: string;\n    value: string | HMSVirtualBackgroundTypes;\n    supported?: boolean;\n  }[];\n  title: string;\n  activeBackground: string;\n}) => {\n  if (options.length === 0) {\n    return null;\n  }\n  return (\n    <Box css={{ mt: '$10' }}>\n      <Text variant=\"sm\" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>\n        {title}\n      </Text>\n      <Box css={{ py: '$4', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '$8' }}>\n        {options.map((option, index) =>\n          option.supported ? (\n            <VBOption.Root\n              key={option.value}\n              testid={option.value === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.value}\n              {...option}\n              isActive={activeBackground === option.value}\n            >\n              <VBOption.Icon>{option?.icon}</VBOption.Icon>\n              <VBOption.Title>{option?.title}</VBOption.Title>\n            </VBOption.Root>\n          ) : (\n            ''\n          ),\n        )}\n      </Box>\n    </Box>\n  );\n};\n", "import React from 'react';\nimport { Box, Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\n\nconst Root = ({\n  onClick,\n  mediaURL,\n  isActive,\n  children,\n  testid = '',\n}: {\n  onClick?: () => Promise<void>;\n  mediaURL?: string;\n  isActive: boolean;\n  children?: React.JSX.Element[];\n  testid: string;\n}) => (\n  <Flex\n    data-testid={testid}\n    direction=\"column\"\n    align=\"center\"\n    css={{\n      p: '$5',\n      borderRadius: '$1',\n      bg: '$surface_bright',\n      border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,\n      cursor: 'pointer',\n      '@media (hover:hover)': {\n        '&:hover': { border: '4px solid $primary_dim' },\n      },\n      ...(mediaURL ? { height: '$20', backgroundImage: `url(\"${mediaURL}\")`, backgroundSize: 'cover' } : {}),\n    }}\n    onClick={async () => {\n      await onClick?.();\n    }}\n  >\n    {children}\n  </Flex>\n);\n\nconst Title = ({ children }: { children?: string }) => {\n  return children ? (\n    <Text variant=\"xs\" css={{ color: '$on_surface_medium' }}>\n      {children}\n    </Text>\n  ) : null;\n};\n\nconst Icon = ({ children }: { children?: React.JSX.Element }) => {\n  return children ? <Box css={{ color: '$on_surface_high' }}>{children}</Box> : null;\n};\n\nexport const VBOption = {\n  Root,\n  Title,\n  Icon,\n};\n"],
-  "mappings": "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",
-  "names": ["React", "HMSVirtualBackgroundTypes", "React", "React", "HMSVirtualBackgroundTypes", "React", "_a"]
-}