@100mslive/roomkit-react 0.1.4-alpha.0 → 0.1.4

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import {
   DeviceType,
+  HMSRoomState,
   selectLocalVideoTrackID,
+  selectRoomState,
   selectVideoTrackByID,
   useAVToggle,
   useDevices,
@@ -18,7 +20,7 @@ import { isMacOS } from '../common/constants';
 
 const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };
 
-export const AudioVideoToggle = () => {
+export const AudioVideoToggle = ({ hideOptions = false }) => {
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
   const { videoInput, audioInput } = allDevices;
 
@@ -64,40 +66,81 @@ export const AudioVideoToggle = () => {
   const actions = useHMSActions();
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
+  const roomState = useHMSStore(selectRoomState);
 
   return (
     <Fragment>
       {toggleAudio ? (
-        <IconButtonWithOptions
-          options={formattedAudioInputList}
-          tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
-          icon={
-            !isLocalAudioEnabled ? <MicOffIcon data-testid="audio_off_btn" /> : <MicOnIcon data-testid="audio_on_btn" />
-          }
-          active={isLocalAudioEnabled}
-          onClick={toggleAudio}
-          key="toggleAudio"
-        />
+        hideOptions ? (
+          <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
+            <IconButton
+              active={isLocalAudioEnabled}
+              onClick={toggleAudio}
+              key="toggleAudio"
+              data-testid="audio_btn"
+              className="__cancel-drag-event"
+            >
+              {!isLocalAudioEnabled ? (
+                <MicOffIcon data-testid="audio_off_btn" />
+              ) : (
+                <MicOnIcon data-testid="audio_on_btn" />
+              )}
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <IconButtonWithOptions
+            options={formattedAudioInputList}
+            tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
+            icon={
+              !isLocalAudioEnabled ? (
+                <MicOffIcon data-testid="audio_off_btn" />
+              ) : (
+                <MicOnIcon data-testid="audio_on_btn" />
+              )
+            }
+            active={isLocalAudioEnabled}
+            onClick={toggleAudio}
+            key="toggleAudio"
+          />
+        )
       ) : null}
 
       {toggleVideo ? (
-        <IconButtonWithOptions
-          options={formattedVideoInputList}
-          tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
-          icon={
-            !isLocalVideoEnabled ? (
-              <VideoOffIcon data-testid="video_off_btn" />
-            ) : (
-              <VideoOnIcon data-testid="video_on_btn" />
-            )
-          }
-          key="toggleVideo"
-          active={isLocalVideoEnabled}
-          onClick={toggleVideo}
-        />
+        hideOptions ? (
+          <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
+            <IconButton
+              key="toggleVideo"
+              active={isLocalVideoEnabled}
+              onClick={toggleVideo}
+              data-testid="video_btn"
+              className="__cancel-drag-event"
+            >
+              {!isLocalVideoEnabled ? (
+                <VideoOffIcon data-testid="video_off_btn" />
+              ) : (
+                <VideoOnIcon data-testid="video_on_btn" />
+              )}
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <IconButtonWithOptions
+            options={formattedVideoInputList}
+            tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
+            icon={
+              !isLocalVideoEnabled ? (
+                <VideoOffIcon data-testid="video_off_btn" />
+              ) : (
+                <VideoOnIcon data-testid="video_on_btn" />
+              )
+            }
+            key="toggleVideo"
+            active={isLocalVideoEnabled}
+            onClick={toggleVideo}
+          />
+        )
       ) : null}
 
-      {localVideoTrack?.facingMode ? (
+      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview ? (
         <Tooltip title="Switch Camera" key="switchCamera">
           <IconButton
             onClick={async () => {

package/src/Prebuilt/components/AuthToken.jsx

@@ -22,7 +22,7 @@ import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
 const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
   const hmsActions = useHMSActions();
   const tokenEndpoint = useTokenEndpoint();
-  const { showPreview, roomCode } = useHMSPrebuiltContext();
+  const { showPreview, roomCode, userId } = useHMSPrebuiltContext();
   const location = useLocation();
   const matches = useMemo(
     () =>
@@ -46,7 +46,7 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
     const code = !userRole && (roomCode || urlRoomCode);
 
     const getTokenFn = code
-      ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code }, { endpoint: authTokenByRoomCodeEndpoint })
+      ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code, userId }, { endpoint: authTokenByRoomCodeEndpoint })
       : () => getToken(tokenEndpoint, uuid(), userRole, urlRoomId);
 
     getTokenFn()
@@ -66,6 +66,7 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
     authTokenByRoomCodeEndpoint,
     setAuthTokenInAppData,
     roomCode,
+    userId,
   ]);
 
   if (error.title) {

package/src/Prebuilt/components/Chat/ChatSelector.jsx

@@ -10,7 +10,7 @@ import {
 } from '@100mslive/react-sdk';
 import { CheckIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../../';
-import { ParticipantSearch } from '../Header/ParticipantList';
+import { ParticipantSearch } from '../Footer/ParticipantList';
 import { useFilteredRoles } from '../../common/hooks';
 
 const ChatDotIcon = () => {

package/src/Prebuilt/components/Connection/TileConnection.jsx

@@ -31,7 +31,6 @@ const Wrapper = styled('div', {
   backgroundColor: '$background_dim',
   borderRadius: '$1',
   maxWidth: '85%',
-  zIndex: 1,
   '& p,span': {
     p: '$2 $3',
   },

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -5,44 +5,36 @@ import {
   selectAvailableRoleNames,
   selectIsConnectedToRoom,
   selectLocalPeerID,
-  selectLocalPeerRoleName,
   useCustomEvent,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
+import { EmojiCard } from './Footer/EmojiCard';
+import { ToastManager } from './Toast/ToastManager';
 import { Dropdown } from '../../Dropdown';
-import { Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { styled } from '../../Theme';
+import { Box } from '../../Layout';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { useHLSViewerRole } from './AppData/useUISettings';
 import { useDropdownList } from './hooks/useDropdownList';
 import { useIsFeatureEnabled } from './hooks/useFeatures';
-import { EMOJI_REACTION_TYPE, FEATURE_LIST, HLS_TIMED_METADATA_DOC_URL } from '../common/constants';
+import { EMOJI_REACTION_TYPE, FEATURE_LIST } from '../common/constants';
 
 init({ data });
 
-// When changing emojis in the grid, keep in mind that the payload used in sendHLSTimedMetadata has a limit of 100 characters. Using bigger emoji Ids can cause the limit to be exceeded.
-const emojiReactionList = [
-  [{ emojiId: '+1' }, { emojiId: '-1' }, { emojiId: 'wave' }, { emojiId: 'clap' }, { emojiId: 'fire' }],
-  [{ emojiId: 'tada' }, { emojiId: 'heart_eyes' }, { emojiId: 'joy' }, { emojiId: 'open_mouth' }, { emojiId: 'sob' }],
-];
-
 export const EmojiReaction = () => {
   const [open, setOpen] = useState(false);
-  const hmsActions = useHMSActions();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION);
+  useDropdownList({ open: open, name: 'EmojiReaction' });
+  const hmsActions = useHMSActions();
   const roles = useHMSStore(selectAvailableRoleNames);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const localPeerId = useHMSStore(selectLocalPeerID);
   const hlsViewerRole = useHLSViewerRole();
   const { isStreamingOn } = useRecordingStreaming();
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION);
   const filteredRoles = useMemo(() => roles.filter(role => role !== hlsViewerRole), [roles, hlsViewerRole]);
-  useDropdownList({ open: open, name: 'EmojiReaction' });
 
   const onEmojiEvent = useCallback(data => {
     window.showFlyingEmoji(data?.emojiId, data?.senderId);
@@ -61,16 +53,21 @@ export const EmojiReaction = () => {
     };
     sendEvent(data, { roleNames: filteredRoles });
     if (isStreamingOn) {
-      await hmsActions.sendHLSTimedMetadata([
-        {
-          payload: JSON.stringify(data),
-          duration: 2,
-        },
-      ]);
+      try {
+        await hmsActions.sendHLSTimedMetadata([
+          {
+            payload: JSON.stringify(data),
+            duration: 2,
+          },
+        ]);
+      } catch (error) {
+        console.log(error);
+        ToastManager.addToast({ title: error.message });
+      }
     }
   };
 
-  if (!isConnected || localPeerRole === hlsViewerRole || !isFeatureEnabled) {
+  if (!isConnected || !isFeatureEnabled) {
     return null;
   }
   return (
@@ -79,63 +76,16 @@ export const EmojiReaction = () => {
         <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
           <IconButton>
             <Tooltip title="Emoji reaction">
-              <EmojiIcon />
+              <Box>
+                <EmojiIcon />
+              </Box>
             </Tooltip>
           </IconButton>
         </Dropdown.Trigger>
         <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
-          {emojiReactionList.map((emojiLine, index) => (
-            <Flex key={index} justify="between" css={{ mb: '$8' }}>
-              {emojiLine.map(emoji => (
-                <EmojiContainer key={emoji.emojiId} onClick={() => sendReaction(emoji.emojiId)}>
-                  <em-emoji id={emoji.emojiId} size="100%" set="apple"></em-emoji>
-                </EmojiContainer>
-              ))}
-            </Flex>
-          ))}
-          <div style={{ textAlign: 'center' }}>
-            <Text
-              variant="sm"
-              inline={true}
-              css={{
-                color: '$on_primary_medium',
-              }}
-            >
-              Reactions will be timed for Live Streaming viewers.{' '}
-            </Text>
-            <Text
-              variant="sm"
-              inline={true}
-              css={{
-                color: '$primary_bright',
-                fontWeight: '$semiBold',
-              }}
-            >
-              <a
-                href={HLS_TIMED_METADATA_DOC_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{ color: 'inherit', textDecoration: 'none' }}
-              >
-                Learn more.
-              </a>
-            </Text>
-          </div>
+          <EmojiCard sendReaction={sendReaction} />
         </Dropdown.Content>
       </Dropdown.Root>
     </Fragment>
   );
 };
-
-const EmojiContainer = styled('span', {
-  position: 'relative',
-  cursor: 'pointer',
-  width: '$16',
-  height: '$16',
-  p: '$4',
-  '&:hover': {
-    p: '7px',
-    bg: '$surface_brighter',
-    borderRadius: '$1',
-  },
-});

package/src/Prebuilt/components/EndSessionContent.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+import { useShowStreamingUI } from '../common/hooks';
+
+export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom, isModal = false }) => {
+  const showStreamingUI = useShowStreamingUI();
+  return (
+    <Box>
+      <Flex
+        css={{
+          color: '$alert_error_default',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />
+        <Text variant="lg" css={{ color: 'inherit', fontWeight: '$semiBold' }}>
+          End {showStreamingUI ? 'Stream' : 'Session'}
+        </Text>
+        {isModal ? null : (
+          <Box css={{ color: '$on_surface_high', ml: 'auto' }} onClick={() => setShowEndStreamAlert(false)}>
+            <CrossIcon />
+          </Box>
+        )}
+      </Flex>
+      <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
+        The {showStreamingUI ? 'stream' : 'session'} will end for everyone. You can't undo this action.
+      </Text>
+      <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
+        <Button
+          outlined
+          variant="standard"
+          css={{ w: '100%', '@md': { display: 'none' } }}
+          onClick={() => setShowEndStreamAlert(false)}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="danger"
+          css={{ w: '100%' }}
+          onClick={async () => {
+            await stopStream();
+            leaveRoom();
+            setShowEndStreamAlert(false);
+          }}
+          id="stopStream"
+          data-testid="stop_stream_btn"
+        >
+          End {showStreamingUI ? 'Stream' : 'Session'}
+        </Button>
+      </Flex>
+    </Box>
+  );
+};

package/src/Prebuilt/components/EqualProminence.jsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useMeasure, useMedia } from 'react-use';
+import {
+  getPeersWithTiles,
+  selectLocalPeer,
+  selectPeers,
+  selectRemotePeers,
+  selectTracksMap,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+import { InsetTile } from '../layouts/InsetView';
+import { useRoomLayout } from '../provider/roomLayoutProvider';
+import { Pagination } from './Pagination';
+import VideoTile from './VideoTile';
+import { useUISettings } from './AppData/useUISettings';
+import PeersSorter from '../common/PeersSorter';
+import { UI_SETTINGS } from '../common/constants';
+
+const aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
+
+export function EqualProminence() {
+  const layout = useRoomLayout();
+  const { enable_local_tile_inset: isInsetEnabled = true } =
+    //@ts-ignore
+    layout?.screens?.conferencing?.default?.elements?.video_tile_layout?.grid || {};
+  const peers = useHMSStore(isInsetEnabled ? selectRemotePeers : selectPeers);
+  const [sortedPeers, setSortedPeers] = useState(peers);
+  const localPeer = useHMSStore(selectLocalPeer);
+  const vanillaStore = useHMSVanillaStore();
+  const isMobile = useMedia(cssConfig.media.md);
+  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
+  maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
+  const [pagesWithTiles, setPagesWithTiles] = useState([]);
+  const [page, setPage] = useState(0);
+  const [ref, { width, height }] = useMeasure();
+  const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
+  const pageSize = pagesWithTiles[0]?.length;
+
+  useEffect(() => {
+    // currentPageIndex should not exceed pages length
+    if (page >= pagesWithTiles.length) {
+      setPage(0);
+    }
+  }, [pagesWithTiles.length, page]);
+
+  useEffect(() => {
+    if (width === 0 || height === 0) {
+      return;
+    }
+    const tracksMap = vanillaStore.getState(selectTracksMap);
+    const peersWithTiles = getPeersWithTiles(
+      sortedPeers.length === 0 ? [localPeer] : sortedPeers,
+      tracksMap,
+      () => false,
+    );
+    const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
+    let remaining = peersWithTiles.length;
+    let sliceStart = 0;
+    let pagesList = [];
+    // split into pages
+    for (let i = 0; i < noOfPages; i++) {
+      const count = Math.min(remaining, maxTileCount);
+      pagesList.push(peersWithTiles.slice(sliceStart, sliceStart + count));
+      remaining = remaining - count;
+      sliceStart += count;
+    }
+    // calculate dimesions for each page
+    for (const page of pagesList) {
+      const noOfTilesInPage = page.length;
+      let maxCols =
+        noOfTilesInPage > 2 && noOfTilesInPage < 9
+          ? Math.ceil(noOfTilesInPage / 2)
+          : Math.ceil(Math.sqrt(noOfTilesInPage));
+      if (isMobile) {
+        maxCols = noOfTilesInPage < 4 ? 1 : Math.min(maxCols, 2);
+      }
+      let maxRows = Math.ceil(noOfTilesInPage / maxCols);
+      let index = 0;
+      // convert the current page to a matrix(grid)
+      const matrix = new Array(maxRows).fill(null).map((_, i) => {
+        const numCols = Math.min(maxCols, noOfTilesInPage - i * maxCols);
+        let rowElements = [];
+        for (let j = 0; j < numCols; j++) {
+          if (index < page.length) {
+            rowElements.push(page[index++]);
+          }
+        }
+        return rowElements;
+      });
+
+      const maxHeight = height - (maxRows - 1) * 8;
+      const maxRowHeight = maxHeight / matrix.length;
+      const aspectRatios =
+        isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3)
+          ? aspectRatioConfig.mobile
+          : aspectRatioConfig.default;
+      // calculate height and width of each tile in a row
+      for (const row of matrix) {
+        let tileWidth = (width - (row.length - 1) * 8) / row.length;
+        let tileHeight = 0;
+        const calcHeights = aspectRatios.map(aR => tileWidth / aR);
+        for (const h of calcHeights) {
+          if (h < maxRowHeight) {
+            if (tileHeight < h) {
+              tileHeight = h;
+            }
+          }
+        }
+
+        // tileHeight is not calculated as it could be exceeding the max possible height
+        // find the max possible width instead
+        if (tileHeight === 0) {
+          tileHeight = maxRowHeight;
+          const calcWidths = aspectRatios.map(aR => tileHeight * aR);
+          tileWidth = 0;
+          for (const w of calcWidths) {
+            if (w < width) {
+              if (tileWidth < w) {
+                tileWidth = w;
+              }
+            }
+          }
+        }
+        for (let i = 0; i < row.length; i++) {
+          row[i].width = tileWidth;
+          row[i].height = tileHeight;
+        }
+      }
+    }
+    setPagesWithTiles(pagesList);
+  }, [width, height, maxTileCount, vanillaStore, sortedPeers, page, isMobile, localPeer]);
+
+  useEffect(() => {
+    if (page !== 0) {
+      return;
+    }
+    peersSorter.setPeersAndTilesPerPage({
+      peers,
+      tilesPerPage: pageSize || maxTileCount,
+    });
+    peersSorter.onUpdate(setSortedPeers);
+  }, [page, peersSorter, peers, pageSize, maxTileCount]);
+
+  return (
+    <Flex direction="column" css={{ flex: '1 1 0', h: '100%', position: 'relative', minWidth: 0 }}>
+      <Box
+        ref={ref}
+        css={{
+          flex: '1 1 0',
+          gap: '$4',
+          display: 'flex',
+          placeContent: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexFlow: 'row wrap',
+          minHeight: 0,
+        }}
+      >
+        {pagesWithTiles[page]?.map(tile => {
+          return (
+            <VideoTile
+              key={tile.track?.id || tile.peer?.id}
+              width={tile.width}
+              height={tile.height}
+              peerId={tile.peer?.id}
+              trackId={tile.track?.id}
+              rootCSS={{ padding: 0 }}
+              objectFit="contain"
+            />
+          );
+        })}
+      </Box>
+      {pagesWithTiles.length > 1 && <Pagination page={page} onPageChange={setPage} numPages={pagesWithTiles.length} />}
+      {isInsetEnabled && sortedPeers.length > 0 && <InsetTile />}
+    </Flex>
+  );
+}

package/src/Prebuilt/components/ErrorBoundary.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { logMessage } from 'zipyai';
 import { CopyIcon } from '@100mslive/react-icons';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
@@ -16,15 +15,10 @@ export class ErrorBoundary extends Component {
   componentDidCatch(error, errorInfo) {
     console.error(`react error boundary - ${error.message}`, error, errorInfo);
     // Catch errors in any components below and re-render with error message
-    this.setState(
-      {
-        error: error?.message,
-        errorInfo: errorInfo,
-      },
-      () => {
-        logMessage(`uiError - ${this.state.error} - ${JSON.stringify(this.state.errorInfo)}`);
-      },
-    );
+    this.setState({
+      error: error?.message,
+      errorInfo: errorInfo,
+    });
   }
 
   render() {

package/src/Prebuilt/components/Footer/EmojiCard.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Flex } from '../../../Layout';
+import { styled } from '../../../Theme';
+
+// When changing emojis in the grid, keep in mind that the payload used in sendHLSTimedMetadata has a limit of 100 characters. Using bigger emoji Ids can cause the limit to be exceeded.
+const emojiReactionList = [
+  [{ emojiId: '+1' }, { emojiId: '-1' }, { emojiId: 'wave' }, { emojiId: 'clap' }, { emojiId: 'fire' }],
+  [{ emojiId: 'tada' }, { emojiId: 'heart_eyes' }, { emojiId: 'joy' }, { emojiId: 'open_mouth' }, { emojiId: 'sob' }],
+];
+
+export const EmojiCard = ({ sendReaction }) => {
+  return emojiReactionList.map((emojiLine, index) => (
+    <Flex key={index} justify="between" css={{ mb: '$8' }}>
+      {emojiLine.map(emoji => (
+        <EmojiContainer key={emoji.emojiId} onClick={() => sendReaction(emoji.emojiId)}>
+          <em-emoji id={emoji.emojiId} size="100%" set="apple"></em-emoji>
+        </EmojiContainer>
+      ))}
+    </Flex>
+  ));
+};
+
+const EmojiContainer = styled('span', {
+  position: 'relative',
+  cursor: 'pointer',
+  width: '$16',
+  height: '$16',
+  p: '$4',
+  '&:hover': {
+    p: '7px',
+    bg: '$surface_brighter',
+    borderRadius: '$1',
+  },
+});