@moysklad/uikit 28.1.0 → 30.4.0

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,77 @@
+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 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 [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(tooltipZIndex),
+                children: [
+                    visibleViewers.map((viewer, index)=>/*#__PURE__*/ jsx(ViewersTooltip, {
+                            viewers: viewer,
+                            testId: testId,
+                            zIndex: tooltipZIndex,
+                            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: tooltipZIndex,
+                        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;
+};

package/dist/components/ViewersStack/components/Counter/Counter.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../../common/index.js";
+import { Text, TextColor } from "../../../Text/Text.js";
+import common_module from "../common.module.js";
+import Counter_module from "./Counter.module.js";
+const Counter = ({ count, animated, className, ...restProps })=>{
+    const label = `+${count}`;
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        className: cn(common_module.wrapper, className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn(Counter_module.container, animated && common_module.animated),
+                "data-text": label
+            }),
+            /*#__PURE__*/ jsx(Text.Caption, {
+                testId: "counter",
+                colorToken: TextColor.primary,
+                className: common_module.text,
+                children: label
+            })
+        ]
+    });
+};
+Counter.displayName = 'Counter';
+export { Counter };

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

@@ -0,0 +1,5 @@
+import "./Counter_module.css";
+const Counter_module = {
+    container: "container-AMsfBs"
+};
+export default Counter_module;

package/dist/components/ViewersStack/components/Counter/Counter_module.css

