@sberbusiness/triplex-next 1.42.0 → 1.44.0

package/components/TabsExtended/components/TabsExtendedTabsWrapper.js

@@ -1,106 +1,109 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React__default, { useContext, useState, useRef, useLayoutEffect, isValidElement } from "react";
-import { g as useResizeDetector, c as clsx, h as pickBy } from "../../../chunks/vendor-DfvHt3TJ.js";
+import React__default, { useContext, useState, useRef, useCallback, useLayoutEffect, isValidElement } from "react";
+import { g as useResizeDetector, c as clsx, h as pickBy } from "../../../chunks/vendor-D4wvHis9.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-DOxO-O0b.js";
-const TabsExtendedTabsWrapper = ({
-  children,
-  className,
-  ...htmlDivAttributes
-}) => {
-  const { setDropdownItemsIds, setInlineItemsIds, dropdownRef } = useContext(TabsExtendedContext);
-  const [dropdownWidth, setDropdownWidth] = useState(0);
-  const tabsFakeRef = useRef(null);
-  const childrenCount = useRef(React__default.Children.count(children));
-  const checkVisibleItems = () => {
-    if (tabsFakeRef.current) {
-      const { children: children2 } = tabsFakeRef.current;
-      let { right: containerRight } = tabsFakeRef.current.getBoundingClientRect();
+import { s as styles } from "../../../chunks/TabsExtended.module-DJH-YNzW.js";
+const TAB_ITEM_ID_ATTRIBUTE = "data-tab-item-id";
+const TABS_CONTAINER_RIGHT_OFFSET = 4;
+const RESIZE_REFRESH_RATE_MS = 150;
+const FAKE_TAB_CONTEXT = { isFakeTab: true };
+const stripDataAttributes = (nodes) => React__default.Children.map(nodes, (child) => {
+  if (!isValidElement(child)) {
+    return child;
+  }
+  const filteredProps = pickBy(child.props, (_value, key) => !key.startsWith("data-"));
+  return React__default.createElement(child.type, filteredProps);
+});
+const TabsExtendedTabsWrapper = React__default.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => {
+    const { setDropdownItemsIds, setInlineItemsIds, dropdownRef } = useContext(TabsExtendedContext);
+    const [dropdownWidth, setDropdownWidth] = useState(0);
+    const [isTabsFakeMounted, setIsTabsFakeMounted] = useState(false);
+    const tabsFakeRef = useRef(null);
+    const childrenCountRef = useRef(React__default.Children.count(children));
+    const checkVisibleItems = useCallback(() => {
+      const tabsFakeNode = tabsFakeRef.current;
+      if (!tabsFakeNode) {
+        return;
+      }
+      const containerRight = tabsFakeNode.getBoundingClientRect().right - TABS_CONTAINER_RIGHT_OFFSET;
       const dropdownIds = [];
       const inlineIds = [];
       let overflow = false;
-      containerRight = containerRight - 4;
-      Array.from(children2).forEach((tab) => {
+      Array.from(tabsFakeNode.children).forEach((tab) => {
+        const tabId = tab.getAttribute(TAB_ITEM_ID_ATTRIBUTE);
+        if (tabId === null) {
+          return;
+        }
         const { right } = tab.getBoundingClientRect();
         if (containerRight - dropdownWidth < right) {
-          dropdownIds.push(tab.getAttribute("data-tab-item-id"));
-          if (!overflow && containerRight < right) {
+          dropdownIds.push(tabId);
+          if (containerRight < right) {
             overflow = true;
           }
         } else {
-          if (tab.getAttribute("data-tab-item-id")) {
-            inlineIds.push(tab.getAttribute("data-tab-item-id"));
-          }
+          inlineIds.push(tabId);
         }
       });
-      if (overflow) {
-        setDropdownItemsIds(dropdownIds);
-      } else {
-        setDropdownItemsIds([]);
-      }
+      setDropdownItemsIds(overflow ? dropdownIds : []);
       setInlineItemsIds(inlineIds);
-    }
-  };
-  const setNewDropdownWidth = () => {
-    if (dropdownRef.current) {
-      const { width } = dropdownRef.current.getBoundingClientRect();
+    }, [dropdownWidth, setDropdownItemsIds, setInlineItemsIds]);
+    const { ref: resizeRef } = useResizeDetector({
+      handleWidth: true,
+      onResize: checkVisibleItems,
+      refreshMode: "throttle",
+      refreshRate: RESIZE_REFRESH_RATE_MS
+    });
+    const setTabsFakeNode = useCallback(
+      (node) => {
+        if (tabsFakeRef.current !== node) {
+          tabsFakeRef.current = node;
+          if (node !== null) {
+            setIsTabsFakeMounted(true);
+          }
+        }
+        resizeRef(node);
+      },
+      [resizeRef]
+    );
+    const syncDropdownWidth = () => {
+      const dropdownNode = dropdownRef.current;
+      if (!dropdownNode) {
+        return;
+      }
+      const { width } = dropdownNode.getBoundingClientRect();
       if (width !== dropdownWidth) {
         setDropdownWidth(width);
       }
-    }
-  };
-  const setNewChildrenCount = () => {
-    const count = React__default.Children.count(children);
-    if (childrenCount.current !== count) {
-      childrenCount.current = count;
-      checkVisibleItems();
-    }
-  };
-  useLayoutEffect(() => {
-    setNewDropdownWidth();
-    setNewChildrenCount();
-  });
-  useLayoutEffect(checkVisibleItems, [dropdownWidth]);
-  const stripDataAttributes = (toProcess) => {
-    return React__default.Children.map(toProcess, (child) => {
-      if (!isValidElement(child)) {
-        return child;
+    };
+    const syncChildrenCount = () => {
+      const count = React__default.Children.count(children);
+      if (childrenCountRef.current !== count) {
+        childrenCountRef.current = count;
+        checkVisibleItems();
       }
-      const filteredProps = pickBy(child.props, (_val, key) => !key.startsWith("data-"));
-      return React__default.createElement(child.type, filteredProps);
+    };
+    useLayoutEffect(() => {
+      syncDropdownWidth();
+      syncChildrenCount();
     });
-  };
-  const { ref: resizeRef } = useResizeDetector({
-    handleWidth: true,
-    onResize: checkVisibleItems,
-    refreshMode: "throttle",
-    refreshRate: 150
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: styles.tabsFake,
-        ref: (node) => {
-          if (tabsFakeRef.current !== node) {
-            tabsFakeRef.current = node;
-          }
-          resizeRef(node);
-        },
-        children: /* @__PURE__ */ jsx(TabsExtendedTabContext.Provider, { value: { isFakeTab: true }, children: stripDataAttributes(children) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(styles.tabsReal, { [styles.hidden]: !tabsFakeRef.current }, className),
-        ...htmlDivAttributes,
-        children
-      }
-    )
-  ] });
-};
+    useLayoutEffect(checkVisibleItems, [checkVisibleItems]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: styles.tabsFake, ref: setTabsFakeNode, children: /* @__PURE__ */ jsx(TabsExtendedTabContext.Provider, { value: FAKE_TAB_CONTEXT, children: stripDataAttributes(children) }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(styles.tabsReal, { [styles.hidden]: !isTabsFakeMounted }, className),
+          ...htmlDivAttributes,
+          ref,
+          children
+        }
+      )
+    ] });
+  }
+);
+TabsExtendedTabsWrapper.displayName = "TabsExtendedTabsWrapper";
 export {
   TabsExtendedTabsWrapper
 };

package/components/TabsExtended/components/TabsExtendedTabsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtendedTabsWrapper.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTabsWrapper.tsx"],"sourcesContent":["import React, { useContext, useState, useRef, useLayoutEffect, isValidElement } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport pickBy from \"lodash/pickBy\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TabsExtendedTabContext } from \"./TabsExtendedTabContext\";\nimport styles from \"../styles/TabsExtended.module.less\";\n\n/** Свойства компонента TabsExtendedTabsWrapper. */\nexport interface ITabsExtendedTabsWrapperProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Контейнер табов.\n * Рендерит инлайн табы и определяет табы, которые должны быть отрендерены в Dropdown.\n */\nexport const TabsExtendedTabsWrapper: React.FC<ITabsExtendedTabsWrapperProps> = ({\n    children,\n    className,\n    ...htmlDivAttributes\n}) => {\n    const { setDropdownItemsIds, setInlineItemsIds, dropdownRef } = useContext(TabsExtendedContext);\n    const [dropdownWidth, setDropdownWidth] = useState(0);\n    const tabsFakeRef = useRef<HTMLDivElement>(null);\n    const childrenCount = useRef(React.Children.count(children));\n\n    const checkVisibleItems = () => {\n        if (tabsFakeRef.current) {\n            const { children } = tabsFakeRef.current;\n            let { right: containerRight } = tabsFakeRef.current.getBoundingClientRect();\n            const dropdownIds: string[] = [];\n            const inlineIds: string[] = [];\n            let overflow = false;\n\n            // Padding-right контейнера равен 2px и отступ между кнопками 2px. Правая граница таба не должна выходить за (граница контейнера - 4px).\n            containerRight = containerRight - 4;\n\n            Array.from(children).forEach((tab) => {\n                const { right } = tab.getBoundingClientRect();\n\n                if (containerRight - dropdownWidth < right) {\n                    dropdownIds.push(tab.getAttribute(\"data-tab-item-id\")!);\n                    if (!overflow && containerRight < right) {\n                        overflow = true;\n                    }\n                } else {\n                    if (tab.getAttribute(\"data-tab-item-id\")) {\n                        inlineIds.push(tab.getAttribute(\"data-tab-item-id\")!);\n                    }\n                }\n            });\n\n            if (overflow) {\n                setDropdownItemsIds(dropdownIds);\n            } else {\n                setDropdownItemsIds([]);\n            }\n\n            setInlineItemsIds(inlineIds);\n        }\n    };\n\n    const setNewDropdownWidth = () => {\n        if (dropdownRef.current) {\n            const { width } = dropdownRef.current.getBoundingClientRect();\n\n            if (width !== dropdownWidth) {\n                setDropdownWidth(width);\n            }\n        }\n    };\n\n    const setNewChildrenCount = () => {\n        const count = React.Children.count(children);\n\n        if (childrenCount.current !== count) {\n            childrenCount.current = count;\n            checkVisibleItems();\n        }\n    };\n\n    useLayoutEffect(() => {\n        setNewDropdownWidth();\n        setNewChildrenCount();\n    });\n\n    useLayoutEffect(checkVisibleItems, [dropdownWidth]);\n\n    /** Возвращает children без `data-` атрибутов */\n    const stripDataAttributes = (toProcess: React.ReactNode): React.ReactNode => {\n        return React.Children.map(toProcess, (child) => {\n            // Если не может иметь `data-` атрибутов, вернуть как есть\n            if (!isValidElement(child)) {\n                return child;\n            }\n\n            // Оставить только пропы, не начинающиеся с `data-`\n            const filteredProps = pickBy(child.props, (_val, key) => !key.startsWith(\"data-\"));\n\n            return React.createElement(child.type, filteredProps);\n        });\n    };\n\n    const { ref: resizeRef } = useResizeDetector({\n        handleWidth: true,\n        onResize: checkVisibleItems,\n        refreshMode: \"throttle\",\n        refreshRate: 150,\n    });\n\n    return (\n        <>\n            {/* Скрытый контейнер с дубликатом табов, для вычисления табов, передаваемых в Dropdown. */}\n            {/* TabsFake идут в коде обязательно выше, чем tabsReal. */}\n            <div\n                className={styles.tabsFake}\n                ref={(node) => {\n                    if (tabsFakeRef.current !== node) {\n                        (tabsFakeRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n                    }\n\n                    resizeRef(node);\n                }}\n            >\n                <TabsExtendedTabContext.Provider value={{ isFakeTab: true }}>\n                    {stripDataAttributes(children)}\n                </TabsExtendedTabContext.Provider>\n            </div>\n\n            <div\n                className={clsx(styles.tabsReal, { [styles.hidden]: !tabsFakeRef.current }, className)}\n                {...htmlDivAttributes}\n            >\n                {children}\n            </div>\n        </>\n    );\n};\n"],"names":["React","children"],"mappings":"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"}
+{"version":3,"file":"TabsExtendedTabsWrapper.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTabsWrapper.tsx"],"sourcesContent":["import React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport pickBy from \"lodash/pickBy\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TabsExtendedTabContext, ITabsExtendedTabContext } from \"./TabsExtendedTabContext\";\nimport styles from \"../styles/TabsExtended.module.less\";\n\n/** Свойства компонента TabsExtendedTabsWrapper. */\nexport interface ITabsExtendedTabsWrapperProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Атрибут, по которому таб опознаётся среди дочерних элементов скрытого контейнера. */\nconst TAB_ITEM_ID_ATTRIBUTE = \"data-tab-item-id\";\n\n/** Padding-right контейнера равен 2px и отступ между кнопками 2px. Правая граница таба не должна выходить за (граница контейнера - 4px). */\nconst TABS_CONTAINER_RIGHT_OFFSET = 4;\n\n/** Интервал троттлинга обработчика изменения ширины контейнера, мс. */\nconst RESIZE_REFRESH_RATE_MS = 150;\n\n/** Значение контекста для табов из скрытого контейнера. */\nconst FAKE_TAB_CONTEXT: ITabsExtendedTabContext = { isFakeTab: true };\n\n/** Возвращает children без `data-` атрибутов. */\nconst stripDataAttributes = (nodes: React.ReactNode): React.ReactNode =>\n    React.Children.map(nodes, (child) => {\n        // Если не может иметь `data-` атрибутов, вернуть как есть.\n        if (!isValidElement(child)) {\n            return child;\n        }\n\n        // Оставить только пропы, не начинающиеся с `data-`.\n        const filteredProps = pickBy(child.props, (_value, key) => !key.startsWith(\"data-\"));\n\n        return React.createElement(child.type, filteredProps);\n    });\n\n/**\n * Контейнер табов.\n * Рендерит инлайн табы и определяет табы, которые должны быть отрендерены в Dropdown.\n */\nexport const TabsExtendedTabsWrapper = React.forwardRef<HTMLDivElement, ITabsExtendedTabsWrapperProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => {\n        const { setDropdownItemsIds, setInlineItemsIds, dropdownRef } = useContext(TabsExtendedContext);\n        const [dropdownWidth, setDropdownWidth] = useState(0);\n        // Отображаемые табы скрыты, пока скрытый контейнер не смонтирован и ширины табов не измерены.\n        const [isTabsFakeMounted, setIsTabsFakeMounted] = useState(false);\n        const tabsFakeRef = useRef<HTMLDivElement | null>(null);\n        const childrenCountRef = useRef(React.Children.count(children));\n\n        /** Распределяет табы на отображаемые в строке и уезжающие в Dropdown. */\n        const checkVisibleItems = useCallback(() => {\n            const tabsFakeNode = tabsFakeRef.current;\n\n            if (!tabsFakeNode) {\n                return;\n            }\n\n            const containerRight = tabsFakeNode.getBoundingClientRect().right - TABS_CONTAINER_RIGHT_OFFSET;\n            const dropdownIds: string[] = [];\n            const inlineIds: string[] = [];\n            let overflow = false;\n\n            Array.from(tabsFakeNode.children).forEach((tab) => {\n                const tabId = tab.getAttribute(TAB_ITEM_ID_ATTRIBUTE);\n\n                if (tabId === null) {\n                    return;\n                }\n\n                const { right } = tab.getBoundingClientRect();\n\n                if (containerRight - dropdownWidth < right) {\n                    dropdownIds.push(tabId);\n\n                    if (containerRight < right) {\n                        overflow = true;\n                    }\n                } else {\n                    inlineIds.push(tabId);\n                }\n            });\n\n            setDropdownItemsIds(overflow ? dropdownIds : []);\n            setInlineItemsIds(inlineIds);\n        }, [dropdownWidth, setDropdownItemsIds, setInlineItemsIds]);\n\n        const { ref: resizeRef } = useResizeDetector({\n            handleWidth: true,\n            onResize: checkVisibleItems,\n            refreshMode: \"throttle\",\n            refreshRate: RESIZE_REFRESH_RATE_MS,\n        });\n\n        const setTabsFakeNode = useCallback(\n            (node: HTMLDivElement | null) => {\n                if (tabsFakeRef.current !== node) {\n                    tabsFakeRef.current = node;\n\n                    if (node !== null) {\n                        setIsTabsFakeMounted(true);\n                    }\n                }\n\n                resizeRef(node);\n            },\n            [resizeRef],\n        );\n\n        /** Синхронизирует ширину Dropdown: она уменьшает место, доступное табам. */\n        const syncDropdownWidth = () => {\n            const dropdownNode = dropdownRef.current;\n\n            if (!dropdownNode) {\n                return;\n            }\n\n            const { width } = dropdownNode.getBoundingClientRect();\n\n            if (width !== dropdownWidth) {\n                setDropdownWidth(width);\n            }\n        };\n\n        /** Пересчитывает табы, когда их количество изменилось. */\n        const syncChildrenCount = () => {\n            const count = React.Children.count(children);\n\n            if (childrenCountRef.current !== count) {\n                childrenCountRef.current = count;\n                checkVisibleItems();\n            }\n        };\n\n        useLayoutEffect(() => {\n            syncDropdownWidth();\n            syncChildrenCount();\n        });\n\n        useLayoutEffect(checkVisibleItems, [checkVisibleItems]);\n\n        return (\n            <>\n                {/* Скрытый контейнер с дубликатом табов, для вычисления табов, передаваемых в Dropdown. */}\n                {/* TabsFake идут в коде обязательно выше, чем tabsReal. */}\n                <div className={styles.tabsFake} ref={setTabsFakeNode}>\n                    <TabsExtendedTabContext.Provider value={FAKE_TAB_CONTEXT}>\n                        {stripDataAttributes(children)}\n                    </TabsExtendedTabContext.Provider>\n                </div>\n\n                <div\n                    className={clsx(styles.tabsReal, { [styles.hidden]: !isTabsFakeMounted }, className)}\n                    {...htmlDivAttributes}\n                    ref={ref}\n                >\n                    {children}\n                </div>\n            </>\n        );\n    },\n);\n\nTabsExtendedTabsWrapper.displayName = \"TabsExtendedTabsWrapper\";\n"],"names":["React"],"mappings":"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"}

