@sberbusiness/triplex-next 0.46.0 → 0.48.0

package/components/TabsLine/components/TabsLineDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineDropdown.js","sources":["../../../../src/components/TabsLine/components/TabsLineDropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { Dropdown, DropdownList, DropdownListContext, EDropdownWidth } from \"../../Dropdown\";\nimport { CaretdownStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { uniqueId } from \"lodash-es\";\nimport { ITabsLineItemProps } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLine.module.less\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\n\n/** Свойства компонента TabsLineDropdown. */\ninterface ITabsLineDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Табы дропдауна. */\n    tabs: ITabsLineItemProps[];\n    /** Выбранный таб находится в дропдауне. */\n    active: boolean;\n    /** Текст таргет кнопки дропдауна. */\n    label: string;\n    /** Коллбэк выбора таба. */\n    onClickTab: (tab: ITabsLineItemProps) => void;\n    /** Выбранный таб. */\n    selected?: ITabsLineItemProps;\n    /** Размер таба кнопки дропдауна. */\n    size?: EComponentSize;\n    /** Атрибуты кнопки дропдауна. */\n    targetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\nexport const TabsLineDropdown: React.FC<ITabsLineDropdownProps> = ({\n    tabs,\n    active,\n    label,\n    onClickTab,\n    selected,\n    size = EComponentSize.MD,\n    targetHtmlAttributes,\n    ...rest\n}) => {\n    const [activeDescendant, setActiveDescendant] = useState<string | undefined>(undefined);\n    const [opened, setOpened] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n\n    const targetRef = useRef<HTMLDivElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const instanceId = useRef(uniqueId());\n\n    useEffect(() => {\n        if (!opened) {\n            return;\n        }\n\n        const handleClickOutside = (event: Event) => {\n            if (\n                !targetRef.current?.contains(event.target as Node) &&\n                !dropdownRef.current?.contains(event.target as Node)\n            ) {\n                setOpened(false);\n            }\n        };\n\n        document.addEventListener(\"mouseup\", handleClickOutside);\n\n        return () => {\n            document.removeEventListener(\"mouseup\", handleClickOutside);\n        };\n    }, [opened]);\n\n    const handleTargetClick = () => {\n        setOpened(!opened);\n    };\n\n    const handleTargetKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (!opened) {\n            // При нажатии Enter, Space, ArrowUp или ArrowDown открывается выпадающий список.\n            if (isKey(event.code, \"ARROW_UP\") || isKey(event.code, \"ARROW_DOWN\")) {\n                event.preventDefault();\n                setOpened(true);\n            }\n        }\n\n        if (opened) {\n            // При нажатии Tab или Esc закрывается выпадающий список.\n            if (isKey(event.code, \"TAB\") || isKey(event.code, \"ESCAPE\")) {\n                setOpened(false);\n            }\n        }\n    };\n\n    const handleClickTab = (tab: ITabsLineItemProps) => {\n        onClickTab(tab);\n        setOpened(!opened);\n    };\n\n    const renderTarget = () => {\n        const { onFocus, onBlur, onMouseEnter, onMouseLeave, ...restTargetHtmlAttributes } = targetHtmlAttributes || {};\n\n        const buttonClassName = clsx(styles.tab, SIZE_TO_CLASS_NAME_MAP[size], styles.dropdownTarget, {\n            [styles.active]: active,\n        });\n\n        const caretClassName = clsx(styles.dropdownTargetCaret, { [styles.opened]: opened });\n\n        const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(true);\n            onFocus?.(e);\n        };\n\n        const handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(false);\n            onBlur?.(e);\n        };\n\n        const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(true);\n            onMouseEnter?.(e);\n        };\n\n        const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(false);\n            onMouseLeave?.(e);\n        };\n\n        return (\n            <button\n                {...restTargetHtmlAttributes}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n                className={buttonClassName}\n                onClick={handleTargetClick}\n                onKeyDown={handleTargetKeyDown}\n                type=\"button\"\n                role=\"tab\"\n                aria-haspopup=\"menu\"\n                aria-expanded={opened}\n                aria-controls={instanceId.current}\n                aria-activedescendant={activeDescendant}\n            >\n                <span className={styles.tabInner}>\n                    <span className={styles.dropdownTargetInner}>\n                        <Text\n                            size={tabsLineSizeToTextSizeMap[size]}\n                            type={active || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                        >\n                            {label}\n                        </Text>\n                        <CaretdownStrokeSrvIcon16 className={caretClassName} paletteIndex={5} />\n                    </span>\n                </span>\n            </button>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <Dropdown\n                className={styles.dropdown}\n                opened={opened}\n                setOpened={setOpened}\n                size={size}\n                width={EDropdownWidth.MIN_TARGET}\n                targetRef={targetRef}\n                ref={dropdownRef}\n            >\n                <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                    <DropdownList dropdownOpened={opened} id={instanceId.current} size={size}>\n                        {tabs.map((tab) => {\n                            const { id, label, showNotificationIcon, ...htmlDivAttributes } = tab;\n                            const className = clsx(styles.dropdownItem);\n\n                            return (\n                                <DropdownList.Item\n                                    {...(htmlDivAttributes as React.HTMLAttributes<HTMLDivElement>)}\n                                    className={className}\n                                    id={id}\n                                    key={id}\n                                    onSelect={() => {\n                                        handleClickTab(tab);\n                                    }}\n                                    selected={tab === selected}\n                                    showNotificationIcon={showNotificationIcon}\n                                >\n                                    <span className={styles.dropdownItemInner}>{label}</span>\n                                </DropdownList.Item>\n                            );\n                        })}\n                    </DropdownList>\n                </DropdownListContext.Provider>\n            </Dropdown>\n        );\n    };\n\n    return (\n        <div className={styles.tabsLineDropdown} ref={targetRef} {...rest}>\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {renderTarget()}\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {renderDropdown()}\n        </div>\n    );\n};\n"],"names":["label"],"mappings":"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"}
+{"version":3,"file":"TabsLineDropdown.js","sources":["../../../../src/components/TabsLine/components/TabsLineDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { CaretdownStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { Dropdown, DropdownList, DropdownListContext, EDropdownWidth } from \"../../Dropdown\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\nimport { ITabsLineItemProps } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLineDropdown. */\ninterface ITabsLineDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Табы дропдауна. */\n    tabs: ITabsLineItemProps[];\n    /** Выбранный таб находится в дропдауне. */\n    active: boolean;\n    /** Текст таргет кнопки дропдауна. */\n    label: string;\n    /** Коллбэк выбора таба. */\n    onClickTab: (tab: ITabsLineItemProps) => void;\n    /** Выбранный таб. */\n    selected?: ITabsLineItemProps;\n    /** Размер таба кнопки дропдауна. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n    /** Атрибуты кнопки дропдауна. */\n    targetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Таб-кнопка TabsLine, раскрывающая выпадающий список с не поместившимися табами. */\nexport const TabsLineDropdown = React.forwardRef<HTMLDivElement, ITabsLineDropdownProps>((props, ref) => {\n    const {\n        className,\n        tabs,\n        active,\n        label,\n        onClickTab,\n        selected,\n        size = EComponentSize.MD,\n        targetHtmlAttributes,\n        ...htmlDivAttributes\n    } = props;\n\n    const [activeDescendant, setActiveDescendant] = useState<string | undefined>(undefined);\n    const [opened, setOpened] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n\n    const targetRef = useRef<HTMLDivElement | null>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const instanceId = useRef(uniqueId());\n\n    /** Корневой элемент нужен и снаружи (forwarded ref), и внутри — по нему позиционируется Dropdown. */\n    const setRootRef = useCallback(\n        (node: HTMLDivElement | null) => {\n            targetRef.current = node;\n\n            if (typeof ref === \"function\") {\n                ref(node);\n            } else if (ref) {\n                ref.current = node;\n            }\n        },\n        [ref],\n    );\n\n    useEffect(() => {\n        if (!opened) {\n            return;\n        }\n\n        const handleClickOutside = (event: Event) => {\n            if (\n                !targetRef.current?.contains(event.target as Node) &&\n                !dropdownRef.current?.contains(event.target as Node)\n            ) {\n                setOpened(false);\n            }\n        };\n\n        document.addEventListener(\"mouseup\", handleClickOutside);\n\n        return () => {\n            document.removeEventListener(\"mouseup\", handleClickOutside);\n        };\n    }, [opened]);\n\n    const handleTargetClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOpened((prevOpened) => !prevOpened);\n        targetHtmlAttributes?.onClick?.(event);\n    };\n\n    const handleTargetKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (!opened) {\n            // Enter и Space раскрывают список нативной активацией кнопки, ArrowUp/ArrowDown обрабатываются здесь.\n            if (isKey(event.code, \"ARROW_UP\") || isKey(event.code, \"ARROW_DOWN\")) {\n                event.preventDefault();\n                setOpened(true);\n            }\n        } else {\n            // При нажатии Tab или Esc закрывается выпадающий список.\n            if (isKey(event.code, \"TAB\") || isKey(event.code, \"ESCAPE\")) {\n                setOpened(false);\n            }\n        }\n\n        targetHtmlAttributes?.onKeyDown?.(event);\n    };\n\n    const handleClickTab = (tab: ITabsLineItemProps) => {\n        onClickTab(tab);\n        setOpened(false);\n    };\n\n    const handleTargetFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        setFocused(true);\n        targetHtmlAttributes?.onFocus?.(event);\n    };\n\n    const handleTargetBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n        setFocused(false);\n        targetHtmlAttributes?.onBlur?.(event);\n    };\n\n    const handleTargetMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setHovered(true);\n        targetHtmlAttributes?.onMouseEnter?.(event);\n    };\n\n    const handleTargetMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setHovered(false);\n        targetHtmlAttributes?.onMouseLeave?.(event);\n    };\n\n    const renderTarget = () => {\n        // className и обработчики выделяем, чтобы не потерять переданные потребителем:\n        // ниже идут одноимённые внутренние props, и спред их бы не пережил.\n        // onClick и onKeyDown деструктурируются только ради исключения из спреда —\n        // вызываются они внутри handleTargetClick / handleTargetKeyDown.\n        const {\n            className: targetClassName,\n            onFocus,\n            onBlur,\n            onMouseEnter,\n            onMouseLeave,\n            onClick,\n            onKeyDown,\n            ...restTargetHtmlAttributes\n        } = targetHtmlAttributes || {};\n\n        return (\n            <button\n                {...restTargetHtmlAttributes}\n                onFocus={handleTargetFocus}\n                onBlur={handleTargetBlur}\n                onMouseEnter={handleTargetMouseEnter}\n                onMouseLeave={handleTargetMouseLeave}\n                className={clsx(\n                    styles.tab,\n                    SIZE_TO_CLASS_NAME_MAP[size],\n                    styles.dropdownTarget,\n                    {\n                        [styles.active]: active,\n                    },\n                    targetClassName,\n                )}\n                onClick={handleTargetClick}\n                onKeyDown={handleTargetKeyDown}\n                type=\"button\"\n                role=\"tab\"\n                aria-haspopup=\"menu\"\n                aria-expanded={opened}\n                aria-controls={instanceId.current}\n                aria-activedescendant={activeDescendant}\n            >\n                <span className={styles.dropdownTargetInner}>\n                    <Text\n                        size={tabsLineSizeToTextSizeMap[size]}\n                        type={active || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                    >\n                        {label}\n                    </Text>\n                    <CaretdownStrokeSrvIcon16\n                        className={clsx(styles.dropdownTargetCaret, { [styles.opened]: opened })}\n                        paletteIndex={5}\n                    />\n                </span>\n            </button>\n        );\n    };\n\n    const renderDropdown = () => (\n        <Dropdown\n            className={styles.dropdown}\n            opened={opened}\n            setOpened={setOpened}\n            size={size}\n            width={EDropdownWidth.MIN_TARGET}\n            targetRef={targetRef}\n            ref={dropdownRef}\n        >\n            <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                <DropdownList dropdownOpened={opened} id={instanceId.current} size={size}>\n                    {tabs.map((tab, index) => {\n                        const { id, label: tabLabel, showNotificationIcon, ...htmlButtonAttributes } = tab;\n\n                        return (\n                            <DropdownList.Item\n                                // Свойства таба типизированы под <button>, а пункт списка рендерит <div>.\n                                // Набор атрибутов совпадает, расходятся только дженерики обработчиков событий.\n                                {...(htmlButtonAttributes as React.HTMLAttributes<HTMLDivElement>)}\n                                // DOM id выводим из instanceId, а не из tab.id: два TabsLine с одинаковыми\n                                // tab.id иначе дают дублирующиеся id, и aria-activedescendant адресует\n                                // пункт чужого экземпляра. Исходный tab.id уходит в onClickTab.\n                                id={`${instanceId.current}-item-${index}`}\n                                key={id}\n                                onSelect={() => {\n                                    handleClickTab(tab);\n                                }}\n                                selected={tab === selected}\n                                showNotificationIcon={showNotificationIcon}\n                            >\n                                {tabLabel}\n                            </DropdownList.Item>\n                        );\n                    })}\n                </DropdownList>\n            </DropdownListContext.Provider>\n        </Dropdown>\n    );\n\n    return (\n        <div {...htmlDivAttributes} className={clsx(styles.tabsLineDropdown, className)} ref={setRootRef}>\n            {renderTarget()}\n            {renderDropdown()}\n        </div>\n    );\n});\n\nTabsLineDropdown.displayName = \"TabsLineDropdown\";\n"],"names":[],"mappings":"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"}

