@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/Textfield/components/InputContainer/InputContainer_module.css

@@ -10,9 +10,7 @@
 }
 
 .inputContainer-gy10zl:focus-visible {
-  --input-shadow: var(--invert-accent-normal, #7eb4ff);
-  box-shadow: 0 0 4px 0 var(--input-shadow);
-  border: 1px solid var(--border-accent, #036ce5);
+  border: 1px solid var(--border-focused, #091739);
 }
 
 .inputContainer-gy10zl {
@@ -22,9 +20,7 @@
 }
 
 .inputContainer-gy10zl.focused-ORhBSR {
-  --input-shadow: var(--invert-accent-normal, #7eb4ff);
-  box-shadow: 0 0 4px 0 var(--input-shadow);
-  border: 1px solid var(--border-accent, #036ce5);
+  border: 1px solid var(--border-focused, #091739);
 }
 
 .inputContainer-gy10zl.disabled-NuqWEY {
@@ -37,7 +33,7 @@
 }
 
 .inputContainer-gy10zl.error-BWY9xH, .inputContainer-gy10zl.error-BWY9xH:hover {
-  border-color: var(--colorful-red-600);
+  border-color: var(--border-critical);
 }
 
 .actionsBar-hEerOT {
@@ -45,3 +41,36 @@
   padding-inline: 12px;
 }
 
+.files-dNxdJy {
+  padding-inline: 12px;
+}
+
+.actions-U6Jj6H {
+  justify-content: flex-end;
+  align-items: center;
+  column-gap: 4px;
+  margin-bottom: 8px;
+  padding-left: 12px;
+  padding-right: 8px;
+  display: flex;
+}
+
+.actionsL-y4vtZP {
+  column-gap: 8px;
+}
+
+.mainBtnDivider-omXg1b {
+  background-color: var(--border-normal);
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+}
+
+.mainBtnDividerLarge-hXiU5u {
+  height: 20px;
+}
+
+.fileUploader-AHKIZK {
+  padding: 4px 0;
+}
+

package/dist/components/Textfield/components/ResizeHandle/ResizeHandle.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+interface ResizeHandleProps {
+    direction: 'top' | 'bottom';
+    minHeight: number;
+    maxHeight?: number;
+    startHeight: number;
+    onHeightChange: (height: number) => void;
+}
+export declare const ResizeHandle: FC<ResizeHandleProps>;
+export {};

package/dist/components/Textfield/components/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "../../../../common/css/cn.js";
+import { Drag12Icon } from "../../../../icon/index.js";
+import ResizeHandle_module from "./ResizeHandle.module.js";
+const getDelta = (direction, startY, clientY)=>{
+    if ('top' === direction) return startY - clientY;
+    return clientY - startY;
+};
+const ResizeHandle = ({ direction, onHeightChange, startHeight, minHeight, maxHeight })=>{
+    const mouseMoveListenerRef = useRef(null);
+    const mouseUpListenerRef = useRef(null);
+    useEffect(()=>()=>{
+            if (mouseMoveListenerRef.current) window.removeEventListener('mousemove', mouseMoveListenerRef.current);
+            if (mouseUpListenerRef.current) window.removeEventListener('mouseup', mouseUpListenerRef.current);
+        }, []);
+    const handleMouseDown = useCallback((e)=>{
+        e.preventDefault();
+        const startY = e.clientY;
+        const handleMouseMove = (moveEvent)=>{
+            const delta = getDelta(direction, startY, moveEvent.clientY);
+            let next = Math.max(minHeight, startHeight + delta);
+            if (maxHeight) next = Math.min(maxHeight, next);
+            onHeightChange(next);
+        };
+        const handleMouseUp = ()=>{
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            mouseMoveListenerRef.current = null;
+            mouseUpListenerRef.current = null;
+        };
+        mouseMoveListenerRef.current = handleMouseMove;
+        mouseUpListenerRef.current = handleMouseUp;
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+    }, [
+        direction,
+        minHeight,
+        maxHeight,
+        startHeight,
+        onHeightChange
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(ResizeHandle_module.handle, ResizeHandle_module[direction]),
+        onMouseDown: handleMouseDown,
+        children: /*#__PURE__*/ jsx(Drag12Icon, {})
+    });
+};
+ResizeHandle.displayName = 'ResizeHandle';
+export { ResizeHandle };

package/dist/components/Textfield/components/ResizeHandle/ResizeHandle.module.js

@@ -0,0 +1,7 @@
+import "./ResizeHandle_module.css";
+const ResizeHandle_module = {
+    handle: "handle-KOfccF",
+    top: "top-i74sAn",
+    bottom: "bottom-O20AqX"
+};
+export default ResizeHandle_module;

package/dist/components/Textfield/components/ResizeHandle/ResizeHandle_module.css

@@ -0,0 +1,21 @@
+.handle-KOfccF {
+  cursor: ns-resize;
+  width: 12px;
+  height: 12px;
+  color: var(--elements-normal);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  right: 1px;
+}
+
+.top-i74sAn {
+  top: 1px;
+  transform: rotate(270deg);
+}
+
+.bottom-O20AqX {
+  bottom: 1px;
+}
+

package/dist/components/Textfield/components/ResizeHandle/index.d.ts

@@ -0,0 +1 @@
+export { ResizeHandle } from './ResizeHandle';

package/dist/components/Textfield/components/ResizeHandle/index.js

@@ -0,0 +1 @@
+export { ResizeHandle } from "./ResizeHandle.js";

package/dist/components/Textfield/consts/index.d.ts

@@ -0,0 +1,2 @@
+export declare const MIN_HEIGHT_M = 96;
+export declare const MIN_HEIGHT_L = 146;

package/dist/components/Textfield/consts/index.js

@@ -0,0 +1,3 @@
+const MIN_HEIGHT_M = 96;
+const MIN_HEIGHT_L = 146;
+export { MIN_HEIGHT_L, MIN_HEIGHT_M };

package/dist/components/Textfield/types/index.d.ts

@@ -0,0 +1,12 @@
+import type { ValueOf } from '../../../common';
+import type { IFileUploaderProps, IUseFileUploaderOptions } from '../../FileUploader/FileUploader.types';
+export declare const TextfieldSize: {
+    readonly M: "m";
+    readonly L: "l";
+};
+export type TextfieldSizeValue = ValueOf<typeof TextfieldSize>;
+export type ITextfieldUseFileUploaderOptions = Omit<IUseFileUploaderOptions, 'onDrop'>;
+export interface ITextfieldFileUploaderProps extends Omit<IFileUploaderProps, 'testId'> {
+    handleOpen: () => void;
+    getInputProps: () => object;
+}

package/dist/components/Textfield/types/index.js

@@ -0,0 +1,5 @@
+const TextfieldSize = {
+    M: 'm',
+    L: 'l'
+};
+export { TextfieldSize };

package/dist/components/Textfield/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { type TextfieldSizeValue } from '../types';
+export declare const isSizeM: (size: TextfieldSizeValue) => size is "m";
+export declare const getMinHeight: (minHeightProp?: number, size?: TextfieldSizeValue) => number;

package/dist/components/Textfield/utils/index.js

@@ -0,0 +1,8 @@
+import { MIN_HEIGHT_L, MIN_HEIGHT_M } from "../consts/index.js";
+import { TextfieldSize } from "../types/index.js";
+const isSizeM = (size)=>size === TextfieldSize.M;
+const getMinHeight = (minHeightProp, size = TextfieldSize.M)=>{
+    if (void 0 !== minHeightProp && minHeightProp >= 0) return minHeightProp;
+    return isSizeM(size) ? MIN_HEIGHT_M : MIN_HEIGHT_L;
+};
+export { getMinHeight, isSizeM };

package/dist/components/Toggle/Toggle.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { cn } from "../../common/css/cn.js";
 import { getOptionalTestId } from "../../common/testId/index.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Indicator } from "../Indicator/Indicator.js";
 import { getIndicatorProps } from "../Indicator/Indicator.helpers.js";
-import { Info } from "../Info/Info.js";
 import { ToggleContent } from "./components/ToggleContent.js";
 import { ToggleHelp } from "./components/ToggleHelp.js";
 import { ThumbChecked } from "./icons/ThumbChecked.js";

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
 import { type TooltipProps as RcTooltipProps } from 'rc-tooltip/es/Tooltip';
 import type { IHasTestId, ValueOf } from '../../common/types';
+import type { TTooltipBodyColorToken } from './types';
 export declare const Placement: {
     readonly TOP: "top";
     readonly TOP_LEFT: "topLeft";
@@ -22,5 +23,7 @@ export interface TooltipProps extends IHasTestId, RcTooltipProps {
     afterHide?: () => void;
     offset: [number, number];
     hideCloseButton?: boolean;
+    arrowClassName?: string;
+    colorToken?: TTooltipBodyColorToken;
 }
-export declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ testId, id, overlay, offset, visible, onVisibleChange, placement, trigger, children, afterHide, getTooltipContainer, zIndex, hideCloseButton, overlayClassName, arrowClassName, colorToken, arrowContent, ...restProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.js

@@ -4,7 +4,7 @@ import rc_tooltip from "rc-tooltip";
 import { cn } from "../../common/css/cn.js";
 import { RemoveClose12Icon } from "../../icon/index.js";
 import { ArrowIcon } from "./ArrowIcon.js";
-import { ArrowAlign } from "./consts.js";
+import { ArrowAlign } from "./constants/index.js";
 import { useCorrectedArrowStyles } from "./hooks.js";
 import Tooltip_module from "./Tooltip.module.js";
 const alignPointsMap = {
@@ -35,10 +35,9 @@ const Placement = {
     BOTTOM_LEFT: 'bottomLeft',
     BOTTOM_RIGHT: 'bottomRight'
 };
-const Tooltip = (props)=>{
-    const { testId, id, overlay, offset, visible, onVisibleChange, placement = Placement.RIGHT, trigger = [
-        'click'
-    ], children, afterHide, getTooltipContainer, zIndex, hideCloseButton = false, overlayClassName, arrowContent, ...otherProps } = props;
+const Tooltip = ({ testId, id, overlay, offset, visible, onVisibleChange, placement = Placement.RIGHT, trigger = [
+    'click'
+], children, afterHide, getTooltipContainer, zIndex, hideCloseButton = false, overlayClassName, arrowClassName, colorToken = 'light', arrowContent, ...restProps })=>{
     const [arrowAlign, setArrowAlign] = useState(ArrowAlign.TOP_LEFT);
     const [refClose, setRefClose] = useState(null);
     const handleHide = useCallback((e)=>{
@@ -72,18 +71,19 @@ const Tooltip = (props)=>{
         const joinedXY = align.points?.join('_') ?? '';
         setArrowAlign(alignPointsMap[joinedXY] ?? Placement.TOP);
     }, []);
+    const bodyClassName = Tooltip_module[`${colorToken}ColorToken`];
     return /*#__PURE__*/ jsx(rc_tooltip, {
         id: id,
         visible: visible,
         prefixCls: "tooltip-dt",
-        overlayClassName: cn(Tooltip_module.overlayWrapper, overlayClassName),
+        overlayClassName: cn(Tooltip_module.overlayWrapper, bodyClassName, overlayClassName),
         placement: placement,
         trigger: trigger,
         destroyTooltipOnHide: true,
         arrowContent: /*#__PURE__*/ jsx("div", {
-            className: cn(Tooltip_module.arrowIcon, cssCorrectedArrowAlign),
+            className: cn(Tooltip_module.arrowIcon, cssCorrectedArrowAlign, bodyClassName),
             children: arrowContent ? arrowContent : /*#__PURE__*/ jsx(ArrowIcon, {
-                className: Tooltip_module.arrow
+                className: cn(Tooltip_module.arrow, arrowClassName)
             })
         }),
         onVisibleChange: onVisibleChange,
@@ -105,7 +105,7 @@ const Tooltip = (props)=>{
                 })
             ]
         }),
-        ...otherProps,
+        ...restProps,
         children: children
     });
 };

package/dist/components/Tooltip/Tooltip.module.js

@@ -26,6 +26,8 @@ const Tooltip_module = {
     right_top: "right_top-v2LpVW",
     rightTop: "right_top-v2LpVW",
     left_top: "left_top-i5Yqg8",
-    leftTop: "left_top-i5Yqg8"
+    leftTop: "left_top-i5Yqg8",
+    lightColorToken: "lightColorToken-IGd7lI",
+    darkColorToken: "darkColorToken-BeXlX6"
 };
 export default Tooltip_module;

package/dist/components/Tooltip/Tooltip_module.css

@@ -1,6 +1,6 @@
 .overlayWrapper-Nfxvlh {
   cursor: initial;
-  background: var(--light-white);
+  background: var(--tooltip-body-background, var(--light-white));
   border-radius: 4px;
   padding: 20px 24px 20px 20px;
   position: absolute;
@@ -16,12 +16,12 @@
 }
 
 .arrowIcon-d14ZUp .arrow-xeigvs {
-  fill: var(--bgd-white, #fff);
+  fill: var(--tooltip-body-background, var(--bgd-white, #fff));
 }
 
 .closeIcon-YhM5xC {
   cursor: pointer;
-  color: var(--dark-grey-dark-900);
+  color: var(--tooltip-close-icon-color, var(--dark-grey-dark-900));
   position: absolute;
   top: 13px;
   right: 13px;
@@ -96,3 +96,13 @@
   transform: rotate(180deg);
 }
 
+.lightColorToken-IGd7lI {
+  --tooltip-body-background: var(--bgd-white);
+  --tooltip-close-icon-color: var(--text-primary);
+}
+
+.darkColorToken-BeXlX6 {
+  --tooltip-body-background: var(--invert-background);
+  --tooltip-close-icon-color: var(--invert-text);
+}
+

package/dist/components/Tooltip/{consts.d.ts → constants/ArrowAlign.d.ts}

@@ -1,4 +1,3 @@
-import type { ValueOf } from '../../common/types';
 export declare const ArrowAlign: {
     readonly TOP_CENTER: "top_center";
     readonly TOP_LEFT: "top_left";
@@ -13,4 +12,3 @@ export declare const ArrowAlign: {
     readonly TOP_RIGHT: "top_right";
     readonly BOTTOM_RIGHT: "bottom_right";
 };
-export type ArrowAlignValue = ValueOf<typeof ArrowAlign>;

package/dist/components/Tooltip/constants/TooltipBodyColor.d.ts

@@ -0,0 +1,4 @@
+export declare const TooltipBodyColor: {
+    readonly light: "light";
+    readonly dark: "dark";
+};

package/dist/components/Tooltip/constants/TooltipBodyColor.js

@@ -0,0 +1,5 @@
+const TooltipBodyColor = {
+    light: 'light',
+    dark: 'dark'
+};
+export { TooltipBodyColor };

package/dist/components/Tooltip/constants/index.d.ts

@@ -0,0 +1,2 @@
+export { ArrowAlign } from './ArrowAlign';
+export { TooltipBodyColor } from './TooltipBodyColor';

package/dist/components/Tooltip/constants/index.js

@@ -0,0 +1,2 @@
+export { ArrowAlign } from "./ArrowAlign.js";
+export { TooltipBodyColor } from "./TooltipBodyColor.js";

package/dist/components/Tooltip/hooks.d.ts

@@ -1,5 +1,5 @@
-import { type ArrowAlignValue } from './consts';
 import { type TooltipProps } from './Tooltip';
+import type { TArrowAlignValue } from './types';
 interface ReturnObj {
     correctedOffset?: [number, number];
     cssCorrectedArrowAlign?: string;
@@ -8,7 +8,7 @@ interface Options {
     offset: TooltipProps['offset'];
     placement: TooltipProps['placement'];
     styles: Record<string, string>;
-    arrowAlign: ArrowAlignValue;
+    arrowAlign: TArrowAlignValue;
 }
 export declare const useCorrectedArrowStyles: ({ offset, placement, styles, arrowAlign, }: Options) => ReturnObj;
 export {};

package/dist/components/Tooltip/hooks.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { ArrowAlign } from "./consts.js";
+import { ArrowAlign } from "./constants/index.js";
 import { Placement } from "./Tooltip.js";
 const DEFAULT_OFFSET_ADDITION = 15;
 const useCorrectedArrowStyles = ({ offset = [

package/dist/components/Tooltip/types.d.ts

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../common/types';
+import { ArrowAlign, TooltipBodyColor } from './constants';
+export type TArrowAlignValue = ValueOf<typeof ArrowAlign>;
+export type TTooltipBodyColorToken = ValueOf<typeof TooltipBodyColor>;

package/dist/components/ViewersStack/ViewersStack.d.ts

@@ -0,0 +1,13 @@
+import { type IHasTestId } from '../../common';
+import { type Viewer } from './types';
+export type ViewersStackProps = {
+    viewers: Viewer[];
+    maxVisibleCount?: number;
+    label?: string;
+    animated?: boolean;
+    tooltipZIndex?: number;
+} & IHasTestId;
+export declare const ViewersStack: {
+    ({ viewers, label, testId, animated, maxVisibleCount, tooltipZIndex, }: ViewersStackProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/ViewersStack/ViewersStack.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Text } from "../Text/Text.js";
+import { Avatar } from "./components/Avatar/Avatar.js";
+import { Counter } from "./components/Counter/Counter.js";
+import { ViewersTooltip } from "./components/ViewersTooltip/ViewersTooltip.js";
+import { COLORS, Size } from "./types.js";
+import { getColorById, getScaledItemZIndexStyle } from "./utils.js";
+import ViewersStack_module from "./ViewersStack.module.js";
+const DEFAULT_MAX_VISIBLE_COUNT = 3;
+const MIN_TOOLTIP_Z_INDEX = 2;
+const DEFAULT_TOOLTIP_Z_INDEX = 10;
+const ViewersStack = ({ viewers, label, testId, animated = true, maxVisibleCount = DEFAULT_MAX_VISIBLE_COUNT, tooltipZIndex = DEFAULT_TOOLTIP_Z_INDEX })=>{
+    const viewersLength = viewers.length;
+    const hasOverflow = viewersLength > maxVisibleCount;
+    const validatedTooltipZIndex = tooltipZIndex < MIN_TOOLTIP_Z_INDEX ? MIN_TOOLTIP_Z_INDEX : tooltipZIndex;
+    const [visibleViewers, overflowedViewers] = useMemo(()=>{
+        const coloredViewers = viewers.map((viewer)=>({
+                ...viewer,
+                color: getColorById(viewer.id, COLORS)
+            }));
+        const visibleViewers = hasOverflow ? coloredViewers.slice(0, maxVisibleCount - 1) : coloredViewers;
+        const overflowedViewers = hasOverflow ? coloredViewers.slice(maxVisibleCount - 1) : [];
+        return [
+            visibleViewers,
+            overflowedViewers
+        ];
+    }, [
+        hasOverflow,
+        maxVisibleCount,
+        viewers
+    ]);
+    if (!viewersLength) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: ViewersStack_module.wrapper,
+        "data-test-id": testId,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: ViewersStack_module.container,
+                "data-test-id": "avatars",
+                style: getScaledItemZIndexStyle(validatedTooltipZIndex),
+                children: [
+                    visibleViewers.map((viewer, index)=>/*#__PURE__*/ jsx(ViewersTooltip, {
+                            viewers: viewer,
+                            testId: testId,
+                            zIndex: validatedTooltipZIndex,
+                            children: /*#__PURE__*/ jsx(Avatar, {
+                                label: viewer.label,
+                                image: viewer.image,
+                                color: viewer.color,
+                                size: Size.M,
+                                bordered: true,
+                                animated: animated,
+                                className: ViewersStack_module.avatarsItem,
+                                testId: `${viewer.id}-avatar`
+                            })
+                        }, `${viewer.id}-${index}`)),
+                    hasOverflow && /*#__PURE__*/ jsx(ViewersTooltip, {
+                        viewers: overflowedViewers,
+                        testId: testId,
+                        zIndex: validatedTooltipZIndex,
+                        children: /*#__PURE__*/ jsx(Counter, {
+                            count: overflowedViewers.length,
+                            className: ViewersStack_module.avatarsItem,
+                            animated: animated
+                        })
+                    })
+                ]
+            }),
+            label && /*#__PURE__*/ jsx(Text.Body, {
+                as: "label",
+                testId: "label",
+                children: label
+            })
+        ]
+    });
+};
+ViewersStack.displayName = 'ViewersStack';
+export { ViewersStack };

package/dist/components/ViewersStack/ViewersStack.module.js

@@ -0,0 +1,7 @@
+import "./ViewersStack_module.css";
+const ViewersStack_module = {
+    wrapper: "wrapper-HKt5AT",
+    container: "container-Lfw1tF",
+    avatarsItem: "avatarsItem-hZ6Air"
+};
+export default ViewersStack_module;

package/dist/components/ViewersStack/ViewersStack_module.css

@@ -0,0 +1,18 @@
+.wrapper-HKt5AT {
+  align-items: center;
+  gap: 12px;
+  display: inline-flex;
+}
+
+.container-Lfw1tF {
+  align-items: center;
+  height: 20px;
+  display: inline-flex;
+  position: relative;
+}
+
+.avatarsItem-hZ6Air {
+  cursor: default;
+  margin-right: -7px;
+}
+

package/dist/components/ViewersStack/components/Avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+import { type IHasTestId } from '../../../../common';
+import { type ColoredViewer, type ColorValue, type SizeValue } from '../../types';
+export type AvatarProps = Omit<ColoredViewer, 'id'> & HTMLAttributes<HTMLDivElement> & IHasTestId & {
+    size: SizeValue;
+    bordered?: boolean;
+    color?: ColorValue;
+    animated?: boolean;
+};
+export declare const Avatar: {
+    ({ image, label, size, bordered, color, className, testId, animated, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/ViewersStack/components/Avatar/Avatar.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../../common/index.js";
+import { Text, TextColor, TextVariant } from "../../../Text/Text.js";
+import { Size } from "../../types.js";
+import common_module from "../common.module.js";
+import Avatar_module from "./Avatar.module.js";
+const Avatar = ({ image, label, size, bordered, color, className, testId, animated, ...restProps })=>{
+    const containerClassName = cn(Avatar_module.container, size === Size.M ? Avatar_module.sizeM : Avatar_module.sizeL, color && Avatar_module[color], bordered && Avatar_module.bordered, animated && common_module.animated);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn(common_module.wrapper, className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ...restProps,
+                className: containerClassName,
+                "data-test-id": testId,
+                children: image && /*#__PURE__*/ jsx("img", {
+                    "data-test-id": "image",
+                    src: image,
+                    alt: label,
+                    className: Avatar_module.image
+                })
+            }),
+            !image && /*#__PURE__*/ jsx(Text, {
+                variant: size === Size.M ? TextVariant.caption : TextVariant.body,
+                colorToken: TextColor.invert,
+                className: cn(common_module.text),
+                "data-test-id": "letter",
+                children: label.charAt(0).toUpperCase()
+            })
+        ]
+    });
+};
+Avatar.displayName = 'Avatar';
+export { Avatar };

package/dist/components/ViewersStack/components/Avatar/Avatar.module.js

@@ -0,0 +1,13 @@
+import "./Avatar_module.css";
+const Avatar_module = {
+    container: "container-cGXPpK",
+    sizeM: "sizeM-oMfsK4",
+    sizeL: "sizeL-JE5CbR",
+    green: "green-ZqE4pT",
+    yellow: "yellow-a_8Hj4",
+    pink: "pink-RJTX3n",
+    violet: "violet-E_1yLC",
+    bordered: "bordered-ZIj3OP",
+    image: "image-pj5soj"
+};
+export default Avatar_module;

package/dist/components/ViewersStack/components/Avatar/Avatar_module.css

@@ -0,0 +1,45 @@
+.container-cGXPpK {
+  width: var(--avatar-diameter);
+  height: var(--avatar-diameter);
+  min-width: var(--avatar-diameter);
+  min-height: var(--avatar-diameter);
+  background-color: var(--border-normal);
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+.sizeM-oMfsK4 {
+  --avatar-diameter: 20px;
+}
+
+.sizeL-JE5CbR {
+  --avatar-diameter: 32px;
+}
+
+.green-ZqE4pT {
+  background-color: var(--viewers-stack-green);
+}
+
+.yellow-a_8Hj4 {
+  background-color: var(--viewers-stack-yellow);
+}
+
+.pink-RJTX3n {
+  background-color: var(--viewers-stack-pink);
+}
+
+.violet-E_1yLC {
+  background-color: var(--viewers-stack-violet);
+}
+
+.bordered-ZIj3OP {
+  border: 1px solid var(--border-normal);
+}
+
+.image-pj5soj {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+

package/dist/components/ViewersStack/components/Counter/Counter.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes } from 'react';
+export type CounterProps = HTMLAttributes<HTMLDivElement> & {
+    count: number;
+    animated?: boolean;
+};
+export declare const Counter: {
+    ({ count, animated, className, ...restProps }: CounterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};