@alphakits/ui 2.4.3 → 2.4.4

package/dist/modal/components/modals/modal.js

@@ -1,67 +1,70 @@
-import { jsxs as h, jsx as i } from "react/jsx-runtime";
-import y from "classnames";
-import { useState as E, useLayoutEffect as g, useCallback as k, useEffect as v } from "react";
-import { ButtonArrow as x } from "../../../button-arrow/component.js";
-import t from "./index.module.css.js";
-const C = {
+import { jsxs as w, jsx as i } from "react/jsx-runtime";
+import b from "classnames";
+import { useState as v, useLayoutEffect as x, useCallback as k, useEffect as E } from "react";
+import { ButtonArrow as g } from "../../../button-arrow/component.js";
+import { showConfirm as F } from "../../../confirm-popup/component.js";
+import s from "./index.module.css.js";
+const y = {
   s: 488,
   m: 888,
   full: "96%"
-}, w = 102, F = (e) => e === "full" ? `calc(-96vw - ${w}px)` : -C[e] - w, O = ({ modal: e, t: f, index: l, dirtyModals: p, closeModal: a, currentModalId: r }) => {
-  const c = F(e.props.size), [b, m] = E(c);
-  g(() => {
-    const s = requestAnimationFrame(() => m(0));
-    return () => cancelAnimationFrame(s);
+}, h = 102, N = (e) => e === "full" ? `calc(-96vw - ${h}px)` : -y[e] - h, R = ({ modal: e, t: r, index: a, dirtyModals: m, closeModal: l, currentModalId: c }) => {
+  const f = N(e.props.size), [C, p] = v(f);
+  x(() => {
+    const o = requestAnimationFrame(() => p(0));
+    return () => cancelAnimationFrame(o);
   }, [e.id]);
   const u = k(
-    (s) => (
-      // eslint-disable-next-line no-restricted-globals
-      !p[s] || confirm(f("common:exitConfirm"))
-    ),
+    (o) => m[o] ? F({
+      title: r("common:exitConfirm"),
+      confirmText: r("common:yes"),
+      cancelText: r("common:no"),
+      confirmView: "negative"
+    }) : Promise.resolve(!0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [p, f]
-  ), n = k(
-    (s) => {
-      const { id: o } = e;
-      u(s || o) && (m(c), setTimeout(() => {
-        e.props.closeCallback && e.props.closeCallback(), a(s || o);
+    [m, r]
+  ), t = k(
+    async (o) => {
+      const { id: n } = e;
+      await u(o || n) && (p(f), setTimeout(() => {
+        e.props.closeCallback && e.props.closeCallback(), l(o || n);
       }, 250));
     },
-    [a, u, e, c]
+    [l, u, e, f]
   );
-  return v(() => {
-    const s = (o) => {
-      (o.key === "27" || o.key === "Escape") && n(r);
+  return E(() => {
+    const o = (n) => {
+      (n.key === "27" || n.key === "Escape") && t(c);
     };
-    return e.id === r && window?.addEventListener("keydown", s), () => {
-      window?.removeEventListener("keydown", s);
+    return e.id === c && window?.addEventListener("keydown", o), () => {
+      window?.removeEventListener("keydown", o);
     };
-  }, [n, r, e.id]), /* @__PURE__ */ h(
+  }, [t, c, e.id]), /* @__PURE__ */ w(
     "div",
     {
-      className: t.container,
+      className: s.container,
       style: {
-        zIndex: 9999998 + l
+        zIndex: 9999998 + a
       },
       children: [
         /* @__PURE__ */ i(
           "div",
           {
-            className: y(t.right, t.content),
+            className: b(s.right, s.content),
             style: {
-              zIndex: 9999999 + l,
-              width: C[e.props.size],
-              right: b
+              zIndex: 9999999 + a,
+              width: y[e.props.size],
+              right: C
             },
-            children: /* @__PURE__ */ h("div", { className: t.inner, children: [
-              /* @__PURE__ */ i(e.modal, { ...e.props, close: () => n() }),
+            children: /* @__PURE__ */ w("div", { className: s.inner, children: [
+              /* @__PURE__ */ i(e.modal, { ...e.props, close: () => t() }),
               e.props.showCloser !== !1 && /* @__PURE__ */ i(
-                x,
+                g,
                 {
-                  className: t.button,
+                  className: s.button,
                   size: "s",
                   type: "close",
-                  onClick: () => n()
+                  onClick: () => t()
                 }
               )
             ] })
@@ -70,10 +73,10 @@ const C = {
         /* @__PURE__ */ i(
           "button",
           {
-            className: t.bg,
+            className: s.bg,
             "aria-label": "close_backdrop",
             type: "button",
-            onClick: () => n()
+            onClick: () => t()
           }
         )
       ]
@@ -81,5 +84,5 @@ const C = {
   );
 };
 export {
-  O as Modal
+  R as Modal
 };

package/dist/popover/component.js

@@ -1,109 +1,126 @@
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { offset as L, flip as P, shift as U, arrow as z, useFloating as V, autoUpdate as q } from "@floating-ui/react-dom";
+import { jsx as i, jsxs as D } from "react/jsx-runtime";
+import { offset as L, flip as U, shift as z, arrow as V, useFloating as q, autoUpdate as B } from "@floating-ui/react-dom";
 import c from "classnames";
-import { useRef as g, useMemo as N, useEffect as B, useCallback as G } from "react";
-import { CSSTransition as H } from "react-transition-group";
-import { Portal as J } from "../portal/component.js";
-import { Stack as K } from "../stack/component.js";
-import { stackingOrder as Q } from "../stack/context.js";
+import { useRef as g, useMemo as N, useEffect as G, useCallback as H } from "react";
+import { CSSTransition as J } from "react-transition-group";
+import { Portal as K } from "../portal/component.js";
+import { Stack as Q } from "../stack/component.js";
+import { stackingOrder as W } from "../stack/context.js";
 import e from "./index.module.css.js";
-const W = {
+const X = {
   timeout: 150
-}, X = {
+}, Y = {
   enter: e.enter,
   enterActive: e.enterActive,
   exit: e.exit,
   exitActive: e.exitActive
-}, Y = H, Z = {
+}, Z = J, tt = {
   top: "bottom",
   right: "left",
   bottom: "top",
   left: "right"
-}, ct = ({
-  children: R,
-  getPortalContainer: b,
-  transition: m = W,
-  anchorElement: A,
+}, mt = ({
+  children: b,
+  getPortalContainer: R,
+  transition: m = X,
+  anchorElement: h,
   offset: n = [0, 0],
   withArrow: o = !1,
-  withTransition: T = !0,
-  position: h = "left",
-  preventFlip: f,
-  popperClassName: y,
+  withTransition: y = !0,
+  position: A = "left",
+  preventFlip: d,
+  popperClassName: T,
   arrowClassName: E,
   className: O,
-  open: i,
+  open: s,
   dataTestId: C,
   update: l,
   transitionDuration: F = `${m.timeout}ms`,
-  zIndex: I = Q.POPOVER
+  zIndex: I = W.POPOVER
 }) => {
-  const d = g(null), u = g(null), M = N(
+  const f = g(null), u = g(null), M = N(
     () => [
       L({
         crossAxis: n[0],
         mainAxis: n[1]
       }),
-      ...f ? [] : [P()],
-      U({ padding: 4 }),
-      ...o ? [z({ element: d })] : []
+      ...d ? [] : [U()],
+      z({ padding: 4 }),
+      ...o ? [V({ element: f })] : []
     ],
-    [n[0], n[1], f, o]
+    [n[0], n[1], d, o]
   ), {
     refs: { setFloating: p },
     floatingStyles: _,
     middlewareData: a,
-    placement: x,
-    update: S
-  } = V({
-    placement: h,
-    open: i,
-    elements: { reference: A },
-    whileElementsMounted: i ? q : void 0,
+    placement: v,
+    update: x,
+    isPositioned: k
+  } = q({
+    placement: A,
+    open: s,
+    elements: { reference: h },
+    whileElementsMounted: s ? B : void 0,
     middleware: M
   });
-  B(() => {
-    l && (l.current = S);
-  }, [S, l]);
-  const k = N(() => {
+  G(() => {
+    l && (l.current = x);
+  }, [x, l]);
+  const P = N(() => {
     if (!o || !a.arrow)
       return {};
-    const { x: t, y: s } = a.arrow, j = x.split("-")[0], w = Z[j] ?? "bottom";
+    const { x: t, y: r } = a.arrow, j = v.split("-")[0], w = tt[j] ?? "bottom";
     return {
       position: "absolute",
       left: t != null ? `${t}px` : void 0,
-      top: s != null ? `${s}px` : void 0,
+      top: r != null ? `${r}px` : void 0,
       right: "",
       bottom: "",
       [w]: "-4px"
     };
-  }, [o, a.arrow, x]), $ = G(
+  }, [o, a.arrow, v]), $ = H(
     (t) => {
       u.current = t, p(t);
     },
     [p]
-  ), v = (t, s) => /* @__PURE__ */ r(
+  ), S = (t, r) => /* @__PURE__ */ i(
     "div",
     {
       ref: $,
       style: {
         zIndex: t,
-        ..._
+        ..._,
+        /**
+         * Скрываем поповер до первого замера floating-ui: иначе
+         * на первом рендере `floatingStyles` ещё содержат дефолт
+         * `top: 0, left: 0, transform: translate(0, 0)`, а CSSTransition
+         * уже стартует fade-in. Получается визуальный "прыжок" из
+         * угла портала в правильную позицию. `isPositioned` становится
+         * `true` после первого измерения — к этому моменту координаты
+         * корректные и можно показывать.
+         *
+         * Не используем `display: none` или `opacity`, потому что:
+         *  — `display: none` ломает измерения floating-ui (нулевые
+         *    размеры) и блокирует CSSTransition;
+         *  — `opacity` уже используется CSSTransition'ом для fade-in,
+         *    переписывать его здесь — испортить анимацию.
+         */
+        visibility: k ? "visible" : "hidden"
       },
       className: c(e.component, O),
       children: /* @__PURE__ */ D(
         "div",
         {
           "data-test-id": C,
-          className: c(e.inner, y),
-          style: s,
+          className: c(e.inner, T),
+          style: r,
           children: [
-            R,
-            o && /* @__PURE__ */ r(
+            b,
+            o && /* @__PURE__ */ i(
               "div",
               {
-                ref: d,
-                style: k,
+                ref: f,
+                style: P,
                 className: c(e.arrow, E)
               }
             )
@@ -112,18 +129,18 @@ const W = {
       )
     }
   );
-  return /* @__PURE__ */ r(K, { value: I, children: (t) => /* @__PURE__ */ r(J, { getPortalContainer: b, children: T ? /* @__PURE__ */ r(
-    Y,
+  return /* @__PURE__ */ i(Q, { value: I, children: (t) => /* @__PURE__ */ i(K, { getPortalContainer: R, children: y ? /* @__PURE__ */ i(
+    Z,
     {
       unmountOnExit: !0,
-      classNames: X,
+      classNames: Y,
       ...m,
-      in: i,
+      in: s,
       nodeRef: u,
-      children: v(t, { transitionDuration: F })
+      children: S(t, { transitionDuration: F })
     }
-  ) : i && v(t) }) });
+  ) : s && S(t) }) });
 };
 export {
-  ct as Popover
+  mt as Popover
 };

package/dist/radio-groups/mock.data.d.ts

@@ -0,0 +1,9 @@
+export declare const locations: {
+    id: number;
+    title: string;
+}[];
+export declare const questrooms: {
+    id: number;
+    title: string;
+    locationId: number;
+}[];

package/dist/radio-groups/mock.data.js

@@ -0,0 +1,82 @@
+const t = [
+  {
+    id: 1,
+    title: "Tambov"
+  },
+  {
+    id: 2,
+    title: "Moscow"
+  },
+  {
+    id: 3,
+    title: "Voronezh"
+  },
+  {
+    id: 4,
+    title: "Lipetsk"
+  },
+  {
+    id: 5,
+    title: "SPB"
+  }
+], o = [
+  {
+    id: 1,
+    title: "Questroom 1",
+    locationId: 1
+  },
+  {
+    id: 4,
+    title: "Questroom 4",
+    locationId: 2
+  },
+  {
+    id: 5,
+    title: "Questroom 5",
+    locationId: 2
+  },
+  {
+    id: 6,
+    title: "Questroom 6",
+    locationId: 2
+  },
+  {
+    id: 7,
+    title: "Questroom 7",
+    locationId: 3
+  },
+  {
+    id: 10,
+    title: "Questroom 10",
+    locationId: 4
+  },
+  {
+    id: 11,
+    title: "Questroom 11",
+    locationId: 4
+  },
+  {
+    id: 12,
+    title: "Questroom 12",
+    locationId: 4
+  },
+  {
+    id: 13,
+    title: "Questroom 13",
+    locationId: 5
+  },
+  {
+    id: 14,
+    title: "Questroom 14",
+    locationId: 5
+  },
+  {
+    id: 15,
+    title: "Questroom 15",
+    locationId: 5
+  }
+];
+export {
+  t as locations,
+  o as questrooms
+};

package/dist/theme-provider/default-themes.d.ts

@@ -18,6 +18,7 @@ export declare const defaultThemes: {
             readonly thirdly: "#E7E8EA";
             readonly quaternary: "#D5D6DC";
             readonly 'special-super-light': "#FDFDFD";
+            readonly 'primary-inverted': "#0E0E0E";
             readonly 'secondary-inverted': "#1C1C1E";
             readonly 'special-big-objects': "#F8F8F9";
             readonly positive: "#63C956";
@@ -46,6 +47,7 @@ export declare const defaultThemes: {
             readonly attention: "#F19938";
             readonly accent: "#2174EF";
             readonly 'accent-special': "#649EF4";
+            readonly 'primary-inverted': "#F8F8F8";
             readonly 'secondary-inverted': "#85858D";
             readonly main: "#2174ef";
             readonly static: "#FFFFFF";
@@ -92,6 +94,7 @@ export declare const defaultThemes: {
             readonly thirdly: "#27272A";
             readonly quaternary: "#36363A";
             readonly 'special-super-light': "#18181970";
+            readonly 'primary-inverted': "#FFFFFF";
             readonly 'secondary-inverted': "#F2F3F5";
             readonly 'special-big-objects': "#171718";
             readonly positive: "#32D74B";
@@ -120,6 +123,7 @@ export declare const defaultThemes: {
             readonly attention: "#F19938";
             readonly accent: "#2174EF";
             readonly 'accent-special': "#649EF4";
+            readonly 'primary-inverted': "#0E0E0E";
             readonly 'secondary-inverted': "#86868A";
             readonly main: "#2174ef";
             readonly static: "#FFFFFF";

package/dist/theme-provider/default-themes.js

@@ -18,6 +18,7 @@ const t = {
       thirdly: "#E7E8EA",
       quaternary: "#D5D6DC",
       "special-super-light": "#FDFDFD",
+      "primary-inverted": "#0E0E0E",
       "secondary-inverted": "#1C1C1E",
       "special-big-objects": "#F8F8F9",
       positive: "#63C956",
@@ -46,6 +47,7 @@ const t = {
       attention: "#F19938",
       accent: "#2174EF",
       "accent-special": "#649EF4",
+      "primary-inverted": "#F8F8F8",
       "secondary-inverted": "#85858D",
       main: "#2174ef",
       static: "#FFFFFF"
@@ -92,6 +94,7 @@ const t = {
       thirdly: "#27272A",
       quaternary: "#36363A",
       "special-super-light": "#18181970",
+      "primary-inverted": "#FFFFFF",
       "secondary-inverted": "#F2F3F5",
       "special-big-objects": "#171718",
       positive: "#32D74B",
@@ -120,6 +123,7 @@ const t = {
       attention: "#F19938",
       accent: "#2174EF",
       "accent-special": "#649EF4",
+      "primary-inverted": "#0E0E0E",
       "secondary-inverted": "#86868A",
       main: "#2174ef",
       static: "#FFFFFF"

package/dist/toast-plate/index.css

@@ -1 +1 @@
-: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)}:root{--toast-plate-bg-color: var(--color-bg-secondary-inverted);--toast-plate-bg-color-negative: var(--color-bg-negative);--toast-plate-bg-color-positive: var(--color-bg-positive);--toast-plate-border-radius: 8px;--toast-plate-title-font-weight: 700;--toast-plate-action-align: center;--toast-plate-action-padding: 0 var(--gap-2xl);--toast-plate-action-divider-display: block}.component_2FCo{position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;border-radius:var(--toast-plate-border-radius);color:var(--color-text-primary);min-height:56px;width:100%;padding:var(--gap-m);background-color:var(--toast-plate-bg-color)}.component_2FCo.hasCloser_ig0b{padding-right:56px}.component_2FCo.block_aZI2{display:flex;width:100%}.component_2FCo.positive_k8le{background-color:color-mix(in srgb,var(--color-bg-positive) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-positive)}.component_2FCo.positive_k8le .checkmark_Uk-P svg{color:var(--color-graphic-positive)}.component_2FCo.attention_qo9d{background-color:color-mix(in srgb,var(--color-bg-attention) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-attention)}.component_2FCo.attention_qo9d .checkmark_Uk-P svg{color:var(--color-graphic-attention)}.component_2FCo.negative_rdTB{background-color:color-mix(in srgb,var(--color-bg-negative) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-negative)}.component_2FCo.negative_rdTB .checkmark_Uk-P svg{color:var(--color-graphic-negative)}.component_2FCo.default_yyLQ{background-color:color-mix(in srgb,var(--color-bg-accent) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-accent)}.component_2FCo.default_yyLQ .checkmark_Uk-P svg{color:var(--color-graphic-accent)}.component_2FCo.neutral_KAat{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary)}.component_2FCo.neutral_KAat .checkmark_Uk-P svg{color:var(--color-graphic-secondary)}.component_2FCo.black_c7gB{background-color:var(--color-bg-primary-inverted);color:var(--color-text-primary-inverted)}.component_2FCo.black_c7gB .checkmark_Uk-P svg{color:var(--color-graphic-primaty-inverted)}.component_2FCo.black_c7gB .closeButton_mFhA{color:var(--color-text-primary-inverted)!important}.contentWrap_-P3J{display:flex;justify-content:space-between}.content_ING2{display:flex;flex:1;flex-direction:column;padding-left:12px}.leftAddons_Odkd{display:flex;align-items:flex-start;flex-shrink:0;padding-right:var(--gap-s)}.title_QZFU{font-size:16px;line-height:24px;font-weight:700;font-family:var(--font-family);font-weight:var(--toast-plate-title-font-weight);margin-bottom:4px}.children_tKSv{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);margin-bottom:0}.bottomAddons_ixVc{margin-top:16px}.closeButton_mFhA{display:flex!important;align-items:flex-start!important;position:absolute!important;top:var(--gap-m)!important;bottom:var(--gap-s)!important;right:var(--gap-s)!important;padding:var(--gap-2xs)!important;transition:opacity .2s ease-out!important;cursor:pointer!important;color:var(--color-text-primary)!important}.closeButton_mFhA:hover{opacity:.7!important}.closeButton_mFhA:active{opacity:.5!important}
+: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)}:root{--toast-plate-bg-color: var(--color-bg-secondary-inverted);--toast-plate-bg-color-negative: var(--color-bg-negative);--toast-plate-bg-color-positive: var(--color-bg-positive);--toast-plate-border-radius: 8px;--toast-plate-title-font-weight: 700;--toast-plate-action-align: center;--toast-plate-action-padding: 0 var(--gap-2xl);--toast-plate-action-divider-display: block}.component_2FCo{position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;border-radius:var(--toast-plate-border-radius);color:var(--color-text-primary);min-height:56px;width:100%;padding:var(--gap-m);background-color:var(--toast-plate-bg-color)}.component_2FCo.hasCloser_ig0b{padding-right:56px}.component_2FCo.block_aZI2{display:flex;width:100%}.component_2FCo.positive_k8le{background-color:color-mix(in srgb,var(--color-bg-positive) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-positive)}.component_2FCo.positive_k8le .checkmark_Uk-P svg{color:var(--color-graphic-positive)}.component_2FCo.attention_qo9d{background-color:color-mix(in srgb,var(--color-bg-attention) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-attention)}.component_2FCo.attention_qo9d .checkmark_Uk-P svg{color:var(--color-graphic-attention)}.component_2FCo.negative_rdTB{background-color:color-mix(in srgb,var(--color-bg-negative) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-negative)}.component_2FCo.negative_rdTB .checkmark_Uk-P svg{color:var(--color-graphic-negative)}.component_2FCo.default_yyLQ{background-color:color-mix(in srgb,var(--color-bg-accent) 10%,var(--color-bg-primary));border:1px solid var(--color-bg-accent)}.component_2FCo.default_yyLQ .checkmark_Uk-P svg{color:var(--color-graphic-accent)}.component_2FCo.neutral_KAat{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary)}.component_2FCo.neutral_KAat .checkmark_Uk-P svg{color:var(--color-graphic-secondary)}.component_2FCo.black_c7gB{background-color:var(--color-bg-primary-inverted, #0E0E0E);color:var(--color-text-primary-inverted, #FFFFFF)}.component_2FCo.black_c7gB .checkmark_Uk-P svg{color:var(--color-graphic-primary-inverted, #FFFFFF)}.component_2FCo.black_c7gB .closeButton_mFhA{color:var(--color-text-primary-inverted, #FFFFFF)!important}.contentWrap_-P3J{display:flex;justify-content:space-between}.content_ING2{display:flex;flex:1;flex-direction:column;padding-left:12px}.leftAddons_Odkd{display:flex;align-items:flex-start;flex-shrink:0;padding-right:var(--gap-s)}.title_QZFU{font-size:16px;line-height:24px;font-weight:700;font-family:var(--font-family);font-weight:var(--toast-plate-title-font-weight);margin-bottom:4px}.children_tKSv{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);margin-bottom:0}.bottomAddons_ixVc{margin-top:16px}.closeButton_mFhA{display:flex!important;align-items:flex-start!important;position:absolute!important;top:var(--gap-m)!important;bottom:var(--gap-s)!important;right:var(--gap-s)!important;padding:var(--gap-2xs)!important;transition:opacity .2s ease-out!important;cursor:pointer!important;color:var(--color-text-primary)!important}.closeButton_mFhA:hover{opacity:.7!important}.closeButton_mFhA:active{opacity:.5!important}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alphakits/ui",
-    "version": "2.4.3",
+    "version": "2.4.4",
     "files": [
         "dist"
     ],
@@ -23,8 +23,8 @@
         "build": "yarn build:clean && yarn build:index && yarn build:js && yarn build:vars",
         "test": "echo \"no tests\"",
         "start": "vite",
-        "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 --ci",
-        "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -o storybook-static",
+        "storybook": "storybook dev -p 6006 --no-open",
+        "build-storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook build -o storybook-static",
         "lint:css": "stylelint ./src/**/*.css",
         "lint:scripts": "biome lint",
         "lint": "yarn lint:css && yarn lint:scripts",
@@ -62,47 +62,32 @@
     },
     "devDependencies": {
         "@alphakits/icons": "1.25.0",
-        "@babel/core": "^7.29.0",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
-        "@babel/plugin-transform-optional-chaining": "^7.28.6",
-        "@babel/preset-env": "^7.29.3",
-        "@babel/preset-react": "^7.28.5",
-        "@babel/preset-typescript": "^7.28.5",
         "@biomejs/biome": "2.4.15",
         "@commitlint/cli": "8.3.5",
         "@commitlint/config-conventional": "8.3.4",
         "@semantic-release/git": "^10.0.0",
         "@semantic-release/gitlab": "^7.0.3",
         "@semantic-release/npm": "^8.0.2",
-        "@storybook/addon-actions": "6.1.16",
-        "@storybook/addon-contexts": "^5.3.21",
-        "@storybook/addon-docs": "6.1.16",
-        "@storybook/addon-essentials": "6.1.21",
-        "@storybook/addon-knobs": "6.1.16",
-        "@storybook/addon-links": "6.1.16",
-        "@storybook/addon-storysource": "6.1.16",
-        "@storybook/addons": "6.1.16",
-        "@storybook/react": "6.1.16",
-        "@storybook/source-loader": "^6.1.21",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-links": "^8.6.14",
+        "@storybook/react": "^8.6.14",
+        "@storybook/react-vite": "^8.6.14",
+        "@storybook/theming": "^8.6.14",
         "@testing-library/jest-dom": "^5.1.1",
         "@testing-library/react": "^10.0.1",
         "@testing-library/react-hooks": "3.2.1",
         "@testing-library/user-event": "^10.0.0",
         "@types/autosize": "3.0.7",
-        "@types/babel__core": "^7",
-        "@types/babel__preset-env": "^7",
         "@types/classnames": "^2.2.10",
         "@types/element-closest": "^3.0.0",
         "@types/jest": "^25.1.4",
         "@types/node": "^20.17.0",
-        "@types/optimize-css-assets-webpack-plugin": "^5",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "@types/react-transition-group": "^4.4.1",
         "@types/react-window": "1.8.2",
         "@types/uuid": "8.3.0",
         "@vitejs/plugin-react-swc": "^3.7.2",
-        "babel-loader": "8.4.1",
         "conventional-changelog-cli": "2.0.31",
         "cssnano": "4.1.11",
         "cz-conventional-changelog": "3.1.0",
@@ -110,21 +95,18 @@
         "glob": "^10.4.5",
         "husky": "^4.2.5",
         "lint-staged": "^10.2.13",
-        "mini-css-extract-plugin": "1.6.2",
-        "optimize-css-assets-webpack-plugin": "5.0.8",
         "postcss": "^8.4.47",
         "postcss-custom-media": "^10.0.0",
         "postcss-each": "^1.1.0",
         "postcss-for": "^2.1.1",
         "postcss-import": "^16.1.0",
-        "postcss-loader": "4.3.0",
         "postcss-mixins": "^11.0.3",
         "postcss-preset-env": "^10.0.0",
         "react": "19.2.6",
-        "react-docgen-typescript-loader": "^3.7.1",
         "react-dom": "19.2.6",
         "semantic-release": "^18.0.0",
         "standard-version": "7.1.0",
+        "storybook": "^8.6.14",
         "stylelint": "^13.6.1",
         "typescript": "~5.4.5",
         "typescript-plugin-css-modules": "^5.1.0",