package/components/TabsLine/components/TabsLineItem.js

@@ -1,16 +1,18 @@
-import { jsx } from "react/jsx-runtime";
-import React, { useState, createElement } from "react";
-import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { Badge } from "../../Badge/Badge.js";
-import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { Text } from "../../Typography/Text.js";
-import { tabsLineSizeToTextSizeMap } from "../utils.js";
 import { EFontType } from "../../Typography/enums.js";
-import { s as styles } from "../../../chunks/TabsLine.module-o_5e1V2r.js";
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
+import { tabsLineSizeToTextSizeMap } from "../utils.js";
+import { s as styles } from "../../../chunks/TabsLine.module-DzSTcYZd.js";
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const TabsLineItem = React.forwardRef(
   ({
+    className,
+    // id — идентификатор таба в модели данных, а не DOM-атрибут: на <button> он намеренно не уходит.
     id,
     label,
     selected,
@@ -24,38 +26,52 @@ const TabsLineItem = React.forwardRef(
   }, ref) => {
     const [focused, setFocused] = useState(false);
     const [hovered, setHovered] = useState(false);
-    const handleFocus = (e) => {
+    const handleFocus = (event) => {
       setFocused(true);
-      onFocus == null ? void 0 : onFocus(e);
+      onFocus == null ? void 0 : onFocus(event);
     };
-    const handleBlur = (e) => {
+    const handleBlur = (event) => {
       setFocused(false);
-      onBlur == null ? void 0 : onBlur(e);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleMouseEnter = (event) => {
+      setHovered(true);
+      onMouseEnter == null ? void 0 : onMouseEnter(event);
+    };
+    const handleMouseLeave = (event) => {
+      setHovered(false);
+      onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
-    return /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onFocus: handleFocus,
         onBlur: handleBlur,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         ...htmlButtonAttributes,
-        key: id,
-        className: clsx(styles.tab, sizeToClassNameMap[size], { [styles.active]: Boolean(selected) }),
+        className: clsx(
+          styles.tab,
+          SIZE_TO_CLASS_NAME_MAP[size],
+          { [styles.active]: Boolean(selected) },
+          className
+        ),
         role: "tab",
         "aria-selected": selected,
-        ref
-      },
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: tabsLineSizeToTextSizeMap[size],
-          type: selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY,
-          children: label
-        }
-      ),
-      showNotificationIcon && /* @__PURE__ */ jsx(Badge.Dot, { size, className: styles.notificationIcon })
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: tabsLineSizeToTextSizeMap[size],
+              type: selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY,
+              children: label
+            }
+          ),
+          showNotificationIcon && /* @__PURE__ */ jsx(Badge.Dot, { size, className: styles.notificationIcon })
+        ]
+      }
     );
   }
 );

