feat(avatar): add more size option

[kiaking]

Add more size option to <SAvatar>.

• jumbo - 48px big. Adding this to be more consistent with <SButton> sizing.
• fill - Custom size that fills the parent container. When we want avatar bigger than 48px, use this.

One issue with fill option is that it's hard to set font-size for name initial when the user don't have avatar image.

@brc-dd
Do you know any tricks to like set font size dynamically based on parent container? If not, I think we can stick to font-size: 20px I've set. We should only use fill when we need big avatar and that's quite rare case so 👀

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	4bf8c62
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/65d43f5d95d29a00089b4e44
😎 Deploy Preview	https://deploy-preview-475--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brc-dd]

container queries 😅

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	4bf8c62
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/65d43f5dceb2620008b43fc3
😎 Deploy Preview	https://deploy-preview-475--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kiaking]

Uhhhh can we use that now? 😳

[brc-dd]

Yeah similar support to :has()

Or just set font-size on .SAvatar and use em on .initial

[kiaking]

OK tested several things but yeah it's too complicated... I guess we can go with fixed 24px. Because the font shouldn't be too big, and not too small and so hard to maintain 😅