@vkontakte/vkui 7.1.3 → 7.2.0

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", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './UsersStack.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst avatarsPositionStyles = {\n  'inline-start': styles.avatarsPositionInlineStart,\n  'inline-end': styles.avatarsPositionInlineEnd,\n  'block-start': styles.avatarsPositionBlockStart,\n};\n\nexport type UsersStackRenderWrapperProps = {\n  children: React.ReactElement;\n  ['data-src']: string;\n};\n\nexport type UsersStackPhoto = {\n  src: string;\n  renderWrapper?: (props: UsersStackRenderWrapperProps) => React.ReactElement;\n};\n\nexport interface UsersStackProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии либо массив структур типа `UsersStackPhoto`:\n   */\n  photos?: string[] | UsersStackPhoto[];\n  /**\n   * Размер аватарок\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n  /**\n   * Определяет положение аватаров\n   * Режим `block-start` рекомендуется использовать с размером `m`\n   */\n  avatarsPosition?: 'inline-start' | 'block-start' | 'inline-end';\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: 'circle' | 'right' | 'left';\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\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 16:\n          return (\n            <path\n              d=\"M14,13.285A8 8 0 0 1 8 16A8 8 0 0 1 8 0A8 8 0 0 1 14 2.715A8 8 0 0 0 14,13.285\"\n              {...props}\n            />\n          );\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\nconst photoSizes: Record<NonNullable<UsersStackProps['size']>, PhotoSizeType> = {\n  s: 16,\n  m: 24,\n  l: 32,\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 = 'm',\n  children,\n  avatarsPosition = 'inline-start',\n  getRootRef,\n  ...restProps\n}: UsersStackProps): React.ReactNode => {\n  const cmpId = React.useId();\n  const [directionRef, textDirection = 'ltr'] = useDirection();\n  const rootRef = useExternRef(getRootRef, directionRef);\n\n  const canShowOthers = count > 0 && count < 100 && size !== 's';\n  const CounterTypography = size === 'l' ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip =\n    textDirection === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right';\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    const isPhotoType = typeof photo === 'object';\n    const photoSrc = isPhotoType ? photo.src : photo;\n\n    let photoElement = (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={classNames(styles.photo, styles.item)}\n        aria-hidden\n        display=\"block\"\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} className={styles.fill} />\n          <image href={photoSrc} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n    if (isPhotoType && photo.renderWrapper) {\n      photoElement = photo.renderWrapper({\n        'children': photoElement,\n        'data-src': photoSrc,\n      });\n    }\n\n    return (\n      <div className={styles.photoWrapper} key={i}>\n        {photoElement}\n      </div>\n    );\n  });\n\n  const othersElement = canShowOthers ? (\n    <div className={styles.photoWrapper}>\n      <CounterTypography caps weight=\"1\" className={classNames(styles.item, styles.counter)}>\n        +{count}\n      </CounterTypography>\n    </div>\n  ) : null;\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootRef}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        avatarsPositionStyles[avatarsPosition],\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles.photos} aria-hidden>\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && <Footnote className={styles.text}>{children}</Footnote>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useDirection","useExternRef","RootComponent","Caption","Footnote","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","avatarsPositionStyles","avatarsPositionInlineStart","avatarsPositionInlineEnd","avatarsPositionBlockStart","PathElement","photoSize","direction","props","radius","circle","cx","cy","r","path","d","photoSizes","UsersStack","photos","visibleCount","count","Math","max","length","size","children","avatarsPosition","getRootRef","restProps","cmpId","useId","directionRef","textDirection","rootRef","canShowOthers","CounterTypography","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","isPhotoType","photoSrc","src","photoElement","svg","xmlns","className","item","aria-hidden","display","defs","clipPath","use","href","g","fill","image","width","height","stroke","renderWrapper","div","photoWrapper","othersElement","caps","weight","counter","baseClassName","host","text"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './UsersStack.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst avatarsPositionStyles = {\n  'inline-start': styles.avatarsPositionInlineStart,\n  'inline-end': styles.avatarsPositionInlineEnd,\n  'block-start': styles.avatarsPositionBlockStart,\n};\n\nexport type UsersStackRenderWrapperProps = {\n  children: React.ReactElement;\n  ['data-src']: string;\n};\n\nexport type UsersStackPhoto = {\n  src: string;\n  renderWrapper?: (props: UsersStackRenderWrapperProps) => React.ReactElement;\n};\n\nexport interface UsersStackProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии либо массив структур типа `UsersStackPhoto`:\n   */\n  photos?: string[] | UsersStackPhoto[];\n  /**\n   * Размер аватарок\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n  /**\n   * Определяет положение аватаров\n   * Режим `block-start` рекомендуется использовать с размером `m`\n   */\n  avatarsPosition?: 'inline-start' | 'block-start' | 'inline-end';\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: 'circle' | 'right' | 'left';\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\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 16:\n          return (\n            <path\n              d=\"M14,13.285A8 8 0 0 1 8 16A8 8 0 0 1 8 0A8 8 0 0 1 14 2.715A8 8 0 0 0 14,13.285\"\n              {...props}\n            />\n          );\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\nconst photoSizes: Record<NonNullable<UsersStackProps['size']>, PhotoSizeType> = {\n  s: 16,\n  m: 24,\n  l: 32,\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 = 'm',\n  children,\n  avatarsPosition = 'inline-start',\n  ...restProps\n}: UsersStackProps): React.ReactNode => {\n  const cmpId = React.useId();\n  const direction = useConfigDirection();\n\n  const canShowOthers = count > 0 && count < 100 && size !== 's';\n  const CounterTypography = size === 'l' ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip =\n    direction === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right';\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    const isPhotoType = typeof photo === 'object';\n    const photoSrc = isPhotoType ? photo.src : photo;\n\n    let photoElement = (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={classNames(styles.photo, styles.item)}\n        aria-hidden\n        display=\"block\"\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} className={styles.fill} />\n          <image href={photoSrc} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n    if (isPhotoType && photo.renderWrapper) {\n      photoElement = photo.renderWrapper({\n        'children': photoElement,\n        'data-src': photoSrc,\n      });\n    }\n\n    return (\n      <div className={styles.photoWrapper} key={i}>\n        {photoElement}\n      </div>\n    );\n  });\n\n  const othersElement = canShowOthers ? (\n    <div className={styles.photoWrapper}>\n      <CounterTypography caps weight=\"1\" className={classNames(styles.item, styles.counter)}>\n        +{count}\n      </CounterTypography>\n    </div>\n  ) : null;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        avatarsPositionStyles[avatarsPosition],\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles.photos} aria-hidden>\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && <Footnote className={styles.text}>{children}</Footnote>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useConfigDirection","RootComponent","Caption","Footnote","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","avatarsPositionStyles","avatarsPositionInlineStart","avatarsPositionInlineEnd","avatarsPositionBlockStart","PathElement","photoSize","direction","props","radius","circle","cx","cy","r","path","d","photoSizes","UsersStack","photos","visibleCount","count","Math","max","length","size","children","avatarsPosition","restProps","cmpId","useId","canShowOthers","CounterTypography","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","isPhotoType","photoSrc","src","photoElement","svg","xmlns","className","item","aria-hidden","display","defs","clipPath","use","href","g","fill","image","width","height","stroke","renderWrapper","div","photoWrapper","othersElement","caps","weight","counter","baseClassName","host","text"],"mappings":"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"}

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

