@sberbusiness/triplex-next 1.34.0 → 1.35.0

package/components/TabsLine/components/TabsLineItem.js

@@ -1,60 +1,66 @@
-import { jsx as i } from "react/jsx-runtime";
-import h, { useState as f, createElement as y } from "react";
-import { c as E } from "../../../chunks/vendor-D5cfSbgz.js";
-import { createSizeToClassNameMap as N } from "../../../utils/classNameMaps.js";
-import { Badge as S } from "../../Badge/Badge.js";
-import { EComponentSize as v } from "../../../enums/EComponentSize.js";
-import { Text as x } from "../../Typography/Text.js";
-import { tabsLineSizeToTextSizeMap as L } from "../utils.js";
-import { EFontType as p } from "../../Typography/enums.js";
-import { s as e } from "../../../chunks/TabsLine.module-DzWGxbiq.js";
-const R = N(e), z = h.forwardRef(
+import { jsx } from "react/jsx-runtime";
+import React__default, { useState, createElement } from "react";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.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-Mm1XmLbz.js";
+const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const TabsLineItem = React__default.forwardRef(
   ({
-    id: l,
-    label: c,
-    selected: t,
-    showNotificationIcon: d,
-    size: o = v.MD,
-    onFocus: a,
-    onBlur: s,
-    onMouseEnter: C,
-    onMouseLeave: I,
-    ...u
-  }, M) => {
-    const [T, m] = f(!1), [b, n] = f(!1);
-    return /* @__PURE__ */ y(
+    id,
+    label,
+    selected,
+    showNotificationIcon,
+    size = EComponentSize.MD,
+    onFocus,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    ...htmlButtonAttributes
+  }, ref) => {
+    const [focused, setFocused] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const handleFocus = (e) => {
+      setFocused(true);
+      onFocus == null ? void 0 : onFocus(e);
+    };
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur == null ? void 0 : onBlur(e);
+    };
+    return /* @__PURE__ */ createElement(
       "button",
       {
         type: "button",
-        onFocus: (r) => {
-          m(!0), a == null || a(r);
-        },
-        onBlur: (r) => {
-          m(!1), s == null || s(r);
-        },
-        onMouseEnter: () => n(!0),
-        onMouseLeave: () => n(!1),
-        ...u,
-        key: l,
-        className: E(e.tab, R[o], { [e.active]: !!t }),
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        ...htmlButtonAttributes,
+        key: id,
+        className: clsx(styles.tab, sizeToClassNameMap[size], { [styles.active]: Boolean(selected) }),
         role: "tab",
-        "aria-selected": t,
-        ref: M
+        "aria-selected": selected,
+        ref
       },
-      /* @__PURE__ */ i(
-        x,
+      /* @__PURE__ */ jsx(
+        Text,
         {
-          size: L[o],
-          type: t || T || b ? p.PRIMARY : p.SECONDARY,
-          children: c
+          size: tabsLineSizeToTextSizeMap[size],
+          type: selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY,
+          children: label
         }
       ),
-      d && /* @__PURE__ */ i(S.Dot, { size: o, className: e.notificationIcon })
+      showNotificationIcon && /* @__PURE__ */ jsx(Badge.Dot, { size, className: styles.notificationIcon })
     );
   }
 );
-z.displayName = "TabsLineItem";
+TabsLineItem.displayName = "TabsLineItem";
 export {
-  z as TabsLineItem
+  TabsLineItem
 };
 //# sourceMappingURL=TabsLineItem.js.map

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

@@ -0,0 +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":["React"],"mappings":";;;;;;;;;;AAyBA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,eAAeA,eAAM;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;"}

package/components/TabsLine/components/TabsLineMobile.js

@@ -1,21 +1,26 @@
-import { jsx as n } from "react/jsx-runtime";
-import { TabsLineItem as c } from "./TabsLineItem.js";
-const d = "tabsLineMobileWrapper__06bea8ea", p = "tabsLineMobile__d3684a17", a = {
-  tabsLineMobileWrapper: d,
-  tabsLineMobile: p
-}, u = ({ onChangeTab: l, selectedId: r, tabs: i }) => {
-  if (!i.length)
+import { jsx } from "react/jsx-runtime";
+import { TabsLineItem } from "./TabsLineItem.js";
+const tabsLineMobileWrapper = "tabsLineMobileWrapper__fd402fe5";
+const tabsLineMobile = "tabsLineMobile__0faed7af";
+const styles = {
+  tabsLineMobileWrapper,
+  tabsLineMobile
+};
+const TabsLineMobile = ({ onChangeTab, selectedId, tabs }) => {
+  if (!tabs.length) {
     return null;
-  const o = ({ selected: L, ...e }) => {
-    const b = (t) => {
-      var s;
-      l(e.id), (s = e.onClick) == null || s.call(e, t);
+  }
+  const renderTab = ({ selected, ...item }) => {
+    const handleClick = (event) => {
+      var _a;
+      onChangeTab(item.id);
+      (_a = item.onClick) == null ? void 0 : _a.call(item, event);
     };
-    return /* @__PURE__ */ n(c, { selected: r === e.id, ...e, onClick: b }, e.id);
+    return /* @__PURE__ */ jsx(TabsLineItem, { selected: selectedId === item.id, ...item, onClick: handleClick }, item.id);
   };
-  return /* @__PURE__ */ n("div", { className: a.tabsLineMobileWrapper, children: /* @__PURE__ */ n("div", { className: a.tabsLineMobile, children: i.map(o) }) });
+  return /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobileWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobile, children: tabs.map(renderTab) }) });
 };
 export {
-  u as TabsLineMobile
+  TabsLineMobile
 };
 //# sourceMappingURL=TabsLineMobile.js.map

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

