@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/native/index.mjs
CHANGED
|
@@ -484,170 +484,8 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
|
|
|
484
484
|
// src/Avatar.tsx
|
|
485
485
|
import { useDesignSystem } from "@xsolla/xui-core";
|
|
486
486
|
import { Badge } from "@xsolla/xui-badge";
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
import styled from "styled-components";
|
|
490
|
-
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
491
|
-
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
492
|
-
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
493
|
-
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
494
|
-
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
495
|
-
import { jsx as jsx62 } from "react/jsx-runtime";
|
|
496
|
-
import { jsx as jsx72 } from "react/jsx-runtime";
|
|
497
|
-
import { jsx as jsx82 } from "react/jsx-runtime";
|
|
498
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
499
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
500
|
-
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
501
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
502
|
-
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
503
|
-
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
504
|
-
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
505
|
-
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
506
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
507
|
-
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
508
|
-
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
509
|
-
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
510
|
-
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
511
|
-
import { jsx as jsx222 } from "react/jsx-runtime";
|
|
512
|
-
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
513
|
-
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
514
|
-
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
515
|
-
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
516
|
-
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
517
|
-
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
518
|
-
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
519
|
-
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
520
|
-
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
521
|
-
import { jsx as jsx322 } from "react/jsx-runtime";
|
|
522
|
-
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
523
|
-
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
524
|
-
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
525
|
-
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
526
|
-
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
527
|
-
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
528
|
-
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
529
|
-
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
530
|
-
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
531
|
-
import { jsx as jsx422 } from "react/jsx-runtime";
|
|
532
|
-
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
533
|
-
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
534
|
-
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
535
|
-
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
536
|
-
import { jsx as jsx47 } from "react/jsx-runtime";
|
|
537
|
-
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
538
|
-
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
539
|
-
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
540
|
-
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
541
|
-
import { jsx as jsx522 } from "react/jsx-runtime";
|
|
542
|
-
import { jsx as jsx53 } from "react/jsx-runtime";
|
|
543
|
-
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
544
|
-
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
545
|
-
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
546
|
-
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
547
|
-
import { jsx as jsx58 } from "react/jsx-runtime";
|
|
548
|
-
import { jsx as jsx59 } from "react/jsx-runtime";
|
|
549
|
-
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
550
|
-
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
551
|
-
import { jsx as jsx622 } from "react/jsx-runtime";
|
|
552
|
-
import { jsx as jsx63 } from "react/jsx-runtime";
|
|
553
|
-
import { jsx as jsx64 } from "react/jsx-runtime";
|
|
554
|
-
import { jsx as jsx65 } from "react/jsx-runtime";
|
|
555
|
-
import { jsx as jsx66 } from "react/jsx-runtime";
|
|
556
|
-
import { jsx as jsx67 } from "react/jsx-runtime";
|
|
557
|
-
import { jsx as jsx68 } from "react/jsx-runtime";
|
|
558
|
-
import { jsx as jsx69 } from "react/jsx-runtime";
|
|
559
|
-
import { jsx as jsx70 } from "react/jsx-runtime";
|
|
560
|
-
import { jsx as jsx71 } from "react/jsx-runtime";
|
|
561
|
-
import { jsx as jsx722 } from "react/jsx-runtime";
|
|
562
|
-
import { jsx as jsx73 } from "react/jsx-runtime";
|
|
563
|
-
import { jsx as jsx74 } from "react/jsx-runtime";
|
|
564
|
-
import { jsx as jsx75 } from "react/jsx-runtime";
|
|
565
|
-
import { jsx as jsx76 } from "react/jsx-runtime";
|
|
566
|
-
import { jsx as jsx77 } from "react/jsx-runtime";
|
|
567
|
-
import { jsx as jsx78 } from "react/jsx-runtime";
|
|
568
|
-
import { jsx as jsx79 } from "react/jsx-runtime";
|
|
569
|
-
import { jsx as jsx80 } from "react/jsx-runtime";
|
|
570
|
-
import { jsx as jsx81 } from "react/jsx-runtime";
|
|
571
|
-
import { jsx as jsx822 } from "react/jsx-runtime";
|
|
572
|
-
import { jsx as jsx83 } from "react/jsx-runtime";
|
|
573
|
-
import { jsx as jsx84 } from "react/jsx-runtime";
|
|
574
|
-
import { jsx as jsx85 } from "react/jsx-runtime";
|
|
575
|
-
import { jsx as jsx86 } from "react/jsx-runtime";
|
|
576
|
-
import { jsx as jsx87 } from "react/jsx-runtime";
|
|
577
|
-
import { jsx as jsx88 } from "react/jsx-runtime";
|
|
578
|
-
import { jsx as jsx89 } from "react/jsx-runtime";
|
|
579
|
-
import { jsx as jsx90 } from "react/jsx-runtime";
|
|
580
|
-
import { jsx as jsx91 } from "react/jsx-runtime";
|
|
581
|
-
import { jsx as jsx92 } from "react/jsx-runtime";
|
|
582
|
-
import { jsx as jsx93 } from "react/jsx-runtime";
|
|
583
|
-
import { jsx as jsx94 } from "react/jsx-runtime";
|
|
584
|
-
import { jsx as jsx95 } from "react/jsx-runtime";
|
|
585
|
-
import { jsx as jsx96 } from "react/jsx-runtime";
|
|
586
|
-
import { jsx as jsx97 } from "react/jsx-runtime";
|
|
587
|
-
import { jsx as jsx98 } from "react/jsx-runtime";
|
|
588
|
-
import { jsx as jsx99 } from "react/jsx-runtime";
|
|
589
|
-
import { jsx as jsx100 } from "react/jsx-runtime";
|
|
590
|
-
import { jsx as jsx101 } from "react/jsx-runtime";
|
|
591
|
-
import { jsx as jsx102 } from "react/jsx-runtime";
|
|
592
|
-
import { jsx as jsx103 } from "react/jsx-runtime";
|
|
593
|
-
import { jsx as jsx104 } from "react/jsx-runtime";
|
|
594
|
-
import { jsx as jsx105 } from "react/jsx-runtime";
|
|
595
|
-
import { jsx as jsx106 } from "react/jsx-runtime";
|
|
596
|
-
import { jsx as jsx107 } from "react/jsx-runtime";
|
|
597
|
-
import { jsx as jsx108 } from "react/jsx-runtime";
|
|
598
|
-
import { jsx as jsx109 } from "react/jsx-runtime";
|
|
599
|
-
import { jsx as jsx110 } from "react/jsx-runtime";
|
|
600
|
-
import { jsx as jsx111 } from "react/jsx-runtime";
|
|
601
|
-
import { jsx as jsx112 } from "react/jsx-runtime";
|
|
602
|
-
import { jsx as jsx113 } from "react/jsx-runtime";
|
|
603
|
-
import { jsx as jsx114 } from "react/jsx-runtime";
|
|
604
|
-
var StyledIcon = styled.div`
|
|
605
|
-
display: inline-flex;
|
|
606
|
-
align-items: center;
|
|
607
|
-
justify-content: center;
|
|
608
|
-
width: ${(props) => props.$size}px;
|
|
609
|
-
height: ${(props) => props.$size}px;
|
|
610
|
-
color: ${(props) => props.$color};
|
|
611
|
-
|
|
612
|
-
svg {
|
|
613
|
-
width: 100%;
|
|
614
|
-
height: 100%;
|
|
615
|
-
}
|
|
616
|
-
`;
|
|
617
|
-
var BaseIcon = ({
|
|
618
|
-
variant = "line",
|
|
619
|
-
size = 24,
|
|
620
|
-
color = "currentColor",
|
|
621
|
-
solidContent: solidContent114,
|
|
622
|
-
lineContent: lineContent114,
|
|
623
|
-
className,
|
|
624
|
-
style,
|
|
625
|
-
"data-testid": testId,
|
|
626
|
-
"aria-label": ariaLabel,
|
|
627
|
-
"aria-hidden": ariaHidden
|
|
628
|
-
}) => {
|
|
629
|
-
const svgContent = variant === "line" ? lineContent114 : solidContent114;
|
|
630
|
-
return /* @__PURE__ */ jsx8(
|
|
631
|
-
StyledIcon,
|
|
632
|
-
{
|
|
633
|
-
$size: size,
|
|
634
|
-
$color: color,
|
|
635
|
-
className,
|
|
636
|
-
style,
|
|
637
|
-
"data-testid": testId,
|
|
638
|
-
role: ariaLabel ? "img" : void 0,
|
|
639
|
-
"aria-label": ariaLabel,
|
|
640
|
-
"aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
|
|
641
|
-
dangerouslySetInnerHTML: { __html: svgContent }
|
|
642
|
-
}
|
|
643
|
-
);
|
|
644
|
-
};
|
|
645
|
-
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>`;
|
|
646
|
-
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>`;
|
|
647
|
-
var User = (props) => /* @__PURE__ */ jsx112(BaseIcon, { ...props, solidContent: solidContent111, lineContent: lineContent111 });
|
|
648
|
-
|
|
649
|
-
// src/Avatar.tsx
|
|
650
|
-
import { jsx as jsx115, jsxs } from "react/jsx-runtime";
|
|
487
|
+
import { User } from "@xsolla/xui-icons-base";
|
|
488
|
+
import { jsx as jsx8, jsxs } from "react/jsx-runtime";
|
|
651
489
|
var Avatar = ({
|
|
652
490
|
src,
|
|
653
491
|
icon,
|
|
@@ -703,7 +541,7 @@ var Avatar = ({
|
|
|
703
541
|
tabIndex: 0
|
|
704
542
|
},
|
|
705
543
|
children: [
|
|
706
|
-
/* @__PURE__ */
|
|
544
|
+
/* @__PURE__ */ jsx8(
|
|
707
545
|
Box,
|
|
708
546
|
{
|
|
709
547
|
width: sizeStyles.size,
|
|
@@ -721,7 +559,7 @@ var Avatar = ({
|
|
|
721
559
|
overflow: "hidden",
|
|
722
560
|
borderWidth: stroke ? 1 : 0,
|
|
723
561
|
borderColor: theme.colors.background.primary,
|
|
724
|
-
children: src ? /* @__PURE__ */
|
|
562
|
+
children: src ? /* @__PURE__ */ jsx8(
|
|
725
563
|
Box,
|
|
726
564
|
{
|
|
727
565
|
as: "img",
|
|
@@ -734,7 +572,7 @@ var Avatar = ({
|
|
|
734
572
|
height: sizeStyles.size,
|
|
735
573
|
borderRadius
|
|
736
574
|
}
|
|
737
|
-
) : icon ? /* @__PURE__ */
|
|
575
|
+
) : icon ? /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: theme.colors.content.primary, children: icon }) : text ? /* @__PURE__ */ jsx8(
|
|
738
576
|
Text,
|
|
739
577
|
{
|
|
740
578
|
fontSize: sizeStyles.fontSize,
|
|
@@ -742,7 +580,7 @@ var Avatar = ({
|
|
|
742
580
|
fontWeight: "600",
|
|
743
581
|
children: text
|
|
744
582
|
}
|
|
745
|
-
) : /* @__PURE__ */
|
|
583
|
+
) : /* @__PURE__ */ jsx8(
|
|
746
584
|
User,
|
|
747
585
|
{
|
|
748
586
|
size: sizeStyles.iconSize,
|
|
@@ -751,13 +589,13 @@ var Avatar = ({
|
|
|
751
589
|
)
|
|
752
590
|
}
|
|
753
591
|
),
|
|
754
|
-
badge && /* @__PURE__ */
|
|
592
|
+
badge && /* @__PURE__ */ jsx8(
|
|
755
593
|
Box,
|
|
756
594
|
{
|
|
757
595
|
position: "absolute",
|
|
758
596
|
right: badgeOffset.right,
|
|
759
597
|
top: badgeOffset.top,
|
|
760
|
-
children: /* @__PURE__ */
|
|
598
|
+
children: /* @__PURE__ */ jsx8(
|
|
761
599
|
Badge,
|
|
762
600
|
{
|
|
763
601
|
size: badgeSize,
|
|
@@ -775,24 +613,31 @@ var Avatar = ({
|
|
|
775
613
|
};
|
|
776
614
|
|
|
777
615
|
// src/AvatarGroup.tsx
|
|
778
|
-
import React4 from "react";
|
|
779
616
|
import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
|
|
780
|
-
import {
|
|
617
|
+
import { Tooltip } from "@xsolla/xui-tooltip";
|
|
618
|
+
import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
619
|
+
var sizeMap = {
|
|
620
|
+
sm: "s",
|
|
621
|
+
md: "m",
|
|
622
|
+
lg: "l",
|
|
623
|
+
xl: "xl"
|
|
624
|
+
};
|
|
781
625
|
var AvatarGroup = ({
|
|
782
|
-
|
|
783
|
-
size = "
|
|
784
|
-
|
|
626
|
+
list,
|
|
627
|
+
size = "md",
|
|
628
|
+
maxVisible = 6,
|
|
785
629
|
stroke = true,
|
|
630
|
+
avatarBackgroundMode = "mixed",
|
|
786
631
|
"aria-label": ariaLabel
|
|
787
632
|
}) => {
|
|
788
633
|
const { theme } = useDesignSystem2();
|
|
789
|
-
const
|
|
790
|
-
const totalCount =
|
|
791
|
-
const visibleCount = Math.min(totalCount, Math.max(0,
|
|
792
|
-
const
|
|
634
|
+
const internalSize = sizeMap[size];
|
|
635
|
+
const totalCount = list.length;
|
|
636
|
+
const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));
|
|
637
|
+
const visibleListItems = list.slice(0, visibleCount);
|
|
793
638
|
const remainingCount = totalCount - visibleCount;
|
|
794
639
|
const overlap = -4;
|
|
795
|
-
const
|
|
640
|
+
const mixedBackgrounds = [
|
|
796
641
|
theme.colors.background.alert.secondary,
|
|
797
642
|
theme.colors.background.warning.secondary,
|
|
798
643
|
theme.colors.background.brandExtra.secondary,
|
|
@@ -801,7 +646,30 @@ var AvatarGroup = ({
|
|
|
801
646
|
theme.colors.background.success.secondary,
|
|
802
647
|
theme.colors.background.success.primary
|
|
803
648
|
];
|
|
804
|
-
const
|
|
649
|
+
const presetColors = {
|
|
650
|
+
brand: theme.colors.background.brand.secondary,
|
|
651
|
+
brandExtra: theme.colors.background.brandExtra.secondary,
|
|
652
|
+
success: theme.colors.background.success.secondary,
|
|
653
|
+
warning: theme.colors.background.warning.secondary,
|
|
654
|
+
alert: theme.colors.background.alert.secondary,
|
|
655
|
+
neutral: theme.colors.background.neutral.secondary
|
|
656
|
+
};
|
|
657
|
+
const getBackgroundColor = (index) => {
|
|
658
|
+
if (typeof avatarBackgroundMode === "function") {
|
|
659
|
+
return avatarBackgroundMode(theme);
|
|
660
|
+
}
|
|
661
|
+
if (avatarBackgroundMode === "mixed") {
|
|
662
|
+
return mixedBackgrounds[index % mixedBackgrounds.length];
|
|
663
|
+
}
|
|
664
|
+
return presetColors[avatarBackgroundMode] || theme.colors.background.secondary;
|
|
665
|
+
};
|
|
666
|
+
const defaultAriaLabel = totalCount === 1 ? "1 user" : totalCount === visibleCount ? `${totalCount} users` : `${visibleCount} of ${totalCount} users`;
|
|
667
|
+
const renderAvatarWithTooltip = (avatar, tooltip, key) => {
|
|
668
|
+
if (tooltip) {
|
|
669
|
+
return /* @__PURE__ */ jsx9(Tooltip, { content: tooltip, placement: "top", children: avatar }, key);
|
|
670
|
+
}
|
|
671
|
+
return avatar;
|
|
672
|
+
};
|
|
805
673
|
return /* @__PURE__ */ jsxs2(
|
|
806
674
|
Box,
|
|
807
675
|
{
|
|
@@ -810,30 +678,37 @@ var AvatarGroup = ({
|
|
|
810
678
|
role: "group",
|
|
811
679
|
"aria-label": ariaLabel || defaultAriaLabel,
|
|
812
680
|
children: [
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
const
|
|
816
|
-
const
|
|
817
|
-
const
|
|
818
|
-
return /* @__PURE__ */ jsx116(
|
|
681
|
+
visibleListItems.map((item, index) => {
|
|
682
|
+
const shouldApplyBackground = !item.src;
|
|
683
|
+
const backgroundColor = shouldApplyBackground ? getBackgroundColor(index) : void 0;
|
|
684
|
+
const shouldEnableHover = !!item.src && !!item.onClick;
|
|
685
|
+
const avatar = /* @__PURE__ */ jsx9(
|
|
819
686
|
Box,
|
|
820
687
|
{
|
|
821
688
|
marginLeft: index === 0 ? 0 : overlap,
|
|
822
689
|
zIndex: totalCount - index,
|
|
823
|
-
children:
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
690
|
+
children: /* @__PURE__ */ jsx9(
|
|
691
|
+
Avatar,
|
|
692
|
+
{
|
|
693
|
+
src: item.src,
|
|
694
|
+
text: item.initials,
|
|
695
|
+
size: internalSize,
|
|
696
|
+
stroke,
|
|
697
|
+
backgroundColor,
|
|
698
|
+
disableHover: !shouldEnableHover,
|
|
699
|
+
onClick: item.onClick,
|
|
700
|
+
...item.tooltip ? { "aria-label": item.tooltip } : {}
|
|
701
|
+
}
|
|
702
|
+
)
|
|
829
703
|
},
|
|
830
704
|
index
|
|
831
705
|
);
|
|
706
|
+
return renderAvatarWithTooltip(avatar, item.tooltip, index);
|
|
832
707
|
}),
|
|
833
|
-
remainingCount > 0 && /* @__PURE__ */
|
|
708
|
+
remainingCount > 0 && /* @__PURE__ */ jsx9(Box, { marginLeft: overlap, zIndex: 0, children: /* @__PURE__ */ jsx9(
|
|
834
709
|
Avatar,
|
|
835
710
|
{
|
|
836
|
-
size,
|
|
711
|
+
size: internalSize,
|
|
837
712
|
text: `+${remainingCount}`,
|
|
838
713
|
stroke,
|
|
839
714
|
backgroundColor: theme.colors.background.secondary,
|