package/components/TabsLine/components/TabsLineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineItem.js","sources":["../../../../src/components/TabsLine/components/TabsLineItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport clsx from \"clsx\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { Badge } from \"../../Badge/Badge\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport { Text } from \"../../Typography/Text\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\nimport { EFontType } from \"../../Typography/enums\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства TabsLineItem. */\nexport interface ITabsLineItemProps extends React.HTMLAttributes<HTMLButtonElement>, TestProps {\n    /** Таб выбран. */\n    selected?: boolean;\n    /** Идентификатор таба. */\n    id: string;\n    /** Отображаемое значение. */\n    label: string;\n    /** Флаг отображения значка новых уведомлений. */\n    showNotificationIcon?: boolean;\n    /** Размер таба. */\n    size?: EComponentSize;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент TabsLineItem. */\nexport const TabsLineItem = React.forwardRef<HTMLButtonElement, ITabsLineItemProps>(\n    (\n        {\n            id,\n            label,\n            selected,\n            showNotificationIcon,\n            size = EComponentSize.MD,\n            onFocus,\n            onBlur,\n            onMouseEnter,\n            onMouseLeave,\n            ...htmlButtonAttributes\n        },\n        ref,\n    ) => {\n        const [focused, setFocused] = useState(false);\n        const [hovered, setHovered] = useState(false);\n\n        const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(true);\n            onFocus?.(e);\n        };\n\n        const handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(false);\n            onBlur?.(e);\n        };\n\n        return (\n            <button\n                type=\"button\"\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onMouseEnter={() => setHovered(true)}\n                onMouseLeave={() => setHovered(false)}\n                {...htmlButtonAttributes}\n                key={id}\n                className={clsx(styles.tab, sizeToClassNameMap[size], { [styles.active]: Boolean(selected) })}\n                role=\"tab\"\n                aria-selected={selected}\n                ref={ref}\n            >\n                <Text\n                    size={tabsLineSizeToTextSizeMap[size]}\n                    type={selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                >\n                    {label}\n                </Text>\n                {showNotificationIcon && <Badge.Dot size={size} className={styles.notificationIcon} />}\n            </button>\n        );\n    },\n);\n\nTabsLineItem.displayName = \"TabsLineItem\";\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,eAAe,MAAM;AAAA,EAC9B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,cAAc,CAAC,MAA2C;AAC5D,iBAAW,IAAI;AACf,yCAAU;AAAA,IACd;AAEA,UAAM,aAAa,CAAC,MAA2C;AAC3D,iBAAW,KAAK;AAChB,uCAAS;AAAA,IACb;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,cAAc,MAAM,WAAW,IAAI;AAAA,QACnC,cAAc,MAAM,WAAW,KAAK;AAAA,QACnC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,KAAK,mBAAmB,IAAI,GAAG,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ,QAAQ,GAAG;AAAA,QAC5F,MAAK;AAAA,QACL,iBAAe;AAAA,QACf;AAAA,MAAA;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAM,0BAA0B,IAAI;AAAA,UACpC,MAAM,YAAY,WAAW,UAAU,UAAU,UAAU,UAAU;AAAA,UAEpE,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,4CAAyB,MAAM,KAAN,EAAU,MAAY,WAAW,OAAO,iBAAA,CAAkB;AAAA,IAAA;AAAA,EAGhG;AACJ;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"TabsLineItem.js","sources":["../../../../src/components/TabsLine/components/TabsLineItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { Badge } from \"../../Badge/Badge\";\nimport { Text } from \"../../Typography/Text\";\nimport { EFontType } from \"../../Typography/enums\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLineItem. */\nexport interface ITabsLineItemProps extends React.HTMLAttributes<HTMLButtonElement>, TestProps {\n    /** Таб выбран. По умолчанию false. */\n    selected?: boolean;\n    /** Идентификатор таба. Сопоставляется с selectedId и приходит в onChangeTab. В DOM не попадает. */\n    id: string;\n    /** Отображаемое значение. */\n    label: string;\n    /** Флаг отображения значка новых уведомлений. По умолчанию false. */\n    showNotificationIcon?: boolean;\n    /** Размер таба. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Кнопка одного таба TabsLine: текст и опциональный значок новых уведомлений. */\nexport const TabsLineItem = React.forwardRef<HTMLButtonElement, ITabsLineItemProps>(\n    (\n        {\n            className,\n            // id — идентификатор таба в модели данных, а не DOM-атрибут: на <button> он намеренно не уходит.\n            id,\n            label,\n            selected,\n            showNotificationIcon,\n            size = EComponentSize.MD,\n            onFocus,\n            onBlur,\n            onMouseEnter,\n            onMouseLeave,\n            ...htmlButtonAttributes\n        },\n        ref,\n    ) => {\n        const [focused, setFocused] = useState(false);\n        const [hovered, setHovered] = useState(false);\n\n        const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        };\n\n        const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n        };\n\n        const handleMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(true);\n            onMouseEnter?.(event);\n        };\n\n        const handleMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(false);\n            onMouseLeave?.(event);\n        };\n\n        return (\n            <button\n                type=\"button\"\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n                {...htmlButtonAttributes}\n                className={clsx(\n                    styles.tab,\n                    SIZE_TO_CLASS_NAME_MAP[size],\n                    { [styles.active]: Boolean(selected) },\n                    className,\n                )}\n                role=\"tab\"\n                aria-selected={selected}\n                ref={ref}\n            >\n                <Text\n                    size={tabsLineSizeToTextSizeMap[size]}\n                    type={selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                >\n                    {label}\n                </Text>\n                {showNotificationIcon && <Badge.Dot size={size} className={styles.notificationIcon} />}\n            </button>\n        );\n    },\n);\n\nTabsLineItem.displayName = \"TabsLineItem\";\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,yBAAyB,yBAAyB,MAAM;AAGvD,MAAM,eAAe,MAAM;AAAA,EAC9B,CACI;AAAA,IACI;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,cAAc,CAAC,UAA+C;AAChE,iBAAW,IAAI;AACf,yCAAU;AAAA,IACd;AAEA,UAAM,aAAa,CAAC,UAA+C;AAC/D,iBAAW,KAAK;AAChB,uCAAS;AAAA,IACb;AAEA,UAAM,mBAAmB,CAAC,UAA+C;AACrE,iBAAW,IAAI;AACf,mDAAe;AAAA,IACnB;AAEA,UAAM,mBAAmB,CAAC,UAA+C;AACrE,iBAAW,KAAK;AAChB,mDAAe;AAAA,IACnB;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,cAAc;AAAA,QACb,GAAG;AAAA,QACJ,WAAW;AAAA,UACP,OAAO;AAAA,UACP,uBAAuB,IAAI;AAAA,UAC3B,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ,QAAQ,EAAA;AAAA,UACnC;AAAA,QAAA;AAAA,QAEJ,MAAK;AAAA,QACL,iBAAe;AAAA,QACf;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAM,0BAA0B,IAAI;AAAA,cACpC,MAAM,YAAY,WAAW,UAAU,UAAU,UAAU,UAAU;AAAA,cAEpE,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEJ,4CAAyB,MAAM,KAAN,EAAU,MAAY,WAAW,OAAO,iBAAA,CAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhG;AACJ;AAEA,aAAa,cAAc;"}

