@vkontakte/vkui 4.38.0 → 4.38.2

package/dist/components/MiniInfoCell/MiniInfoCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniInfoCell.js","names":["classNames","Paragraph","Tappable","hasReactNode","MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","isClickable","onClick","undefined"],"sources":["../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./MiniInfoCell.css\";\n\nexport interface MiniInfoCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: \"base\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Стиль текста:\n   *\n   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества\n   * - `secondary` – стиль по-умолчанию.\n   */\n  textLevel?: \"primary\" | \"secondary\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  textLevel = \"secondary\",\n  children,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const isClickable = !!restProps.onClick;\n\n  return (\n    <Tappable\n      Component=\"div\"\n      disabled={!isClickable}\n      role={isClickable ? \"button\" : undefined}\n      {...restProps}\n      vkuiClass={classNames(\n        \"MiniInfoCell\",\n        mode !== \"base\" && `MiniInfoCell--md-${mode}`,\n        textWrap !== \"nowrap\" && `MiniInfoCell--wr-${textWrap}`,\n        `MiniInfoCell--lvl-${textLevel}`\n      )}\n    >\n      <span vkuiClass=\"MiniInfoCell__icon\">{before}</span>\n      <Paragraph\n        vkuiClass=\"MiniInfoCell__content\"\n        weight={mode === \"more\" ? \"2\" : undefined}\n      >\n        {children}\n      </Paragraph>\n      {hasReactNode(after) && (\n        <span vkuiClass=\"MiniInfoCell__after\">{after}</span>\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,SAAT;AACA,SAASC,QAAT;AACA,SAASC,YAAT;;AA6CA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAQH;EAAA,IAPvBC,MAOuB,QAPvBA,MAOuB;EAAA,IANvBC,KAMuB,QANvBA,KAMuB;EAAA,qBALvBC,IAKuB;EAAA,IALvBA,IAKuB,0BALhB,MAKgB;EAAA,yBAJvBC,QAIuB;EAAA,IAJvBA,QAIuB,8BAJZ,QAIY;EAAA,0BAHvBC,SAGuB;EAAA,IAHvBA,SAGuB,+BAHX,WAGW;EAAA,IAFvBC,QAEuB,QAFvBA,QAEuB;EAAA,IADpBC,SACoB;;EACvB,IAAMC,WAAW,GAAG,CAAC,CAACD,SAAS,CAACE,OAAhC;EAEA,OACE,oBAAC,QAAD;IACE,SAAS,EAAC,KADZ;IAEE,QAAQ,EAAE,CAACD,WAFb;IAGE,IAAI,EAAEA,WAAW,GAAG,QAAH,GAAcE;EAHjC,GAIMH,SAJN;IAKE,SAAS,EAAEX,UAAU,CACnB,cADmB,EAEnBO,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAFmB,EAGnBC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAHmB,8BAIEC,SAJF;EALvB,IAYE;IAAM,SAAS,EAAC;EAAhB,GAAsCJ,MAAtC,CAZF,EAaE,oBAAC,SAAD;IACE,SAAS,EAAC,uBADZ;IAEE,MAAM,EAAEE,IAAI,KAAK,MAAT,GAAkB,GAAlB,GAAwBO;EAFlC,GAIGJ,QAJH,CAbF,EAmBGP,YAAY,CAACG,KAAD,CAAZ,IACC;IAAM,SAAS,EAAC;EAAhB,GAAuCA,KAAvC,CApBJ,CADF;AAyBD,CApCM"}
+{"version":3,"file":"MiniInfoCell.js","names":["React","classNames","Paragraph","Tappable","hasReactNode","MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","cellClasses","cellContent","undefined","onClick"],"sources":["../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./MiniInfoCell.css\";\n\nexport interface MiniInfoCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: \"base\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Стиль текста:\n   *\n   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества\n   * - `secondary` – стиль по-умолчанию.\n   */\n  textLevel?: \"primary\" | \"secondary\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  textLevel = \"secondary\",\n  children,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    \"MiniInfoCell\",\n    mode !== \"base\" && `MiniInfoCell--md-${mode}`,\n    textWrap !== \"nowrap\" && `MiniInfoCell--wr-${textWrap}`,\n    `MiniInfoCell--lvl-${textLevel}`\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span vkuiClass=\"MiniInfoCell__icon\">{before}</span>\n      <Paragraph\n        vkuiClass=\"MiniInfoCell__content\"\n        weight={mode === \"more\" ? \"2\" : undefined}\n      >\n        {children}\n      </Paragraph>\n      {hasReactNode(after) && (\n        <span vkuiClass=\"MiniInfoCell__after\">{after}</span>\n      )}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable\n      Component=\"div\"\n      role=\"button\"\n      {...restProps}\n      vkuiClass={cellClasses}\n    >\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} vkuiClass={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,SAAT;AACA,SAASC,QAAT;AACA,SAASC,YAAT;;AA6CA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAQH;EAAA,IAPvBC,MAOuB,QAPvBA,MAOuB;EAAA,IANvBC,KAMuB,QANvBA,KAMuB;EAAA,qBALvBC,IAKuB;EAAA,IALvBA,IAKuB,0BALhB,MAKgB;EAAA,yBAJvBC,QAIuB;EAAA,IAJvBA,QAIuB,8BAJZ,QAIY;EAAA,0BAHvBC,SAGuB;EAAA,IAHvBA,SAGuB,+BAHX,WAGW;EAAA,IAFvBC,QAEuB,QAFvBA,QAEuB;EAAA,IADpBC,SACoB;;EACvB,IAAMC,WAAW,GAAGZ,UAAU,CAC5B,cAD4B,EAE5BO,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAF4B,EAG5BC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAH4B,8BAIPC,SAJO,EAA9B;EAOA,IAAMI,WAAW,GACf,oBAAC,KAAD,CAAO,QAAP,QACE;IAAM,SAAS,EAAC;EAAhB,GAAsCR,MAAtC,CADF,EAEE,oBAAC,SAAD;IACE,SAAS,EAAC,uBADZ;IAEE,MAAM,EAAEE,IAAI,KAAK,MAAT,GAAkB,GAAlB,GAAwBO;EAFlC,GAIGJ,QAJH,CAFF,EAQGP,YAAY,CAACG,KAAD,CAAZ,IACC;IAAM,SAAS,EAAC;EAAhB,GAAuCA,KAAvC,CATJ,CADF;EAeA,OAAOK,SAAS,CAACI,OAAV,GACL,oBAAC,QAAD;IACE,SAAS,EAAC,KADZ;IAEE,IAAI,EAAC;EAFP,GAGMJ,SAHN;IAIE,SAAS,EAAEC;EAJb,IAMGC,WANH,CADK,GAUL,wCAASF,SAAT;IAAoB,SAAS,EAAEC;EAA/B,IACGC,WADH,CAVF;AAcD,CA7CM"}

package/dist/components/UsersStack/UsersStack.js

@@ -7,6 +7,7 @@ import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
+import { useId } from "../../hooks/useId";
 
 function PathElement(_ref) {
   var photoSize = _ref.photoSize,
@@ -74,6 +75,7 @@ export var UsersStack = function UsersStack(_ref2) {
       children = _ref2.children,
       restProps = _objectWithoutProperties(_ref2, _excluded2);
 
+  var cmpId = useId();
   var canShowOthers = count > 0 && size !== "xs";
   var CounterTypography = size === "m" ? Footnote : Caption;
   var photoSize = {
@@ -82,43 +84,53 @@ export var UsersStack = function UsersStack(_ref2) {
     m: 32
   }[size];
   var directionClip = canShowOthers ? "right" : "left";
-  var photosShown = photos.slice(0, visibleCount);
-  return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames("UsersStack", "UsersStack--size-".concat(size), "UsersStack--l-".concat(layout), canShowOthers && "UsersStack--others")
-  }), createScopedElement("div", {
-    vkuiClass: "UsersStack__photos",
-    role: "presentation"
-  }, photosShown.map(function (photo, i) {
+  var photosElements = photos.slice(0, visibleCount).map(function (photo, i) {
     var direction = i === 0 && !canShowOthers ? "circle" : directionClip;
+    var id = "UsersStackDefs".concat(cmpId).concat(i);
+    var hrefID = "#".concat(id);
+    var maskID = "UsersStackMask".concat(cmpId).concat(i);
     return createScopedElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       vkuiClass: "UsersStack__photo",
       key: i,
       "aria-hidden": true
-    }, createScopedElement("g", {
-      vkuiClass: "UsersStack__mask--".concat(photoSize, "-").concat(direction)
-    }, createScopedElement(PathElement, {
+    }, createScopedElement("defs", null, createScopedElement(PathElement, {
+      id: id,
       direction: direction,
-      photoSize: photoSize,
+      photoSize: photoSize
+    })), createScopedElement("clipPath", {
+      id: maskID
+    }, createScopedElement("use", {
+      href: hrefID
+    })), createScopedElement("g", {
+      clipPath: "url(#".concat(maskID, ")")
+    }, createScopedElement("use", {
+      href: hrefID,
       vkuiClass: "UsersStack__fill"
     }), createScopedElement("image", {
       href: photo,
       width: photoSize,
       height: photoSize
-    }), createScopedElement(PathElement, {
-      direction: direction,
-      photoSize: photoSize,
+    }), createScopedElement("use", {
+      href: hrefID,
       fill: "none",
       stroke: "rgba(0, 0, 0, 0.08)"
     })));
-  }), canShowOthers && createScopedElement(CounterTypography, {
+  });
+  var othersElement = canShowOthers ? createScopedElement(CounterTypography, {
     caps: true,
     weight: "1",
     level: "2" // TODO: remove only level in #2343
     ,
     vkuiClass: "UsersStack__photo UsersStack__photo--others",
     "aria-hidden": true
-  }, createScopedElement("span", null, "+", count))), hasReactNode(children) && createScopedElement(Footnote, {
+  }, createScopedElement("span", null, "+", count)) : null;
+  return createScopedElement("div", _extends({}, restProps, {
+    vkuiClass: classNames("UsersStack", "UsersStack--size-".concat(size), "UsersStack--l-".concat(layout), canShowOthers && "UsersStack--others")
+  }), (photosElements.length > 0 || othersElement) && createScopedElement("div", {
+    vkuiClass: "UsersStack__photos",
+    role: "presentation"
+  }, photosElements, othersElement), hasReactNode(children) && createScopedElement(Footnote, {
     vkuiClass: "UsersStack__text"
   }, children));
 };

package/dist/components/UsersStack/UsersStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsersStack.js","names":["hasReactNode","classNames","Footnote","Caption","PathElement","photoSize","direction","props","radius","UsersStack","photos","visibleCount","count","Math","max","length","size","layout","children","restProps","canShowOthers","CounterTypography","xs","s","m","directionClip","photosShown","slice","map","photo","i"],"sources":["../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport \"./UsersStack.css\";\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: \"xs\" | \"s\" | \"m\"; // TODO: \"s\" | \"m\" | \"l\"\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: \"circle\" | \"right\" | \"left\";\n}\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case \"circle\":\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case \"right\":\n      switch (photoSize) {\n        case 24:\n          return (\n            <path\n              d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\"\n              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\"\n              {...props}\n            />\n          );\n      }\n  }\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = \"s\",\n  layout = \"horizontal\",\n  children,\n  ...restProps\n}: UsersStackProps) => {\n  const canShowOthers = count > 0 && size !== \"xs\";\n  const CounterTypography = size === \"m\" ? Footnote : Caption;\n\n  const photoSize = {\n    xs: 16,\n    s: 24,\n    m: 32,\n  }[size];\n  const directionClip = canShowOthers ? \"right\" : \"left\";\n\n  const photosShown = photos.slice(0, visibleCount);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"UsersStack\",\n        `UsersStack--size-${size}`,\n        `UsersStack--l-${layout}`,\n        canShowOthers && \"UsersStack--others\"\n      )}\n    >\n      <div vkuiClass=\"UsersStack__photos\" role=\"presentation\">\n        {photosShown.map((photo, i) => {\n          const direction =\n            i === 0 && !canShowOthers ? \"circle\" : directionClip;\n\n          return (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              vkuiClass=\"UsersStack__photo\"\n              key={i}\n              aria-hidden\n            >\n              <g vkuiClass={`UsersStack__mask--${photoSize}-${direction}`}>\n                <PathElement\n                  direction={direction}\n                  photoSize={photoSize}\n                  vkuiClass=\"UsersStack__fill\"\n                />\n                <image href={photo} width={photoSize} height={photoSize} />\n                <PathElement\n                  direction={direction}\n                  photoSize={photoSize}\n                  fill=\"none\"\n                  stroke=\"rgba(0, 0, 0, 0.08)\"\n                />\n              </g>\n            </svg>\n          );\n        })}\n\n        {canShowOthers && (\n          <CounterTypography\n            caps\n            weight=\"1\"\n            level=\"2\" // TODO: remove only level in #2343\n            vkuiClass=\"UsersStack__photo UsersStack__photo--others\"\n            aria-hidden\n          >\n            <span>+{count}</span>\n          </CounterTypography>\n        )}\n      </div>\n      {hasReactNode(children) && (\n        <Footnote vkuiClass=\"UsersStack__text\">{children}</Footnote>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"UsersStack.js","names":["hasReactNode","classNames","Footnote","Caption","useId","PathElement","photoSize","direction","props","radius","UsersStack","photos","visibleCount","count","Math","max","length","size","layout","children","restProps","cmpId","canShowOthers","CounterTypography","xs","s","m","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","othersElement"],"sources":["../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { useId } from \"../../hooks/useId\";\nimport \"./UsersStack.css\";\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: \"xs\" | \"s\" | \"m\"; // TODO: \"s\" | \"m\" | \"l\"\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: \"circle\" | \"right\" | \"left\";\n}\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case \"circle\":\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case \"right\":\n      switch (photoSize) {\n        case 24:\n          return (\n            <path\n              d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\"\n              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\"\n              {...props}\n            />\n          );\n      }\n  }\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = \"s\",\n  layout = \"horizontal\",\n  children,\n  ...restProps\n}: UsersStackProps) => {\n  const cmpId = useId();\n\n  const canShowOthers = count > 0 && size !== \"xs\";\n  const CounterTypography = size === \"m\" ? Footnote : Caption;\n\n  const photoSize = {\n    xs: 16,\n    s: 24,\n    m: 32,\n  }[size];\n  const directionClip = canShowOthers ? \"right\" : \"left\";\n\n  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {\n    const direction = i === 0 && !canShowOthers ? \"circle\" : directionClip;\n\n    const id = `UsersStackDefs${cmpId}${i}`;\n    const hrefID = `#${id}`;\n    const maskID = `UsersStackMask${cmpId}${i}`;\n\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        vkuiClass=\"UsersStack__photo\"\n        key={i}\n        aria-hidden\n      >\n        <defs>\n          <PathElement id={id} direction={direction} photoSize={photoSize} />\n        </defs>\n        <clipPath id={maskID}>\n          <use href={hrefID} />\n        </clipPath>\n        <g clipPath={`url(#${maskID})`}>\n          <use href={hrefID} vkuiClass=\"UsersStack__fill\" />\n          <image href={photo} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n  });\n  const othersElement = canShowOthers ? (\n    <CounterTypography\n      caps\n      weight=\"1\"\n      level=\"2\" // TODO: remove only level in #2343\n      vkuiClass=\"UsersStack__photo UsersStack__photo--others\"\n      aria-hidden\n    >\n      <span>+{count}</span>\n    </CounterTypography>\n  ) : null;\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"UsersStack\",\n        `UsersStack--size-${size}`,\n        `UsersStack--l-${layout}`,\n        canShowOthers && \"UsersStack--others\"\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div vkuiClass=\"UsersStack__photos\" role=\"presentation\">\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && (\n        <Footnote vkuiClass=\"UsersStack__text\">{children}</Footnote>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}