@@ -36,8 +36,8 @@
 }
 
 .item {
-  block-size: var(--vkui_internal--UsersStack_item_size);
   min-inline-size: var(--vkui_internal--UsersStack_item_size);
+  block-size: var(--vkui_internal--UsersStack_item_size);
 }
 
 .photo {
@@ -45,10 +45,10 @@
 }
 
 .counter {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   padding-inline: var(--vkui--spacing_size_xs);
   color: var(--vkui--color_text_contrast_themed);
   background: var(--vkui--color_icon_secondary);
@@ -65,14 +65,14 @@
 }
 
 .text {
-  min-inline-size: 0;
   flex: 1;
+  min-inline-size: 0;
 }
 
 .avatarsPositionBlockStart .text {
-  text-align: center;
   -webkit-margin-before: 8px;
           margin-block-start: 8px;
+  text-align: center;
 }
 
 .avatarsPositionInlineStart .text {

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

@@ -2,8 +2,8 @@
   --vkui_internal--view_animation_translateY_initial: 80px;
 
   position: relative;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
   word-wrap: break-word;
 }
 
@@ -19,15 +19,15 @@
 }
 
 .panelOverlay {
-  display: none;
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_panel_header_fade);
+  display: none;
   inline-size: 100%;
   block-size: 100%;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  background-color: #000;
   pointer-events: none;