package/components/TabsLine/components/TabsLineMobile.js

@@ -1,25 +1,30 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { TabsLineItem } from "./TabsLineItem.js";
-const tabsLineMobileWrapper = "tabsLineMobileWrapper__078e4400";
-const tabsLineMobile = "tabsLineMobile__f8a3dd13";
+const tabsLineMobileWrapper = "tabsLineMobileWrapper__11e25edb";
+const tabsLineMobile = "tabsLineMobile__32c1ed6a";
 const styles = {
   tabsLineMobileWrapper,
   tabsLineMobile
 };
-const TabsLineMobile = ({ onChangeTab, selectedId, tabs }) => {
-  if (!tabs.length) {
-    return null;
-  }
-  const renderTab = ({ selected, ...item }) => {
-    const handleClick = (event) => {
-      var _a;
-      onChangeTab(item.id);
-      (_a = item.onClick) == null ? void 0 : _a.call(item, event);
+const TabsLineMobile = React.forwardRef(
+  // size намеренно не используется — он исключён из спреда, чтобы не уйти на <div> как невалидный атрибут.
+  ({ className, onChangeTab, selectedId, size, tabs, ...htmlDivAttributes }, ref) => {
+    const renderTab = ({ selected, onClick, ...item }) => {
+      const handleClick = (event) => {
+        onChangeTab(item.id);
+        onClick == null ? void 0 : onClick(event);
+      };
+      return /* @__PURE__ */ jsx(TabsLineItem, { selected: selectedId === item.id, ...item, onClick: handleClick }, item.id);
     };
-    return /* @__PURE__ */ jsx(TabsLineItem, { selected: selectedId === item.id, ...item, onClick: handleClick }, item.id);
-  };
-  return /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobileWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobile, children: tabs.map(renderTab) }) });
-};
+    if (tabs.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { ...htmlDivAttributes, className: clsx(styles.tabsLineMobileWrapper, className), ref, children: /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobile, children: tabs.map(renderTab) }) });
+  }
+);
+TabsLineMobile.displayName = "TabsLineMobile";
 export {
   TabsLineMobile
 };