@@ -0,0 +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;"}

package/components/TabsLine/components/index.js

@@ -1,11 +1,11 @@
-import { TabsLineDesktop as r } from "./TabsLineDesktop.js";
-import { TabsLineDropdown as t } from "./TabsLineDropdown.js";
-import { TabsLineItem as i } from "./TabsLineItem.js";
-import { TabsLineMobile as n } from "./TabsLineMobile.js";
+import { TabsLineDesktop } from "./TabsLineDesktop.js";
+import { TabsLineDropdown } from "./TabsLineDropdown.js";
+import { TabsLineItem } from "./TabsLineItem.js";
+import { TabsLineMobile } from "./TabsLineMobile.js";
 export {
-  r as TabsLineDesktop,
-  t as TabsLineDropdown,
-  i as TabsLineItem,
-  n as TabsLineMobile
+  TabsLineDesktop,
+  TabsLineDropdown,
+  TabsLineItem,
+  TabsLineMobile
 };
 //# sourceMappingURL=index.js.map

package/components/TabsLine/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/components/TabsLine/index.js

@@ -1,13 +1,13 @@
-import { TabsLine as r } from "./TabsLine.js";
-import { TabsLineDesktop as t } from "./components/TabsLineDesktop.js";
-import { TabsLineDropdown as i } from "./components/TabsLineDropdown.js";
-import { TabsLineItem as n } from "./components/TabsLineItem.js";
-import { TabsLineMobile as a } from "./components/TabsLineMobile.js";
+import { TabsLine } from "./TabsLine.js";
+import { TabsLineDesktop } from "./components/TabsLineDesktop.js";
+import { TabsLineDropdown } from "./components/TabsLineDropdown.js";
+import { TabsLineItem } from "./components/TabsLineItem.js";
+import { TabsLineMobile } from "./components/TabsLineMobile.js";
 export {
-  r as TabsLine,
-  t as TabsLineDesktop,
-  i as TabsLineDropdown,
-  n as TabsLineItem,
-  a as TabsLineMobile
+  TabsLine,
+  TabsLineDesktop,
+  TabsLineDropdown,
+  TabsLineItem,
+  TabsLineMobile
 };
 //# sourceMappingURL=index.js.map

package/components/TabsLine/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/components/TabsLine/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/TabsLine/utils.js

