@dss-kit/ui-kit 0.3.8 → 0.3.10

package/dist/components/builders/Table/Table.js

@@ -1,13 +1,13 @@
 import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import { cx as p, css as b } from "@emotion/css";
-import { useReactTable as He, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as ke, flexRender as H, createColumnHelper as Ie } from "@tanstack/react-table";
-import { useMemo as ze, useImperativeHandle as Ve } from "react";
+import { useReactTable as He, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as ke, flexRender as H, createColumnHelper as ze } from "@tanstack/react-table";
+import { useMemo as Ie, useImperativeHandle as Ve } from "react";
 import Le from "../../../assets/svg/table/search.svg.js";
-import { styles as Ee } from "./styles.js";
-import { useControllableState as s } from "./Table.hooks.js";
+import { typography as We } from "../../../styles/utils/typography.js";
+import { useControllableState as m } from "./Table.hooks.js";
 import { getColumnPinningStyles as f } from "./Table.utils.js";
-import { TablePlaceholder as Fe } from "./TablePlaceholder/TablePlaceholder.js";
-import { TableWrapper as We } from "./TableWrapper/TableWrapper.js";
+import { TablePlaceholder as Ee } from "./TablePlaceholder/TablePlaceholder.js";
+import { TableWrapper as Fe } from "./TableWrapper/TableWrapper.js";
 import { TableHeadRow as je } from "./TableHeadRow/TableHeadRow.js";
 import { TablePagination as Be } from "./TablePagination/TablePagination.js";
 import { TableHeadCell as De } from "./TableHeadCell/TableHeadCell.js";
@@ -19,32 +19,34 @@ import { TableHeadCellContent as Oe } from "./TableHeadCellContent/TableHeadCell
 import { TableHeadCellContentSortable as $e } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
 import { theme as qe } from "../../../utils/theme/index.js";
 import { Box as Ge } from "../Box/Box.js";