package/components/TabsLine/components/TabsLineMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineMobile.js","sources":["../../../../src/components/TabsLine/components/TabsLineMobile.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITabsLineItemProps, TabsLineItem } from \"./TabsLineItem\";\nimport { ITabsLineBaseProps } from \"../types\";\nimport styles from \"../styles/TabsLineMobile.module.less\";\n\n/** Свойства компонента ITabsLineMobileProps. */\ninterface ITabsLineMobileProps extends ITabsLineBaseProps {}\n\n/** Компонент TabsLineMobile. */\nexport const TabsLineMobile: React.FC<ITabsLineMobileProps> = ({ onChangeTab, selectedId, tabs }) => {\n    if (!tabs.length) {\n        return null;\n    }\n\n    const renderTab = ({ selected, ...item }: ITabsLineItemProps) => {\n        const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            onChangeTab(item.id);\n            item.onClick?.(event as React.MouseEvent<HTMLButtonElement>);\n        };\n\n        return <TabsLineItem key={item.id} selected={selectedId === item.id} {...item} onClick={handleClick} />;\n    };\n\n    return (\n        <div className={styles.tabsLineMobileWrapper}>\n            <div className={styles.tabsLineMobile}>{tabs.map(renderTab)}</div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AASO,MAAM,iBAAiD,CAAC,EAAE,aAAa,YAAY,WAAW;AACjG,MAAI,CAAC,KAAK,QAAQ;AACd,WAAO;AAAA,EACX;AAEA,QAAM,YAAY,CAAC,EAAE,UAAU,GAAG,WAA+B;AAC7D,UAAM,cAAc,CAAC,UAAgE;;AACjF,kBAAY,KAAK,EAAE;AACnB,iBAAK,YAAL,8BAAe;AAAA,IACnB;AAEA,WAAO,oBAAC,cAAA,EAA2B,UAAU,eAAe,KAAK,IAAK,GAAG,MAAM,SAAS,YAAA,GAA9D,KAAK,EAAsE;AAAA,EACzG;AAEA,SACI,oBAAC,OAAA,EAAI,WAAW,OAAO,uBACnB,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,gBAAiB,UAAA,KAAK,IAAI,SAAS,GAAE,GAChE;AAER;"}
+{"version":3,"file":"TabsLineMobile.js","sources":["../../../../src/components/TabsLine/components/TabsLineMobile.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITabsLineBaseProps } from \"../types\";\nimport { ITabsLineItemProps, TabsLineItem } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLineMobile.module.less\";\n\n/** Свойства компонента TabsLineMobile. */\ninterface ITabsLineMobileProps extends ITabsLineBaseProps {}\n\n/**\n * Мобильный вариант TabsLine: табы в одну строку с горизонтальной прокруткой, без дропдауна.\n * Размер таба здесь всегда дефолтный: prop size мобильным вариантом не поддерживается.\n */\nexport const TabsLineMobile = React.forwardRef<HTMLDivElement, ITabsLineMobileProps>(\n    // size намеренно не используется — он исключён из спреда, чтобы не уйти на <div> как невалидный атрибут.\n    ({ className, onChangeTab, selectedId, size, tabs, ...htmlDivAttributes }, ref) => {\n        const renderTab = ({ selected, onClick, ...item }: ITabsLineItemProps) => {\n            const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n                onChangeTab(item.id);\n                onClick?.(event);\n            };\n\n            return <TabsLineItem key={item.id} selected={selectedId === item.id} {...item} onClick={handleClick} />;\n        };\n\n        if (tabs.length === 0) {\n            return null;\n        }\n\n        return (\n            <div {...htmlDivAttributes} className={clsx(styles.tabsLineMobileWrapper, className)} ref={ref}>\n                <div className={styles.tabsLineMobile}>{tabs.map(renderTab)}</div>\n            </div>\n        );\n    },\n);\n\nTabsLineMobile.displayName = \"TabsLineMobile\";\n"],"names":[],"mappings":";;;;;;;;;;AAaO,MAAM,iBAAiB,MAAM;AAAA;AAAA,EAEhC,CAAC,EAAE,WAAW,aAAa,YAAY,MAAM,MAAM,GAAG,kBAAA,GAAqB,QAAQ;AAC/E,UAAM,YAAY,CAAC,EAAE,UAAU,SAAS,GAAG,WAA+B;AACtE,YAAM,cAAc,CAAC,UAA+C;AAChE,oBAAY,KAAK,EAAE;AACnB,2CAAU;AAAA,MACd;AAEA,aAAO,oBAAC,cAAA,EAA2B,UAAU,eAAe,KAAK,IAAK,GAAG,MAAM,SAAS,YAAA,GAA9D,KAAK,EAAsE;AAAA,IACzG;AAEA,QAAI,KAAK,WAAW,GAAG;AACnB,aAAO;AAAA,IACX;AAEA,WACI,oBAAC,SAAK,GAAG,mBAAmB,WAAW,KAAK,OAAO,uBAAuB,SAAS,GAAG,KAClF,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,gBAAiB,eAAK,IAAI,SAAS,GAAE,EAAA,CAChE;AAAA,EAER;AACJ;AAEA,eAAe,cAAc;"}

package/components/TabsLine/utils.js

@@ -5,7 +5,15 @@ const tabsLineSizeToTextSizeMap = {
   [EComponentSize.MD]: ETextSize.B3,
   [EComponentSize.SM]: ETextSize.B4
 };
+const splitTabsByMaxVisible = (tabs, maxVisible) => {
+  if (!maxVisible || tabs.length <= maxVisible) {
+    return { inlineTabs: tabs, dropdownTabs: [] };
+  }
+  const inlineCount = Math.max(maxVisible - 1, 0);
+  return { inlineTabs: tabs.slice(0, inlineCount), dropdownTabs: tabs.slice(inlineCount) };
+};
 export {
+  splitTabsByMaxVisible,
   tabsLineSizeToTextSizeMap
 };
 //# sourceMappingURL=utils.js.map

package/components/TabsLine/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/TabsLine/utils.ts"],"sourcesContent":["import { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ETextSize } from \"../Typography/enums\";\n\nexport const tabsLineSizeToTextSizeMap = {\n    [EComponentSize.LG]: ETextSize.B2,\n    [EComponentSize.MD]: ETextSize.B3,\n    [EComponentSize.SM]: ETextSize.B4,\n};\n"],"names":[],"mappings":";;AAGO,MAAM,4BAA4B;AAAA,EACrC,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AACnC;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/TabsLine/utils.ts"],"sourcesContent":["import { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ETextSize } from \"../Typography/enums\";\n\n/** Соответствие размера таба размеру текста внутри него. */\nexport const tabsLineSizeToTextSizeMap = {\n    [EComponentSize.LG]: ETextSize.B2,\n    [EComponentSize.MD]: ETextSize.B3,\n    [EComponentSize.SM]: ETextSize.B4,\n} satisfies Record<EComponentSize, ETextSize>;\n\n/**\n * Результат разделения табов между строкой и выпадающим списком.\n * Тип таба параметризован: utils не должен зависеть от модуля компонента —\n * TabsLineItem импортирует отсюда tabsLineSizeToTextSizeMap, и обратный импорт замкнул бы цикл.\n */\nexport interface ITabsLineSplit<T> {\n    /** Табы, отображаемые в строке. */\n    inlineTabs: T[];\n    /** Табы, уехавшие в выпадающий список. */\n    dropdownTabs: T[];\n}\n\n/**\n * Разделить табы на отображаемые в строке и уехавшие в выпадающий список.\n * maxVisible ограничивает общее число элементов строки вместе с кнопкой выпадающего списка,\n * поэтому в строке остаётся maxVisible - 1 табов. Пока табов не больше maxVisible, список не нужен\n * и все табы остаются в строке.\n */\nexport const splitTabsByMaxVisible = <T>(tabs: T[], maxVisible?: number): ITabsLineSplit<T> => {\n    if (!maxVisible || tabs.length <= maxVisible) {\n        return { inlineTabs: tabs, dropdownTabs: [] };\n    }\n\n    const inlineCount = Math.max(maxVisible - 1, 0);\n\n    return { inlineTabs: tabs.slice(0, inlineCount), dropdownTabs: tabs.slice(inlineCount) };\n};\n"],"names":[],"mappings":";;AAIO,MAAM,4BAA4B;AAAA,EACrC,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AACnC;AAoBO,MAAM,wBAAwB,CAAI,MAAW,eAA2C;AAC3F,MAAI,CAAC,cAAc,KAAK,UAAU,YAAY;AAC1C,WAAO,EAAE,YAAY,MAAM,cAAc,CAAA,EAAC;AAAA,EAC9C;AAEA,QAAM,cAAc,KAAK,IAAI,aAAa,GAAG,CAAC;AAE9C,SAAO,EAAE,YAAY,KAAK,MAAM,GAAG,WAAW,GAAG,cAAc,KAAK,MAAM,WAAW,EAAA;AACzF;"}

