@vkontakte/vkui 7.1.2 → 7.2.0

package/dist/cssm/components/Typography/Footnote/Footnote.module.css

@@ -1,94 +1,94 @@
 .host {
+  font-family: var(--vkui--font_footnote--font_family--regular);
   font-size: var(--vkui--font_footnote--font_size--regular);
-  line-height: var(--vkui--font_footnote--line_height--regular);
   font-weight: var(--vkui--font_footnote--font_weight--regular);
-  font-family: var(--vkui--font_footnote--font_family--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
 }
 
 .sizeYCompact {
+  font-family: var(
+    --vkui--font_footnote--font_family--compact,
+    var(--vkui--font_footnote--font_family--regular)
+  );
   font-size: var(
     --vkui--font_footnote--font_size--compact,
     var(--vkui--font_footnote--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_footnote--line_height--compact,
-    var(--vkui--font_footnote--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_footnote--font_weight--compact,
     var(--vkui--font_footnote--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_footnote--font_family--compact,
-    var(--vkui--font_footnote--font_family--regular)
+  line-height: var(
+    --vkui--font_footnote--line_height--compact,
+    var(--vkui--font_footnote--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone {
+    font-family: var(
+      --vkui--font_footnote--font_family--compact,
+      var(--vkui--font_footnote--font_family--regular)
+    );
     font-size: var(
       --vkui--font_footnote--font_size--compact,
       var(--vkui--font_footnote--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_footnote--line_height--compact,
-      var(--vkui--font_footnote--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_footnote--font_weight--compact,
       var(--vkui--font_footnote--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_footnote--font_family--compact,
-      var(--vkui--font_footnote--font_family--regular)
+    line-height: var(
+      --vkui--font_footnote--line_height--compact,
+      var(--vkui--font_footnote--line_height--regular)
     );
   }
 }
 
 .caps {
+  font-family: var(--vkui--font_footnote_caps--font_family--regular);
   font-size: var(--vkui--font_footnote_caps--font_size--regular);
-  line-height: var(--vkui--font_footnote_caps--line_height--regular);
   font-weight: var(--vkui--font_footnote_caps--font_weight--regular);
-  font-family: var(--vkui--font_footnote_caps--font_family--regular);
+  line-height: var(--vkui--font_footnote_caps--line_height--regular);
   text-transform: uppercase;
 }
 
 .sizeYCompact.caps {
+  font-family: var(
+    --vkui--font_footnote_caps--font_family--compact,
+    var(--vkui--font_footnote_caps--font_family--regular)
+  );
   font-size: var(
     --vkui--font_footnote_caps--font_size--compact,
     var(--vkui--font_footnote_caps--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_footnote_caps--line_height--compact,
-    var(--vkui--font_footnote_caps--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_footnote_caps--font_weight--compact,
     var(--vkui--font_footnote_caps--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_footnote_caps--font_family--compact,
-    var(--vkui--font_footnote_caps--font_family--regular)
+  line-height: var(
+    --vkui--font_footnote_caps--line_height--compact,
+    var(--vkui--font_footnote_caps--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.caps {
+    font-family: var(
+      --vkui--font_footnote_caps--font_family--compact,
+      var(--vkui--font_footnote_caps--font_family--regular)
+    );
     font-size: var(
       --vkui--font_footnote_caps--font_size--compact,
       var(--vkui--font_footnote_caps--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_footnote_caps--line_height--compact,
-      var(--vkui--font_footnote_caps--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_footnote_caps--font_weight--compact,
       var(--vkui--font_footnote_caps--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_footnote_caps--font_family--compact,
-      var(--vkui--font_footnote_caps--font_family--regular)
+    line-height: var(
+      --vkui--font_footnote_caps--line_height--compact,
+      var(--vkui--font_footnote_caps--line_height--regular)
     );
   }
 }

package/dist/cssm/components/Typography/Headline/Headline.module.css

@@ -1,8 +1,8 @@
 .level1 {
+  font-family: var(--vkui--font_headline1--font_family--regular);
   font-size: var(--vkui--font_headline1--font_size--regular);
-  line-height: var(--vkui--font_headline1--line_height--regular);
   font-weight: var(--vkui--font_headline1--font_weight--regular);
-  font-family: var(--vkui--font_headline1--font_family--regular);
+  line-height: var(--vkui--font_headline1--line_height--regular);
 }
 
 .sizeYCompact.level1 {
@@ -10,14 +10,14 @@
     --vkui--font_headline1--font_size--compact,
     var(--vkui--font_headline1--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_headline1--line_height--compact,
-    var(--vkui--font_headline1--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_headline1--font_weight--compact,
     var(--vkui--font_headline1--font_weight--regular)
   );
+  line-height: var(
+    --vkui--font_headline1--line_height--compact,
+    var(--vkui--font_headline1--line_height--regular)
+  );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
@@ -26,22 +26,22 @@
       --vkui--font_headline1--font_size--compact,
       var(--vkui--font_headline1--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_headline1--line_height--compact,
-      var(--vkui--font_headline1--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_headline1--font_weight--compact,
       var(--vkui--font_headline1--font_weight--regular)
     );
+    line-height: var(
+      --vkui--font_headline1--line_height--compact,
+      var(--vkui--font_headline1--line_height--regular)
+    );
   }
 }
 
 .level2 {
+  font-family: var(--vkui--font_headline2--font_family--regular);
   font-size: var(--vkui--font_headline2--font_size--regular);
-  line-height: var(--vkui--font_headline2--line_height--regular);
   font-weight: var(--vkui--font_headline2--font_weight--regular);
-  font-family: var(--vkui--font_headline2--font_family--regular);
+  line-height: var(--vkui--font_headline2--line_height--regular);
 }
 
 .sizeYCompact.level2 {
@@ -49,14 +49,14 @@
     --vkui--font_headline2--font_size--compact,
     var(--vkui--font_headline2--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_headline2--line_height--compact,
-    var(--vkui--font_headline2--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_headline2--font_weight--compact,
     var(--vkui--font_headline2--font_weight--regular)
   );
+  line-height: var(
+    --vkui--font_headline2--line_height--compact,
+    var(--vkui--font_headline2--line_height--regular)
+  );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
@@ -65,13 +65,13 @@
       --vkui--font_headline2--font_size--compact,
       var(--vkui--font_headline2--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_headline2--line_height--compact,
-      var(--vkui--font_headline2--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_headline2--font_weight--compact,
       var(--vkui--font_headline2--font_weight--regular)
     );
+    line-height: var(
+      --vkui--font_headline2--line_height--compact,
+      var(--vkui--font_headline2--line_height--regular)
+    );
   }
 }

package/dist/cssm/components/Typography/Paragraph/Paragraph.module.css

@@ -1,46 +1,46 @@
 .host {
+  font-family: var(--vkui--font_paragraph--font_family--regular);
   font-size: var(--vkui--font_paragraph--font_size--regular);
-  line-height: var(--vkui--font_paragraph--line_height--regular);
   font-weight: var(--vkui--font_paragraph--font_weight--regular);
-  font-family: var(--vkui--font_paragraph--font_family--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
 }
 
 .sizeYCompact {
+  font-family: var(
+    --vkui--font_paragraph--font_family--compact,
+    var(--vkui--font_paragraph--font_family--regular)
+  );
   font-size: var(
     --vkui--font_paragraph--font_size--compact,
     var(--vkui--font_paragraph--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_paragraph--line_height--compact,
-    var(--vkui--font_paragraph--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_paragraph--font_weight--compact,
     var(--vkui--font_paragraph--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_paragraph--font_family--compact,
-    var(--vkui--font_paragraph--font_family--regular)
+  line-height: var(
+    --vkui--font_paragraph--line_height--compact,
+    var(--vkui--font_paragraph--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone {
+    font-family: var(
+      --vkui--font_paragraph--font_family--compact,
+      var(--vkui--font_paragraph--font_family--regular)
+    );
     font-size: var(
       --vkui--font_paragraph--font_size--compact,
       var(--vkui--font_paragraph--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_paragraph--line_height--compact,
-      var(--vkui--font_paragraph--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_paragraph--font_weight--compact,
       var(--vkui--font_paragraph--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_paragraph--font_family--compact,
-      var(--vkui--font_paragraph--font_family--regular)
+    line-height: var(
+      --vkui--font_paragraph--line_height--compact,
+      var(--vkui--font_paragraph--line_height--regular)
     );
   }
 }

package/dist/cssm/components/Typography/Subhead/Subhead.module.css

@@ -1,46 +1,46 @@
 .host {
+  font-family: var(--vkui--font_subhead--font_family--regular);
   font-size: var(--vkui--font_subhead--font_size--regular);
-  line-height: var(--vkui--font_subhead--line_height--regular);
   font-weight: var(--vkui--font_subhead--font_weight--regular);
-  font-family: var(--vkui--font_subhead--font_family--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
 }
 
 .sizeYCompact {
+  font-family: var(
+    --vkui--font_subhead--font_family--compact,
+    var(--vkui--font_subhead--font_family--regular)
+  );
   font-size: var(
     --vkui--font_subhead--font_size--compact,
     var(--vkui--font_subhead--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_subhead--line_height--compact,
-    var(--vkui--font_subhead--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_subhead--font_weight--compact,
     var(--vkui--font_subhead--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_subhead--font_family--compact,
-    var(--vkui--font_subhead--font_family--regular)
+  line-height: var(
+    --vkui--font_subhead--line_height--compact,
+    var(--vkui--font_subhead--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone {
+    font-family: var(
+      --vkui--font_subhead--font_family--compact,
+      var(--vkui--font_subhead--font_family--regular)
+    );
     font-size: var(
       --vkui--font_subhead--font_size--compact,
       var(--vkui--font_subhead--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_subhead--line_height--compact,
-      var(--vkui--font_subhead--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_subhead--font_weight--compact,
       var(--vkui--font_subhead--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_subhead--font_family--compact,
-      var(--vkui--font_subhead--font_family--regular)
+    line-height: var(
+      --vkui--font_subhead--line_height--compact,
+      var(--vkui--font_subhead--line_height--regular)
     );
   }
 }

package/dist/cssm/components/Typography/Text/Text.module.css

@@ -1,43 +1,43 @@
 .host {
+  font-family: var(--vkui--font_text--font_family--regular);
   font-size: var(--vkui--font_text--font_size--regular);
-  line-height: var(--vkui--font_text--line_height--regular);
   font-weight: var(--vkui--font_text--font_weight--regular);
-  font-family: var(--vkui--font_text--font_family--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
 }
 
 .sizeYCompact {
-  font-size: var(--vkui--font_text--font_size--compact, var(--vkui--font_text--font_size--regular));
-  line-height: var(
-    --vkui--font_text--line_height--compact,
-    var(--vkui--font_text--line_height--regular)
+  font-family: var(
+    --vkui--font_text--font_family--compact,
+    var(--vkui--font_text--font_family--regular)
   );
+  font-size: var(--vkui--font_text--font_size--compact, var(--vkui--font_text--font_size--regular));
   font-weight: var(
     --vkui--font_text--font_weight--compact,
     var(--vkui--font_text--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_text--font_family--compact,
-    var(--vkui--font_text--font_family--regular)
+  line-height: var(
+    --vkui--font_text--line_height--compact,
+    var(--vkui--font_text--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone {
+    font-family: var(
+      --vkui--font_text--font_family--compact,
+      var(--vkui--font_text--font_family--regular)
+    );
     font-size: var(
       --vkui--font_text--font_size--compact,
       var(--vkui--font_text--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_text--line_height--compact,
-      var(--vkui--font_text--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_text--font_weight--compact,
       var(--vkui--font_text--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_text--font_family--compact,
-      var(--vkui--font_text--font_family--regular)
+    line-height: var(
+      --vkui--font_text--line_height--compact,
+      var(--vkui--font_text--line_height--regular)
     );
   }
 }

package/dist/cssm/components/Typography/Title/Title.module.css

@@ -1,140 +1,140 @@
 .level1 {
+  font-family: var(--vkui--font_title1--font_family--regular);
   font-size: var(--vkui--font_title1--font_size--regular);
-  line-height: var(--vkui--font_title1--line_height--regular);
   font-weight: var(--vkui--font_title1--font_weight--regular);
-  font-family: var(--vkui--font_title1--font_family--regular);
+  line-height: var(--vkui--font_title1--line_height--regular);
 }
 
 .sizeYCompact.level1 {
+  font-family: var(
+    --vkui--font_title1--font_family--compact,
+    var(--vkui--font_title1--font_family--regular)
+  );
   font-size: var(
     --vkui--font_title1--font_size--compact,
     var(--vkui--font_title1--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_title1--line_height--compact,
-    var(--vkui--font_title1--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_title1--font_weight--compact,
     var(--vkui--font_title1--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_title1--font_family--compact,
-    var(--vkui--font_title1--font_family--regular)
+  line-height: var(
+    --vkui--font_title1--line_height--compact,
+    var(--vkui--font_title1--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level1 {
+    font-family: var(
+      --vkui--font_title1--font_family--compact,
+      var(--vkui--font_title1--font_family--regular)
+    );
     font-size: var(
       --vkui--font_title1--font_size--compact,
       var(--vkui--font_title1--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_title1--line_height--compact,
-      var(--vkui--font_title1--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_title1--font_weight--compact,
       var(--vkui--font_title1--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_title1--font_family--compact,
-      var(--vkui--font_title1--font_family--regular)
+    line-height: var(
+      --vkui--font_title1--line_height--compact,
+      var(--vkui--font_title1--line_height--regular)
     );
   }
 }
 
 .level2 {
+  font-family: var(--vkui--font_title2--font_family--regular);
   font-size: var(--vkui--font_title2--font_size--regular);
-  line-height: var(--vkui--font_title2--line_height--regular);
   font-weight: var(--vkui--font_title2--font_weight--regular);
-  font-family: var(--vkui--font_title2--font_family--regular);
+  line-height: var(--vkui--font_title2--line_height--regular);
 }
 
 .sizeYCompact.level2 {
+  font-family: var(
+    --vkui--font_title2--font_family--compact,
+    var(--vkui--font_title2--font_family--regular)
+  );
   font-size: var(
     --vkui--font_title2--font_size--compact,
     var(--vkui--font_title2--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_title2--line_height--compact,
-    var(--vkui--font_title2--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_title2--font_weight--compact,
     var(--vkui--font_title2--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_title2--font_family--compact,
-    var(--vkui--font_title2--font_family--regular)
+  line-height: var(
+    --vkui--font_title2--line_height--compact,
+    var(--vkui--font_title2--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level2 {
+    font-family: var(
+      --vkui--font_title2--font_family--compact,
+      var(--vkui--font_title2--font_family--regular)
+    );
     font-size: var(
       --vkui--font_title2--font_size--compact,
       var(--vkui--font_title2--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_title2--line_height--compact,
-      var(--vkui--font_title2--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_title2--font_weight--compact,
       var(--vkui--font_title2--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_title2--font_family--compact,
-      var(--vkui--font_title2--font_family--regular)
+    line-height: var(
+      --vkui--font_title2--line_height--compact,
+      var(--vkui--font_title2--line_height--regular)
     );
   }
 }
 
 .level3 {
+  font-family: var(--vkui--font_title3--font_family--regular);
   font-size: var(--vkui--font_title3--font_size--regular);
-  line-height: var(--vkui--font_title3--line_height--regular);
   font-weight: var(--vkui--font_title3--font_weight--regular);
-  font-family: var(--vkui--font_title3--font_family--regular);
+  line-height: var(--vkui--font_title3--line_height--regular);
 }
 
 .sizeYCompact.level3 {
+  font-family: var(
+    --vkui--font_title3--font_family--compact,
+    var(--vkui--font_title3--font_family--regular)
+  );
   font-size: var(
     --vkui--font_title3--font_size--compact,
     var(--vkui--font_title3--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_title3--line_height--compact,
-    var(--vkui--font_title3--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_title3--font_weight--compact,
     var(--vkui--font_title3--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_title3--font_family--compact,
-    var(--vkui--font_title3--font_family--regular)
+  line-height: var(
+    --vkui--font_title3--line_height--compact,
+    var(--vkui--font_title3--line_height--regular)
   );
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.level3 {
+    font-family: var(
+      --vkui--font_title3--font_family--compact,
+      var(--vkui--font_title3--font_family--regular)
+    );
     font-size: var(
       --vkui--font_title3--font_size--compact,
       var(--vkui--font_title3--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_title3--line_height--compact,
-      var(--vkui--font_title3--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_title3--font_weight--compact,
       var(--vkui--font_title3--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_title3--font_family--compact,
-      var(--vkui--font_title3--font_family--regular)
+    line-height: var(
+      --vkui--font_title3--line_height--compact,
+      var(--vkui--font_title3--line_height--regular)
     );
   }
 }

package/dist/cssm/components/Typography/Typography.module.css

@@ -1,7 +1,7 @@
 .normalize {
   display: block;
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 .inline {

package/dist/cssm/components/UnstyledTextField/UnstyledTextField.module.css

@@ -1,14 +1,14 @@
 .host {
   margin: 0;
-  border: 0;
-  box-shadow: none;
-  background: transparent;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  outline: none;
   resize: none;
+  outline: none;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .noPadding {

package/dist/cssm/components/UsersStack/UsersStack.js

@@ -2,8 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
-import { useDirection } from "../../hooks/useDirection.js";
-import { useExternRef } from "../../hooks/useExternRef.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Caption } from "../Typography/Caption/Caption.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
@@ -73,14 +72,13 @@ const photoSizes = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/UsersStack
- */ export const UsersStack = ({ photos = [], visibleCount = 3, count = Math.max(0, photos.length - visibleCount), size = 'm', children, avatarsPosition = 'inline-start', getRootRef, ...restProps })=>{
+ */ export const UsersStack = ({ photos = [], visibleCount = 3, count = Math.max(0, photos.length - visibleCount), size = 'm', children, avatarsPosition = 'inline-start', ...restProps })=>{
     const cmpId = React.useId();
-    const [directionRef, textDirection = 'ltr'] = useDirection();
-    const rootRef = useExternRef(getRootRef, directionRef);
+    const direction = useConfigDirection();
     const canShowOthers = count > 0 && count < 100 && size !== 's';
     const CounterTypography = size === 'l' ? Footnote : Caption;
     const photoSize = photoSizes[size];
-    const directionClip = textDirection === 'ltr' ? canShowOthers ? 'right' : 'left' : canShowOthers ? 'left' : 'right';
+    const directionClip = direction === 'ltr' ? canShowOthers ? 'right' : 'left' : canShowOthers ? 'left' : 'right';
     const photosElements = photos.slice(0, visibleCount).map((photo, i)=>{
         const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;
         const id = `UsersStackDefs${cmpId}${i}`;
@@ -153,7 +151,6 @@ const photoSizes = {
     }) : null;
     return /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
-        getRootRef: rootRef,
         baseClassName: classNames(styles.host, stylesSize[size], avatarsPositionStyles[avatarsPosition]),
         children: [
             (photosElements.length > 0 || othersElement) && /*#__PURE__*/ _jsxs("div", {