package/components/TabsExtended/enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"enums.js","sources":["../../../src/components/TabsExtended/enums.ts"],"sourcesContent":["export enum ETabsExtendedType {\n    TYPE_1 = \"type1\",\n    TYPE_2 = \"type2\",\n}\n"],"names":["ETabsExtendedType"],"mappings":"AAAO,IAAK,sCAAAA,uBAAL;AACHA,qBAAA,QAAA,IAAS;AACTA,qBAAA,QAAA,IAAS;AAFD,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;"}
+{"version":3,"file":"enums.js","sources":["../../../src/components/TabsExtended/enums.ts"],"sourcesContent":["/** Тип оформления табов: задаёт фон контейнера и кнопок. Выбирается по фону страницы, на которой стоят табы. */\nexport enum ETabsExtendedType {\n    /** Серый фон контейнера — для табов на белом фоне страницы. */\n    TYPE_1 = \"type1\",\n    /** Белый фон контейнера — для табов на затенённом фоне страницы. */\n    TYPE_2 = \"type2\",\n}\n"],"names":["ETabsExtendedType"],"mappings":"AACO,IAAK,sCAAAA,uBAAL;AAEHA,qBAAA,QAAA,IAAS;AAETA,qBAAA,QAAA,IAAS;AAJD,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;"}