package/components/Tag/Tag.js

@@ -1,17 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { EditStrokeSrvIcon24, EditStrokeSrvIcon20, EditStrokeSrvIcon16, CrossStrokeSrvIcon24, CrossStrokeSrvIcon20, CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { Text } from "../Typography/Text.js";
 import { ETextSize, EFontType } from "../Typography/enums.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const tag = "tag__d78194ee";
-const sm = "sm__8f3ffce8";
-const md = "md__89b2e7ad";
-const lg = "lg__d082b992";
-const content = "content__7761da07";
+const tag = "tag__7805b3be";
+const sm = "sm__40951c39";
+const md = "md__5f62506c";
+const lg = "lg__114a9cdd";
+const content = "content__b228fbb7";
 const styles = {
   tag,
   sm,

package/components/TagColor/TagColor.js

@@ -1,23 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { ETagColorStatus } from "./enums.js";
-const tagColor = "tagColor__1e469e21";
-const sm = "sm__ca0d28b8";
-const md = "md__c38e9137";
-const lg = "lg__8830b563";
-const success = "success__959c204e";
-const info = "info__1bdd45ad";
-const warning = "warning__27eeae5f";
-const error = "error__e61f44ad";
-const content = "content__673dc51f";
+const tagColor = "tagColor__492b622c";
+const sm = "sm__3e49c3f3";
+const md = "md__cced8b45";
+const lg = "lg__06e25578";
+const success = "success__118c3a72";
+const info = "info__67c6feea";
+const warning = "warning__96dfd37b";
+const error = "error__c5ede3c8";
+const content = "content__a88afe39";
 const styles = {
   tagColor,
   sm,
   md,
   lg,
-  "default": "default__e2dd467e",
+  "default": "default__a89cf611",
   success,
   info,
   warning,

package/components/TagColor/TagColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagColor.js","sources":["../../../src/components/TagColor/TagColor.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagColorProps } from \"@sberbusiness/triplex-next/components/TagColor/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagColor.module.less\";\nimport { ETagColorStatus } from \"./enums\";\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\nconst STATUS_TO_CLASS_NAME_MAP = {\n    [ETagColorStatus.DEFAULT]: styles.default,\n    [ETagColorStatus.SUCCESS]: styles.success,\n    [ETagColorStatus.INFO]: styles.info,\n    [ETagColorStatus.WARNING]: styles.warning,\n    [ETagColorStatus.ERROR]: styles.error,\n};\n\n/** Компонент, который используется для маркировки и классификации. */\nexport const TagColor = React.forwardRef<HTMLSpanElement, ITagColorProps>(\n    ({ children, className, size, status = ETagColorStatus.DEFAULT, ...restProps }, ref) => (\n        <span\n            className={clsx(styles.tagColor, SIZE_TO_CLASS_NAME_MAP[size], STATUS_TO_CLASS_NAME_MAP[status], className)}\n            {...restProps}\n            ref={ref}\n        >\n            <span className={styles.content}>{children}</span>\n        </span>\n    ),\n);\n\nTagColor.displayName = \"TagColor\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAAyB,yBAAyB,MAAM;AAE9D,MAAM,2BAA2B;AAAA,EAC7B,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,IAAI,GAAG,OAAO;AAAA,EAC/B,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,KAAK,GAAG,OAAO;AACpC;AAGO,MAAM,WAAW,MAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,SAAS,gBAAgB,SAAS,GAAG,aAAa,QAC5E;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,uBAAuB,IAAI,GAAG,yBAAyB,MAAM,GAAG,SAAS;AAAA,MACzG,GAAG;AAAA,MACJ;AAAA,MAEA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"TagColor.js","sources":["../../../src/components/TagColor/TagColor.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagColorProps } from \"@sberbusiness/triplex-next/components/TagColor/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagColor.module.less\";\nimport { ETagColorStatus } from \"./enums\";\n\n/** Соответствие размера тега имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Соответствие статуса тега имени класса. */\nconst STATUS_TO_CLASS_NAME_MAP: Record<ETagColorStatus, string> = {\n    [ETagColorStatus.DEFAULT]: styles.default,\n    [ETagColorStatus.SUCCESS]: styles.success,\n    [ETagColorStatus.INFO]: styles.info,\n    [ETagColorStatus.WARNING]: styles.warning,\n    [ETagColorStatus.ERROR]: styles.error,\n};\n\n/**\n * Компонент, который используется для маркировки и классификации.\n *\n * Неинтерактивный: рендерит `span` без обработчиков и фокуса, цвет фона задаёт `status`.\n */\nexport const TagColor = React.forwardRef<HTMLSpanElement, ITagColorProps>(\n    ({ children, className, size, status = ETagColorStatus.DEFAULT, ...restProps }, ref) => (\n        <span\n            className={clsx(styles.tagColor, SIZE_TO_CLASS_NAME_MAP[size], STATUS_TO_CLASS_NAME_MAP[status], className)}\n            {...restProps}\n            ref={ref}\n        >\n            <span className={styles.content}>{children}</span>\n        </span>\n    ),\n);\n\nTagColor.displayName = \"TagColor\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,yBAAyB,yBAAyB,MAAM;AAG9D,MAAM,2BAA4D;AAAA,EAC9D,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,IAAI,GAAG,OAAO;AAAA,EAC/B,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,KAAK,GAAG,OAAO;AACpC;AAOO,MAAM,WAAW,MAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,SAAS,gBAAgB,SAAS,GAAG,aAAa,QAC5E;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,uBAAuB,IAAI,GAAG,yBAAyB,MAAM,GAAG,SAAS;AAAA,MACzG,GAAG;AAAA,MACJ;AAAA,MAEA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD;AAEA,SAAS,cAAc;"}

package/components/TagColor/enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"enums.js","sources":["../../../src/components/TagColor/enums.ts"],"sourcesContent":["export enum ETagColorStatus {\n    DEFAULT = \"default\",\n    SUCCESS = \"success\",\n    INFO = \"info\",\n    WARNING = \"warning\",\n    ERROR = \"error\",\n}\n"],"names":["ETagColorStatus"],"mappings":"AAAO,IAAK,oCAAAA,qBAAL;AACHA,mBAAA,SAAA,IAAU;AACVA,mBAAA,SAAA,IAAU;AACVA,mBAAA,MAAA,IAAO;AACPA,mBAAA,SAAA,IAAU;AACVA,mBAAA,OAAA,IAAQ;AALA,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;"}
+{"version":3,"file":"enums.js","sources":["../../../src/components/TagColor/enums.ts"],"sourcesContent":["/** Статус тега, определяющий цвет фона. */\nexport enum ETagColorStatus {\n    /** Нейтральный — статус по умолчанию. */\n    DEFAULT = \"default\",\n    /** Успешное завершение. */\n    SUCCESS = \"success\",\n    /** Информационное сообщение. */\n    INFO = \"info\",\n    /** Предупреждение. */\n    WARNING = \"warning\",\n    /** Ошибка. */\n    ERROR = \"error\",\n}\n"],"names":["ETagColorStatus"],"mappings":"AACO,IAAK,oCAAAA,qBAAL;AAEHA,mBAAA,SAAA,IAAU;AAEVA,mBAAA,SAAA,IAAU;AAEVA,mBAAA,MAAA,IAAO;AAEPA,mBAAA,SAAA,IAAU;AAEVA,mBAAA,OAAA,IAAQ;AAVA,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;"}