@@ -0,0 +1,20 @@
+.container-AMsfBs {
+  background-color: var(--border-normal);
+  border: 1px solid var(--border-normal);
+  border-radius: 14px;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  padding: 0 4px;
+  display: inline-flex;
+  position: relative;
+}
+
+.container-AMsfBs:after {
+  content: attr(data-text);
+  visibility: hidden;
+  white-space: nowrap;
+  font-size: 12px;
+  display: block;
+}
+

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

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+import { type TooltipProps } from '../../../Tooltip/Tooltip';
+import type { ColoredViewer } from '../../types';
+type OmittedTooltipProps = 'visible' | 'onVisibleChange' | 'overlay' | 'trigger' | 'hideCloseButton' | 'placement' | 'offset';
+type ViewersTooltipCoreProps = Omit<TooltipProps, OmittedTooltipProps> & {
+    viewers: ColoredViewer | ColoredViewer[];
+    placement?: TooltipProps['placement'];
+    offset?: TooltipProps['offset'];
+};
+export type ViewersTooltipProps = PropsWithChildren<ViewersTooltipCoreProps>;
+export declare const ViewersTooltip: {
+    ({ children, viewers, overlayClassName, placement, offset, testId, ...restProps }: ViewersTooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/ViewersStack/components/ViewersTooltip/ViewersTooltip.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cn } from "../../../../common/index.js";
+import { Placement, Tooltip } from "../../../Tooltip/Tooltip.js";
+import { ViewersTooltipOverlayItem } from "../ViewersTooltipOverlayItem/ViewersTooltipOverlayItem.js";
+import ViewersTooltip_module from "./ViewersTooltip.module.js";
+const ViewersTooltip = ({ children, viewers, overlayClassName, placement = Placement.BOTTOM_LEFT, offset = [
+    -10,
+    0
+], testId, ...restProps })=>{
+    const [visible, setVisible] = useState(false);
+    const list = useMemo(()=>{
+        if (Array.isArray(viewers)) return viewers;
+        return [
+            viewers
+        ];
+    }, [
+        viewers
+    ]);
+    return /*#__PURE__*/ jsx(Tooltip, {
+        ...restProps,
+        trigger: "hover",
+        visible: visible,
+        onVisibleChange: setVisible,
+        offset: offset,
+        placement: placement,
+        testId: testId,
+        hideCloseButton: true,
+        overlayClassName: cn(ViewersTooltip_module.overlay, overlayClassName),
+        overlay: /*#__PURE__*/ jsx("div", {
+            className: ViewersTooltip_module.overlayItems,
+            "data-test-id": "overlay-items",
+            children: list.map((viewer, index)=>/*#__PURE__*/ jsx(ViewersTooltipOverlayItem, {
+                    ...viewer
+                }, `${viewer.id}-${index}`))
+        }),
+        children: children
+    });
+};
+ViewersTooltip.displayName = 'ViewersTooltip';
+export { ViewersTooltip };

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

@@ -0,0 +1,6 @@
+import "./ViewersTooltip_module.css";
+const ViewersTooltip_module = {
+    overlay: "overlay-trbx8j",
+    overlayItems: "overlayItems-g_vTzt"
+};
+export default ViewersTooltip_module;

package/dist/components/ViewersStack/components/ViewersTooltip/ViewersTooltip_module.css

@@ -0,0 +1,14 @@
+.overlay-trbx8j {
+  width: fit-content;
+}
+
+.overlayItems-g_vTzt {
+  flex-direction: column;
+  justify-content: start;
+  gap: 8px;
+  max-width: 256px;
+  max-height: 400px;
+  display: flex;
+  overflow: auto;
+}
+

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

@@ -0,0 +1,6 @@
+import { type ColoredViewer } from '../../types';
+export declare const isOverflowed: <T extends HTMLElement>(element: T) => boolean;
+export declare const ViewersTooltipOverlayItem: {
+    ({ id, label, image, color, }: ColoredViewer): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/ViewersStack/components/ViewersTooltipOverlayItem/ViewersTooltipOverlayItem.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cn } from "../../../../common/index.js";
+import { Hint } from "../../../Hint/Hint.js";
+import { Text, TextColor } from "../../../Text/Text.js";
+import { Placement } from "../../../Tooltip/Tooltip.js";
+import { Size } from "../../types.js";
+import { Avatar } from "../Avatar/Avatar.js";
+import ViewersTooltipOverlayItem_module from "./ViewersTooltipOverlayItem.module.js";
+const isOverflowed = (element)=>element.scrollWidth > element.clientWidth;
+const ViewersTooltipOverlayItem = ({ id, label, image, color })=>{
+    const labelRef = useRef(null);
+    const [hintVisibility, setHintVisibility] = useState(false);
+    const handleVisibleChange = (visible)=>{
+        if (!labelRef.current) return;
+        if (visible && isOverflowed(labelRef.current)) setHintVisibility(true);
+        if (!visible) setHintVisibility(false);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: ViewersTooltipOverlayItem_module.container,
+        "data-test-id": "overlay-item",
+        children: [
+            /*#__PURE__*/ jsx(Avatar, {
+                size: Size.L,
+                color: color,
+                image: image,
+                label: label,
+                testId: `${id}-avatar`
+            }),
+            /*#__PURE__*/ jsx(Hint, {
+                mouseEnterDelay: 0.3,
+                mouseLeaveDelay: 0,
+                zIndex: 100,
+                visible: hintVisibility,
+                placement: Placement.BOTTOM,
+                onVisibleChange: handleVisibleChange,
+                overlay: /*#__PURE__*/ jsx(Text.Body, {
+                    testId: `${id}-label-hint-text`,
+                    colorToken: TextColor.invert,
+                    children: label
+                }),
+                children: /*#__PURE__*/ jsx(Text.Body, {
+                    className: cn(ViewersTooltipOverlayItem_module.ellipsis, ViewersTooltipOverlayItem_module.paddingRight),
+                    ref: labelRef,
+                    testId: `${id}-label`,
+                    children: label
+                })
+            })
+        ]
+    });
+};
+ViewersTooltipOverlayItem.displayName = 'ViewersTooltipOverlayItem';
+export { ViewersTooltipOverlayItem, isOverflowed };

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

@@ -0,0 +1,7 @@
+import "./ViewersTooltipOverlayItem_module.css";
+const ViewersTooltipOverlayItem_module = {
+    container: "container-o_NQY9",
+    ellipsis: "ellipsis-owqt58",
+    paddingRight: "paddingRight-aaAaAO"
+};
+export default ViewersTooltipOverlayItem_module;

package/dist/components/ViewersStack/components/ViewersTooltipOverlayItem/ViewersTooltipOverlayItem_module.css

@@ -0,0 +1,18 @@
+.container-o_NQY9 {
+  cursor: default;
+  justify-content: start;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.ellipsis-owqt58 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.paddingRight-aaAaAO {
+  padding-right: 8px;
+}
+

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

@@ -0,0 +1,7 @@
+import "./common_module.css";
+const common_module = {
+    wrapper: "wrapper-PSBfa1",
+    text: "text-sRc9nc",
+    animated: "animated-R8DWjF"
+};
+export default common_module;