-const { spacing: M, color: t } = qe, Je = b({
+const { spacing: M, color: l } = qe, Je = b({
+  ...We.body2,
+  fontWeight: 500,
   width: "100%",
   maxWidth: "100%",
   minWidth: "max-content",
   borderCollapse: "collapse",
   borderSpacing: 0,
-  backgroundColor: t.fill.bgPrimary
+  backgroundColor: l.fill.bgPrimary
 }), Qe = b({
-  backgroundColor: t.fill.bgSecondary,
-  color: t.text.tertiary
+  backgroundColor: l.fill.bgSecondary,
+  color: l.text.tertiary
 }), Ue = b({
   pointerEvents: "none",
   userSelect: "none"
 }), N = ["70%", "55%", "80%", "60%"], c = ({
-  ref: I,
+  ref: z,
   data: h,
   columns: u,
   showBorders: g = !0,
-  enableSorting: z = !1,
+  enableSorting: I = !1,
   enablePagination: S = !1,
   enableRowSelection: V = !1,
   enableMultiRowSelection: L = !1,
   enableColumnPinning: d = !1,
-  columnPinning: E,
-  onColumnPinningChange: F,
-  sorting: W,
+  columnPinning: W,
+  onColumnPinningChange: E,
+  sorting: F,
   onSortingChange: j,
   manualSorting: B,
   columnFilters: D,
@@ -55,7 +57,7 @@ const { spacing: M, color: t } = qe, Je = b({
   onPaginationChange: $,
   rowSelection: q,
   onRowSelectionChange: G,
-  totalCount: m,
+  totalCount: s,
   loading: i = !1,
   loadingRowCount: J = 10,
   emptyLabels: Q = {
@@ -70,47 +72,47 @@ const { spacing: M, color: t } = qe, Je = b({
   emptyStateClassName: Z,
   emptyStateTitleClassName: ee,
   emptyStateDescriptionClassName: oe,
-  paginationClassName: le,
-  tableOptions: ne = {},
+  paginationClassName: ne,
+  tableOptions: te = {},
   onRowClick: w,
-  getRowId: te,
+  getRowId: le,
   headCellComponent: ie = De,
   bodyCellComponent: x = _e,
   headRowComponent: ae = je,
   bodyRowComponent: R = Ae,
   onReset: re,
-  paginationVariant: se,
-  paginationLabels: me,
+  paginationVariant: me,
+  paginationLabels: se,
   renderPageSizeSelectorDropdownItem: ce,
   renderPageSizeSelectorInputItem: ge
 }) => {
-  const [de, pe] = s(
-    W,
+  const [de, pe] = m(
+    F,
     j,
     []
-  ), [he, Ce] = s(
+  ), [he, Ce] = m(
     D,
     _,
     []
-  ), [fe, be] = s(
+  ), [fe, be] = m(
     A,
     K,
     {}
-  ), [a, C] = s(
+  ), [a, C] = m(
     O,
     $,
     { pageIndex: 0, pageSize: 10 }
-  ), [ue, Se] = s(q, G, {}), [ye, we] = s(
+  ), [ue, Se] = m(q, G, {}), [ye, we] = m(
+    W,
     E,
-    F,
     { left: [], right: [] }
-  ), T = B ?? !!m, xe = ze(
+  ), T = B ?? !!s, xe = Ie(
     () => u.map((e) => ({
       enableSorting: !1,
       ...e
     })),
     [u]
-  ), n = He({
+  ), t = He({
     data: h,
     columns: xe,
     state: {
@@ -128,41 +130,40 @@ const { spacing: M, color: t } = qe, Je = b({
     onRowSelectionChange: Se,
     onColumnPinningChange: we,
     getCoreRowModel: ke(),
-    getSortedRowModel: z && !T ? Ne() : void 0,
+    getSortedRowModel: I && !T ? Ne() : void 0,
     getPaginationRowModel: S ? Me() : void 0,
     enableRowSelection: V,
     enableMultiRowSelection: L,
     enableColumnPinning: d,
-    getRowId: te,
+    getRowId: le,
     manualSorting: T,
-    manualPagination: !!m,
-    pageCount: m ? Math.ceil(m / a.pageSize) : void 0,
-    ...ne
+    manualPagination: !!s,
+    pageCount: s ? Math.ceil(s / a.pageSize) : void 0,
+    ...te
   });
-  Ve(I, () => n);
-  const { rows: P } = n.getRowModel(), Re = (e, l) => {
-    w && w(e.original, l);
+  Ve(z, () => t);
+  const { rows: P } = t.getRowModel(), Re = (e, n) => {
+    w && w(e.original, n);
   }, Te = (e) => /* @__PURE__ */ o(
     ie,
     {
       style: {
         width: e.getSize(),
-        ...d && f(n, e.column, t.fill.bgSecondary)
+        ...d && f(t, e.column, l.fill.bgSecondary)
       },
       onClick: i ? void 0 : e.column.getToggleSortingHandler(),
       children: e.isPlaceholder ? null : H(e.column.columnDef.header, e.getContext())
     },
     e.id
-  ), Pe = (e, l) => /* @__PURE__ */ o(
+  ), Pe = (e, n) => /* @__PURE__ */ o(
     R,
     {
       showBorders: g,
-      isSelected: e.getIsSelected(),
-      onClick: () => Re(e, l),
+      onClick: () => Re(e, n),
       children: e.getVisibleCells().map((r) => /* @__PURE__ */ o(
         x,
         {
-          style: d ? f(n, r.column, t.fill.bgPrimary) : void 0,
+          style: d ? f(t, r.column, l.fill.bgPrimary) : void 0,
           children: H(r.column.columnDef.cell, r.getContext())
         },
         r.id
@@ -173,10 +174,10 @@ const { spacing: M, color: t } = qe, Je = b({
     R,
     {
       showBorders: g,
-      children: n.getVisibleLeafColumns().map((l, r) => /* @__PURE__ */ o(
+      children: t.getVisibleLeafColumns().map((n, r) => /* @__PURE__ */ o(
         x,
         {
-          style: d ? f(n, l, t.fill.bgPrimary) : void 0,
+          style: d ? f(t, n, l.fill.bgPrimary) : void 0,
           children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
             Ke,
             {
@@ -186,20 +187,20 @@ const { spacing: M, color: t } = qe, Je = b({
             }
           ) })
         },
-        l.id
+        n.id
       ))
     },
     `skeleton-row-${e}`
   );
   return !i && !P.length ? /* @__PURE__ */ o(
-    Fe,
+    Ee,
     {
       icon: /* @__PURE__ */ o(
         Le,
         {
           width: 24,
           height: 24,
-          style: { color: t.icon.tertiary, marginBottom: M.sm }
+          style: { color: l.icon.tertiary, marginBottom: M.sm }
         }
       ),
       labels: Q,
@@ -209,7 +210,7 @@ const { spacing: M, color: t } = qe, Je = b({
       descriptionClassName: oe
     }
   ) : /* @__PURE__ */ v(Ge, { w: "full", gap: M.xl, className: p(y), children: [
-    /* @__PURE__ */ o(We, { data: h, showBorders: g, children: /* @__PURE__ */ v("table", { className: p(Je, Ee.table, U), children: [
+    /* @__PURE__ */ o(Fe, { data: h, showBorders: g, children: /* @__PURE__ */ v("table", { className: p(Je, U), children: [
       /* @__PURE__ */ o(
         "thead",
         {
@@ -219,27 +220,27 @@ const { spacing: M, color: t } = qe, Je = b({
             X
           ),
           "aria-busy": i,
-          children: n.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Te) }, e.id))
+          children: t.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Te) }, e.id))
         }
       ),
       /* @__PURE__ */ o("tbody", { className: Y, children: i ? Array.from(
         { length: J },
-        (e, l) => ve(l)
-      ) : P.map((e, l) => Pe(e, l)) })
+        (e, n) => ve(n)
+      ) : P.map((e, n) => Pe(e, n)) })
     ] }) }),
     S && !i && /* @__PURE__ */ o(
       Be,
       {
         pageIndex: a.pageIndex,
         pageSize: a.pageSize,
-        totalCount: m || h.length,
-        variant: se,
-        labels: me,
+        totalCount: s || h.length,
+        variant: me,
+        labels: se,
         renderPageSizeSelectorDropdownItem: ce,
         renderPageSizeSelectorInputItem: ge,
         onPageChange: (e) => C({ ...a, pageIndex: e }),
         onPageSizeChange: (e) => C({ ...a, pageSize: e, pageIndex: 0 }),
-        className: le
+        className: ne
       }
     )
   ] });
@@ -248,7 +249,7 @@ c.displayName = "Table";
 c.HeadCellContent = Oe;
 c.BodyCellContent = k;
 c.HeadCellContentSortable = $e;
-c.createColumnHelper = Ie;
+c.createColumnHelper = ze;
 export {
   c as Table
 };

package/dist/components/builders/Table/TableBodyRow/TableBodyRow.d.ts

@@ -4,10 +4,5 @@ export interface TableBodyRowProps extends React.HTMLAttributes<HTMLTableRowElem
      * @default false
      */
     showBorders?: boolean;
-    /**
-     * Выбрана ли строка
-     * @default false
-     */
-    isSelected?: boolean;
 }
 export declare const TableBodyRow: import('react').ForwardRefExoticComponent<TableBodyRowProps & import('react').RefAttributes<HTMLTableRowElement>>;

package/dist/components/builders/Table/TableBodyRow/TableBodyRow.js

@@ -1,16 +1,20 @@
-import { jsx as m } from "react/jsx-runtime";
-import { css as a, cx as c } from "@emotion/css";
-import { forwardRef as d } from "react";
-import { theme as f } from "../../../../utils/theme/index.js";
-const { color: n } = f, p = d(
-  ({ children: o, className: r, showBorders: e = !1, isSelected: i = !1, ...t }, s) => {
-    const l = a({
-      borderBottom: e ? `1px solid ${n.border.neutralAlphaLow}` : "none"
+import { jsx as n } from "react/jsx-runtime";
+import { css as m, cx as c } from "@emotion/css";
+import { forwardRef as i } from "react";
+import { theme as d } from "../../../../utils/theme/index.js";
+const { color: o } = d, f = i(
+  ({ children: r, className: e, showBorders: t = !1, ...a }, l) => {
+    const s = m({
+      borderBottom: t ? `1px solid ${o.border.neutralAlphaLow}` : "none",
+      transition: "background-color 0.15s ease-in-out",
+      "&:hover": {
+        backgroundColor: o.fill.neutralPrimaryHover
+      }
     });
-    return /* @__PURE__ */ m("tr", { ref: s, className: c(l, r), ...t, children: o });
+    return /* @__PURE__ */ n("tr", { ref: l, className: c(s, e), ...a, children: r });
   }
 );
-p.displayName = "TableBodyRow";
+f.displayName = "TableBodyRow";
 export {
-  p as TableBodyRow
+  f as TableBodyRow
 };

package/dist/components/builders/Table/TableWrapper/TableWrapper.js

@@ -1,9 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
-import { css as n, cx as d } from "@emotion/css";
-import { memo as F, useState as f, useRef as L, useCallback as k, useEffect as E } from "react";
-import { theme as W } from "../../../../utils/theme/index.js";
-import { Box as b } from "../../Box/Box.js";
-const { color: s, cornerRadius: C } = W, z = n({
+import { jsx as c } from "react/jsx-runtime";
+import { css as n, cx as f } from "@emotion/css";
+import { memo as k, useState as d, useRef as x, useCallback as E, useEffect as W } from "react";
+import { theme as $ } from "../../../../utils/theme/index.js";
+import { Box as m } from "../../Box/Box.js";
+const { color: o, cornerRadius: C } = $, P = n({
   position: "relative",
   borderRadius: C.md,
   overflow: "hidden",
@@ -14,66 +14,65 @@ const { color: s, cornerRadius: C } = W, z = n({
     bottom: 14,
     width: 96,
     pointerEvents: "none",
-    zIndex: 1,
     transition: "opacity 0.2s ease"
   },
   "&::before": {
     left: 0,
-    background: "linear-gradient(to left, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)"
+    background: `linear-gradient(to left, transparent 0%, ${o.fill.bgPrimary} 100%)`
   },
   "&::after": {
     right: 0,
-    background: "linear-gradient(to right, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)"
+    background: `linear-gradient(to right, transparent 0%, ${o.fill.bgPrimary} 100%)`
   }
 }), N = n({
   overflowX: "auto",
   scrollbarWidth: "thin",
-  scrollbarColor: `${s.scrollbar.thumbPrimary} ${s.scrollbar.trackPrimary}`
-}), T = F(
+  scrollbarColor: `${o.scrollbar.thumbPrimary} ${o.scrollbar.trackPrimary}`
+}), T = k(
   ({
-    data: m,
+    data: b,
     children: h,
     className: p,
     scrollContainerClassName: u,
     showBorders: w = !1,
-    ...S
+    ...y
   }) => {
-    const [g, v] = f(!1), [y, R] = f(!1), t = L(null), r = k(() => {
-      const e = t.current;
-      if (!e) return;
-      const { scrollLeft: o, scrollWidth: a, clientWidth: l } = e, c = a > l;
-      v(c && o > 0), R(
-        c && o < a - l - 1
+    const [S, g] = d(!1), [v, R] = d(!1), s = x(null), e = E(() => {
+      const r = s.current;
+      if (!r) return;
+      const { scrollLeft: t, scrollWidth: a, clientWidth: l } = r, i = a > l;
+      g(i && t > 0), R(
+        i && t < a - l - 1
       );
     }, []);
-    E(() => {
-      const e = t.current;
-      if (!e) return;
-      r();
-      const o = new ResizeObserver(r);
-      return o.observe(e), e.addEventListener("scroll", r), () => {
-        o.disconnect(), e.removeEventListener("scroll", r);
+    W(() => {
+      const r = s.current;
+      if (!r) return;
+      e();
+      const t = new ResizeObserver(e);
+      return t.observe(r), r.addEventListener("scroll", e), () => {
+        t.disconnect(), r.removeEventListener("scroll", e);
       };
-    }, [r, m]);
-    const x = n({
-      border: w ? `1px solid ${s.border.neutralAlphaLow}` : "transparent",
+    }, [e, b]);
+    const L = n({
+      border: w ? `1px solid ${o.border.neutralAlphaLow}` : "transparent",
       "&::before": {
-        opacity: g ? 1 : 0
+        opacity: S ? 1 : 0
       },
       "&::after": {
-        opacity: y ? 1 : 0
+        opacity: v ? 1 : 0
       }
     });
-    return /* @__PURE__ */ i(
-      b,
+    return /* @__PURE__ */ c(
+      m,
       {
-        className: d(z, x, p),
-        ...S,
-        children: /* @__PURE__ */ i(
-          b,
+        className: f(P, L, p),
+        ...y,
+        children: /* @__PURE__ */ c(
+          m,
           {
-            ref: t,
-            className: d(N, u),
+            ref: s,
+            className: f(N, u),
             children: h
           }
         )

package/dist/components/controls/Button/Button.js

@@ -1,88 +1,91 @@
-import { jsx as a, jsxs as w, Fragment as O } from "react/jsx-runtime";
-import { cx as y, css as k } from "@emotion/css";
-import { motion as q } from "framer-motion";
-import { useMemo as o } from "react";
-import { cornerRadiusValues as u, baseButton as D, getVariantStyles as E, typeStyles as G, sizeValues as H } from "./styles.js";
-import { Loader as I } from "../../builders/Loader/Loader.js";
-import { AnimatedText as J } from "../../builders/Text/Text.js";
-import { theme as K } from "../../../utils/theme/index.js";
-import { Box as P } from "../../builders/Box/Box.js";
+import { jsx as o, jsxs as b, Fragment as O } from "react/jsx-runtime";
+import { cx as w, css as P } from "@emotion/css";
+import { motion as k } from "framer-motion";
+import { useMemo as n } from "react";
+import { cornerRadiusValues as m, baseButton as q, getVariantStyles as D, typeStyles as E, sizeValues as G } from "./styles.js";
+import { Loader as H } from "../../builders/Loader/Loader.js";
+import { AnimatedText as I } from "../../builders/Text/Text.js";
+import { theme as J } from "../../../utils/theme/index.js";
+import { Box as K } from "../../builders/Box/Box.js";
 import { Ripple as Q } from "../../builders/Ripple/Ripple.js";
-const { color: m } = K, ue = ({
-  disabled: n,
+const { color: u } = J, sr = ({
+  disabled: a,
   loading: l,
   className: g,
   wrapperClassName: S,
   buttonClassName: _,
   buttonDisabledClassName: $,
   textClassName: N,
-  children: v,
-  variant: r = "filled",
+  children: B,
+  variant: e = "filled",
   backgroundColor: f,
   textColor: d,
   textFontWeight: U,
-  borderColor: c,
-  color: e = "accent",
+  borderColor: i,
+  color: r = "accent",
   opacity: p,
   borderRadius: x,
-  width: i = "auto",
+  width: c = "auto",
   size: s = "md",
-  iconLeft: B,
+  iconLeft: v,
   iconRight: R,
   intensity: t = "primary",
   flex: T,
   type: V = "button",
   ...j
 }) => {
-  const h = o(() => {
-    switch (i) {
+  const h = n(() => {
+    switch (c) {
       case "full":
         return "100%";
       case "auto":
         return "fit-content";
       default:
-        return i;
+        return c;
     }
-  }, [i]), F = o(() => f || (r === "filled" ? e === "neutral" ? m.fill.neutralSecondary : `var(--fill-${e}-${t})` : "transparent"), [r, f, e, t]), W = o(() => {
+  }, [c]), A = n(() => f || (e === "filled" ? r === "neutral" ? u.fill.neutralSecondary : r === "neutral-primary" ? u.fill.neutralPrimary : `var(--fill-${r}-${t})` : "transparent"), [e, f, r, t]), F = n(() => {
     if (t === "primary") {
-      if (e === "neutral") return m.text.secondary;
-      if (r === "filled") return m.text.inverse;
-    } else if (e === "neutral") return m.text.secondary;
-    return `var(--text-${e})`;
-  }, [t, e, r]), b = o(() => {
+      if (r === "neutral" || r === "neutral-primary")
+        return u.text.secondary;
+      if (e === "filled") return u.text.inverse;
+    } else if (r === "neutral") return u.text.secondary;
+    return `var(--text-${r})`;
+  }, [t, r, e]), y = n(() => {
     if (t === "primary") {
-      if (e === "neutral") return "secondary";
-      if (r === "filled") return "inverse";
-    } else if (e === "neutral") return "secondary";
-    return e;
-  }, [r, e, t]), A = o(() => c || (r === "outline" ? `var(--border-${e}-${t})` : "transparent"), [r, c, e, t]), C = o(() => {
+      if (r === "neutral" || r === "neutral-primary")
+        return "secondary";
+      if (e === "filled") return "inverse";
+    } else if (r === "neutral" || r === "neutral-primary")
+      return "secondary";
+    return r;
+  }, [e, r, t]), W = n(() => i || (e === "outline" ? r === "neutral-primary" ? u.border.neutralAlphaBasic : `var(--border-${r}-${t})` : "transparent"), [e, i, r, t]), C = n(() => {
     switch (s) {
       case "lg":
-        return u.lg;
+        return m.lg;
       case "md":
       case "sm":
-        return u.md;
+        return m.md;
       case "xs":
-        return u.sm;
+        return m.sm;
       default:
-        return u.md;
+        return m.md;
     }
-  }, [s]), L = y(
-    D,
-    E(r, e, t, n),
-    G[r],
-    n ? $ : void 0,
-    k({
-      borderRadius: x ? u[x] : C,
-      backgroundColor: F,
-      borderColor: A,
-      color: d ?? `var(--text-${b})`,
+  }, [s]), L = w(
+    q,
+    D(e, r, t, a),
+    E[e],
+    a ? $ : void 0,
+    P({
+      borderRadius: x ? m[x] : C,
+      backgroundColor: A,
+      borderColor: W,
+      color: d ?? `var(--text-${y})`,
       width: h,
-      height: H[s],
-      opacity: p || (n ? 0.7 : 1)
+      height: G[s],
+      opacity: p || (a ? 0.7 : 1)
     }),
     _
-  ), M = o(() => {
+  ), M = n(() => {
     switch (s) {
       case "lg":
       case "md":
@@ -94,44 +97,44 @@ const { color: m } = K, ue = ({
         return "body-1";
     }
   }, [s]);
-  return /* @__PURE__ */ a(
-    P,
+  return /* @__PURE__ */ o(
+    K,
     {
-      className: y(S, g),
+      className: w(S, g),
       w: h,
       flex: T,
       relative: !0,
       overflow: "hidden",
-      children: /* @__PURE__ */ w(
-        q.button,
+      children: /* @__PURE__ */ b(
+        k.button,
         {
           ...j,
-          whileTap: !n && !l ? {
+          whileTap: !a && !l ? {
             scale: 0.99,
             boxShadow: "inset 0 0 0 10000px rgba(0,0,0,0.1)",
             transition: { duration: 0 }
           } : {},
-          disabled: n || l,
+          disabled: a || l,
           className: L,
           type: V,
           children: [
-            l ? /* @__PURE__ */ a(I, { color: W }) : /* @__PURE__ */ w(O, { children: [
-              B,
-              /* @__PURE__ */ a(
-                J,
+            l ? /* @__PURE__ */ o(H, { color: F }) : /* @__PURE__ */ b(O, { children: [
+              v,
+              /* @__PURE__ */ o(
+                I,
                 {
                   style: { color: d },
-                  colorName: b,
+                  colorName: y,
                   variant: M,
                   className: N,
                   textOverflow: "ellipsis",
                   overflow: "hidden",
-                  children: v
+                  children: B
                 }
               ),
               R
             ] }),
-            /* @__PURE__ */ a(Q, {})
+            /* @__PURE__ */ o(Q, {})
           ]
         }
       )
@@ -139,5 +142,5 @@ const { color: m } = K, ue = ({
   );
 };
 export {
-  ue as Button
+  sr as Button
 };

package/dist/components/controls/Button/types.d.ts

@@ -11,8 +11,9 @@ export type ButtonType = "clear" | "filled" | "outline";
  * Использует системные токены:
  * - `accent`   — акцентный цвет
  * - `neutral`  — нейтральный
+ * - `neutral-primary` — нейтральный основной
  * - `negative` — негативный (ошибки/отмена)
  * - `positive` — позитивный (успех)
  * - `warning`  — предупреждение
  */
-export type ButtonColor = AccentType | NeutralType | NegativeType | PositiveType | WarningType | TransferType;
+export type ButtonColor = AccentType | NeutralType | "neutral-primary" | NegativeType | PositiveType | WarningType | TransferType;