package/components/TagGroup/TagGroup.js

@@ -1,23 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const tagGroup = "tagGroup__f54991cb";
-const sm = "sm__06743d59";
-const md = "md__d0639952";
-const lg = "lg__2426d353";
+const tagGroup = "tagGroup__513c4f97";
+const sm = "sm__24df2e9e";
+const md = "md__00ab2aaa";
+const lg = "lg__9abc1821";
 const styles = {
   tagGroup,
   sm,
   md,
   lg
 };
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const TagGroup = React.forwardRef(
   ({ children, className, size, ...restProps }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(styles.tagGroup, sizeToClassNameMap[size], className),
+      className: clsx(styles.tagGroup, SIZE_TO_CLASS_NAME_MAP[size], className),
       role: "group",
       ...restProps,
       ref,
@@ -25,6 +25,7 @@ const TagGroup = React.forwardRef(
     }
   )
 );
+TagGroup.displayName = "TagGroup";
 export {
   TagGroup
 };

package/components/TagGroup/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagGroupProps } from \"@sberbusiness/triplex-next/components/TagGroup/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagGroup.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Контейнер для группы Tag. */\nexport const TagGroup = React.forwardRef<HTMLDivElement, ITagGroupProps>(\n    ({ children, className, size, ...restProps }, ref) => (\n        <div\n            className={clsx(styles.tagGroup, sizeToClassNameMap[size], className)}\n            role=\"group\"\n            {...restProps}\n            ref={ref}\n        >\n            {children}\n        </div>\n    ),\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,WAAW,MAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,GAAG,UAAA,GAAa,QAC1C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,mBAAmB,IAAI,GAAG,SAAS;AAAA,MACpE,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"TagGroup.js","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagGroupProps } from \"@sberbusiness/triplex-next/components/TagGroup/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagGroup.module.less\";\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/**\n * Контейнер для группы Tag.\n * Теги идут в общем потоке и переносятся по строкам, отступ между ними задаёт size.\n * Корневой элемент — div с role=\"group\", на него указывает ref и приходят className и остальные props.\n */\nexport const TagGroup = React.forwardRef<HTMLDivElement, ITagGroupProps>(\n    ({ children, className, size, ...restProps }, ref) => (\n        <div\n            className={clsx(styles.tagGroup, SIZE_TO_CLASS_NAME_MAP[size], className)}\n            role=\"group\"\n            {...restProps}\n            ref={ref}\n        >\n            {children}\n        </div>\n    ),\n);\n\nTagGroup.displayName = \"TagGroup\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,yBAAyB,yBAAyB,MAAM;AAOvD,MAAM,WAAW,MAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,GAAG,UAAA,GAAa,QAC1C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,uBAAuB,IAAI,GAAG,SAAS;AAAA,MACxE,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;AAEA,SAAS,cAAc;"}

package/components/TextareaField/TextareaField.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import { TextFieldBase } from "../TextField/TextFieldBase.js";
 import "../FormField/components/FormFieldClear.js";
 import "../FormField/components/FormFieldCounter.js";
@@ -11,7 +12,10 @@ import "../FormField/components/FormFieldPrefix.js";
 import "../FormField/components/FormFieldTarget.js";
 import { FormFieldTextarea } from "../FormField/components/FormFieldTextarea.js";
 import "../FormField/FormField.js";
-const TextareaField = ({ textareaProps, ...restProps }) => /* @__PURE__ */ jsx(TextFieldBase, { ...restProps, children: /* @__PURE__ */ jsx(FormFieldTextarea, { ...textareaProps }) });
+const TextareaField = React.forwardRef(
+  ({ textareaProps, ...restProps }, ref) => /* @__PURE__ */ jsx(TextFieldBase, { ...restProps, ref, children: /* @__PURE__ */ jsx(FormFieldTextarea, { ...textareaProps }) })
+);
+TextareaField.displayName = "TextareaField";
 export {
   TextareaField
 };

package/components/TextareaField/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","sources":["../../../src/components/TextareaField/TextareaField.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITextareaFieldProps } from \"./types\";\nimport { TextFieldBase } from \"../TextField/TextFieldBase\";\nimport { FormFieldTextarea } from \"../FormField\";\n\n/** Многострочное текстовое поле для ввода большого объема текста. */\nexport const TextareaField: React.FC<ITextareaFieldProps> = ({ textareaProps, ...restProps }) => (\n    <TextFieldBase {...restProps}>\n        <FormFieldTextarea {...textareaProps} />\n    </TextFieldBase>\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAMO,MAAM,gBAA+C,CAAC,EAAE,eAAe,GAAG,UAAA,MAC7E,oBAAC,eAAA,EAAe,GAAG,WACf,UAAA,oBAAC,mBAAA,EAAmB,GAAG,eAAe,EAAA,CAC1C;"}
+{"version":3,"file":"TextareaField.js","sources":["../../../src/components/TextareaField/TextareaField.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITextareaFieldProps } from \"./types\";\nimport { TextFieldBase } from \"../TextField/TextFieldBase\";\nimport { FormFieldTextarea } from \"../FormField\";\n\n/**\n * Многострочное текстовое поле для ввода большого объема текста.\n * Отличается от TextField элементом ввода — вместо input используется FormFieldTextarea.\n */\nexport const TextareaField = React.forwardRef<HTMLDivElement, ITextareaFieldProps>(\n    ({ textareaProps, ...restProps }, ref) => (\n        <TextFieldBase {...restProps} ref={ref}>\n            <FormFieldTextarea {...textareaProps} />\n        </TextFieldBase>\n    ),\n);\n\nTextareaField.displayName = \"TextareaField\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASO,MAAM,gBAAgB,MAAM;AAAA,EAC/B,CAAC,EAAE,eAAe,GAAG,UAAA,GAAa,QAC9B,oBAAC,eAAA,EAAe,GAAG,WAAW,KAC1B,UAAA,oBAAC,mBAAA,EAAmB,GAAG,eAAe,EAAA,CAC1C;AAER;AAEA,cAAc,cAAc;"}

package/components/ThemeProvider/ThemeProvider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useLayoutEffect } from "react";
-import { s as canUseDom, w as updateCSS, x as removeCSS } from "../../chunks/vendor-BxhAzfnS.js";
+import { q as canUseDom, s as updateCSS, w as removeCSS } from "../../chunks/vendor-Bf_-FiU6.js";
 import { DesignTokenUtils } from "../DesignTokens/DesignTokenUtils.js";
 import { ThemeProviderView } from "./components/ThemeProviderView.js";
 import { ETriplexNextTheme } from "./ETriplexNextTheme.js";

