@alphakits/ui 2.4.8 → 2.5.0

package/dist/cell/base/component.js

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

package/dist/cell/base/index.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_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}
+.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}.subtitle_wrap_xH8m{display:block;min-width:0}.subtitle_single_line_6DGn .subtitle_OOoZ{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focused_ootM{outline:2px solid var(--focus-color);outline-offset:2px}

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

@@ -1,19 +1,23 @@
 import * as __css from './index.css';
 export const __cssModule = __css;
-const t = "component_BNjZ", e = "title_wrap_10zd", o = "subtitle_OOoZ", n = "title_VeYl", s = "single_line_4wfi", l = "focused_ootM", i = {
+const t = "component_BNjZ", e = "title_wrap_10zd", l = "subtitle_OOoZ", s = "title_VeYl", i = "single_line_4wfi", n = "subtitle_wrap_xH8m", _ = "subtitle_single_line_6DGn", o = "focused_ootM", c = {
   component: t,
   title_wrap: e,
-  subtitle: o,
-  title: n,
-  single_line: s,
-  focused: l
+  subtitle: l,
+  title: s,
+  single_line: i,
+  subtitle_wrap: n,
+  subtitle_single_line: _,
+  focused: o
 };
 export {
   t as component,
-  i as default,
-  l as focused,
-  s as single_line,
-  o as subtitle,
-  n as title,
+  c as default,
+  o as focused,
+  i as single_line,
+  l as subtitle,
+  _ as subtitle_single_line,
+  n as subtitle_wrap,
+  s as title,
   e as title_wrap
 };

package/dist/modal/components/modals/index.css

@@ -1 +1 @@
-.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:36px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;inset:0!important}.content_p1kc{width:100%!important;height:100%!important;max-height:100%!important;box-shadow:none!important;margin:0!important;border-radius:0!important}.button_js2W{top:24px!important;right:16px!important}}
+.container_WE0K{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.content_p1kc{background:var(--color-bg-primary);box-shadow:0 0 10px #0003}@media print{.content_p1kc{width:100%!important}}.button_js2W{position:absolute!important;top:34px;right:32px;z-index:999}.button_js2W.doubleModal_1ZTt{right:384px}.inner_Zsdb{height:100%;box-sizing:border-box;overflow:auto}.right_e065{position:fixed;top:0;right:0;bottom:0;transition:width .2s,opacity .2s,right .2s;transition-delay:width .1s;transition-timing-function:ease-in}.bg_8ZfP{transition:opacity .2s;background:#00000080;position:fixed;display:block;border:0;inset:0}@media screen and (max-width:823px){.right_e065,.center_nguy{max-width:100%!important;inset:0!important}.content_p1kc{width:100%!important;height:100%!important;max-height:100%!important;box-shadow:none!important;margin:0!important;border-radius:0!important}.button_js2W{top:24px!important;right:16px!important}}

package/dist/select/components/options-list/component.js

@@ -1,71 +1,74 @@
-import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import R from "@alphakits/icons/dist/ClockCircleM";
-import N from "classnames";
-import { forwardRef as g, useRef as j, useCallback as w } from "react";
-import G from "react-merge-refs";
-import { Button as L } from "../../../button/component.js";
-import { useVisibleOptions as M, isGroup as O } from "../../utils.js";
-import { Optgroup as V } from "../optgroup/component.js";
-import t from "./index.module.css.js";
-const W = () => {
-  let e = 0;
-  return () => e++;
-}, K = g(
+import v from "@alphakits/icons/dist/PlusS";
+import L from "classnames";
+import { forwardRef as g, useRef as j, useCallback as G } from "react";
+import w from "react-merge-refs";
+import { useVisibleOptions as y, isGroup as I } from "../../utils.js";
+import { Optgroup as M } from "../optgroup/component.js";
+import r from "./index.module.css.js";
+const O = () => {
+  let l = 0;
+  return () => l++;
+}, J = g(
   ({
-    size: e = "s",
-    className: d,
-    Option: m,
-    options: l = [],
-    actionButton: i,
-    Optgroup: c = V,
-    dataTestId: p,
-    emptyPlaceholder: o,
-    visibleOptions: u = 5,
+    size: l = "s",
+    className: u,
+    Option: o,
+    options: s = [],
+    actionButton: n,
+    Optgroup: m = M,
+    dataTestId: d,
+    emptyPlaceholder: i,
+    visibleOptions: p = 5,
     onScroll: b,
     toggleMenu: h,
-    open: x
-  }, C) => {
-    const a = j(null), n = W(), v = w(
-      (r) => /* @__PURE__ */ s(c, { label: r.label, size: e, children: r.options.map((k) => m({ option: k, index: n() })) }, r.label),
+    open: C
+  }, x) => {
+    const f = j(null), a = O(), N = G(
+      (e) => /* @__PURE__ */ t(m, { label: e.label, size: l, children: e.options.map((k) => o({ option: k, index: a() })) }, e.label),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [m, n, e, c]
+      [o, a, l, m]
     );
-    return M({
-      visibleOptions: u,
-      listRef: a,
-      open: x,
-      invalidate: l
-    }), l.length === 0 && !o && !i ? null : /* @__PURE__ */ f(
+    return y({
+      visibleOptions: p,
+      listRef: f,
+      open: C,
+      invalidate: s
+    }), s.length === 0 && !i && !n ? null : /* @__PURE__ */ c(
       "div",
       {
-        className: N(t.optionsList, t[e], d),
-        "data-test-id": p,
-        ref: G([a, C]),
+        className: L(r.optionsList, r[l], u),
+        "data-test-id": d,
+        ref: w([f, x]),
         onScroll: b,
         children: [
-          l.map(
-            (r) => O(r) ? v(r) : m({ option: r, index: n() })
+          s.map(
+            (e) => I(e) ? N(e) : o({ option: e, index: a() })
           ),
-          o && l.length === 0 && /* @__PURE__ */ f("div", { className: t.emptyPlaceholder, children: [
-            /* @__PURE__ */ s(R, {}),
-            o
+          i && s.length === 0 && /* @__PURE__ */ c("div", { className: r.emptyPlaceholder, children: [
+            /* @__PURE__ */ t(R, {}),
+            i
           ] }),
-          !!i && /* @__PURE__ */ s("div", { className: t.actionButtonWrapper, children: /* @__PURE__ */ s(
-            L,
+          !!n && /* @__PURE__ */ c(
+            "button",
             {
-              view: "outlined",
-              size: "xs",
+              type: "button",
+              className: r.actionButton,
               onClick: () => {
-                i?.onClick(), h();
+                n?.onClick(), h();
               },
-              children: i.label
+              children: [
+                /* @__PURE__ */ t("span", { className: r.actionButtonIcon, children: /* @__PURE__ */ t(v, {}) }),
+                /* @__PURE__ */ t("span", { className: r.actionButtonLabel, children: n.label })
+              ]
             }
-          ) })
+          )
         ]
       }
     );
   }
 );
 export {
-  K as OptionsList
+  J as OptionsList
 };

package/dist/select/components/options-list/index.css

@@ -1 +1 @@
-:root{--select-error-color: var(--color-text-negative);--select-arrow-background: url(https://alfabank.st/icons/icon_chevron-for-select-down_m_black.svg);--select-arrow-hover-opacity: .7;--select-options-list-border-radius: 0 0 4px 4px;--select-options-list-box-shadow: var(--shadow-xs);--select-options-list-offset: 0;--select-options-list-top-padding: 0;--select-options-list-bottom-padding: 0;--select-options-list-empty-placeholder-color: var(--color-text-secondary);--select-option-divider-display: none;--select-option-divider-background: var(--color-border-primary);--select-option-left-padding: var(--gap-s);--select-option-right-padding: var(--gap-s);--select-option-l-left-padding: var(--gap-m);--select-option-l-right-padding: var(--gap-m);--select-option-background: var(--color-bg-primary);--select-option-selected-background: var(--color-bg-primary);--select-option-hover-background: var(--color-bg-secondary);--select-option-active-background: var(--color-bg-tertiary);--select-option-disabled-background: var(--color-bg-primary);--select-option-color: var(--color-text-primary);--select-option-selected-color: var(--color-text-primary);--select-option-hover-color: var(--color-text-primary);--select-option-active-color: var(--color-text-primary);--select-option-disabled-color: var(--color-text-secondary);--select-checkmark-margin: 0 var(--gap-xs) 0 0;--select-checkmark-size: 4px;--select-checkmark-order: 0;--select-checkmark-unselected-opacity: 0;--select-checkmark-background: var(--color-graphic-primary);--select-checkmark-border-radius: var(--border-radius-circle);--select-optgroup-color: var(--color-text-secondary);--select-optgroup-background: var(--color-bg-primary);--select-optgroup-left-padding: var(--gap-s);--select-optgroup-right-padding: var(--gap-s);--select-optgroup-l-left-padding: var(--gap-m);--select-optgroup-l-right-padding: var(--gap-m)}:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}.optionsList_fDQ-{overflow:auto;width:100%;outline:none;box-sizing:border-box}.emptyPlaceholder_kjeP{padding:var(--gap-m) var(--gap-xl);color:var(--select-option-color);display:flex;align-items:center;font-family:var(--font-family)}.emptyPlaceholder_kjeP svg{color:var(--color-graphic-thirdly);margin-right:12px}.l_rGpg .emptyPlaceholder_kjeP,.xl_T-5w .emptyPlaceholder_kjeP{padding:var(--gap-xl) var(--gap-xl)}.actionButtonWrapper_WBIo{padding-bottom:var(--gap-s);padding-left:var(--gap-xl);padding-right:var(--select-option-right-padding)}
+:root{--select-error-color: var(--color-text-negative);--select-arrow-background: url(https://alfabank.st/icons/icon_chevron-for-select-down_m_black.svg);--select-arrow-hover-opacity: .7;--select-options-list-border-radius: 0 0 4px 4px;--select-options-list-box-shadow: var(--shadow-xs);--select-options-list-offset: 0;--select-options-list-top-padding: 0;--select-options-list-bottom-padding: 0;--select-options-list-empty-placeholder-color: var(--color-text-secondary);--select-option-divider-display: none;--select-option-divider-background: var(--color-border-primary);--select-option-left-padding: var(--gap-s);--select-option-right-padding: var(--gap-s);--select-option-l-left-padding: var(--gap-m);--select-option-l-right-padding: var(--gap-m);--select-option-background: var(--color-bg-primary);--select-option-selected-background: var(--color-bg-primary);--select-option-hover-background: var(--color-bg-secondary);--select-option-active-background: var(--color-bg-tertiary);--select-option-disabled-background: var(--color-bg-primary);--select-option-color: var(--color-text-primary);--select-option-selected-color: var(--color-text-primary);--select-option-hover-color: var(--color-text-primary);--select-option-active-color: var(--color-text-primary);--select-option-disabled-color: var(--color-text-secondary);--select-checkmark-margin: 0 var(--gap-xs) 0 0;--select-checkmark-size: 4px;--select-checkmark-order: 0;--select-checkmark-unselected-opacity: 0;--select-checkmark-background: var(--color-graphic-primary);--select-checkmark-border-radius: var(--border-radius-circle);--select-optgroup-color: var(--color-text-secondary);--select-optgroup-background: var(--color-bg-primary);--select-optgroup-left-padding: var(--gap-s);--select-optgroup-right-padding: var(--gap-s);--select-optgroup-l-left-padding: var(--gap-m);--select-optgroup-l-right-padding: var(--gap-m)}:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}.optionsList_fDQ-{overflow:auto;width:100%;outline:none;box-sizing:border-box}.emptyPlaceholder_kjeP{padding:var(--gap-m) var(--gap-xl);color:var(--select-option-color);display:flex;align-items:center;font-family:var(--font-family)}.emptyPlaceholder_kjeP svg{color:var(--color-graphic-thirdly);margin-right:12px}.l_rGpg .emptyPlaceholder_kjeP,.xl_T-5w .emptyPlaceholder_kjeP{padding:var(--gap-xl) var(--gap-xl)}.actionButton_5oxy{font-size:16px!important;line-height:20px;font-weight:400;display:flex;align-items:center;gap:var(--gap-s);width:100%;min-height:var(--size-s-height);padding:var(--gap-s) var(--select-option-left-padding);margin:0;background:var(--select-option-background);color:var(--color-text-main);border:0;border-top:1px solid var(--color-border-secondary);box-sizing:border-box;text-align:left;cursor:pointer;font-family:var(--font-family);transition:background-color .2s ease}.actionButton_5oxy:hover{background:var(--select-option-hover-background)}.actionButton_5oxy:active{background:var(--select-option-active-background)}.actionButton_5oxy:focus-visible{outline:2px solid var(--color-border-accent);outline-offset:-2px}.actionButtonIcon_r3FS{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-graphic-main)}.actionButtonLabel_-jAV{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/dist/select/components/options-list/index.module.css.js

@@ -1,17 +1,21 @@
 import * as __css from './index.css';
 export const __cssModule = __css;
-const t = "optionsList_fDQ-", o = "emptyPlaceholder_kjeP", e = "l_rGpg", n = "xl_T-5w", s = "actionButtonWrapper_WBIo", l = {
+const t = "optionsList_fDQ-", o = "emptyPlaceholder_kjeP", n = "l_rGpg", c = "xl_T-5w", a = "actionButton_5oxy", l = "actionButtonIcon_r3FS", s = "actionButtonLabel_-jAV", e = {
   optionsList: t,
   emptyPlaceholder: o,
-  l: e,
-  xl: n,
-  actionButtonWrapper: s
+  l: n,
+  xl: c,
+  actionButton: a,
+  actionButtonIcon: l,
+  actionButtonLabel: s
 };
 export {
-  s as actionButtonWrapper,
-  l as default,
+  a as actionButton,
+  l as actionButtonIcon,
+  s as actionButtonLabel,
+  e as default,
   o as emptyPlaceholder,
-  e as l,
+  n as l,
   t as optionsList,
-  n as xl
+  c as xl
 };

package/dist/select/components/select-search/index.js

@@ -1,67 +1,68 @@
 import { jsxs as k, jsx as s } from "react/jsx-runtime";
 import v from "@alphakits/icons/dist/SearchS";
-import a, { useEffect as P, useState as C, useRef as b, useCallback as p, useMemo as j } from "react";
+import f, { useState as C, useRef as P, useCallback as p, useMemo as b } from "react";
 import "../../../toast-notifier/component.js";
-import { useClickOutside as E } from "../../../hooks/useClickOutside/index.js";
-import { safeStringify as I } from "../../../utils/safe-stringify.js";
-import { Input as z } from "../../../input/component.js";
-import { BaseSelect as A } from "../base-select/component.js";
-import { OptionsList as B } from "../options-list/component.js";
-import F from "./index.module.css.js";
-const M = a.forwardRef(
-  ({ inputProps: t, ...o }, n) => {
-    const i = a.useRef(null), c = a.useRef(null);
-    return P(() => {
-      i.current?.focus();
-    }, []), /* @__PURE__ */ k("div", { ref: n, children: [
+import { useClickOutside as j } from "../../../hooks/useClickOutside/index.js";
+import { safeStringify as F } from "../../../utils/safe-stringify.js";
+import { Input as I } from "../../../input/component.js";
+import { BaseSelect as M } from "../base-select/component.js";
+import { OptionsList as z } from "../options-list/component.js";
+import A from "./index.module.css.js";
+const B = f.forwardRef(
+  ({ inputProps: e, ...o }, n) => {
+    const i = f.useRef(null), c = f.useRef(null);
+    return /* @__PURE__ */ k("div", { ref: n, children: [
       /* @__PURE__ */ s("div", { style: { padding: "5px 20px" }, children: /* @__PURE__ */ s(
-        z,
+        I,
         {
           size: "s",
           leftAddons: /* @__PURE__ */ s(v, {}),
-          ...t,
-          fieldClassName: F.innerInput,
+          inputMode: "search",
+          enterKeyHint: "search",
+          autoFocus: !0,
+          ...e,
+          fieldClassName: A.innerInput,
           block: !0,
           ref: i
         }
       ) }),
-      /* @__PURE__ */ s(B, { ...o, ref: c })
+      /* @__PURE__ */ s(z, { ...o, ref: c })
     ] });
   }
-), V = ({
-  options: t,
+), U = ({
+  options: e,
   searchType: o = "text",
   onChange: n,
   selected: i = "",
   ...c
 }) => {
-  const [L, f] = C(t), [m, d] = C(""), h = b(null), S = p(
+  const [L, a] = C(e), [m, d] = C(""), h = P(null), S = p(
     (x, { value: l }) => {
       d(l);
       try {
-        if (!l) return f(t);
-        const y = String(l).toLowerCase(), g = t.reduce(
+        if (!l) return a(e);
+        const y = String(l).toLowerCase(), g = e.reduce(
           (u, r) => u.concat(r.options ? r.options : [r]),
           []
         ).filter(
-          ({ key: u, value: r, content: w }) => I({ key: u, value: r, content: w }).toLowerCase().includes(y)
+          ({ key: u, value: r, content: w }) => F({ key: u, value: r, content: w }).toLowerCase().includes(y)
         );
-        return f(g);
+        return a(g);
       } catch {
         return [];
       }
     },
-    [t]
-  ), e = p(() => {
-    d(""), f(t);
-  }, [t]), O = p(
+    [e]
+  ), t = p(() => {
+    d(""), a(e);
+  }, [e]), O = p(
     (x) => {
-      n?.(x), e();
+      n?.(x), t();
     },
-    [n, e]
+    [n, t]
   );
-  E(h, e);
-  const R = j(
+  j(h, t);
+  const R = b(
     () => ({
       ref: h,
       inputProps: {
@@ -69,27 +70,27 @@ const M = a.forwardRef(
         value: m,
         type: o,
         clear: !0,
-        onClear: e
+        onClear: t
       }
     }),
-    [S, m, o, e]
+    [S, m, o, t]
   );
   return /* @__PURE__ */ s(
-    A,
+    M,
     {
       ...c,
       selected: i,
       onChange: O,
       showEmptyOptionsList: !0,
-      OptionsList: M,
+      OptionsList: B,
       filteredOptions: L,
-      options: t,
+      options: e,
       optionsListProps: R
     }
   );
 };
 export {
-  M as CustomOptionsList,
-  V as SelectSearch,
-  I as safeStringify
+  B as CustomOptionsList,
+  U as SelectSearch,
+  F as safeStringify
 };

package/dist/sidepanel-header/index.css

@@ -1 +1 @@
-.wrapper_QxqD{padding:28px 32px 12px;background-color:var(--color-bg-primary);box-sizing:border-box}.heading_XGDy{display:flex;justify-content:space-between;min-height:48px}.title_jwxc,.bottomAddons_3yzd{padding-bottom:8px;padding-top:8px}.rightAddons_aZFa{margin-right:48px;height:48px;display:flex;align-items:center}.noCloser_O7u0{margin-right:0!important}@media(max-width:823px){.wrapper_QxqD{padding:16px 16px 12px!important}}
+.wrapper_QxqD{padding:28px 32px 12px;background-color:var(--color-bg-primary);box-sizing:border-box}.heading_XGDy{display:flex;justify-content:space-between;min-height:48px}.title_jwxc,.bottomAddons_3yzd{padding-bottom:8px;padding-top:8px}.rightAddons_aZFa{margin-right:54px;height:48px;display:flex;align-items:center}.noCloser_O7u0{margin-right:0!important}@media(max-width:823px){.wrapper_QxqD{padding:16px 16px 12px!important}}

package/dist/table/components/cell/component.js

@@ -1,59 +1,59 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import s from "classnames";
-import { Cell as T } from "../../../cell/component.js";
+import { Cell as p } from "../../../cell/component.js";
 import e from "./index.module.css.js";
-const w = ({
-  dataTestID: c,
-  className: n,
+const u = ({
+  dataTestID: d,
+  className: a,
   children: l,
   title: o,
-  subtitle: a,
+  subtitle: n,
   tableProps: h,
-  cellProps: d,
+  cellProps: c,
   addon: f,
-  align: i,
-  compact: t,
+  align: t,
+  compact: r,
   width: v,
   tag: m = "td"
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ i(
   m,
   {
-    "data-test-id": c,
-    className: s(e.cell, n, {
+    "data-test-id": d,
+    className: s(e.cell, a, {
       [e.is_div]: m === "div",
-      [e.compact_cell]: t
+      [e.compact_cell]: r
     }),
     style: { width: v },
     ...h,
-    children: l ? /* @__PURE__ */ r(
+    children: l ? /* @__PURE__ */ i(
       "div",
       {
         className: s(e.children, {
-          [e.center]: i === "center",
-          [e.right]: i === "right"
+          [e.center]: t === "center",
+          [e.right]: t === "right"
         }),
         children: l
       }
-    ) : /* @__PURE__ */ r(
-      T.Base,
+    ) : /* @__PURE__ */ i(
+      p.Base,
       {
         title: o === void 0 ? "-" : o,
-        subtitle: a,
-        size: d?.size || (t ? "s" : "m"),
-        compactAddon: t,
-        singleLineTitle: t,
-        showTitleTooltipOnOverflow: t,
+        subtitle: n,
+        size: c?.size || (r ? "s" : "m"),
+        compactAddon: r,
+        singleLineTitle: !0,
+        showTitleTooltipOnOverflow: !0,
         className: s({
-          [e.center]: i === "center",
-          [e.right]: i === "right",
-          [e.compact_content]: t
+          [e.center]: t === "center",
+          [e.right]: t === "right",
+          [e.compact_content]: r
         }),
         addon: f,
-        ...d
+        ...c
       }
     )
   }
 );
 export {
-  w as TableCell
+  u as TableCell
 };

package/dist/table/components/cell/index.css

@@ -1 +1 @@
-table tr:last-child .cell_SVZP{border-bottom:0!important}.cell_SVZP{padding:8px 16px;border-bottom:1px solid var(--color-border-secondary);position:relative;min-height:56px;box-sizing:border-box;vertical-align:middle}.compact_cell_zSJH{min-height:44px;padding:8px 12px}.right_30pJ{justify-content:flex-end}.children_X057{width:100%;display:flex;align-items:center}.compact_content_bjnq{gap:0 6px!important;min-height:40px!important}.is_div_XHlH{display:flex;align-items:center}.cell_SVZP.is_div_XHlH{padding-top:12px;padding-bottom:12px}.compact_cell_zSJH.is_div_XHlH{min-height:44px}
+table tr:last-child .cell_SVZP{border-bottom:0!important}.cell_SVZP{padding:8px 16px;border-bottom:1px solid var(--color-border-secondary);position:relative;min-height:56px;box-sizing:border-box;vertical-align:middle;overflow:hidden}.compact_cell_zSJH{min-height:44px;padding:8px 12px}.right_30pJ{justify-content:flex-end}.children_X057{width:100%;display:flex;align-items:center}.compact_content_bjnq{gap:0 6px!important;min-height:40px!important}.is_div_XHlH{display:flex;align-items:center}.cell_SVZP.is_div_XHlH{padding-top:12px;padding-bottom:12px}.compact_cell_zSJH.is_div_XHlH{min-height:44px}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alphakits/ui",
-    "version": "2.4.8",
+    "version": "2.5.0",
     "files": [
         "dist"
     ],