@alphakits/ui 2.0.6 → 2.0.8

package/dist/badge/component.d.ts

@@ -11,7 +11,7 @@ export interface BadgeProps {
     /**
      *  Цвет компонента
      */
-    color?: 'accent' | 'secondary';
+    color?: 'accent' | 'secondary' | 'green' | 'orange' | 'red' | 'blue' | 'grey' | 'teal' | 'purple';
     /**
      * Размер компонента (только для view=count)
      */

package/dist/badge/component.js

@@ -1,33 +1,33 @@
 import { jsx as f } from "react/jsx-runtime";
 import l from "classnames";
-import e from "./index.module.css.js";
-const w = ({
-  className: r,
-  size: m = "m",
-  view: t = "count",
+import s from "./index.module.css.js";
+const C = ({
+  className: m,
+  size: t = "m",
+  view: o = "count",
   visibleIconOutline: d = !1,
-  content: s,
-  iconColor: i,
+  content: e,
+  iconColor: r,
   color: n = "secondary",
   dataTestId: p
 }) => {
-  const o = t === "count", c = o && typeof s == "number" && s <= 0, u = o && typeof s == "number" && s >= 100 ? "99+" : s, a = typeof s == "number" && s < 10;
+  const i = o === "count", c = i && typeof e == "number" && e <= 0, u = i && typeof e == "number" && e >= 100 ? "99+" : e, a = typeof e == "number" && e < 10;
   return /* @__PURE__ */ f(
     "div",
     {
       className: l(
-        e.component,
-        e[m],
-        e.view,
-        e[n],
-        i && e[i],
+        s.component,
+        s[t],
+        s[o],
+        s[n],
+        r && s[r],
         {
-          [e.isHidden]: c,
-          [e.dot]: !s,
-          [e.outline]: d,
-          [e.circle]: a
+          [s.isHidden]: c,
+          [s.dot]: !e,
+          [s.outline]: d,
+          [s.circle]: a
         },
-        r
+        m
       ),
       "data-test-id": p,
       children: u
@@ -35,6 +35,6 @@ const w = ({
   );
 };
 export {
-  w as Badge
+  C as Badge
 };
 //# sourceMappingURL=component.js.map

package/dist/badge/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/badge/component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport styles from './index.module.css';\n\nexport interface BadgeProps {\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     *  Вид компонента\n     */\n    view?: 'icon' | 'count';\n\n    /**\n     *  Цвет компонента\n     */\n    color?: 'accent' | 'secondary';\n\n    /**\n     * Размер компонента (только для view=count)\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     *  Видимость обводки вокруг иконки (только для view=icon)\n     */\n    visibleIconOutline?: boolean;\n\n    /**\n     * Контент компонента\n     */\n    content?: React.ReactNode | number | string;\n\n    /**\n     * Цветовое оформление иконки\n     */\n    iconColor?: 'positive' | 'attention' | 'negative' | 'tertiary' | 'secondary' | 'primary';\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n}\n\nexport const Badge = ({\n    className,\n    size = 'm',\n    view = 'count',\n    visibleIconOutline = false,\n    content,\n    iconColor,\n    color = 'secondary',\n    dataTestId,\n}: BadgeProps) => {\n    const isCountView = view === 'count';\n\n    const isHidden = isCountView && typeof content === 'number' && content <= 0;\n    const componentContent =\n        isCountView && typeof content === 'number' && content >= 100 ? '99+' : content;\n\n    const isCircle = typeof content === 'number' && content < 10;\n\n    return (\n        <div\n            className={ cn(\n                styles.component,\n                styles[size],\n                styles.view,\n                styles[color],\n                iconColor && styles[iconColor],\n                {\n                    [styles.isHidden]: isHidden,\n                    [styles.dot]: !content,\n                    [styles.outline]: visibleIconOutline,\n                    [styles.circle]: isCircle,\n                },\n                className,\n            ) }\n            data-test-id={ dataTestId }\n        >\n            { componentContent }\n        </div>\n    );\n};\n"],"names":["Badge","className","size","view","visibleIconOutline","content","iconColor","color","dataTestId","isCountView","isHidden","componentContent","isCircle","jsx","cn","styles"],"mappings":";;;AA+CO,MAAMA,IAAQ,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,oBAAAC,IAAqB;AAAA,EACrB,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AACJ,MAAkB;AACd,QAAMC,IAAcN,MAAS,SAEvBO,IAAWD,KAAe,OAAOJ,KAAY,YAAYA,KAAW,GACpEM,IACFF,KAAe,OAAOJ,KAAY,YAAYA,KAAW,MAAM,QAAQA,GAErEO,IAAW,OAAOP,KAAY,YAAYA,IAAU;AAE1D,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAYC;AAAA,QACRC,EAAO;AAAA,QACPA,EAAOb,CAAI;AAAA,QACXa,EAAO;AAAA,QACPA,EAAOR,CAAK;AAAA,QACZD,KAAaS,EAAOT,CAAS;AAAA,QAC7B;AAAA,UACI,CAACS,EAAO,QAAQ,GAAGL;AAAA,UACnB,CAACK,EAAO,GAAG,GAAG,CAACV;AAAA,UACf,CAACU,EAAO,OAAO,GAAGX;AAAA,UAClB,CAACW,EAAO,MAAM,GAAGH;AAAA,QAAA;AAAA,QAErBX;AAAA,MAAA;AAAA,MAEJ,gBAAeO;AAAA,MAEb,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGd;"}
+{"version":3,"file":"component.js","sources":["../../src/badge/component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport styles from './index.module.css';\n\nexport interface BadgeProps {\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     *  Вид компонента\n     */\n    view?: 'icon' | 'count';\n\n    /**\n     *  Цвет компонента\n     */\n    color?: 'accent' | 'secondary' | 'green' | 'orange' | 'red' | 'blue' | 'grey' | 'teal' | 'purple';\n\n    /**\n     * Размер компонента (только для view=count)\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     *  Видимость обводки вокруг иконки (только для view=icon)\n     */\n    visibleIconOutline?: boolean;\n\n    /**\n     * Контент компонента\n     */\n    content?: React.ReactNode | number | string;\n\n    /**\n     * Цветовое оформление иконки\n     */\n    iconColor?: 'positive' | 'attention' | 'negative' | 'tertiary' | 'secondary' | 'primary';\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n}\n\nexport const Badge = ({\n    className,\n    size = 'm',\n    view = 'count',\n    visibleIconOutline = false,\n    content,\n    iconColor,\n    color = 'secondary',\n    dataTestId,\n}: BadgeProps) => {\n    const isCountView = view === 'count';\n\n    const isHidden = isCountView && typeof content === 'number' && content <= 0;\n    const componentContent =\n        isCountView && typeof content === 'number' && content >= 100 ? '99+' : content;\n\n    const isCircle = typeof content === 'number' && content < 10;\n\n    return (\n        <div\n            className={ cn(\n                styles.component,\n                styles[size],\n                styles[view],\n                styles[color],\n                iconColor && styles[iconColor],\n                {\n                    [styles.isHidden]: isHidden,\n                    [styles.dot]: !content,\n                    [styles.outline]: visibleIconOutline,\n                    [styles.circle]: isCircle,\n                },\n                className,\n            ) }\n            data-test-id={ dataTestId }\n        >\n            { componentContent }\n        </div>\n    );\n};\n"],"names":["Badge","className","size","view","visibleIconOutline","content","iconColor","color","dataTestId","isCountView","isHidden","componentContent","isCircle","jsx","cn","styles"],"mappings":";;;AA+CO,MAAMA,IAAQ,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,oBAAAC,IAAqB;AAAA,EACrB,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AACJ,MAAkB;AACd,QAAMC,IAAcN,MAAS,SAEvBO,IAAWD,KAAe,OAAOJ,KAAY,YAAYA,KAAW,GACpEM,IACFF,KAAe,OAAOJ,KAAY,YAAYA,KAAW,MAAM,QAAQA,GAErEO,IAAW,OAAOP,KAAY,YAAYA,IAAU;AAE1D,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAYC;AAAA,QACRC,EAAO;AAAA,QACPA,EAAOb,CAAI;AAAA,QACXa,EAAOZ,CAAI;AAAA,QACXY,EAAOR,CAAK;AAAA,QACZD,KAAaS,EAAOT,CAAS;AAAA,QAC7B;AAAA,UACI,CAACS,EAAO,QAAQ,GAAGL;AAAA,UACnB,CAACK,EAAO,GAAG,GAAG,CAACV;AAAA,UACf,CAACU,EAAO,OAAO,GAAGX;AAAA,UAClB,CAACW,EAAO,MAAM,GAAGH;AAAA,QAAA;AAAA,QAErBX;AAAA,MAAA;AAAA,MAEJ,gBAAeO;AAAA,MAEb,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGd;"}

package/dist/badge/index.module.css

@@ -1 +1 @@
-:root{--badge-icon-bg-color: var(--color-bg-primary)}.component_ZLNa{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:99px;overflow:hidden}.accent_i-f-{background-color:var(--color-bg-accent);color:var(--color-text-primary-inverted)}.secondary_TJV0{background-color:var(--color-bg-secondary);color:var(--color-text-secondary)}.s_VUGf{font-size:11px;line-height:13px;font-weight:500;font-family:var(--font-family);height:16px;min-width:16px;padding:0 var(--gap-xs)}.m_vUD5{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);font-weight:700;height:20px;min-width:20px;padding:0 var(--gap-xs)}.l_Qq57{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);font-weight:700;height:24px;min-width:24px;padding:0 var(--gap-xs)}.circle_uaS5{padding:0;border-radius:var(--radius-circle)}.icon_AmgA{height:auto;min-width:0;padding:0;color:var(--color-graphic-positive);background-color:transparent}.icon_AmgA.positive_nd8h{color:var(--color-graphic-positive)}.icon_AmgA.attention_gK6W{color:var(--color-graphic-attention)}.icon_AmgA.negative_Q3IO{color:var(--color-graphic-negative)}.icon_AmgA.tertiary_PJi6{color:var(--color-graphic-tertiary)}.icon_AmgA.secondary_TJV0{color:var(--color-graphic-secondary)}.icon_AmgA.primary_6z3n{color:var(--color-graphic-primary)}.icon_AmgA:before{position:absolute;z-index:-1;inset:16%;background-color:var(--badge-icon-bg-color);border-radius:99px;content:""}.outline_59f8:before{inset:0}.dot_m71m{width:8px;height:8px;min-width:0;padding:0}.isHidden_wpIC{display:none}.count_UWIM{height:auto}
+:root{--badge-icon-bg-color: var(--color-bg-primary)}.component_ZLNa{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:99px;overflow:hidden}.accent_i-f-{background-color:var(--color-bg-accent);color:var(--color-text-primary-inverted)}.secondary_TJV0{background-color:var(--color-bg-secondary);color:var(--color-text-secondary)}.green_zrgX{background-color:color-mix(in srgb,var(--color-graphic-positive) 16%,transparent);color:var(--color-graphic-positive)}.orange_lX9C{background-color:color-mix(in srgb,var(--color-graphic-attention) 16%,transparent);color:var(--color-graphic-attention)}.red_d9v3{background-color:color-mix(in srgb,var(--color-graphic-negative) 16%,transparent);color:var(--color-graphic-negative)}.blue_-KAO{background-color:color-mix(in srgb,var(--color-graphic-accent) 16%,transparent);color:var(--color-graphic-accent)}.grey_HcST{background-color:color-mix(in srgb,var(--color-graphic-secondary) 16%,transparent);color:var(--color-graphic-secondary)}.teal_F3BI{background-color:color-mix(in srgb,var(--color-status-teal) 16%,transparent);color:var(--color-status-teal)}.purple_A2pW{background-color:color-mix(in srgb,var(--color-status-purple) 16%,transparent);color:var(--color-status-purple)}.s_VUGf{font-size:11px;line-height:13px;font-weight:500;font-family:var(--font-family);height:16px;min-width:16px;padding:0 var(--gap-xs)}.m_vUD5{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);font-weight:700;height:20px;min-width:20px;padding:0 var(--gap-xs)}.l_Qq57{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);font-weight:700;height:24px;min-width:24px;padding:0 var(--gap-xs)}.circle_uaS5{padding:0;border-radius:var(--radius-circle)}.icon_AmgA{height:auto;min-width:0;padding:0;color:var(--color-graphic-positive);background-color:transparent}.icon_AmgA.positive_nd8h{color:var(--color-graphic-positive)}.icon_AmgA.attention_gK6W{color:var(--color-graphic-attention)}.icon_AmgA.negative_Q3IO{color:var(--color-graphic-negative)}.icon_AmgA.tertiary_PJi6{color:var(--color-graphic-tertiary)}.icon_AmgA.secondary_TJV0{color:var(--color-graphic-secondary)}.icon_AmgA.primary_6z3n{color:var(--color-graphic-primary)}.icon_AmgA:before{position:absolute;z-index:-1;inset:16%;background-color:var(--badge-icon-bg-color);border-radius:99px;content:""}.outline_59f8:before{inset:0}.dot_m71m{width:8px;height:8px;min-width:0;padding:0}.isHidden_wpIC{display:none}.count_UWIM{height:auto}

package/dist/badge/index.module.css.js

@@ -1,41 +1,55 @@
 import './index.module.css';
-const t = "component_ZLNa", n = "accent_i-f-", o = "secondary_TJV0", c = "s_VUGf", e = "m_vUD5", i = "l_Qq57", s = "circle_uaS5", a = "icon_AmgA", r = "positive_nd8h", _ = "attention_gK6W", d = "negative_Q3IO", m = "tertiary_PJi6", l = "primary_6z3n", p = "outline_59f8", y = "dot_m71m", u = "isHidden_wpIC", v = "count_UWIM", g = {
+const t = "component_ZLNa", n = "accent_i-f-", e = "secondary_TJV0", o = "green_zrgX", c = "orange_lX9C", s = "red_d9v3", i = "blue_-KAO", r = "grey_HcST", a = "teal_F3BI", _ = "purple_A2pW", l = "s_VUGf", d = "m_vUD5", p = "l_Qq57", g = "circle_uaS5", u = "icon_AmgA", y = "positive_nd8h", m = "attention_gK6W", v = "negative_Q3IO", f = "tertiary_PJi6", A = "primary_6z3n", H = "outline_59f8", I = "dot_m71m", b = "isHidden_wpIC", U = "count_UWIM", W = {
   component: t,
   accent: n,
-  secondary: o,
-  s: c,
-  m: e,
-  l: i,
-  circle: s,
-  icon: a,
-  positive: r,
-  attention: _,
-  negative: d,
-  tertiary: m,
-  primary: l,
-  outline: p,
-  dot: y,
-  isHidden: u,
-  count: v
+  secondary: e,
+  green: o,
+  orange: c,
+  red: s,
+  blue: i,
+  grey: r,
+  teal: a,
+  purple: _,
+  s: l,
+  m: d,
+  l: p,
+  circle: g,
+  icon: u,
+  positive: y,
+  attention: m,
+  negative: v,
+  tertiary: f,
+  primary: A,
+  outline: H,
+  dot: I,
+  isHidden: b,
+  count: U
 };
 export {
   n as accent,
-  _ as attention,
-  s as circle,
+  m as attention,
+  i as blue,
+  g as circle,
   t as component,
-  v as count,
-  g as default,
-  y as dot,
-  a as icon,
-  u as isHidden,
-  i as l,
-  e as m,
-  d as negative,
-  p as outline,
-  r as positive,
-  l as primary,
-  c as s,
-  o as secondary,
-  m as tertiary
+  U as count,
+  W as default,
+  I as dot,
+  o as green,
+  r as grey,
+  u as icon,
+  b as isHidden,
+  p as l,
+  d as m,
+  v as negative,
+  c as orange,
+  H as outline,
+  y as positive,
+  A as primary,
+  _ as purple,
+  s as red,
+  l as s,
+  e as secondary,
+  a as teal,
+  f as tertiary
 };
 //# sourceMappingURL=index.module.css.js.map

package/dist/badge/index.module.css.js.map

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

package/dist/cell/base/component.d.ts

@@ -13,5 +13,11 @@ export type BaseProps = {
     dataTestId?: string;
     /** addon - контейнер для фото или иконки */
     addon?: React.ReactNode;
+    /** Компактное расположение addon рядом с текстом */
+    compactAddon?: boolean;
+    /** Запрет переноса заголовка и обрезка в одну строку */
+    singleLineTitle?: boolean;
+    /** Показывать tooltip только при обрезке заголовка */
+    showTitleTooltipOnOverflow?: boolean;
 };
 export declare const Base: React.FC<BaseProps>;

package/dist/cell/base/component.js

@@ -1,50 +1,82 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import p, { useRef as f } from "react";
-import u from "classnames";
-import { getDataTestId as g } from "../../__internal/utils/getDataTestId.js";
-import { useFocus as h } from "../../hooks/useFocus/index.js";
-import { Typography as s } from "../../typography/component.js";
-import { Pure as x } from "../pure/component.js";
-import e from "./index.module.css.js";
-const j = ({
-  className: c,
-  dataTestId: i,
-  title: t,
-  subtitle: r,
-  size: a = "m",
-  addon: n
+import { jsx as s, jsxs as z } from "react/jsx-runtime";
+import I, { useRef as u, useState as N, useMemo as E, useEffect as j } from "react";
+import p from "classnames";
+import { getDataTestId as k } from "../../__internal/utils/getDataTestId.js";
+import { useFocus as F } from "../../hooks/useFocus/index.js";
+import { Typography as v } from "../../typography/component.js";
+import { Pure as S } from "../pure/component.js";
+import r from "./index.module.css.js";
+const q = ({
+  className: h,
+  dataTestId: w,
+  title: e,
+  subtitle: m,
+  size: y = "m",
+  addon: g,
+  compactAddon: b,
+  singleLineTitle: i,
+  showTitleTooltipOnOverflow: n
 }) => {
-  const m = f(null), [d] = h(m, "keyboard");
-  return /* @__PURE__ */ o(
-    x,
+  const d = u(null), a = u(null), [x] = F(d, "keyboard"), [R, f] = N(!1), c = E(
+    () => typeof e == "string" || typeof e == "number" ? String(e) : void 0,
+    [e]
+  );
+  return j(() => {
+    if (!i || !n || !c) {
+      f(!1);
+      return;
+    }
+    const t = a.current;
+    if (!t) return;
+    const o = () => {
+      f(t.scrollWidth > t.clientWidth);
+    };
+    if (o(), typeof ResizeObserver != "undefined") {
+      const l = new ResizeObserver(o);
+      return l.observe(t), () => l.disconnect();
+    }
+    return window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
+  }, [i, n, c]), /* @__PURE__ */ s(
+    S,
     {
-      slot: n,
-      className: u(e.component, { [e.focused]: d }, c),
-      dataTestId: g("cell-action", i, !0),
+      slot: g,
+      compact: b,
+      className: p(r.component, { [r.focused]: x }, h),
+      dataTestId: k("cell-action", w, !0),
       tabIndex: 0,
-      size: a,
-      ref: m,
-      children: /* @__PURE__ */ l(p.Fragment, { children: [
-        t && /* @__PURE__ */ o(
-          s.Text,
+      size: y,
+      ref: d,
+      children: /* @__PURE__ */ z(I.Fragment, { children: [
+        e && /* @__PURE__ */ s(
+          "div",
           {
-            view: "title",
-            color: "primary",
-            weight: "medium",
-            tag: "div",
-            className: e.title,
-            children: t
+            ref: a,
+            className: p(r.title_wrap, {
+              [r.single_line]: i
+            }),
+            title: R && n ? c : void 0,
+            children: /* @__PURE__ */ s(
+              v.Text,
+              {
+                view: "title",
+                color: "primary",
+                weight: "medium",
+                tag: "div",
+                className: r.title,
+                children: e
+              }
+            )
           }
         ),
-        r && /* @__PURE__ */ o(
-          s.Text,
+        m && /* @__PURE__ */ s(
+          v.Text,
           {
             weight: "medium",
             view: "caps",
             tag: "div",
-            className: e.subtitle,
+            className: r.subtitle,
             color: "secondary",
-            children: r
+            children: m
           }
         )
       ] })
@@ -52,6 +84,6 @@ const j = ({
   );
 };
 export {
-  j as Base
+  q as Base
 };
 //# sourceMappingURL=component.js.map

package/dist/cell/base/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/cell/base/component.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '../../__internal/utils';\nimport { useFocus } from '../../hooks/useFocus';\nimport { Typography } from '../../typography';\nimport { Pure, PureProps } from '../pure/component';\n\nimport styles from './index.module.css';\n\nexport type BaseProps = {\n    /** Заголовок */\n    title?: React.ReactNode;\n    /** Подзаголовок */\n    subtitle?: React.ReactNode;\n    /** Css-класс для стилизации */\n    className?: string;\n    /** Размер ячейки */\n    size?: PureProps['size'];\n    /** Id компонента для тестов */\n    dataTestId?: string;\n\n    /** addon - контейнер для фото или иконки */\n    addon?: React.ReactNode;\n};\n\nexport const Base: React.FC<BaseProps> = ({\n    className,\n    dataTestId,\n    title,\n    subtitle,\n    size = 'm',\n    addon,\n}) => {\n    const componentRef = useRef<HTMLDivElement>(null);\n    const [focused] = useFocus(componentRef, 'keyboard');\n\n    return (\n        <Pure\n            slot={ addon }\n            className={ cn(styles.component, { [styles.focused]: focused }, className) }\n            dataTestId={ getDataTestId('cell-action', dataTestId, true) }\n            tabIndex={ 0 }\n            size={ size }\n            ref={ componentRef }\n        >\n            <React.Fragment>\n                { title && (\n                    <Typography.Text\n                        view=\"title\"\n                        color=\"primary\"\n                        weight=\"medium\"\n                        tag=\"div\"\n                        className={ styles.title }\n                    >\n                        { title }\n                    </Typography.Text>\n                ) }\n                { subtitle && (\n                    <Typography.Text\n                        weight=\"medium\"\n                        view=\"caps\"\n                        tag=\"div\"\n                        className={ styles.subtitle }\n                        color=\"secondary\"\n                    >\n                        { subtitle }\n                    </Typography.Text>\n                ) }\n            </React.Fragment>\n        </Pure>\n    );\n};\n"],"names":["Base","className","dataTestId","title","subtitle","size","addon","componentRef","useRef","focused","useFocus","jsx","Pure","cn","styles","getDataTestId","jsxs","React","Typography"],"mappings":";;;;;;;;AA0BO,MAAMA,IAA4B,CAAC;AAAA,EACtC,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AACJ,MAAM;AACF,QAAMC,IAAeC,EAAuB,IAAI,GAC1C,CAACC,CAAO,IAAIC,EAASH,GAAc,UAAU;AAEnD,SACI,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAON;AAAA,MACP,WAAYO,EAAGC,EAAO,WAAW,EAAE,CAACA,EAAO,OAAO,GAAGL,EAAA,GAAWR,CAAS;AAAA,MACzE,YAAac,EAAc,eAAeb,GAAY,EAAI;AAAA,MAC1D,UAAW;AAAA,MACX,MAAAG;AAAA,MACA,KAAME;AAAA,MAEN,UAAA,gBAAAS,EAACC,EAAM,UAAN,EACK,UAAA;AAAA,QAAAd,KACE,gBAAAQ;AAAA,UAACO,EAAW;AAAA,UAAX;AAAA,YACG,MAAK;AAAA,YACL,OAAM;AAAA,YACN,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAYJ,EAAO;AAAA,YAEjB,UAAAX;AAAA,UAAA;AAAA,QAAA;AAAA,QAGRC,KACE,gBAAAO;AAAA,UAACO,EAAW;AAAA,UAAX;AAAA,YACG,QAAO;AAAA,YACP,MAAK;AAAA,YACL,KAAI;AAAA,YACJ,WAAYJ,EAAO;AAAA,YACnB,OAAM;AAAA,YAEJ,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"component.js","sources":["../../../src/cell/base/component.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '../../__internal/utils';\nimport { useFocus } from '../../hooks/useFocus';\nimport { Typography } from '../../typography';\nimport { Pure, PureProps } from '../pure/component';\n\nimport styles from './index.module.css';\n\nexport type BaseProps = {\n    /** Заголовок */\n    title?: React.ReactNode;\n    /** Подзаголовок */\n    subtitle?: React.ReactNode;\n    /** Css-класс для стилизации */\n    className?: string;\n    /** Размер ячейки */\n    size?: PureProps['size'];\n    /** Id компонента для тестов */\n    dataTestId?: string;\n\n    /** addon - контейнер для фото или иконки */\n    addon?: React.ReactNode;\n    /** Компактное расположение addon рядом с текстом */\n    compactAddon?: boolean;\n    /** Запрет переноса заголовка и обрезка в одну строку */\n    singleLineTitle?: boolean;\n    /** Показывать tooltip только при обрезке заголовка */\n    showTitleTooltipOnOverflow?: boolean;\n};\n\nexport const Base: React.FC<BaseProps> = ({\n    className,\n    dataTestId,\n    title,\n    subtitle,\n    size = 'm',\n    addon,\n    compactAddon,\n    singleLineTitle,\n    showTitleTooltipOnOverflow,\n}) => {\n    const componentRef = useRef<HTMLDivElement>(null);\n    const titleRef = useRef<HTMLDivElement>(null);\n    const [focused] = useFocus(componentRef, 'keyboard');\n    const [isTitleOverflow, setIsTitleOverflow] = useState(false);\n\n    const titleTooltip = useMemo(\n        () => (\n            (typeof title === 'string' || typeof title === 'number')\n                ? String(title)\n                : undefined\n        ),\n        [title],\n    );\n\n    useEffect(() => {\n        if (!singleLineTitle || !showTitleTooltipOnOverflow || !titleTooltip) {\n            setIsTitleOverflow(false);\n            return undefined;\n        }\n\n        const node = titleRef.current;\n        if (!node) return undefined;\n\n        const checkOverflow = () => {\n            setIsTitleOverflow(node.scrollWidth > node.clientWidth);\n        };\n\n        checkOverflow();\n\n        if (typeof ResizeObserver !== 'undefined') {\n            const observer = new ResizeObserver(checkOverflow);\n            observer.observe(node);\n\n            return () => observer.disconnect();\n        }\n\n        window.addEventListener('resize', checkOverflow);\n        return () => window.removeEventListener('resize', checkOverflow);\n    }, [singleLineTitle, showTitleTooltipOnOverflow, titleTooltip]);\n\n    return (\n        <Pure\n            slot={ addon }\n            compact={ compactAddon }\n            className={ cn(styles.component, { [styles.focused]: focused }, className) }\n            dataTestId={ getDataTestId('cell-action', dataTestId, true) }\n            tabIndex={ 0 }\n            size={ size }\n            ref={ componentRef }\n        >\n            <React.Fragment>\n                { title && (\n                    <div\n                        ref={ titleRef }\n                        className={ cn(styles.title_wrap, {\n                            [styles.single_line]: singleLineTitle,\n                        }) }\n                        title={\n                            isTitleOverflow && showTitleTooltipOnOverflow\n                                ? titleTooltip\n                                : undefined\n                        }\n                    >\n                        <Typography.Text\n                            view=\"title\"\n                            color=\"primary\"\n                            weight=\"medium\"\n                            tag=\"div\"\n                            className={ styles.title }\n                        >\n                            { title }\n                        </Typography.Text>\n                    </div>\n                ) }\n                { subtitle && (\n                    <Typography.Text\n                        weight=\"medium\"\n                        view=\"caps\"\n                        tag=\"div\"\n                        className={ styles.subtitle }\n                        color=\"secondary\"\n                    >\n                        { subtitle }\n                    </Typography.Text>\n                ) }\n            </React.Fragment>\n        </Pure>\n    );\n};\n"],"names":["Base","className","dataTestId","title","subtitle","size","addon","compactAddon","singleLineTitle","showTitleTooltipOnOverflow","componentRef","useRef","titleRef","focused","useFocus","isTitleOverflow","setIsTitleOverflow","useState","titleTooltip","useMemo","useEffect","node","checkOverflow","observer","jsx","Pure","cn","styles","getDataTestId","jsxs","React","Typography"],"mappings":";;;;;;;;AAgCO,MAAMA,IAA4B,CAAC;AAAA,EACtC,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,4BAAAC;AACJ,MAAM;AACF,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAWD,EAAuB,IAAI,GACtC,CAACE,CAAO,IAAIC,EAASJ,GAAc,UAAU,GAC7C,CAACK,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GAEtDC,IAAeC;AAAA,IACjB,MACK,OAAOhB,KAAU,YAAY,OAAOA,KAAU,WACzC,OAAOA,CAAK,IACZ;AAAA,IAEV,CAACA,CAAK;AAAA,EAAA;AAGV,SAAAiB,EAAU,MAAM;AACZ,QAAI,CAACZ,KAAmB,CAACC,KAA8B,CAACS,GAAc;AAClE,MAAAF,EAAmB,EAAK;AACxB;AAAA,IACJ;AAEA,UAAMK,IAAOT,EAAS;AACtB,QAAI,CAACS,EAAM;AAEX,UAAMC,IAAgB,MAAM;AACxB,MAAAN,EAAmBK,EAAK,cAAcA,EAAK,WAAW;AAAA,IAC1D;AAIA,QAFAC,EAAA,GAEI,OAAO,kBAAmB,aAAa;AACvC,YAAMC,IAAW,IAAI,eAAeD,CAAa;AACjD,aAAAC,EAAS,QAAQF,CAAI,GAEd,MAAME,EAAS,WAAA;AAAA,IAC1B;AAEA,kBAAO,iBAAiB,UAAUD,CAAa,GACxC,MAAM,OAAO,oBAAoB,UAAUA,CAAa;AAAA,EACnE,GAAG,CAACd,GAAiBC,GAA4BS,CAAY,CAAC,GAG1D,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAOnB;AAAA,MACP,SAAUC;AAAA,MACV,WAAYmB,EAAGC,EAAO,WAAW,EAAE,CAACA,EAAO,OAAO,GAAGd,EAAA,GAAWZ,CAAS;AAAA,MACzE,YAAa2B,EAAc,eAAe1B,GAAY,EAAI;AAAA,MAC1D,UAAW;AAAA,MACX,MAAAG;AAAA,MACA,KAAMK;AAAA,MAEN,UAAA,gBAAAmB,EAACC,EAAM,UAAN,EACK,UAAA;AAAA,QAAA3B,KACE,gBAAAqB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAMZ;AAAA,YACN,WAAYc,EAAGC,EAAO,YAAY;AAAA,cAC9B,CAACA,EAAO,WAAW,GAAGnB;AAAA,YAAA,CACzB;AAAA,YACD,OACIO,KAAmBN,IACbS,IACA;AAAA,YAGV,UAAA,gBAAAM;AAAA,cAACO,EAAW;AAAA,cAAX;AAAA,gBACG,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,KAAI;AAAA,gBACJ,WAAYJ,EAAO;AAAA,gBAEjB,UAAAxB;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,QAGNC,KACE,gBAAAoB;AAAA,UAACO,EAAW;AAAA,UAAX;AAAA,YACG,QAAO;AAAA,YACP,MAAK;AAAA,YACL,KAAI;AAAA,YACJ,WAAYJ,EAAO;AAAA,YACnB,OAAM;AAAA,YAEJ,UAAAvB;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/cell/base/index.module.css

@@ -1 +1 @@
-.component_BNjZ{outline:none}.component_BNjZ .superEllipse_FONr{--super-ellipse-success-icon-color: var(--color-graphic-thirdly)}.component_BNjZ .iconMixColors_Zfj6{color:var(--color-graphic-primary)}.iconMixColors_Zfj6,.superEllipse_FONr{--super-ellipse-transition: fill .15s ease-in-out;--super-ellipse-icon-transition: color .15s ease-in-out;transition:transform .15s ease-in-out}.title_VeYl{display:flex;align-items:center}.title_VeYl+.subtitle_OOoZ{margin-top:var(--gap-2xs)}.focused_ootM{outline:2px solid var(--focus-color);outline-offset:2px}
+.component_BNjZ{outline:none}.component_BNjZ .superEllipse_FONr{--super-ellipse-success-icon-color: var(--color-graphic-thirdly)}.component_BNjZ .iconMixColors_Zfj6{color:var(--color-graphic-primary)}.iconMixColors_Zfj6,.superEllipse_FONr{--super-ellipse-transition: fill .15s ease-in-out;--super-ellipse-icon-transition: color .15s ease-in-out;transition:transform .15s ease-in-out}.title_wrap_10zd{display:flex;align-items:center}.title_wrap_10zd+.subtitle_OOoZ{margin-top:var(--gap-2xs)}.title_wrap_10zd{min-width:0}.title_VeYl{display:flex;align-items:center}.single_line_4wfi .title_VeYl{display:block;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.focused_ootM{outline:2px solid var(--focus-color);outline-offset:2px}

package/dist/cell/base/index.module.css.js

@@ -1,15 +1,19 @@
 import './index.module.css';
-const t = "component_BNjZ", o = "title_VeYl", e = "subtitle_OOoZ", s = "focused_ootM", c = {
+const t = "component_BNjZ", e = "title_wrap_10zd", o = "subtitle_OOoZ", n = "title_VeYl", s = "single_line_4wfi", l = "focused_ootM", i = {
   component: t,
-  title: o,
-  subtitle: e,
-  focused: s
+  title_wrap: e,
+  subtitle: o,
+  title: n,
+  single_line: s,
+  focused: l
 };
 export {
   t as component,
-  c as default,
-  s as focused,
-  e as subtitle,
-  o as title
+  i as default,
+  l as focused,
+  s as single_line,
+  o as subtitle,
+  n as title,
+  e as title_wrap
 };
 //# sourceMappingURL=index.module.css.js.map

package/dist/cell/base/index.module.css.js.map

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

package/dist/cell/pure/component.d.ts

@@ -9,6 +9,8 @@ type ComponentProps = {
     direction?: 'horizontal' | 'vertical';
     /** Размер ячейки */
     size?: 's' | 'm' | 'l';
+    /** Компактный режим расположения слота */
+    compact?: boolean;
     /** Сss-класс для стилизации контейнера */
     className?: string;
     /** Id компонента для тестов */

package/dist/cell/pure/component.js

@@ -1,31 +1,33 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
 import m from "classnames";
-import { getDataTestId as v } from "../../__internal/utils/getDataTestId.js";
+import { getDataTestId as h } from "../../__internal/utils/getDataTestId.js";
 import r from "./index.module.css.js";
-const g = u(
+const w = v(
   ({
     slot: e,
     size: t = "m",
+    compact: d = !1,
     order: o = "normal",
-    direction: d = "horizontal",
+    direction: c = "horizontal",
     children: i,
     className: n,
-    dataTestId: c,
-    ...l
-  }, p) => {
+    dataTestId: l,
+    ...p
+  }, f) => {
     const a = {
       [r.normalOrder]: o === "normal" && e,
       [r.reverseOrder]: o === "reverse" && e,
-      [r[d]]: !0
+      [r[c]]: !0,
+      [r.compact]: d
     };
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: p,
+        ref: f,
         className: m(r.component, r[t], { ...a }, n),
-        "data-test-id": v("cell-pure", c, !0),
-        ...l,
+        "data-test-id": h("cell-pure", l, !0),
+        ...p,
         children: [
           e && /* @__PURE__ */ s("div", { className: m(r.addon, { ...a }), children: e }),
           /* @__PURE__ */ s("div", { className: m(r.child, { ...a }), children: i })
@@ -35,6 +37,6 @@ const g = u(
   }
 );
 export {
-  g as Pure
+  w as Pure
 };
 //# sourceMappingURL=component.js.map

package/dist/cell/pure/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/cell/pure/component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '../../__internal/utils';\n\nimport styles from './index.module.css';\n\ntype ComponentProps = {\n    children?: React.ReactNode;\n    /** Слот для иконки */\n    slot?: React.ReactNode;\n    /** Порядок отображения слота и children */\n    order?: 'normal' | 'reverse';\n    /** Направление */\n    direction?: 'horizontal' | 'vertical';\n    /** Размер ячейки */\n    size?: 's' | 'm' | 'l';\n    /** Сss-класс для стилизации контейнера */\n    className?: string;\n    /** Id компонента для тестов */\n    dataTestId?: string;\n};\n\nexport type PureProps = Omit<HTMLAttributes<HTMLDivElement>, 'slot'> & ComponentProps;\n\n/**\n * Ячейка\n *\n * Отвечает за отступы и вертикальное или горизонтальное положение\n */\nexport const Pure = forwardRef<HTMLDivElement, PureProps>(\n    (\n        {\n            slot,\n            size = 'm',\n            order = 'normal',\n            direction = 'horizontal',\n            children,\n            className,\n            dataTestId,\n            ...props\n        },\n        ref,\n    ) => {\n        const addClasses = {\n            [styles.normalOrder]: order === 'normal' && slot,\n            [styles.reverseOrder]: order === 'reverse' && slot,\n            [styles[direction]]: true,\n        };\n\n        return (\n            <div\n                ref={ ref }\n                className={ cn(styles.component, styles[size], { ...addClasses }, className) }\n                data-test-id={ getDataTestId('cell-pure', dataTestId, true) }\n                { ...props }\n            >\n                { slot && <div className={ cn(styles.addon, { ...addClasses }) }>{ slot }</div> }\n                <div className={ cn(styles.child, { ...addClasses }) }>{ children }</div>\n            </div>\n        );\n    },\n);\n"],"names":["Pure","forwardRef","slot","size","order","direction","children","className","dataTestId","props","ref","addClasses","styles","jsxs","cn","getDataTestId","jsx"],"mappings":";;;;;AA8BO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAa;AAAA,MACf,CAACC,EAAO,WAAW,GAAGR,MAAU,YAAYF;AAAA,MAC5C,CAACU,EAAO,YAAY,GAAGR,MAAU,aAAaF;AAAA,MAC9C,CAACU,EAAOP,CAAS,CAAC,GAAG;AAAA,IAAA;AAGzB,WACI,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAH;AAAA,QACA,WAAYI,EAAGF,EAAO,WAAWA,EAAOT,CAAI,GAAG,EAAE,GAAGQ,EAAA,GAAcJ,CAAS;AAAA,QAC3E,gBAAeQ,EAAc,aAAaP,GAAY,EAAI;AAAA,QACxD,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAP,KAAQ,gBAAAc,EAAC,OAAA,EAAI,WAAYF,EAAGF,EAAO,OAAO,EAAE,GAAGD,EAAA,CAAY,GAAM,UAAAT,EAAA,CAAM;AAAA,UACzE,gBAAAc,EAAC,OAAA,EAAI,WAAYF,EAAGF,EAAO,OAAO,EAAE,GAAGD,GAAY,GAAM,UAAAL,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/E;AACJ;"}
+{"version":3,"file":"component.js","sources":["../../../src/cell/pure/component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '../../__internal/utils';\n\nimport styles from './index.module.css';\n\ntype ComponentProps = {\n    children?: React.ReactNode;\n    /** Слот для иконки */\n    slot?: React.ReactNode;\n    /** Порядок отображения слота и children */\n    order?: 'normal' | 'reverse';\n    /** Направление */\n    direction?: 'horizontal' | 'vertical';\n    /** Размер ячейки */\n    size?: 's' | 'm' | 'l';\n    /** Компактный режим расположения слота */\n    compact?: boolean;\n    /** Сss-класс для стилизации контейнера */\n    className?: string;\n    /** Id компонента для тестов */\n    dataTestId?: string;\n};\n\nexport type PureProps = Omit<HTMLAttributes<HTMLDivElement>, 'slot'> & ComponentProps;\n\n/**\n * Ячейка\n *\n * Отвечает за отступы и вертикальное или горизонтальное положение\n */\nexport const Pure = forwardRef<HTMLDivElement, PureProps>(\n    (\n        {\n            slot,\n            size = 'm',\n            compact = false,\n            order = 'normal',\n            direction = 'horizontal',\n            children,\n            className,\n            dataTestId,\n            ...props\n        },\n        ref,\n    ) => {\n        const addClasses = {\n            [styles.normalOrder]: order === 'normal' && slot,\n            [styles.reverseOrder]: order === 'reverse' && slot,\n            [styles[direction]]: true,\n            [styles.compact]: compact,\n        };\n\n        return (\n            <div\n                ref={ ref }\n                className={ cn(styles.component, styles[size], { ...addClasses }, className) }\n                data-test-id={ getDataTestId('cell-pure', dataTestId, true) }\n                { ...props }\n            >\n                { slot && <div className={ cn(styles.addon, { ...addClasses }) }>{ slot }</div> }\n                <div className={ cn(styles.child, { ...addClasses }) }>{ children }</div>\n            </div>\n        );\n    },\n);\n"],"names":["Pure","forwardRef","slot","size","compact","order","direction","children","className","dataTestId","props","ref","addClasses","styles","jsxs","cn","getDataTestId","jsx"],"mappings":";;;;;AAgCO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAa;AAAA,MACf,CAACC,EAAO,WAAW,GAAGR,MAAU,YAAYH;AAAA,MAC5C,CAACW,EAAO,YAAY,GAAGR,MAAU,aAAaH;AAAA,MAC9C,CAACW,EAAOP,CAAS,CAAC,GAAG;AAAA,MACrB,CAACO,EAAO,OAAO,GAAGT;AAAA,IAAA;AAGtB,WACI,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAH;AAAA,QACA,WAAYI,EAAGF,EAAO,WAAWA,EAAOV,CAAI,GAAG,EAAE,GAAGS,EAAA,GAAcJ,CAAS;AAAA,QAC3E,gBAAeQ,EAAc,aAAaP,GAAY,EAAI;AAAA,QACxD,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAR,KAAQ,gBAAAe,EAAC,OAAA,EAAI,WAAYF,EAAGF,EAAO,OAAO,EAAE,GAAGD,EAAA,CAAY,GAAM,UAAAV,EAAA,CAAM;AAAA,UACzE,gBAAAe,EAAC,OAAA,EAAI,WAAYF,EAAGF,EAAO,OAAO,EAAE,GAAGD,GAAY,GAAM,UAAAL,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/E;AACJ;"}

package/dist/cell/pure/index.module.css

@@ -1 +1 @@
-.component_iR2U{display:grid;align-items:center}.component_iR2U.s_GdoG{min-height:48px}.component_iR2U.m_JynK{min-height:56px}.component_iR2U.l_cl-v{min-height:68px}.component_iR2U.horizontal_4AlH{grid-template-rows:0 auto 0}.component_iR2U.horizontal_4AlH.s_GdoG{gap:var(--gap-2xs) var(--gap-xs)}.component_iR2U.horizontal_4AlH.m_JynK{gap:var(--gap-2xs) var(--gap-s)}.component_iR2U.horizontal_4AlH.l_cl-v{gap:var(--gap-s) var(--gap-m)}.horizontal_4AlH.normalOrder_DKaD{grid-template-columns:minmax(40px,min-content) auto}.horizontal_4AlH.reverseOrder_1O-1{grid-template-columns:auto minmax(40px,min-content)}.component_iR2U.horizontal_4AlH:before,.component_iR2U.horizontal_4AlH:after{content:""}.component_iR2U.horizontal_4AlH.normalOrder_DKaD:before,.component_iR2U.horizontal_4AlH.normalOrder_DKaD:after,.component_iR2U.horizontal_4AlH.reverseOrder_1O-1:before,.component_iR2U.horizontal_4AlH.reverseOrder_1O-1:after{grid-column:span 2}.component_iR2U.vertical_qSAh{grid-auto-flow:row;justify-items:center;text-align:center}.component_iR2U.vertical_qSAh.m_JynK,.component_iR2U.vertical_qSAh.l_cl-v{gap:var(--gap-m)}.component_iR2U.vertical_qSAh.s_GdoG{gap:var(--gap-s)}.addon_BlWH{line-height:0}.addon_BlWH.reverseOrder_1O-1{order:2}.child_LJU5.reverseOrder_1O-1{order:1}.addon_BlWH.horizontal_4AlH.reverseOrder_1O-1,.child_LJU5.horizontal_4AlH.reverseOrder_1O-1{grid-row:2/3}
+.component_iR2U{display:grid;align-items:center}.component_iR2U.s_GdoG{min-height:48px}.component_iR2U.m_JynK{min-height:56px}.component_iR2U.l_cl-v{min-height:68px}.component_iR2U.horizontal_4AlH{grid-template-rows:0 auto 0}.component_iR2U.horizontal_4AlH.s_GdoG{gap:var(--gap-2xs) var(--gap-xs)}.component_iR2U.horizontal_4AlH.m_JynK{gap:var(--gap-2xs) var(--gap-s)}.component_iR2U.horizontal_4AlH.l_cl-v{gap:var(--gap-s) var(--gap-m)}.horizontal_4AlH.normalOrder_DKaD{grid-template-columns:minmax(40px,min-content) auto}.horizontal_4AlH.reverseOrder_1O-1{grid-template-columns:auto minmax(40px,min-content)}.component_iR2U.horizontal_4AlH.normalOrder_DKaD.compact_YYtT{grid-template-columns:minmax(28px,min-content) auto}.component_iR2U.horizontal_4AlH.reverseOrder_1O-1.compact_YYtT{grid-template-columns:auto minmax(28px,min-content)}.component_iR2U.horizontal_4AlH:before,.component_iR2U.horizontal_4AlH:after{content:""}.component_iR2U.horizontal_4AlH.normalOrder_DKaD:before,.component_iR2U.horizontal_4AlH.normalOrder_DKaD:after,.component_iR2U.horizontal_4AlH.reverseOrder_1O-1:before,.component_iR2U.horizontal_4AlH.reverseOrder_1O-1:after{grid-column:span 2}.component_iR2U.vertical_qSAh{grid-auto-flow:row;justify-items:center;text-align:center}.component_iR2U.vertical_qSAh.m_JynK,.component_iR2U.vertical_qSAh.l_cl-v{gap:var(--gap-m)}.component_iR2U.vertical_qSAh.s_GdoG{gap:var(--gap-s)}.addon_BlWH{line-height:0}.addon_BlWH.reverseOrder_1O-1{order:2}.child_LJU5.reverseOrder_1O-1{order:1}.child_LJU5{min-width:0}.addon_BlWH.horizontal_4AlH.reverseOrder_1O-1,.child_LJU5.horizontal_4AlH.reverseOrder_1O-1{grid-row:2/3}

package/dist/cell/pure/index.module.css.js

@@ -1,27 +1,29 @@
 import './index.module.css';
-const o = "component_iR2U", r = "s_GdoG", n = "m_JynK", e = "l_cl-v", t = "horizontal_4AlH", c = "normalOrder_DKaD", l = "reverseOrder_1O-1", s = "vertical_qSAh", d = "addon_BlWH", a = "child_LJU5", i = {
+const o = "component_iR2U", c = "s_GdoG", n = "m_JynK", r = "l_cl-v", t = "horizontal_4AlH", e = "normalOrder_DKaD", s = "reverseOrder_1O-1", l = "compact_YYtT", a = "vertical_qSAh", d = "addon_BlWH", m = "child_LJU5", _ = {
   component: o,
-  s: r,
+  s: c,
   m: n,
-  l: e,
+  l: r,
   horizontal: t,
-  normalOrder: c,
-  reverseOrder: l,
-  vertical: s,
+  normalOrder: e,
+  reverseOrder: s,
+  compact: l,
+  vertical: a,
   addon: d,
-  child: a
+  child: m
 };
 export {
   d as addon,
-  a as child,
+  m as child,
+  l as compact,
   o as component,
-  i as default,
+  _ as default,
   t as horizontal,
-  e as l,
+  r as l,
   n as m,
-  c as normalOrder,
-  l as reverseOrder,
-  r as s,
-  s as vertical
+  e as normalOrder,
+  s as reverseOrder,
+  c as s,
+  a as vertical
 };
 //# sourceMappingURL=index.module.css.js.map

package/dist/cell/pure/index.module.css.js.map

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

package/dist/filter-tag/component.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type FilterTagColor = 'green' | 'orange' | 'red' | 'blue' | 'grey' | 'teal' | 'purple';
+export type FilterTagProps = {
+    active?: boolean;
+    color?: FilterTagColor;
+    count?: number | string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+    dataTestId?: string;
+};
+export declare const FilterTag: React.FC<FilterTagProps>;

package/dist/filter-tag/component.js

@@ -0,0 +1,38 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import c from "classnames";
+import { Badge as p } from "../badge/component.js";
+import e from "./index.module.css.js";
+const u = ({
+  active: s = !1,
+  color: a = "blue",
+  count: t,
+  className: l,
+  children: m,
+  onClick: r,
+  dataTestId: i
+}) => /* @__PURE__ */ n(
+  "button",
+  {
+    type: "button",
+    "data-test-id": i,
+    onClick: r,
+    className: c(e.component, e[a], { [e.active]: s }, l),
+    children: [
+      /* @__PURE__ */ o("span", { className: e.label, children: m }),
+      t != null && /* @__PURE__ */ o(
+        p,
+        {
+          view: "count",
+          color: "secondary",
+          size: "m",
+          className: e.badge,
+          content: t
+        }
+      )
+    ]
+  }
+);
+export {
+  u as FilterTag
+};
+//# sourceMappingURL=component.js.map

package/dist/filter-tag/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/filter-tag/component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '../badge';\n\nimport styles from './index.module.css';\n\nexport type FilterTagColor = 'green' | 'orange' | 'red' | 'blue' | 'grey' | 'teal' | 'purple';\n\nexport type FilterTagProps = {\n    active?: boolean;\n    color?: FilterTagColor;\n    count?: number | string;\n    className?: string;\n    children: React.ReactNode;\n    onClick?: () => void;\n    dataTestId?: string;\n};\n\nexport const FilterTag: React.FC<FilterTagProps> = ({\n    active = false,\n    color = 'blue',\n    count,\n    className,\n    children,\n    onClick,\n    dataTestId,\n}) => (\n    <button\n        type=\"button\"\n        data-test-id={ dataTestId }\n        onClick={ onClick }\n        className={ cn(styles.component, styles[color], { [styles.active]: active }, className) }\n    >\n        <span className={ styles.label }>{ children }</span>\n\n        { count !== undefined && count !== null && (\n            <Badge\n                view=\"count\"\n                color=\"secondary\"\n                size=\"m\"\n                className={ styles.badge }\n                content={ count }\n            />\n        ) }\n    </button>\n);\n"],"names":["FilterTag","active","color","count","className","children","onClick","dataTestId","jsxs","cn","styles","jsx","Badge"],"mappings":";;;;AAmBO,MAAMA,IAAsC,CAAC;AAAA,EAChD,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AACJ,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,MAAK;AAAA,IACL,gBAAeD;AAAA,IACf,SAAAD;AAAA,IACA,WAAYG,EAAGC,EAAO,WAAWA,EAAOR,CAAK,GAAG,EAAE,CAACQ,EAAO,MAAM,GAAGT,EAAA,GAAUG,CAAS;AAAA,IAEtF,UAAA;AAAA,MAAA,gBAAAO,EAAC,QAAA,EAAK,WAAYD,EAAO,OAAU,UAAAL,GAAU;AAAA,MAEpBF,KAAU,QAC/B,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,OAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAYF,EAAO;AAAA,UACnB,SAAUP;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AAER;"}

package/dist/filter-tag/index.d.ts

@@ -0,0 +1 @@
+export * from './component';

package/dist/filter-tag/index.js

@@ -0,0 +1,5 @@
+import { FilterTag as o } from "./component.js";
+export {
+  o as FilterTag
+};
+//# sourceMappingURL=index.js.map

package/dist/filter-tag/index.js.map

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