package/components/ThemeProvider/components/ThemeProviderView.js

@@ -6,7 +6,7 @@ import { DesignTokensCore } from "../../DesignTokens/DesignTokensCore.js";
 import { DesignTokensCoreThemeDark } from "../../DesignTokens/DesignTokensCoreThemeDark.js";
 import { DesignTokensComponents } from "../../DesignTokens/DesignTokensComponents.js";
 import { DesignTokensComponentsThemeDark } from "../../DesignTokens/DesignTokensComponentsThemeDark.js";
-import { k as defaultsDeep } from "../../../chunks/vendor-BxhAzfnS.js";
+import { k as defaultsDeep } from "../../../chunks/vendor-Bf_-FiU6.js";
 const ThemeProviderView = ({
   children,
   scopeClassName,

package/components/Tooltip/components/common/TooltipBody.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { Text } from "../../../Typography/Text.js";
 import { ELineType, ETextSize } from "../../../Typography/enums.js";
-import { s as styles } from "../../../../chunks/TooltipDesktop.module-6PuIi5BD.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-DPI6ERZY.js";
 const TooltipBody = React.forwardRef(({ className, ...rest }, ref) => {
   const classNames = clsx(styles.tooltipBody, className);
   return /* @__PURE__ */ jsx(MobileView, { fallback: /* @__PURE__ */ jsx("div", { className: classNames, ...rest, ref }), children: /* @__PURE__ */ jsx(Text, { className: classNames, size: ETextSize.B3, line: ELineType.NORMAL, tag: "div", ...rest, ref }) });

package/components/Tooltip/components/common/TooltipLink.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { getSafeRel } from "../../../../utils/html/anchorSecurity.js";
-const tooltipLink = "tooltipLink__be5e10c5";
-const desktop = "desktop__a0480f45";
-const mobile = "mobile__4fd412ae";
+const tooltipLink = "tooltipLink__b346e846";
+const desktop = "desktop__34da035c";
+const mobile = "mobile__07e35bc8";
 const styles = {
   tooltipLink,
   desktop,
@@ -21,7 +21,7 @@ const TooltipLink = React.forwardRef(
         ...rest,
         target,
         rel: safeRel,
-        "data-tx": "0.46.0",
+        "data-tx": "0.48.0",
         ref,
         children
       }

package/components/Tooltip/components/common/TooltipXButton.js

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { TooltipContext } from "../../TootlipContext.js";
 import { ButtonIcon } from "../../../Button/ButtonIcon.js";
-import { s as styles } from "../../../../chunks/TooltipDesktop.module-6PuIi5BD.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-DPI6ERZY.js";
 const TooltipXButton = ({ onClick, ...rest }) => {
   const { setTooltipOpen } = useContext(TooltipContext);
   const handleClick = (event) => {

package/components/Tooltip/components/desktop/components/TooltipDesktopBase.js

@@ -3,13 +3,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React from "react";
-import { i as isEqual, c as clsx } from "../../../../../chunks/vendor-BxhAzfnS.js";
+import { i as isEqual, c as clsx } from "../../../../../chunks/vendor-Bf_-FiU6.js";
 import { TooltipContext } from "../../../TootlipContext.js";
 import { Portal } from "../../../../Portal/Portal.js";
 import { ETooltipFlowTypes, ETooltipPreferPlace, ETooltipDirection, ETooltipAlign, ETooltipSizeParameter, ETooltipTypeName, ETooltipEndCoordinates, ETooltipStartCoordinates, ETooltipAxesType, ETooltipSize } from "../../../enums.js";
 import { TooltipDesktopTip } from "./TooltipDesktopTip.js";
 import { pickZone, axes, calcRelPos, centerOfBoundsFromBounds, calcBounds, equalCoords } from "../../../utils/Positioning.js";
-import { s as styles } from "../../../../../chunks/TooltipDesktop.module-6PuIi5BD.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-DPI6ERZY.js";
 const flowToTipTranslations = {
   [ETooltipFlowTypes.COLUMN]: "translateX",
   [ETooltipFlowTypes.ROW]: "translateY"

package/components/Tooltip/components/desktop/components/TooltipDesktopTip.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { ETooltipDirection } from "../../../enums.js";
-import { c as clsx } from "../../../../../chunks/vendor-BxhAzfnS.js";
-import { s as styles } from "../../../../../chunks/TooltipDesktop.module-6PuIi5BD.js";
+import { c as clsx } from "../../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-DPI6ERZY.js";
 const DIRECTION_CLASS_NAMES = {
   [ETooltipDirection.UP]: styles.up,
   [ETooltipDirection.DOWN]: styles.down,

package/components/Tooltip/components/mobile/TooltipMobile.js

@@ -5,11 +5,11 @@ import { Portal } from "../../../Portal/Portal.js";
 import { DropdownMobile } from "../../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../../../Dropdown/mobile/DropdownMobileBody.js";
 import { TooltipMobileCloseButton } from "./components/TooltipMobileCloseButton.js";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
-const tooltipMobile = "tooltipMobile__cf1e5a59";
-const tooltipMobileContent = "tooltipMobileContent__afffc960";
-const headerless = "headerless__ab2adb39";
-const closeButton = "closeButton__5341ba2d";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+const tooltipMobile = "tooltipMobile__ad659f73";
+const tooltipMobileContent = "tooltipMobileContent__fac9e402";
+const headerless = "headerless__6a8ecadb";
+const closeButton = "closeButton__92057b5f";
 const styles = {
   tooltipMobile,
   tooltipMobileContent,

package/components/TopOverlay/TopOverlay.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { FocusTrapExtended } from "../FocusTrapExtended/FocusTrapExtended.js";
 import { Overlay } from "../Overlay/Overlay.js";
 import { EOverlayDirection } from "../Overlay/OverlayBase.js";
 import { getLightBoxScreenTop, getNextTopPosition } from "./utils.js";
-const topOverlayMask = "topOverlayMask__89331618";
-const topOverlayWrapper = "topOverlayWrapper__25fda147";
-const closing = "closing__6799ca8e";
-const opened = "opened__fea48b7d";
-const topOverlayPanel = "topOverlayPanel__40693603";
-const topOverlay = "topOverlay__bc5ed805";
+const topOverlayMask = "topOverlayMask__c6781b57";
+const topOverlayWrapper = "topOverlayWrapper__9a9b7a2f";
+const closing = "closing__47d2ec53";
+const opened = "opened__55d6f1ef";
+const topOverlayPanel = "topOverlayPanel__510e911f";
+const topOverlay = "topOverlay__0403b529";
 const styles = {
   topOverlayMask,
   topOverlayWrapper,