Я правильно кастомизировала тему компонента в chakra-ui?

Question

[AlexandraWeather]

я сильно запуталась с этой фигней в чакре
правильно я сделала? я совсем новичок

/* eslint-disable prettier/prettier */
import { avatarAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(avatarAnatomy.keys)

const baseStyle = definePartsStyle({
    container: { 
        background: "gray.200",
    },
    label: {
        fontFamily: `'Inter', sans-serif`,
        color: "base.night",
        fontWeight: "semibold",
    }
})

const sizes = {
    xs: definePartsStyle({
      container: {
        width: "24px",
        height: "24px",
        fontSize: "16px",
      },
      badge: {
        width: "6px",
        height: "6px",
        right: "1px",
        bottom: "1px",
        border: "1px solid",
      },
      label:{
        fontSize: "10px",
      },
    }),
    sm: definePartsStyle({
      container: {
        width: "32px",
        height: "32px",
        fontSize: "18px",
      },
      badge: {
        width: "8px",
        height: "8px",
        right: "3px",
        bottom: "3px",
        border: "1px solid",
      },
      label: {
        fontSize: "12px",
      },
    }),
    md: definePartsStyle({
      container: {
        width: "40px",
        height: "40px",
        fontSize: "20px",
      },
      badge: {
        width: "10px",
        height: "10px",
        right: "3px",
        bottom: "3px",
        border: "2px solid",
      },
      label: {
        fontSize: "14px",
      },
    }),
    lg: definePartsStyle({
      container: {
        width: "48px",
        height: "48px",
        fontSize: "26px",
      },
      badge: {
        width: "10px",
        height: "10px",
        right: "4px",
        bottom: "4px",
        border: "2px solid",
      },
      label: {
        fontSize: "16px",
      },
    }),
    xl: definePartsStyle({
      container: {
        width: "56px",
        height: "56px",
        fontSize: "28px",
      },
      badge: {
        width: "12px",
        height: "12px",
        right: "5px",
        bottom: "5px",
        border: "3px solid",
      },
      label: {
        fontSize: "18px",
      },
    }),
}
export const AvatarStyles = defineMultiStyleConfig({
    baseStyle,
    sizes,
})