package/components/TabsExtended/utils.js

@@ -1,7 +1,7 @@
 import "./enums.js";
 import "../../enums/EComponentSize.js";
-import { a, T } from "../../chunks/utils-DEIy9WE_.js";
 import "../Typography/enums.js";
+import { a, T } from "../../chunks/utils-CTCsYynd.js";
 export {
   a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP,
   T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP

package/components/TabsLine/TabsLine.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { MobileView } from "../MobileView/MobileView.js";
 import "../MobileView/useMobileView.js";
 import { TabsLineDesktop } from "./components/TabsLineDesktop.js";
 import { TabsLineMobile } from "./components/TabsLineMobile.js";
-import { s as styles } from "../../chunks/TabsLine.module-BKT6NOs3.js";
+import { s as styles } from "../../chunks/TabsLine.module-_HQwnwAW.js";
 import "./components/TabsLineDropdown.js";
 import "./components/TabsLineItem.js";
 const TabsLine = ({

package/components/TabsLine/components/TabsLineDesktop.js

@@ -3,8 +3,8 @@ import { useState, useRef, useEffect } from "react";
 import { TabsLineDropdown } from "./TabsLineDropdown.js";
 import { TabsLineItem } from "./TabsLineItem.js";
 import { isKey } from "../../../utils/keyboard.js";
-import { l as lodashExports } from "../../../chunks/vendor-DfvHt3TJ.js";
-import { s as styles } from "../../../chunks/TabsLine.module-BKT6NOs3.js";
+import { l as lodashExports } from "../../../chunks/vendor-D4wvHis9.js";
+import { s as styles } from "../../../chunks/TabsLine.module-_HQwnwAW.js";
 const TabsLineDesktop = ({
   tabs,
   dropdownTargetHtmlAttributes,

package/components/TabsLine/components/TabsLineDropdown.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, createElement } from "react";
-import { u as uniqueId, c as clsx } from "../../../chunks/vendor-DfvHt3TJ.js";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import { DropdownListContext } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-DHdXJ6f2.js";
+import "../../../chunks/DropdownListItem-DOjFvzKN.js";
 import { EDropdownWidth } from "../../Dropdown/desktop/enums.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
@@ -21,7 +21,7 @@ import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { Dropdown } from "../../Dropdown/Dropdown.js";
 import { CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { isKey } from "../../../utils/keyboard.js";
-import { s as styles } from "../../../chunks/TabsLine.module-BKT6NOs3.js";
+import { s as styles } from "../../../chunks/TabsLine.module-_HQwnwAW.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";

package/components/TabsLine/components/TabsLineItem.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useState, createElement } from "react";
-import { c as clsx } from "../../../chunks/vendor-DfvHt3TJ.js";
+import { c as clsx } from "../../../chunks/vendor-D4wvHis9.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-BKT6NOs3.js";
+import { s as styles } from "../../../chunks/TabsLine.module-_HQwnwAW.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const TabsLineItem = React__default.forwardRef(
   ({

package/components/TabsLine/components/TabsLineMobile.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { TabsLineItem } from "./TabsLineItem.js";
-const tabsLineMobileWrapper = "tabsLineMobileWrapper__112e979a";
-const tabsLineMobile = "tabsLineMobile__5625e30d";
+const tabsLineMobileWrapper = "tabsLineMobileWrapper__6bf546d9";
+const tabsLineMobile = "tabsLineMobile__efd46b43";
 const styles = {
   tabsLineMobileWrapper,
   tabsLineMobile

package/components/Tag/Tag.js

@@ -1,17 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useCallback } from "react";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
+import React__default from "react";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.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__e3f0867a";
-const sm = "sm__83cab5da";
-const md = "md__be4c07dd";
-const lg = "lg__5f2edfc2";
-const content = "content__e85d5775";
+const tag = "tag__4c756317";
+const sm = "sm__bbb1aa63";
+const md = "md__3f54358e";
+const lg = "lg__6be1e7ac";
+const content = "content__2ed02a32";
 const styles = {
   tag,
   sm,
@@ -19,65 +19,60 @@ const styles = {
   lg,
   content
 };
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
-const sizeToTextSizeMap = {
+const ICON_PALETTE_INDEX = 5;
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
+const SIZE_TO_TEXT_SIZE_MAP = {
   [EComponentSize.SM]: ETextSize.B4,
   [EComponentSize.MD]: ETextSize.B3,
   [EComponentSize.LG]: ETextSize.B2
 };
-const sizeToEditIconMap = {
-  [EComponentSize.SM]: /* @__PURE__ */ jsx(EditStrokeSrvIcon16, { paletteIndex: 5 }),
-  [EComponentSize.MD]: /* @__PURE__ */ jsx(EditStrokeSrvIcon20, { paletteIndex: 5 }),
-  [EComponentSize.LG]: /* @__PURE__ */ jsx(EditStrokeSrvIcon24, { paletteIndex: 5 })
+const SIZE_TO_EDIT_ICON_MAP = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(EditStrokeSrvIcon16, { paletteIndex: ICON_PALETTE_INDEX }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(EditStrokeSrvIcon20, { paletteIndex: ICON_PALETTE_INDEX }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(EditStrokeSrvIcon24, { paletteIndex: ICON_PALETTE_INDEX })
 };
-const sizeToRemoveIconMap = {
-  [EComponentSize.SM]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon16, { paletteIndex: 5 }),
-  [EComponentSize.MD]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon20, { paletteIndex: 5 }),
-  [EComponentSize.LG]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon24, { paletteIndex: 5 })
+const SIZE_TO_REMOVE_ICON_MAP = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon16, { paletteIndex: ICON_PALETTE_INDEX }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon20, { paletteIndex: ICON_PALETTE_INDEX }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon24, { paletteIndex: ICON_PALETTE_INDEX })
 };
 const Tag = React__default.forwardRef(
   ({ children, id, className, size, disabled, onRemove, onEdit, removeButtonProps, editButtonProps, ...restProps }, ref) => {
-    const renderContent = useCallback(() => {
-      const type = disabled ? EFontType.DISABLED : EFontType.PRIMARY;
-      return /* @__PURE__ */ jsx(Text, { className: styles.content, type, size: sizeToTextSizeMap[size], children });
-    }, [children, size, disabled]);
-    const renderEditButton = useCallback(() => {
-      const { onClick, ...restEditButtonProps } = editButtonProps || {};
-      return /* @__PURE__ */ jsx(
-        ButtonIcon,
-        {
-          disabled,
-          onClick: (event) => {
-            onEdit == null ? void 0 : onEdit(id);
-            onClick == null ? void 0 : onClick(event);
-          },
-          ...restEditButtonProps,
-          children: sizeToEditIconMap[size]
-        }
-      );
-    }, [id, size, disabled, editButtonProps, onEdit]);
-    const renderRemoveButton = useCallback(() => {
-      const { onClick, ...restRemoveButtonProps } = removeButtonProps || {};
-      return /* @__PURE__ */ jsx(
-        ButtonIcon,
-        {
-          disabled,
-          onClick: (event) => {
-            onRemove == null ? void 0 : onRemove(id);
-            onClick == null ? void 0 : onClick(event);
-          },
-          ...restRemoveButtonProps,
-          children: sizeToRemoveIconMap[size]
-        }
-      );
-    }, [id, size, disabled, removeButtonProps, onRemove]);
-    return /* @__PURE__ */ jsxs("span", { className: clsx(styles.tag, sizeToClassNameMap[size], className), ...restProps, ref, children: [
-      renderContent(),
-      onEdit && renderEditButton(),
-      renderRemoveButton()
-    ] });
+    const { onClick: onEditButtonClick, ...restEditButtonProps } = editButtonProps ?? {};
+    const { onClick: onRemoveButtonClick, ...restRemoveButtonProps } = removeButtonProps ?? {};
+    const handleEditClick = (event) => {
+      onEdit == null ? void 0 : onEdit(id);
+      onEditButtonClick == null ? void 0 : onEditButtonClick(event);
+    };
+    const handleRemoveClick = (event) => {
+      onRemove == null ? void 0 : onRemove(id);
+      onRemoveButtonClick == null ? void 0 : onRemoveButtonClick(event);
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        id,
+        className: clsx(styles.tag, SIZE_TO_CLASS_NAME_MAP[size], className),
+        ...restProps,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: styles.content,
+              type: disabled ? EFontType.DISABLED : EFontType.PRIMARY,
+              size: SIZE_TO_TEXT_SIZE_MAP[size],
+              children
+            }
+          ),
+          onEdit && /* @__PURE__ */ jsx(ButtonIcon, { disabled, onClick: handleEditClick, ...restEditButtonProps, children: SIZE_TO_EDIT_ICON_MAP[size] }),
+          /* @__PURE__ */ jsx(ButtonIcon, { disabled, onClick: handleRemoveClick, ...restRemoveButtonProps, children: SIZE_TO_REMOVE_ICON_MAP[size] })
+        ]
+      }
+    );
   }
 );
+Tag.displayName = "Tag";
 export {
   Tag
 };

package/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport {\n    CrossStrokeSrvIcon16,\n    CrossStrokeSrvIcon20,\n    CrossStrokeSrvIcon24,\n    EditStrokeSrvIcon16,\n    EditStrokeSrvIcon20,\n    EditStrokeSrvIcon24,\n} from \"@sberbusiness/icons-next\";\nimport { ITagProps } from \"@sberbusiness/triplex-next/components/Tag/types\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { EFontType, ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { ButtonIcon } from \"@sberbusiness/triplex-next/components/Button/ButtonIcon\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport styles from \"./styles/Tag.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nconst sizeToTextSizeMap = {\n    [EComponentSize.SM]: ETextSize.B4,\n    [EComponentSize.MD]: ETextSize.B3,\n    [EComponentSize.LG]: ETextSize.B2,\n};\n\nconst sizeToEditIconMap = {\n    [EComponentSize.SM]: <EditStrokeSrvIcon16 paletteIndex={5} />,\n    [EComponentSize.MD]: <EditStrokeSrvIcon20 paletteIndex={5} />,\n    [EComponentSize.LG]: <EditStrokeSrvIcon24 paletteIndex={5} />,\n};\n\nconst sizeToRemoveIconMap = {\n    [EComponentSize.SM]: <CrossStrokeSrvIcon16 paletteIndex={5} />,\n    [EComponentSize.MD]: <CrossStrokeSrvIcon20 paletteIndex={5} />,\n    [EComponentSize.LG]: <CrossStrokeSrvIcon24 paletteIndex={5} />,\n};\n\n/** Компонент, который демонстрирует выбранное значение того или иного параметра. */\nexport const Tag = React.forwardRef<HTMLSpanElement, ITagProps>(\n    (\n        { children, id, className, size, disabled, onRemove, onEdit, removeButtonProps, editButtonProps, ...restProps },\n        ref,\n    ) => {\n        const renderContent = useCallback(() => {\n            const type = disabled ? EFontType.DISABLED : EFontType.PRIMARY;\n\n            return (\n                <Text className={styles.content} type={type} size={sizeToTextSizeMap[size]}>\n                    {children}\n                </Text>\n            );\n        }, [children, size, disabled]);\n\n        const renderEditButton = useCallback(() => {\n            const { onClick, ...restEditButtonProps } = editButtonProps || {};\n\n            return (\n                <ButtonIcon\n                    disabled={disabled}\n                    onClick={(event) => {\n                        onEdit?.(id);\n                        onClick?.(event);\n                    }}\n                    {...restEditButtonProps}\n                >\n                    {sizeToEditIconMap[size]}\n                </ButtonIcon>\n            );\n        }, [id, size, disabled, editButtonProps, onEdit]);\n\n        const renderRemoveButton = useCallback(() => {\n            const { onClick, ...restRemoveButtonProps } = removeButtonProps || {};\n\n            return (\n                <ButtonIcon\n                    disabled={disabled}\n                    onClick={(event) => {\n                        onRemove?.(id);\n                        onClick?.(event);\n                    }}\n                    {...restRemoveButtonProps}\n                >\n                    {sizeToRemoveIconMap[size]}\n                </ButtonIcon>\n            );\n        }, [id, size, disabled, removeButtonProps, onRemove]);\n\n        return (\n            <span className={clsx(styles.tag, sizeToClassNameMap[size], className)} {...restProps} ref={ref}>\n                {renderContent()}\n                {onEdit && renderEditButton()}\n                {renderRemoveButton()}\n            </span>\n        );\n    },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB,yBAAyB,MAAM;AAE1D,MAAM,oBAAoB;AAAA,EACtB,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AACnC;AAEA,MAAM,oBAAoB;AAAA,EACtB,CAAC,eAAe,EAAE,GAAG,oBAAC,qBAAA,EAAoB,cAAc,GAAG;AAAA,EAC3D,CAAC,eAAe,EAAE,GAAG,oBAAC,qBAAA,EAAoB,cAAc,GAAG;AAAA,EAC3D,CAAC,eAAe,EAAE,GAAG,oBAAC,qBAAA,EAAoB,cAAc,EAAA,CAAG;AAC/D;AAEA,MAAM,sBAAsB;AAAA,EACxB,CAAC,eAAe,EAAE,GAAG,oBAAC,sBAAA,EAAqB,cAAc,GAAG;AAAA,EAC5D,CAAC,eAAe,EAAE,GAAG,oBAAC,sBAAA,EAAqB,cAAc,GAAG;AAAA,EAC5D,CAAC,eAAe,EAAE,GAAG,oBAAC,sBAAA,EAAqB,cAAc,EAAA,CAAG;AAChE;AAGO,MAAM,MAAMA,eAAM;AAAA,EACrB,CACI,EAAE,UAAU,IAAI,WAAW,MAAM,UAAU,UAAU,QAAQ,mBAAmB,iBAAiB,GAAG,UAAA,GACpG,QACC;AACD,UAAM,gBAAgB,YAAY,MAAM;AACpC,YAAM,OAAO,WAAW,UAAU,WAAW,UAAU;AAEvD,aACI,oBAAC,MAAA,EAAK,WAAW,OAAO,SAAS,MAAY,MAAM,kBAAkB,IAAI,GACpE,SAAA,CACL;AAAA,IAER,GAAG,CAAC,UAAU,MAAM,QAAQ,CAAC;AAE7B,UAAM,mBAAmB,YAAY,MAAM;AACvC,YAAM,EAAE,SAAS,GAAG,oBAAA,IAAwB,mBAAmB,CAAA;AAE/D,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA,SAAS,CAAC,UAAU;AAChB,6CAAS;AACT,+CAAU;AAAA,UACd;AAAA,UACC,GAAG;AAAA,UAEH,4BAAkB,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGnC,GAAG,CAAC,IAAI,MAAM,UAAU,iBAAiB,MAAM,CAAC;AAEhD,UAAM,qBAAqB,YAAY,MAAM;AACzC,YAAM,EAAE,SAAS,GAAG,sBAAA,IAA0B,qBAAqB,CAAA;AAEnE,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA,SAAS,CAAC,UAAU;AAChB,iDAAW;AACX,+CAAU;AAAA,UACd;AAAA,UACC,GAAG;AAAA,UAEH,8BAAoB,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGrC,GAAG,CAAC,IAAI,MAAM,UAAU,mBAAmB,QAAQ,CAAC;AAEpD,WACI,qBAAC,QAAA,EAAK,WAAW,KAAK,OAAO,KAAK,mBAAmB,IAAI,GAAG,SAAS,GAAI,GAAG,WAAW,KAClF,UAAA;AAAA,MAAA,cAAA;AAAA,MACA,UAAU,iBAAA;AAAA,MACV,mBAAA;AAAA,IAAmB,GACxB;AAAA,EAER;AACJ;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport {\n    CrossStrokeSrvIcon16,\n    CrossStrokeSrvIcon20,\n    CrossStrokeSrvIcon24,\n    EditStrokeSrvIcon16,\n    EditStrokeSrvIcon20,\n    EditStrokeSrvIcon24,\n} from \"@sberbusiness/icons-next\";\nimport { ITagProps } from \"@sberbusiness/triplex-next/components/Tag/types\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { EFontType, ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { ButtonIcon } from \"@sberbusiness/triplex-next/components/Button/ButtonIcon\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport styles from \"./styles/Tag.module.less\";\n\n/** Индекс цвета иконок в палитре — служебный серый, одинаковый для обеих кнопок. */\nconst ICON_PALETTE_INDEX = 5;\n\n/** Соответствие размера тега имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Соответствие размера тега размеру текста. */\nconst SIZE_TO_TEXT_SIZE_MAP: Record<EComponentSize, ETextSize> = {\n    [EComponentSize.SM]: ETextSize.B4,\n    [EComponentSize.MD]: ETextSize.B3,\n    [EComponentSize.LG]: ETextSize.B2,\n};\n\n/** Соответствие размера тега иконке кнопки редактирования. */\nconst SIZE_TO_EDIT_ICON_MAP: Record<EComponentSize, React.ReactElement> = {\n    [EComponentSize.SM]: <EditStrokeSrvIcon16 paletteIndex={ICON_PALETTE_INDEX} />,\n    [EComponentSize.MD]: <EditStrokeSrvIcon20 paletteIndex={ICON_PALETTE_INDEX} />,\n    [EComponentSize.LG]: <EditStrokeSrvIcon24 paletteIndex={ICON_PALETTE_INDEX} />,\n};\n\n/** Соответствие размера тега иконке кнопки удаления. */\nconst SIZE_TO_REMOVE_ICON_MAP: Record<EComponentSize, React.ReactElement> = {\n    [EComponentSize.SM]: <CrossStrokeSrvIcon16 paletteIndex={ICON_PALETTE_INDEX} />,\n    [EComponentSize.MD]: <CrossStrokeSrvIcon20 paletteIndex={ICON_PALETTE_INDEX} />,\n    [EComponentSize.LG]: <CrossStrokeSrvIcon24 paletteIndex={ICON_PALETTE_INDEX} />,\n};\n\n/**\n * Компонент, который демонстрирует выбранное значение того или иного параметра.\n *\n * Кнопка удаления рендерится всегда, кнопка редактирования — только когда передан `onEdit`.\n * Обе кнопки — `ButtonIcon` без текста, поэтому `aria-label` задаёт потребитель\n * через `removeButtonProps` и `editButtonProps`.\n */\nexport const Tag = React.forwardRef<HTMLSpanElement, ITagProps>(\n    (\n        { children, id, className, size, disabled, onRemove, onEdit, removeButtonProps, editButtonProps, ...restProps },\n        ref,\n    ) => {\n        // onClick кнопок вынимается из props, чтобы колбэк тега вызвался до пользовательского обработчика.\n        const { onClick: onEditButtonClick, ...restEditButtonProps } = editButtonProps ?? {};\n        const { onClick: onRemoveButtonClick, ...restRemoveButtonProps } = removeButtonProps ?? {};\n\n        const handleEditClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            onEdit?.(id);\n            onEditButtonClick?.(event);\n        };\n\n        const handleRemoveClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            onRemove?.(id);\n            onRemoveButtonClick?.(event);\n        };\n\n        return (\n            <span\n                id={id}\n                className={clsx(styles.tag, SIZE_TO_CLASS_NAME_MAP[size], className)}\n                {...restProps}\n                ref={ref}\n            >\n                <Text\n                    className={styles.content}\n                    type={disabled ? EFontType.DISABLED : EFontType.PRIMARY}\n                    size={SIZE_TO_TEXT_SIZE_MAP[size]}\n                >\n                    {children}\n                </Text>\n                {onEdit && (\n                    <ButtonIcon disabled={disabled} onClick={handleEditClick} {...restEditButtonProps}>\n                        {SIZE_TO_EDIT_ICON_MAP[size]}\n                    </ButtonIcon>\n                )}\n                <ButtonIcon disabled={disabled} onClick={handleRemoveClick} {...restRemoveButtonProps}>\n                    {SIZE_TO_REMOVE_ICON_MAP[size]}\n                </ButtonIcon>\n            </span>\n        );\n    },\n);\n\nTag.displayName = \"Tag\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,qBAAqB;AAG3B,MAAM,yBAAyB,yBAAyB,MAAM;AAG9D,MAAM,wBAA2D;AAAA,EAC7D,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AACnC;AAGA,MAAM,wBAAoE;AAAA,EACtE,CAAC,eAAe,EAAE,GAAG,oBAAC,qBAAA,EAAoB,cAAc,oBAAoB;AAAA,EAC5E,CAAC,eAAe,EAAE,GAAG,oBAAC,qBAAA,EAAoB,cAAc,oBAAoB;AAAA,EAC5E,CAAC,eAAe,EAAE,GAAG,oBAAC,qBAAA,EAAoB,cAAc,mBAAA,CAAoB;AAChF;AAGA,MAAM,0BAAsE;AAAA,EACxE,CAAC,eAAe,EAAE,GAAG,oBAAC,sBAAA,EAAqB,cAAc,oBAAoB;AAAA,EAC7E,CAAC,eAAe,EAAE,GAAG,oBAAC,sBAAA,EAAqB,cAAc,oBAAoB;AAAA,EAC7E,CAAC,eAAe,EAAE,GAAG,oBAAC,sBAAA,EAAqB,cAAc,mBAAA,CAAoB;AACjF;AASO,MAAM,MAAMA,eAAM;AAAA,EACrB,CACI,EAAE,UAAU,IAAI,WAAW,MAAM,UAAU,UAAU,QAAQ,mBAAmB,iBAAiB,GAAG,UAAA,GACpG,QACC;AAED,UAAM,EAAE,SAAS,mBAAmB,GAAG,oBAAA,IAAwB,mBAAmB,CAAA;AAClF,UAAM,EAAE,SAAS,qBAAqB,GAAG,sBAAA,IAA0B,qBAAqB,CAAA;AAExF,UAAM,kBAAkB,CAAC,UAA+C;AACpE,uCAAS;AACT,6DAAoB;AAAA,IACxB;AAEA,UAAM,oBAAoB,CAAC,UAA+C;AACtE,2CAAW;AACX,iEAAsB;AAAA,IAC1B;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,WAAW,KAAK,OAAO,KAAK,uBAAuB,IAAI,GAAG,SAAS;AAAA,QAClE,GAAG;AAAA,QACJ;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW,OAAO;AAAA,cAClB,MAAM,WAAW,UAAU,WAAW,UAAU;AAAA,cAChD,MAAM,sBAAsB,IAAI;AAAA,cAE/B;AAAA,YAAA;AAAA,UAAA;AAAA,UAEJ,UACG,oBAAC,YAAA,EAAW,UAAoB,SAAS,iBAAkB,GAAG,qBACzD,UAAA,sBAAsB,IAAI,EAAA,CAC/B;AAAA,UAEJ,oBAAC,cAAW,UAAoB,SAAS,mBAAoB,GAAG,uBAC3D,UAAA,wBAAwB,IAAI,EAAA,CACjC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,IAAI,cAAc;"}

package/components/TagColor/TagColor.js

@@ -1,23 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { ETagColorStatus } from "./enums.js";
-const tagColor = "tagColor__4b0184b6";
-const sm = "sm__c7405b5e";
-const md = "md__aa6f1070";
-const lg = "lg__09418524";
-const success = "success__b0cd6f72";
-const info = "info__cb967445";
-const warning = "warning__55023ae9";
-const error = "error__b43a1d5d";
-const content = "content__9873fd8a";
+const tagColor = "tagColor__78b7feef";
+const sm = "sm__9d36f205";
+const md = "md__5830e69e";
+const lg = "lg__7574e40a";
+const success = "success__cde98336";
+const info = "info__21bbb1a4";
+const warning = "warning__43e39d4f";
+const error = "error__6503b998";
+const content = "content__d1e893e3";
 const styles = {
   tagColor,
   sm,
   md,
   lg,
-  "default": "default__ed4a27d1",
+  "default": "default__ea302dff",
   success,
   info,
   warning,

package/components/TagGroup/TagGroup.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const tagGroup = "tagGroup__b2b8571a";
-const sm = "sm__a6c4d696";
-const md = "md__bb12c63b";
-const lg = "lg__0ec74e4e";
+const tagGroup = "tagGroup__3f70d191";
+const sm = "sm__433a9842";
+const md = "md__942921ed";
+const lg = "lg__93bc2c2e";
 const styles = {
   tagGroup,
   sm,

package/components/ThemeProvider/ThemeProvider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useLayoutEffect } from "react";
-import { t as canUseDom, w as updateCSS, x as removeCSS } from "../../chunks/vendor-DfvHt3TJ.js";
+import { w as canUseDom, x as updateCSS, y as removeCSS } from "../../chunks/vendor-D4wvHis9.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 { m as defaultsDeep } from "../../../chunks/vendor-DfvHt3TJ.js";
+import { m as defaultsDeep } from "../../../chunks/vendor-D4wvHis9.js";
 const ThemeProviderView = ({
   children,
   scopeClassName,

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

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../../../chunks/vendor-DfvHt3TJ.js";
+import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.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-CaPU2whC.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-B54hNcxs.js";
 const TooltipBody = React__default.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 }) });