@@ -1,11 +1,11 @@
-import { EComponentSize as e } from "../../enums/EComponentSize.js";
-import { ETextSize as o } from "../Typography/enums.js";
-const m = {
-  [e.LG]: o.B2,
-  [e.MD]: o.B3,
-  [e.SM]: o.B4
+import { EComponentSize } from "../../enums/EComponentSize.js";
+import { ETextSize } from "../Typography/enums.js";
+const tabsLineSizeToTextSizeMap = {
+  [EComponentSize.LG]: ETextSize.B2,
+  [EComponentSize.MD]: ETextSize.B3,
+  [EComponentSize.SM]: ETextSize.B4
 };
 export {
-  m as tabsLineSizeToTextSizeMap
+  tabsLineSizeToTextSizeMap
 };
 //# sourceMappingURL=utils.js.map

package/components/TabsLine/utils.js.map

@@ -0,0 +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;"}

package/components/Tag/Tag.js

@@ -1,70 +1,84 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import D, { useCallback as S } from "react";
-import { c as E } from "../../chunks/vendor-D5cfSbgz.js";
-import { EditStrokeSrvIcon24 as L, EditStrokeSrvIcon20 as N, EditStrokeSrvIcon16 as v, CrossStrokeSrvIcon24 as y, CrossStrokeSrvIcon20 as z, CrossStrokeSrvIcon16 as G } from "@sberbusiness/icons-next";
-import { Text as h } from "../Typography/Text.js";
-import { ETextSize as I, EFontType as _ } from "../Typography/enums.js";
-import { ButtonIcon as T } from "../Button/ButtonIcon.js";
-import { createSizeToClassNameMap as j } from "../../utils/classNameMaps.js";
-import { EComponentSize as e } from "../../enums/EComponentSize.js";
-const A = "tag__9c2afc90", R = "sm__81c30cb4", w = "md__ed515c10", F = "lg__3a96ddb3", P = "content__bee5b380", l = {
-  tag: A,
-  sm: R,
-  md: w,
-  lg: F,
-  content: P
-}, Y = j(l), b = {
-  [e.SM]: I.B4,
-  [e.MD]: I.B3,
-  [e.LG]: I.B2
-}, q = {
-  [e.SM]: /* @__PURE__ */ o(v, { paletteIndex: 5 }),
-  [e.MD]: /* @__PURE__ */ o(N, { paletteIndex: 5 }),
-  [e.LG]: /* @__PURE__ */ o(L, { paletteIndex: 5 })
-}, H = {
-  [e.SM]: /* @__PURE__ */ o(G, { paletteIndex: 5 }),
-  [e.MD]: /* @__PURE__ */ o(z, { paletteIndex: 5 }),
-  [e.LG]: /* @__PURE__ */ o(y, { paletteIndex: 5 })
-}, $ = D.forwardRef(
-  ({ children: f, id: s, className: u, size: r, disabled: n, onRemove: a, onEdit: c, removeButtonProps: x, editButtonProps: M, ...g }, C) => {
-    const k = S(() => {
-      const t = n ? _.DISABLED : _.PRIMARY;
-      return /* @__PURE__ */ o(h, { className: l.content, type: t, size: b[r], children: f });
-    }, [f, r, n]), B = S(() => {
-      const { onClick: t, ...m } = M || {};
-      return /* @__PURE__ */ o(
-        T,
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useCallback } from "react";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.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__40f37593";
+const sm = "sm__70c06e7b";
+const md = "md__023df381";
+const lg = "lg__08630819";
+const content = "content__33a48847";
+const styles = {
+  tag,
+  sm,
+  md,
+  lg,
+  content
+};
+const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const sizeToTextSizeMap = {
+  [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 sizeToRemoveIconMap = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon16, { paletteIndex: 5 }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon20, { paletteIndex: 5 }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(CrossStrokeSrvIcon24, { paletteIndex: 5 })
+};
+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: n,
-          onClick: (p) => {
-            c == null || c(s), t == null || t(p);
+          disabled,
+          onClick: (event) => {
+            onEdit == null ? void 0 : onEdit(id);
+            onClick == null ? void 0 : onClick(event);
           },
-          ...m,
-          children: q[r]
+          ...restEditButtonProps,
+          children: sizeToEditIconMap[size]
         }
       );
-    }, [s, r, n, M, c]), d = S(() => {
-      const { onClick: t, ...m } = x || {};
-      return /* @__PURE__ */ o(
-        T,
+    }, [id, size, disabled, editButtonProps, onEdit]);
+    const renderRemoveButton = useCallback(() => {
+      const { onClick, ...restRemoveButtonProps } = removeButtonProps || {};
+      return /* @__PURE__ */ jsx(
+        ButtonIcon,
         {
-          disabled: n,
-          onClick: (p) => {
-            a == null || a(s), t == null || t(p);
+          disabled,
+          onClick: (event) => {
+            onRemove == null ? void 0 : onRemove(id);
+            onClick == null ? void 0 : onClick(event);
           },
-          ...m,
-          children: H[r]
+          ...restRemoveButtonProps,
+          children: sizeToRemoveIconMap[size]
         }
       );
-    }, [s, r, n, x, a]);
-    return /* @__PURE__ */ i("span", { className: E(l.tag, Y[r], u), ...g, ref: C, children: [
-      k(),
-      c && B(),
-      d()
+    }, [id, size, disabled, removeButtonProps, onRemove]);
+    return /* @__PURE__ */ jsxs("span", { className: clsx(styles.tag, sizeToClassNameMap[size], className), ...restProps, ref, children: [
+      renderContent(),
+      onEdit && renderEditButton(),
+      renderRemoveButton()
     ] });
   }
 );
 export {
-  $ as Tag
+  Tag
 };
 //# sourceMappingURL=Tag.js.map

package/components/Tag/Tag.js.map

@@ -0,0 +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;"}

package/components/Tag/index.js

@@ -1,5 +1,5 @@
-import { Tag as a } from "./Tag.js";
+import { Tag } from "./Tag.js";
 export {
-  a as Tag
+  Tag
 };
 //# sourceMappingURL=index.js.map

package/components/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Tag/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/TagColor/TagColor.js

@@ -1,38 +1,50 @@
-import { jsx as t } from "react/jsx-runtime";
-import l from "react";
-import { c as f } from "../../chunks/vendor-D5cfSbgz.js";
-import { createSizeToClassNameMap as m } from "../../utils/classNameMaps.js";
-import { ETagColorStatus as s } from "./enums.js";
-const i = "tagColor__e821cda0", d = "sm__453140e6", g = "md__44cb9056", C = "lg__0812c8ef", S = "success__0b5f4097", p = "info__882ad9c9", A = "warning__a4b9f4d1", T = "error__bf10d86e", u = "content__190c9814", o = {
-  tagColor: i,
-  sm: d,
-  md: g,
-  lg: C,
-  default: "default__a9b81f38",
-  success: S,
-  info: p,
-  warning: A,
-  error: T,
-  content: u
-}, N = m(o), E = {
-  [s.DEFAULT]: o.default,
-  [s.SUCCESS]: o.success,
-  [s.INFO]: o.info,
-  [s.WARNING]: o.warning,
-  [s.ERROR]: o.error
-}, R = l.forwardRef(
-  ({ children: r, className: c, size: n, status: a = s.DEFAULT, ...e }, _) => /* @__PURE__ */ t(
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
+import { ETagColorStatus } from "./enums.js";
+const tagColor = "tagColor__875c3a1f";
+const sm = "sm__18fc8885";
+const md = "md__cc01a007";
+const lg = "lg__062e4fdf";
+const success = "success__35a17dab";
+const info = "info__51f75671";
+const warning = "warning__6d150b45";
+const error = "error__d733b1d8";
+const content = "content__7063ac5a";
+const styles = {
+  tagColor,
+  sm,
+  md,
+  lg,
+  "default": "default__59b838cb",
+  success,
+  info,
+  warning,
+  error,
+  content
+};
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
+const STATUS_TO_CLASS_NAME_MAP = {
+  [ETagColorStatus.DEFAULT]: styles.default,
+  [ETagColorStatus.SUCCESS]: styles.success,
+  [ETagColorStatus.INFO]: styles.info,
+  [ETagColorStatus.WARNING]: styles.warning,
+  [ETagColorStatus.ERROR]: styles.error
+};
+const TagColor = React__default.forwardRef(
+  ({ children, className, size, status = ETagColorStatus.DEFAULT, ...restProps }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: f(o.tagColor, N[n], E[a], c),
-      ...e,
-      ref: _,
-      children: /* @__PURE__ */ t("span", { className: o.content, children: r })
+      className: clsx(styles.tagColor, SIZE_TO_CLASS_NAME_MAP[size], STATUS_TO_CLASS_NAME_MAP[status], className),
+      ...restProps,
+      ref,
+      children: /* @__PURE__ */ jsx("span", { className: styles.content, children })
     }
   )
 );
-R.displayName = "TagColor";
+TagColor.displayName = "TagColor";
 export {
-  R as TagColor
+  TagColor
 };
 //# sourceMappingURL=TagColor.js.map

package/components/TagColor/TagColor.js.map

@@ -0,0 +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":["React"],"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,WAAWA,eAAM;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

@@ -1,5 +1,12 @@
-var n = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SUCCESS = "success", e.INFO = "info", e.WARNING = "warning", e.ERROR = "error", e))(n || {});
+var ETagColorStatus = /* @__PURE__ */ ((ETagColorStatus2) => {
+  ETagColorStatus2["DEFAULT"] = "default";
+  ETagColorStatus2["SUCCESS"] = "success";
+  ETagColorStatus2["INFO"] = "info";
+  ETagColorStatus2["WARNING"] = "warning";
+  ETagColorStatus2["ERROR"] = "error";
+  return ETagColorStatus2;
+})(ETagColorStatus || {});
 export {
-  n as ETagColorStatus
+  ETagColorStatus
 };
 //# sourceMappingURL=enums.js.map

package/components/TagColor/enums.js.map

@@ -0,0 +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;"}

package/components/TagColor/index.js

@@ -1,7 +1,7 @@
-import { TagColor as t } from "./TagColor.js";
-import { ETagColorStatus as e } from "./enums.js";
+import { TagColor } from "./TagColor.js";
+import { ETagColorStatus } from "./enums.js";
 export {
-  e as ETagColorStatus,
-  t as TagColor
+  ETagColorStatus,
+  TagColor
 };
 //# sourceMappingURL=index.js.map

package/components/TagColor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/TagColor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/TagGroup/TagGroup.js

@@ -1,25 +1,31 @@
-import { jsx as e } from "react/jsx-runtime";
-import p from "react";
-import { c } from "../../chunks/vendor-D5cfSbgz.js";
-import { createSizeToClassNameMap as f } from "../../utils/classNameMaps.js";
-const l = "tagGroup__2723ff95", _ = "sm__d8eaad87", g = "md__0a0b0461", d = "lg__16aa995f", o = {
-  tagGroup: l,
-  sm: _,
-  md: g,
-  lg: d
-}, i = f(o), N = p.forwardRef(
-  ({ children: a, className: s, size: t, ...r }, m) => /* @__PURE__ */ e(
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
+const tagGroup = "tagGroup__b8fa9422";
+const sm = "sm__50099b88";
+const md = "md__5a38d3f1";
+const lg = "lg__eefe7b76";
+const styles = {
+  tagGroup,
+  sm,
+  md,
+  lg
+};
+const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const TagGroup = React__default.forwardRef(
+  ({ children, className, size, ...restProps }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: c(o.tagGroup, i[t], s),
+      className: clsx(styles.tagGroup, sizeToClassNameMap[size], className),
       role: "group",
-      ...r,
-      ref: m,
-      children: a
+      ...restProps,
+      ref,
+      children
     }
   )
 );
 export {
-  N as TagGroup
+  TagGroup
 };
 //# sourceMappingURL=TagGroup.js.map

package/components/TagGroup/TagGroup.js.map

@@ -0,0 +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":["React"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,WAAWA,eAAM;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;"}

package/components/TagGroup/index.js

@@ -1,5 +1,5 @@
-import { TagGroup as p } from "./TagGroup.js";
+import { TagGroup } from "./TagGroup.js";
 export {
-  p as TagGroup
+  TagGroup
 };
 //# sourceMappingURL=index.js.map