text: 
  export const avatarStylesheet = (theme) => ({
  
    avatar: {
      width: 40,
      height: 40,
      textTransform: "uppercase",
    },
  
    length0: {
      fontSize: 20.
    },
  
    length1: {
      fontSize: 20,
    },
  
    length2: {
      fontSize: 18,
    },
  
    length3: {
      fontSize: 14,
    },
  
    color0: {
      backgroundColor: theme.colors.secondary.pink,
    },
  
    color1: {
      backgroundColor: theme.colors.secondary.lightPurple,
    },
  
    color2: {
      backgroundColor: theme.colors.secondary.darkPurple,
    },
  
    color3: {
      backgroundColor: theme.colors.secondary.lightBlue,
    },
  
    color4: {
      backgroundColor: theme.colors.secondary.cyan,
    },
  
    color5: {
      backgroundColor: theme.colors.secondary.teal,
    },
  
    color6: {
      backgroundColor: theme.colors.secondary.darkGreen,
    },
  
    color7: {
      backgroundColor: theme.colors.secondary.lightGreen,
    },
  
    color8: {
      backgroundColor: theme.colors.secondary.lime,
    },
  
    color9: {
      backgroundColor: theme.colors.secondary.yellow,
    },
  
  });
  