-  z-index: var(--vkui_internal--z_index_panel_header_fade);
+  background-color: #000;
 }
 
 .panelPrev .panelOverlay {
@@ -64,8 +64,8 @@
 }
 
 .panels {
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
 }
 
 .panelIn {
@@ -74,9 +74,9 @@
 
 .panel {
   position: relative;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
   isolation: isolate;
 }
 

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

@@ -1,31 +1,31 @@
 /* stylelint-disable declaration-no-important */
 .host {
   position: absolute !important;
-  block-size: 1px !important;
   inline-size: 1px !important;
+  block-size: 1px !important;
   padding: 0 !important;
   margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
-  white-space: nowrap !important;
-  clip: rect(0, 0, 0, 0) !important;
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
   overflow: hidden !important;
-  border: 0 !important;
-  opacity: 0;
+  white-space: nowrap !important;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  border: 0 !important;
+  opacity: 0;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
 }
 /* Чтобы фокус скринридера, попавший на скрытый инпут был виден.
  * Особенно актуально для Android TalkBack */
 .focusableInput {
-  inset-inline-start: 0;
   inset-block-start: 0;
-  block-size: 100% !important;
+  inset-inline-start: 0;
   inline-size: 100% !important;
+  block-size: 100% !important;
+  pointer-events: none;
   clip: auto !important;
   -webkit-clip-path: none !important;
           clip-path: none !important;
-  pointer-events: none;
 }
 /* stylelint-enable declaration-no-important */

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

@@ -18,26 +18,26 @@
 }
 
 .formIn {
+  position: relative;
+  display: flex;
   flex: 1;
   min-inline-size: 0;
-  display: flex;
-  position: relative;
 }
 
 .textarea {
   box-sizing: border-box;
-  inline-size: 100%;
   flex: 1;
+  inline-size: 100%;
   min-inline-size: 0;
+  max-block-size: 120px;
   margin: 0;
-  background: transparent;
-  border: 0;
-  resize: none;
   color: var(--vkui--color_text_primary);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  max-block-size: 120px;
+  resize: none;
+  background: transparent;
+  border: 0;
 }
 
 .textarea::placeholder {
@@ -87,11 +87,11 @@
 
 .ios .formIn {
   box-sizing: border-box;
+  margin-block: 8px;
+  margin-inline: 0;
   background-color: var(--vkui--color_write_bar_input_background);
   border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
   border-radius: 18px;
-  margin-block: 8px;
-  margin-inline: 0;
 }
 
 .ios .formIn:first-child {
@@ -104,10 +104,9 @@
   --vkui_internal--writebar-right-gap: calc(-1 * var(--vkui--size_border--regular));
   --vkui_internal--writebar-vertical-gap: calc(var(--vkui_internal--writebar-right-gap) - 8px);
 
+  margin-block: var(--vkui_internal--writebar-vertical-gap);
   -webkit-margin-end: var(--vkui_internal--writebar-right-gap);
-
           margin-inline-end: var(--vkui_internal--writebar-right-gap);
-  margin-block: var(--vkui_internal--writebar-vertical-gap);
 }
 
 .ios .textarea {

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

@@ -1,14 +1,14 @@
 .host {
-  background: none;
-  border: 0;
   position: relative;
-  color: var(--vkui--color_icon_secondary);
-  block-size: 52px;
   inline-size: 44px;
+  block-size: 52px;
+  padding: 0;
+  margin: 0;
+  color: var(--vkui--color_icon_secondary);
   cursor: pointer;
+  background: none;
+  border: 0;
   border-radius: var(--vkui--size_border_radius--regular);
-  margin: 0;
-  padding: 0;
 }
 
 .in {
@@ -20,8 +20,8 @@
 }
 
 .host:disabled {
-  opacity: 0.4;
   pointer-events: none;
+  opacity: 0.4;
 }
 
 .active {
@@ -32,7 +32,7 @@
   position: absolute;
   inset-block-start: 6px;
   inset-inline-end: 2px;
-  box-shadow: 0 0 0 2px var(--vkui--color_background_modal);
+  box-shadow: 0 0 0 2px var(--vkui--color_background_contrast_themed);
 }
 
 .ios .counter {
@@ -54,9 +54,9 @@
 
 .ios.modeSend,
 .ios.modeDone {
-  color: var(--vkui--color_icon_accent_themed);
   inline-size: 48px;
   padding-inline: 0;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .ios.modeSend,

package/dist/cssm/context/CalendarDirectionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/CalendarDirectionContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { type Direction } from '../hooks/useDirection';\n\nexport interface CalendarDirectionContextProps {\n  direction: Direction;\n}\n\nexport const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({\n  direction: 'ltr',\n});\n\nexport const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);\n"],"names":["createContext","useContext","CalendarDirectionContext","direction","useCalendarDirectionContext"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAOlD,OAAO,MAAMC,2BAA2BF,cAA6C;IACnFG,WAAW;AACb,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAMH,WAAWC,0BAA0B"}
+{"version":3,"sources":["../../../src/context/CalendarDirectionContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { type Direction } from '../lib/direction';\n\nexport interface CalendarDirectionContextProps {\n  direction: Direction;\n}\n\nexport const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({\n  direction: 'ltr',\n});\n\nexport const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);\n"],"names":["createContext","useContext","CalendarDirectionContext","direction","useCalendarDirectionContext"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAOlD,OAAO,MAAMC,2BAA2BF,cAA6C;IACnFG,WAAW;AACb,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAMH,WAAWC,0BAA0B"}

package/dist/cssm/helpers/getValueByKey.js

@@ -0,0 +1,17 @@
+export const getRequiredValueByKey = (key, map)=>{
+    if (!map.hasOwnProperty(key)) {
+        throw new Error(`getRequiredValueByKey(${key})`);
+    }
+    return map[key];
+};
+export const getValueByKey = (key, map, defaultValue)=>{
+    if (!map.hasOwnProperty(key)) {
+        if (defaultValue) {
+            return defaultValue;
+        }
+        throw new Error(`getValueByKey(${String(key)})`);
+    }
+    return map[key];
+};
+
+//# sourceMappingURL=getValueByKey.js.map

package/dist/cssm/helpers/getValueByKey.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/helpers/getValueByKey.ts"],"sourcesContent":["export const getRequiredValueByKey = <VALUE, KEY extends PropertyKey = PropertyKey>(\n  key: KEY,\n  map: Record<KEY, VALUE>,\n): VALUE => {\n  if (!map.hasOwnProperty(key)) {\n    throw new Error(`getRequiredValueByKey(${key})`);\n  }\n  return map[key];\n};\n\nexport const getValueByKey = <VALUE, KEY extends PropertyKey = PropertyKey>(\n  key: KEY,\n  map: {\n    [key: string]: VALUE;\n  },\n  defaultValue: VALUE,\n): VALUE => {\n  if (!map.hasOwnProperty(key)) {\n    if (defaultValue) {\n      return defaultValue;\n    }\n    throw new Error(`getValueByKey(${String(key)})`);\n  }\n  return map[key];\n};\n"],"names":["getRequiredValueByKey","key","map","hasOwnProperty","Error","getValueByKey","defaultValue","String"],"mappings":"AAAA,OAAO,MAAMA,wBAAwB,CACnCC,KACAC;IAEA,IAAI,CAACA,IAAIC,cAAc,CAACF,MAAM;QAC5B,MAAM,IAAIG,MAAM,CAAC,sBAAsB,EAAEH,IAAI,CAAC,CAAC;IACjD;IACA,OAAOC,GAAG,CAACD,IAAI;AACjB,EAAE;AAEF,OAAO,MAAMI,gBAAgB,CAC3BJ,KACAC,KAGAI;IAEA,IAAI,CAACJ,IAAIC,cAAc,CAACF,MAAM;QAC5B,IAAIK,cAAc;YAChB,OAAOA;QACT;QACA,MAAM,IAAIF,MAAM,CAAC,cAAc,EAAEG,OAAON,KAAK,CAAC,CAAC;IACjD;IACA,OAAOC,GAAG,CAACD,IAAI;AACjB,EAAE"}

package/dist/cssm/hooks/useAutoDetectDirection.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { useDOM } from "../lib/dom.js";
+export const useAutoDetectDirection = (directionProp)=>{
+    const { window, document } = useDOM();
+    return React.useMemo(()=>{
+        if (directionProp) {
+            return directionProp;
+        }
+        if (!window || !document) {
+            return 'ltr';
+        }
+        const styleDeclaration = window.getComputedStyle(document.body);
+        return styleDeclaration.direction || 'ltr';
+    }, [
+        directionProp,
+        document,
+        window
+    ]);
+};
+
+//# sourceMappingURL=useAutoDetectDirection.js.map

package/dist/cssm/hooks/useAutoDetectDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useAutoDetectDirection.ts"],"sourcesContent":["import * as React from 'react';\nimport { type Direction } from '../lib/direction';\nimport { useDOM } from '../lib/dom';\n\nexport const useAutoDetectDirection = (directionProp: Direction | undefined): Direction => {\n  const { window, document } = useDOM();\n\n  return React.useMemo(() => {\n    if (directionProp) {\n      return directionProp;\n    }\n    if (!window || !document) {\n      return 'ltr';\n    }\n    const styleDeclaration = window.getComputedStyle(document.body);\n    return (styleDeclaration.direction as Direction) || 'ltr';\n  }, [directionProp, document, window]);\n};\n"],"names":["React","useDOM","useAutoDetectDirection","directionProp","window","document","useMemo","styleDeclaration","getComputedStyle","body","direction"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAQ,gBAAa;AAEpC,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IAE7B,OAAOD,MAAMM,OAAO,CAAC;QACnB,IAAIH,eAAe;YACjB,OAAOA;QACT;QACA,IAAI,CAACC,UAAU,CAACC,UAAU;YACxB,OAAO;QACT;QACA,MAAME,mBAAmBH,OAAOI,gBAAgB,CAACH,SAASI,IAAI;QAC9D,OAAO,AAACF,iBAAiBG,SAAS,IAAkB;IACtD,GAAG;QAACP;QAAeE;QAAUD;KAAO;AACtC,EAAE"}

package/dist/cssm/hooks/useConfigDirection.js

@@ -0,0 +1,7 @@
+import { useConfigProvider } from "../components/ConfigProvider/ConfigProviderContext.js";
+export function useConfigDirection() {
+    const { direction } = useConfigProvider();
+    return direction || 'ltr';
+}
+
+//# sourceMappingURL=useConfigDirection.js.map

package/dist/cssm/hooks/useConfigDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useConfigDirection.ts"],"sourcesContent":["import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';\nimport { type Direction } from '../lib/direction';\n\nexport function useConfigDirection(): Direction {\n  const { direction } = useConfigProvider();\n\n  return direction || 'ltr';\n}\n"],"names":["useConfigProvider","useConfigDirection","direction"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,wDAAqD;AAGvF,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGF;IAEtB,OAAOE,aAAa;AACtB"}