@xsolla/xui-avatar 0.64.0 → 0.65.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/native/index.d.mts +36 -6
- package/native/index.d.ts +36 -6
- package/native/index.js +72 -197
- package/native/index.js.map +1 -1
- package/native/index.mjs +70 -195
- package/native/index.mjs.map +1 -1
- package/package.json +6 -4
- package/web/index.d.mts +36 -6
- package/web/index.d.ts +36 -6
- package/web/index.js +72 -197
- package/web/index.js.map +1 -1
- package/web/index.mjs +70 -195
- package/web/index.mjs.map +1 -1
package/web/index.mjs
CHANGED
|
@@ -452,170 +452,8 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
|
|
|
452
452
|
// src/Avatar.tsx
|
|
453
453
|
import { useDesignSystem } from "@xsolla/xui-core";
|
|
454
454
|
import { Badge } from "@xsolla/xui-badge";
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
import styled8 from "styled-components";
|
|
458
|
-
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
459
|
-
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
460
|
-
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
461
|
-
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
462
|
-
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
463
|
-
import { jsx as jsx62 } from "react/jsx-runtime";
|
|
464
|
-
import { jsx as jsx72 } from "react/jsx-runtime";
|
|
465
|
-
import { jsx as jsx82 } from "react/jsx-runtime";
|
|
466
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
467
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
468
|
-
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
469
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
470
|
-
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
471
|
-
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
472
|
-
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
473
|
-
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
474
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
475
|
-
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
476
|
-
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
477
|
-
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
478
|
-
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
479
|
-
import { jsx as jsx222 } from "react/jsx-runtime";
|
|
480
|
-
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
481
|
-
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
482
|
-
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
483
|
-
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
484
|
-
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
485
|
-
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
486
|
-
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
487
|
-
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
488
|
-
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
489
|
-
import { jsx as jsx322 } from "react/jsx-runtime";
|
|
490
|
-
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
491
|
-
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
492
|
-
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
493
|
-
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
494
|
-
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
495
|
-
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
496
|
-
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
497
|
-
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
498
|
-
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
499
|
-
import { jsx as jsx422 } from "react/jsx-runtime";
|
|
500
|
-
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
501
|
-
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
502
|
-
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
503
|
-
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
504
|
-
import { jsx as jsx47 } from "react/jsx-runtime";
|
|
505
|
-
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
506
|
-
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
507
|
-
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
508
|
-
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
509
|
-
import { jsx as jsx522 } from "react/jsx-runtime";
|
|
510
|
-
import { jsx as jsx53 } from "react/jsx-runtime";
|
|
511
|
-
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
512
|
-
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
513
|
-
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
514
|
-
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
515
|
-
import { jsx as jsx58 } from "react/jsx-runtime";
|
|
516
|
-
import { jsx as jsx59 } from "react/jsx-runtime";
|
|
517
|
-
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
518
|
-
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
519
|
-
import { jsx as jsx622 } from "react/jsx-runtime";
|
|
520
|
-
import { jsx as jsx63 } from "react/jsx-runtime";
|
|
521
|
-
import { jsx as jsx64 } from "react/jsx-runtime";
|
|
522
|
-
import { jsx as jsx65 } from "react/jsx-runtime";
|
|
523
|
-
import { jsx as jsx66 } from "react/jsx-runtime";
|
|
524
|
-
import { jsx as jsx67 } from "react/jsx-runtime";
|
|
525
|
-
import { jsx as jsx68 } from "react/jsx-runtime";
|
|
526
|
-
import { jsx as jsx69 } from "react/jsx-runtime";
|
|
527
|
-
import { jsx as jsx70 } from "react/jsx-runtime";
|
|
528
|
-
import { jsx as jsx71 } from "react/jsx-runtime";
|
|
529
|
-
import { jsx as jsx722 } from "react/jsx-runtime";
|
|
530
|
-
import { jsx as jsx73 } from "react/jsx-runtime";
|
|
531
|
-
import { jsx as jsx74 } from "react/jsx-runtime";
|
|
532
|
-
import { jsx as jsx75 } from "react/jsx-runtime";
|
|
533
|
-
import { jsx as jsx76 } from "react/jsx-runtime";
|
|
534
|
-
import { jsx as jsx77 } from "react/jsx-runtime";
|
|
535
|
-
import { jsx as jsx78 } from "react/jsx-runtime";
|
|
536
|
-
import { jsx as jsx79 } from "react/jsx-runtime";
|
|
537
|
-
import { jsx as jsx80 } from "react/jsx-runtime";
|
|
538
|
-
import { jsx as jsx81 } from "react/jsx-runtime";
|
|
539
|
-
import { jsx as jsx822 } from "react/jsx-runtime";
|
|
540
|
-
import { jsx as jsx83 } from "react/jsx-runtime";
|
|
541
|
-
import { jsx as jsx84 } from "react/jsx-runtime";
|
|
542
|
-
import { jsx as jsx85 } from "react/jsx-runtime";
|
|
543
|
-
import { jsx as jsx86 } from "react/jsx-runtime";
|
|
544
|
-
import { jsx as jsx87 } from "react/jsx-runtime";
|
|
545
|
-
import { jsx as jsx88 } from "react/jsx-runtime";
|
|
546
|
-
import { jsx as jsx89 } from "react/jsx-runtime";
|
|
547
|
-
import { jsx as jsx90 } from "react/jsx-runtime";
|
|
548
|
-
import { jsx as jsx91 } from "react/jsx-runtime";
|
|
549
|
-
import { jsx as jsx92 } from "react/jsx-runtime";
|
|
550
|
-
import { jsx as jsx93 } from "react/jsx-runtime";
|
|
551
|
-
import { jsx as jsx94 } from "react/jsx-runtime";
|
|
552
|
-
import { jsx as jsx95 } from "react/jsx-runtime";
|
|
553
|
-
import { jsx as jsx96 } from "react/jsx-runtime";
|
|
554
|
-
import { jsx as jsx97 } from "react/jsx-runtime";
|
|
555
|
-
import { jsx as jsx98 } from "react/jsx-runtime";
|
|
556
|
-
import { jsx as jsx99 } from "react/jsx-runtime";
|
|
557
|
-
import { jsx as jsx100 } from "react/jsx-runtime";
|
|
558
|
-
import { jsx as jsx101 } from "react/jsx-runtime";
|
|
559
|
-
import { jsx as jsx102 } from "react/jsx-runtime";
|
|
560
|
-
import { jsx as jsx103 } from "react/jsx-runtime";
|
|
561
|
-
import { jsx as jsx104 } from "react/jsx-runtime";
|
|
562
|
-
import { jsx as jsx105 } from "react/jsx-runtime";
|
|
563
|
-
import { jsx as jsx106 } from "react/jsx-runtime";
|
|
564
|
-
import { jsx as jsx107 } from "react/jsx-runtime";
|
|
565
|
-
import { jsx as jsx108 } from "react/jsx-runtime";
|
|
566
|
-
import { jsx as jsx109 } from "react/jsx-runtime";
|
|
567
|
-
import { jsx as jsx110 } from "react/jsx-runtime";
|
|
568
|
-
import { jsx as jsx111 } from "react/jsx-runtime";
|
|
569
|
-
import { jsx as jsx112 } from "react/jsx-runtime";
|
|
570
|
-
import { jsx as jsx113 } from "react/jsx-runtime";
|
|
571
|
-
import { jsx as jsx114 } from "react/jsx-runtime";
|
|
572
|
-
var StyledIcon2 = styled8.div`
|
|
573
|
-
display: inline-flex;
|
|
574
|
-
align-items: center;
|
|
575
|
-
justify-content: center;
|
|
576
|
-
width: ${(props) => props.$size}px;
|
|
577
|
-
height: ${(props) => props.$size}px;
|
|
578
|
-
color: ${(props) => props.$color};
|
|
579
|
-
|
|
580
|
-
svg {
|
|
581
|
-
width: 100%;
|
|
582
|
-
height: 100%;
|
|
583
|
-
}
|
|
584
|
-
`;
|
|
585
|
-
var BaseIcon = ({
|
|
586
|
-
variant = "line",
|
|
587
|
-
size = 24,
|
|
588
|
-
color = "currentColor",
|
|
589
|
-
solidContent: solidContent114,
|
|
590
|
-
lineContent: lineContent114,
|
|
591
|
-
className,
|
|
592
|
-
style,
|
|
593
|
-
"data-testid": testId,
|
|
594
|
-
"aria-label": ariaLabel,
|
|
595
|
-
"aria-hidden": ariaHidden
|
|
596
|
-
}) => {
|
|
597
|
-
const svgContent = variant === "line" ? lineContent114 : solidContent114;
|
|
598
|
-
return /* @__PURE__ */ jsx8(
|
|
599
|
-
StyledIcon2,
|
|
600
|
-
{
|
|
601
|
-
$size: size,
|
|
602
|
-
$color: color,
|
|
603
|
-
className,
|
|
604
|
-
style,
|
|
605
|
-
"data-testid": testId,
|
|
606
|
-
role: ariaLabel ? "img" : void 0,
|
|
607
|
-
"aria-label": ariaLabel,
|
|
608
|
-
"aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
|
|
609
|
-
dangerouslySetInnerHTML: { __html: svgContent }
|
|
610
|
-
}
|
|
611
|
-
);
|
|
612
|
-
};
|
|
613
|
-
var solidContent111 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_user--solid"><g id="Union"><path d="M12 14.5923C16.6636 14.5923 20.6467 17.4955 22.2471 21.5923H1.75293C3.35333 17.4955 7.33643 14.5923 12 14.5923Z" style="fill: currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.40771C14.7614 2.40771 17 4.64629 17 7.40771C17 10.1691 14.7614 12.4077 12 12.4077C9.23869 12.4076 7 10.1691 7 7.40771C7 4.64637 9.23869 2.40785 12 2.40771Z" style="fill: currentColor"/></g></g></svg>`;
|
|
614
|
-
var lineContent111 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_user--line"><g id="Union"><path d="M12.0002 14.8154C16.0051 14.8154 19.5091 16.9562 21.4329 20.1553L19.718 21.1846C18.1441 18.567 15.277 16.8154 12.0002 16.8154C8.72329 16.8154 5.8554 18.5668 4.28149 21.1846L2.56665 20.1553C4.49036 16.956 7.99522 14.8154 12.0002 14.8154Z" style="fill: currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.81543C14.7617 2.81543 17.0002 5.05401 17.0002 7.81543C17.0002 10.5769 14.7617 12.8154 12.0002 12.8154C9.23882 12.8154 7.00024 10.5769 7.00024 7.81543C7.00024 5.05401 9.23882 2.81543 12.0002 2.81543ZM12.0002 4.81543C10.3434 4.81543 9.00024 6.15858 9.00024 7.81543C9.00024 9.47228 10.3434 10.8154 12.0002 10.8154C13.6571 10.8154 15.0002 9.47228 15.0002 7.81543C15.0002 6.15858 13.6571 4.81543 12.0002 4.81543Z" style="fill: currentColor"/></g></g></svg>`;
|
|
615
|
-
var User = (props) => /* @__PURE__ */ jsx112(BaseIcon, { ...props, solidContent: solidContent111, lineContent: lineContent111 });
|
|
616
|
-
|
|
617
|
-
// src/Avatar.tsx
|
|
618
|
-
import { jsx as jsx115, jsxs } from "react/jsx-runtime";
|
|
455
|
+
import { User } from "@xsolla/xui-icons-base";
|
|
456
|
+
import { jsx as jsx8, jsxs } from "react/jsx-runtime";
|
|
619
457
|
var Avatar = ({
|
|
620
458
|
src,
|
|
621
459
|
icon,
|
|
@@ -671,7 +509,7 @@ var Avatar = ({
|
|
|
671
509
|
tabIndex: 0
|
|
672
510
|
},
|
|
673
511
|
children: [
|
|
674
|
-
/* @__PURE__ */
|
|
512
|
+
/* @__PURE__ */ jsx8(
|
|
675
513
|
Box,
|
|
676
514
|
{
|
|
677
515
|
width: sizeStyles.size,
|
|
@@ -689,7 +527,7 @@ var Avatar = ({
|
|
|
689
527
|
overflow: "hidden",
|
|
690
528
|
borderWidth: stroke ? 1 : 0,
|
|
691
529
|
borderColor: theme.colors.background.primary,
|
|
692
|
-
children: src ? /* @__PURE__ */
|
|
530
|
+
children: src ? /* @__PURE__ */ jsx8(
|
|
693
531
|
Box,
|
|
694
532
|
{
|
|
695
533
|
as: "img",
|
|
@@ -702,7 +540,7 @@ var Avatar = ({
|
|
|
702
540
|
height: sizeStyles.size,
|
|
703
541
|
borderRadius
|
|
704
542
|
}
|
|
705
|
-
) : icon ? /* @__PURE__ */
|
|
543
|
+
) : icon ? /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: theme.colors.content.primary, children: icon }) : text ? /* @__PURE__ */ jsx8(
|
|
706
544
|
Text,
|
|
707
545
|
{
|
|
708
546
|
fontSize: sizeStyles.fontSize,
|
|
@@ -710,7 +548,7 @@ var Avatar = ({
|
|
|
710
548
|
fontWeight: "600",
|
|
711
549
|
children: text
|
|
712
550
|
}
|
|
713
|
-
) : /* @__PURE__ */
|
|
551
|
+
) : /* @__PURE__ */ jsx8(
|
|
714
552
|
User,
|
|
715
553
|
{
|
|
716
554
|
size: sizeStyles.iconSize,
|
|
@@ -719,13 +557,13 @@ var Avatar = ({
|
|
|
719
557
|
)
|
|
720
558
|
}
|
|
721
559
|
),
|
|
722
|
-
badge && /* @__PURE__ */
|
|
560
|
+
badge && /* @__PURE__ */ jsx8(
|
|
723
561
|
Box,
|
|
724
562
|
{
|
|
725
563
|
position: "absolute",
|
|
726
564
|
right: badgeOffset.right,
|
|
727
565
|
top: badgeOffset.top,
|
|
728
|
-
children: /* @__PURE__ */
|
|
566
|
+
children: /* @__PURE__ */ jsx8(
|
|
729
567
|
Badge,
|
|
730
568
|
{
|
|
731
569
|
size: badgeSize,
|
|
@@ -743,24 +581,31 @@ var Avatar = ({
|
|
|
743
581
|
};
|
|
744
582
|
|
|
745
583
|
// src/AvatarGroup.tsx
|
|
746
|
-
import React4 from "react";
|
|
747
584
|
import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
|
|
748
|
-
import {
|
|
585
|
+
import { Tooltip } from "@xsolla/xui-tooltip";
|
|
586
|
+
import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
587
|
+
var sizeMap = {
|
|
588
|
+
sm: "s",
|
|
589
|
+
md: "m",
|
|
590
|
+
lg: "l",
|
|
591
|
+
xl: "xl"
|
|
592
|
+
};
|
|
749
593
|
var AvatarGroup = ({
|
|
750
|
-
|
|
751
|
-
size = "
|
|
752
|
-
|
|
594
|
+
list,
|
|
595
|
+
size = "md",
|
|
596
|
+
maxVisible = 6,
|
|
753
597
|
stroke = true,
|
|
598
|
+
avatarBackgroundMode = "mixed",
|
|
754
599
|
"aria-label": ariaLabel
|
|
755
600
|
}) => {
|
|
756
601
|
const { theme } = useDesignSystem2();
|
|
757
|
-
const
|
|
758
|
-
const totalCount =
|
|
759
|
-
const visibleCount = Math.min(totalCount, Math.max(0,
|
|
760
|
-
const
|
|
602
|
+
const internalSize = sizeMap[size];
|
|
603
|
+
const totalCount = list.length;
|
|
604
|
+
const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));
|
|
605
|
+
const visibleListItems = list.slice(0, visibleCount);
|
|
761
606
|
const remainingCount = totalCount - visibleCount;
|
|
762
607
|
const overlap = -4;
|
|
763
|
-
const
|
|
608
|
+
const mixedBackgrounds = [
|
|
764
609
|
theme.colors.background.alert.secondary,
|
|
765
610
|
theme.colors.background.warning.secondary,
|
|
766
611
|
theme.colors.background.brandExtra.secondary,
|
|
@@ -769,7 +614,30 @@ var AvatarGroup = ({
|
|
|
769
614
|
theme.colors.background.success.secondary,
|
|
770
615
|
theme.colors.background.success.primary
|
|
771
616
|
];
|
|
772
|
-
const
|
|
617
|
+
const presetColors = {
|
|
618
|
+
brand: theme.colors.background.brand.secondary,
|
|
619
|
+
brandExtra: theme.colors.background.brandExtra.secondary,
|
|
620
|
+
success: theme.colors.background.success.secondary,
|
|
621
|
+
warning: theme.colors.background.warning.secondary,
|
|
622
|
+
alert: theme.colors.background.alert.secondary,
|
|
623
|
+
neutral: theme.colors.background.neutral.secondary
|
|
624
|
+
};
|
|
625
|
+
const getBackgroundColor = (index) => {
|
|
626
|
+
if (typeof avatarBackgroundMode === "function") {
|
|
627
|
+
return avatarBackgroundMode(theme);
|
|
628
|
+
}
|
|
629
|
+
if (avatarBackgroundMode === "mixed") {
|
|
630
|
+
return mixedBackgrounds[index % mixedBackgrounds.length];
|
|
631
|
+
}
|
|
632
|
+
return presetColors[avatarBackgroundMode] || theme.colors.background.secondary;
|
|
633
|
+
};
|
|
634
|
+
const defaultAriaLabel = totalCount === 1 ? "1 user" : totalCount === visibleCount ? `${totalCount} users` : `${visibleCount} of ${totalCount} users`;
|
|
635
|
+
const renderAvatarWithTooltip = (avatar, tooltip, key) => {
|
|
636
|
+
if (tooltip) {
|
|
637
|
+
return /* @__PURE__ */ jsx9(Tooltip, { content: tooltip, placement: "top", children: avatar }, key);
|
|
638
|
+
}
|
|
639
|
+
return avatar;
|
|
640
|
+
};
|
|
773
641
|
return /* @__PURE__ */ jsxs2(
|
|
774
642
|
Box,
|
|
775
643
|
{
|
|
@@ -778,30 +646,37 @@ var AvatarGroup = ({
|
|
|
778
646
|
role: "group",
|
|
779
647
|
"aria-label": ariaLabel || defaultAriaLabel,
|
|
780
648
|
children: [
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
const
|
|
784
|
-
const
|
|
785
|
-
const
|
|
786
|
-
return /* @__PURE__ */ jsx116(
|
|
649
|
+
visibleListItems.map((item, index) => {
|
|
650
|
+
const shouldApplyBackground = !item.src;
|
|
651
|
+
const backgroundColor = shouldApplyBackground ? getBackgroundColor(index) : void 0;
|
|
652
|
+
const shouldEnableHover = !!item.src && !!item.onClick;
|
|
653
|
+
const avatar = /* @__PURE__ */ jsx9(
|
|
787
654
|
Box,
|
|
788
655
|
{
|
|
789
656
|
marginLeft: index === 0 ? 0 : overlap,
|
|
790
657
|
zIndex: totalCount - index,
|
|
791
|
-
children:
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
658
|
+
children: /* @__PURE__ */ jsx9(
|
|
659
|
+
Avatar,
|
|
660
|
+
{
|
|
661
|
+
src: item.src,
|
|
662
|
+
text: item.initials,
|
|
663
|
+
size: internalSize,
|
|
664
|
+
stroke,
|
|
665
|
+
backgroundColor,
|
|
666
|
+
disableHover: !shouldEnableHover,
|
|
667
|
+
onClick: item.onClick,
|
|
668
|
+
...item.tooltip ? { "aria-label": item.tooltip } : {}
|
|
669
|
+
}
|
|
670
|
+
)
|
|
797
671
|
},
|
|
798
672
|
index
|
|
799
673
|
);
|
|
674
|
+
return renderAvatarWithTooltip(avatar, item.tooltip, index);
|
|
800
675
|
}),
|
|
801
|
-
remainingCount > 0 && /* @__PURE__ */
|
|
676
|
+
remainingCount > 0 && /* @__PURE__ */ jsx9(Box, { marginLeft: overlap, zIndex: 0, children: /* @__PURE__ */ jsx9(
|
|
802
677
|
Avatar,
|
|
803
678
|
{
|
|
804
|
-
size,
|
|
679
|
+
size: internalSize,
|
|
805
680
|
text: `+${remainingCount}`,
|
|
806
681
|
stroke,
|
|
807
682
|
backgroundColor: theme.colors.background.secondary,
|