import { useTheme } from 'styled-components'; export const useGetColor = (color: string | undefined): string => { const theme = useTheme(); if (!color) return 'currentColor'; return theme[color] || color; }; export const RemoteUser = ({ ariaLabel, color, size }) => { const getColor = useGetColor(color); return ( ); }; export const RemoteGroup = ({ ariaLabel, color, size }) => { const getColor = useGetColor(color); return ( ); }; export const Bucket = ({ ariaLabel, color, size }) => { const getColor = useGetColor(color); return ( ); }; export const Buckets = ({ ariaLabel, color, size }) => { const getColor = useGetColor(color); return ( ); };