@alphakits/ui 2.4.3 → 2.4.5

package/dist/select/components/base-select/component.js

@@ -1,18 +1,18 @@
 import { jsx as a, jsxs as rt } from "react/jsx-runtime";
-import re from "classnames";
-import { useMultipleSelection as se, useCombobox as L } from "downshift";
-import st, { forwardRef as ot, useRef as y, useMemo as T, useCallback as W, useEffect as j } from "react";
+import ne from "classnames";
+import { useMultipleSelection as re, useCombobox as B } from "downshift";
+import st, { forwardRef as ot, useRef as y, useMemo as T, useCallback as W, useEffect as se, useLayoutEffect as ct } from "react";
 import oe from "react-merge-refs";
-import { ResizeObserver as ct } from "resize-observer";
-import { getDataTestId as A } from "../../../__internal/utils/get-data-test-id.js";
-import { Popover as it } from "../../../popover/component.js";
-import { processOptions as lt } from "../../utils.js";
-import { NativeSelect as at } from "../native-select/component.js";
+import { ResizeObserver as it } from "resize-observer";
+import { getDataTestId as j } from "../../../__internal/utils/get-data-test-id.js";
+import { Popover as lt } from "../../../popover/component.js";
+import { processOptions as at } from "../../utils.js";
+import { NativeSelect as dt } from "../native-select/component.js";
 import v from "./index.module.css.js";
 const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
   const x = y(o);
   return x.current = o, x;
-}, kt = ot(
+}, vt = ot(
   ({
     dataTestId: o = "",
     className: x,
@@ -20,29 +20,29 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
     filteredOptions: ae,
     popoverOuterClassname: de,
     optionsListClassName: ue,
-    optionClassName: $,
+    optionClassName: A,
     options: R,
-    actionButton: H,
+    actionButton: $,
     autocomplete: I = !1,
     multiple: m = !1,
     allowUnselect: M = !1,
     disabled: u = !1,
-    closeOnSelect: U = !m,
+    closeOnSelect: H = !m,
     circularNavigation: fe = !1,
     nativeSelect: w = !1,
-    defaultOpen: V = !1,
+    defaultOpen: U = !1,
     open: N,
     popoverPosition: pe = "bottom-start",
     offset: me,
     withArrow: he,
     preventFlip: ge = !0,
-    optionsListWidth: _ = "field",
+    optionsListWidth: V = "field",
     name: h,
     id: ye,
     required: Ie,
     selected: C,
     size: S = "m",
-    optionsSize: q = S,
+    optionsSize: _ = S,
     error: we,
     hint: be,
     block: ke = !0,
@@ -50,27 +50,27 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
     placeholder: ve,
     fieldProps: xe = {},
     optionsListProps: Re = {},
-    optionProps: z = {},
+    optionProps: q = {},
     valueRenderer: Ce,
     onChange: Pe,
     onOpen: De,
     onFocus: Te,
     onBlur: Me,
     onScroll: Ne,
-    Arrow: G,
+    Arrow: z,
     Field: Se = () => null,
     OptionsList: Oe = () => null,
     Optgroup: Ee = () => null,
-    Option: J = () => null,
+    Option: G = () => null,
     updatePopover: Fe,
     zIndexPopover: Ke,
-    showEmptyOptionsList: Be = !1,
-    visibleOptions: Le
+    showEmptyOptionsList: Le = !1,
+    visibleOptions: Be
   }, We) => {
-    const b = y(null), Q = y(null), k = y(null), X = y(null), g = y(null), Y = ie(Pe), Z = ie(De), { flatOptions: c, selectedOptions: ee } = T(
-      () => lt(R || [], C),
+    const b = y(null), J = y(null), k = y(null), Q = y(null), g = y(null), X = ie(Pe), Y = ie(De), { flatOptions: c, selectedOptions: Z } = T(
+      () => at(R || [], C),
       [R, C]
-    ), te = T(() => {
+    ), ee = T(() => {
       const e = /* @__PURE__ */ new Map();
       return c.forEach((t, s) => {
         e.set(t.key, s);
@@ -80,7 +80,7 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
         itemToString: ce,
         onSelectedItemsChange: (e) => {
           const { selectedItems: t = [] } = e;
-          Y.current?.({
+          X.current?.({
             selectedMultiple: t,
             selected: t.length ? t[0] : null,
             name: h
@@ -88,31 +88,31 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
         },
         stateReducer: (e, t) => {
           const { type: s, changes: n } = t;
-          return !M && s === se.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
+          return !M && s === re.stateChangeTypes.DropdownKeyDownBackspace ? e : n;
         },
-        ...C !== void 0 ? { selectedItems: ee } : {}
+        ...C !== void 0 ? { selectedItems: Z } : {}
       }),
-      [M, h, C, ee, Y]
+      [M, h, C, Z, X]
     ), {
       selectedItems: i,
       addSelectedItem: Ae,
       setSelectedItems: E,
       removeSelectedItem: $e,
       getDropdownProps: He
-    } = se(je), F = T(
+    } = re(je), F = T(
       () => new Set(i.map((e) => e.key)),
       [i]
     ), {
       isOpen: l,
       getMenuProps: Ue,
       getInputProps: Ve,
-      getItemProps: ne,
+      getItemProps: te,
       getComboboxProps: _e,
       getLabelProps: qe,
       highlightedIndex: P,
       toggleMenu: K,
       openMenu: f
-    } = L({
+    } = B({
       id: ye,
       isOpen: N,
       circularNavigation: fe,
@@ -120,23 +120,23 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
       itemToString: ce,
       defaultHighlightedIndex: i.length === 0 ? -1 : void 0,
       onIsOpenChange: (e) => {
-        Z.current && setTimeout(() => {
-          Z.current?.({ open: e.isOpen, name: h });
+        Y.current && setTimeout(() => {
+          Y.current?.({ open: e.isOpen, name: h });
         }, 0);
       },
       stateReducer: (e, t) => {
         const { type: s, changes: n } = t, { selectedItem: d } = n;
         switch (s) {
-          case L.stateChangeTypes.InputKeyDownEnter:
-          case L.stateChangeTypes.ItemClick:
+          case B.stateChangeTypes.InputKeyDownEnter:
+          case B.stateChangeTypes.ItemClick:
             if (d && !d.disabled) {
               const D = F.has(d.key), r = M || m && i.length > 1;
               D && r && $e(d), D || (m ? Ae(d) : E([d]));
             }
             return {
               ...n,
-              isOpen: !U,
-              highlightedIndex: e.isOpen && !U ? e.highlightedIndex : n.highlightedIndex
+              isOpen: !H,
+              highlightedIndex: e.isOpen && !H ? e.highlightedIndex : n.highlightedIndex
             };
           default:
             return n;
@@ -145,7 +145,7 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
     }), ze = Ue(
       { ref: k },
       { suppressRefError: !0 }
-    ), p = Ve(He({ ref: oe([We, Q]) })), Ge = (e) => {
+    ), p = Ve(He({ ref: oe([We, J]) })), Ge = (e) => {
       Te?.(e), I && !l && f();
     }, Je = (e) => {
       const t = e.relatedTarget || document.activeElement;
@@ -167,9 +167,9 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
     ), Ze = W(
       ({ option: e, index: t, ...s }) => {
         if (!e) return null;
-        const n = te.get(e.key);
+        const n = ee.get(e.key);
         if (n === void 0) return null;
-        const d = c[n], D = ne({
+        const d = c[n], D = te({
           item: d,
           index: n,
           disabled: e.disabled,
@@ -184,66 +184,66 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
             r.stopPropagation();
           }
         });
-        return /* @__PURE__ */ a(st.Fragment, { children: J({
-          ...z,
+        return /* @__PURE__ */ a(st.Fragment, { children: G({
+          ...q,
           ...s,
-          className: $,
+          className: A,
           innerProps: D,
           index: t,
           option: e,
-          size: q,
+          size: _,
           disabled: e.disabled,
           highlighted: n === P,
           selected: F.has(e.key)
         }) }, e.key);
       },
       [
-        z,
+        q,
         c,
+        ee,
+        A,
         te,
-        $,
-        ne,
-        q,
+        _,
         P,
         F,
-        J
+        G
       ]
     );
-    j(() => {
-      V && f();
-    }, [V, f]), j(() => {
+    se(() => {
+      U && f();
+    }, [U, f]), se(() => {
       N === !0 && f();
     }, [N, f]);
-    const B = W(() => {
+    const L = W(() => {
       if (!k.current || !b.current) return;
-      const e = _ === "field" ? "width" : "minWidth", t = Math.round(b.current.getBoundingClientRect().width);
-      X.current !== t && (X.current = t, k.current.style[e] = `${t}px`);
-    }, [_]);
-    j(() => {
+      const e = V === "field" ? "width" : "minWidth", t = Math.round(b.current.getBoundingClientRect().width);
+      Q.current !== t && (Q.current = t, k.current.style[e] = `${t}px`);
+    }, [V]);
+    ct(() => {
       if (!l || !b.current) return;
       const e = () => {
-        g.current && window.clearTimeout(g.current), g.current = window.setTimeout(B, 50);
-      }, t = new ct(e);
-      return t.observe(b.current), B(), () => {
+        g.current && window.clearTimeout(g.current), g.current = window.setTimeout(L, 50);
+      }, t = new it(e);
+      return t.observe(b.current), L(), () => {
         t.disconnect(), g.current && window.clearTimeout(g.current), g.current = null;
       };
-    }, [l, B]);
-    const et = m ? i.map((e) => e.key?.toString()) : i[0]?.key?.toString(), tt = c.length > 0 || Be || !!H, nt = O ? /* @__PURE__ */ a("span", { ...qe(), children: Ie ? `${O} *` : O }) : void 0;
+    }, [l, L]);
+    const et = m ? i.map((e) => e.key?.toString()) : i[0]?.key?.toString(), tt = c.length > 0 || Le || !!$, nt = O ? /* @__PURE__ */ a("span", { ...qe(), children: Ie ? `${O} *` : O }) : void 0;
     return /* @__PURE__ */ rt(
       "div",
       {
         ..._e({
           ref: b,
           ...u && { "aria-disabled": !0 },
-          className: re(v.component, { [v.block]: ke }, x)
+          className: ne(v.component, { [v.block]: ke }, x)
         }),
         onKeyDown: u ? void 0 : Qe,
         tabIndex: -1,
         id: "slect_wrapper",
-        "data-test-id": A("combobox", o),
+        "data-test-id": j("combobox", o),
         children: [
           w && /* @__PURE__ */ a(
-            at,
+            dt,
             {
               className: v.nativeSelect,
               disabled: u,
@@ -265,7 +265,7 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
               size: S,
               placeholder: ve,
               label: nt,
-              Arrow: G && /* @__PURE__ */ a(G, { open: l }),
+              Arrow: z && /* @__PURE__ */ a(z, { open: l }),
               error: we,
               hint: be,
               valueRenderer: Ce,
@@ -281,17 +281,17 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
                 "aria-controls": p["aria-controls"],
                 "aria-autocomplete": I ? p["aria-autocomplete"] : void 0
               },
-              dataTestId: A("field", o),
+              dataTestId: j("field", o),
               ...xe
             }
           ),
           h && !w && i.map((e) => /* @__PURE__ */ a("input", { type: "hidden", name: h, value: e.key }, e.key)),
           !w && /* @__PURE__ */ a(
-            it,
+            lt,
             {
               open: l,
               withTransition: !1,
-              anchorElement: Q.current,
+              anchorElement: J.current,
               position: pe,
               offset: me,
               withArrow: he,
@@ -304,7 +304,7 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
                 "div",
                 {
                   ...ze,
-                  className: re(ue, v.optionsList),
+                  className: ne(ue, v.optionsList),
                   children: /* @__PURE__ */ a(
                     Oe,
                     {
@@ -314,13 +314,13 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
                       open: l,
                       size: S,
                       toggleMenu: K,
-                      actionButton: H,
+                      actionButton: $,
                       options: ae ?? R,
                       Optgroup: Ee,
                       Option: Ze,
-                      visibleOptions: Le,
+                      visibleOptions: Be,
                       onScroll: Ne,
-                      dataTestId: A("options-list", o)
+                      dataTestId: j("options-list", o)
                     }
                   )
                 }
@@ -333,5 +333,5 @@ const ce = (o) => o ? o.key?.toString() : "", ie = (o) => {
   }
 );
 export {
-  kt as BaseSelect
+  vt as BaseSelect
 };

package/dist/select/utils.js

@@ -1,50 +1,50 @@
-import { useEffect as f, isValidElement as p, cloneElement as a } from "react";
-const y = (e) => Object.hasOwn(e, "options"), d = (e) => typeof e == "object" && e !== null && Object.hasOwn(e, "key"), O = ({
-  selected: e,
+import { useLayoutEffect as f, isValidElement as p, cloneElement as a } from "react";
+const y = (t) => Object.hasOwn(t, "options"), d = (t) => typeof t == "object" && t !== null && Object.hasOwn(t, "key"), O = ({
+  selected: t,
   selectedMultiple: s
 }) => {
-  const t = s || (e ? [e] : []);
-  return t.length ? t.reduce((r, c, o) => (p(c.content) ? r.push(a(c.content, { key: c.key })) : r.push(c.content), o < t.length - 1 && r.push(", "), r), []) : null;
+  const e = s || (t ? [t] : []);
+  return e.length ? e.reduce((r, c, o) => (p(c.content) ? r.push(a(c.content, { key: c.key })) : r.push(c.content), o < e.length - 1 && r.push(", "), r), []) : null;
 };
-function k(e, s = []) {
-  const t = [], r = Array.isArray(s) ? s : [s], c = r.filter(d), o = new Set(
+function k(t, s = []) {
+  const e = [], r = Array.isArray(s) ? s : [s], c = r.filter(d), o = new Set(
     r.filter(
       (n) => typeof n == "string" || typeof n == "number"
     )
   ), h = (n) => o.has(n.key), l = (n) => {
-    t.push(n), h(n) && c.push(n);
+    e.push(n), h(n) && c.push(n);
   };
-  return e.forEach((n) => {
+  return t.forEach((n) => {
     y(n) ? n.options.forEach(l) : l(n);
-  }), { flatOptions: t, selectedOptions: c };
+  }), { flatOptions: e, selectedOptions: c };
 }
 function E({
-  visibleOptions: e,
+  visibleOptions: t,
   listRef: s,
-  styleTargetRef: t = s,
+  styleTargetRef: e = s,
   open: r,
   invalidate: c
 }) {
   f(() => {
-    const o = s.current, h = t.current;
+    const o = s.current, h = e.current;
     if (r && o && h) {
       const l = [].slice.call(
         o.children,
         0,
-        e + 1
+        t + 1
       );
-      let n = l.slice(0, e).reduce((i, u) => i + u.clientHeight, 0);
-      e < o.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), h.style.height = `${n}px`;
+      let n = l.slice(0, t).reduce((i, u) => i + u.clientHeight, 0);
+      t < o.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), h.style.height = `${n}px`;
     }
-  }, [s, r, t, e]);
+  }, [s, r, e, t]);
 }
-const j = (e, s) => {
-  for (let t = e.length - 1; t >= 0; t--)
-    if (s(e[t])) return t;
+const j = (t, s) => {
+  for (let e = t.length - 1; e >= 0; e--)
+    if (s(t[e])) return e;
   return -1;
-}, w = (e, s) => e.map((t) => ({
-  key: t.id,
-  content: s && t[s] || t.title || t.name
+}, w = (t, s) => t.map((e) => ({
+  key: e.id,
+  content: s && e[s] || e.title || e.name
 }));
 export {
   w as convertToOptions,

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/component.js

@@ -1,71 +1,72 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import f from "@alphakits/icons/dist/AlertCircleM";
-import M from "@alphakits/icons/dist/CheckmarkCircleM";
-import p from "@alphakits/icons/dist/ClockCircleM";
+import p from "@alphakits/icons/dist/CheckmarkCircleM";
+import h from "@alphakits/icons/dist/ClockCircleM";
 import g from "@alphakits/icons/dist/CloseS";
-import o from "classnames";
+import l from "classnames";
 import { forwardRef as j, useCallback as A } from "react";
 import { Button as B } from "../button/component.js";
-import r from "./index.module.css.js";
+import t from "./index.module.css.js";
 const E = j(
   ({
-    dataTestId: h,
-    className: k,
-    contentClassName: N,
-    hasCloser: c,
+    dataTestId: k,
+    className: N,
+    contentClassName: u,
+    hasCloser: o,
     leftAddons: s,
-    view: t = "default",
+    view: e = "default",
     title: i,
     children: m,
     bottomAddons: n,
-    block: u,
-    onClose: a,
-    ...v
-  }, C) => {
-    const l = {
-      negative: /* @__PURE__ */ e(f, {}),
-      attention: /* @__PURE__ */ e(f, {}),
-      positive: /* @__PURE__ */ e(M, {}),
-      default: /* @__PURE__ */ e(p, {}),
-      neutral: /* @__PURE__ */ e(p, {}),
-      black: null
-    }, b = A(
-      (x) => {
-        a && a(x);
+    block: v,
+    onClose: r,
+    ...C
+  }, b) => {
+    const c = {
+      negative: /* @__PURE__ */ a(f, {}),
+      attention: /* @__PURE__ */ a(f, {}),
+      positive: /* @__PURE__ */ a(p, {}),
+      default: /* @__PURE__ */ a(h, {}),
+      neutral: /* @__PURE__ */ a(h, {}),
+      black: /* @__PURE__ */ a(p, {})
+    }, x = A(
+      (M) => {
+        r && r(M);
       },
-      [a]
+      [r]
     );
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: C,
-        className: o(
-          r.component,
-          r[t],
+        ref: b,
+        className: l(
+          t.component,
+          t[e],
           {
-            [r.block]: u,
-            [r.hasCloser]: c
+            [t.block]: v,
+            [t.hasCloser]: o,
+            [t.compact]: e === "black"
           },
-          k
+          N
         ),
-        "data-test-id": h,
-        ...v,
-        children: /* @__PURE__ */ d("div", { className: r.contentWrap, children: [
-          s && /* @__PURE__ */ e("div", { className: r.leftAddons, children: l[t] }),
-          l[t] && !s && /* @__PURE__ */ e("div", { className: r.checkmark, children: l[t] }),
-          /* @__PURE__ */ d("div", { className: o(N, r.content), children: [
-            i && /* @__PURE__ */ e("div", { className: r.title, children: i }),
-            m && /* @__PURE__ */ e("div", { className: r.children, children: m }),
-            n && /* @__PURE__ */ e("div", { className: r.bottomAddons, children: n })
+        "data-test-id": k,
+        ...C,
+        children: /* @__PURE__ */ d("div", { className: t.contentWrap, children: [
+          s && /* @__PURE__ */ a("div", { className: t.leftAddons, children: c[e] }),
+          c[e] && !s && /* @__PURE__ */ a("div", { className: t.checkmark, children: c[e] }),
+          /* @__PURE__ */ d("div", { className: l(u, t.content), children: [
+            i && /* @__PURE__ */ a("div", { className: t.title, children: i }),
+            m && /* @__PURE__ */ a("div", { className: t.children, children: m }),
+            n && /* @__PURE__ */ a("div", { className: t.bottomAddons, children: n })
           ] }),
-          c && /* @__PURE__ */ e(
+          o && /* @__PURE__ */ a(
             B,
             {
-              className: o(r.closeButton),
+              className: l(t.closeButton),
               view: "ghost",
-              onClick: b,
+              onClick: x,
               "aria-label": "закрыть",
-              leftAddons: /* @__PURE__ */ e(g, {})
+              leftAddons: /* @__PURE__ */ a(g, {})
             }
           )
         ] })

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-secondary);border:none;color:var(--color-text-primary)}.component_2FCo.black_c7gB .checkmark_Uk-P svg{color:var(--color-graphic-positive)}.component_2FCo.compact_hOwR{min-height:0;min-height:initial;padding:var(--gap-xs) var(--gap-s);border-radius:6px}.component_2FCo.compact_hOwR.hasCloser_ig0b{padding-right:36px}.component_2FCo.compact_hOwR .contentWrap_-P3J{align-items:center}.component_2FCo.compact_hOwR .checkmark_Uk-P{display:flex;align-items:center;flex-shrink:0}:is(.component_2FCo.compact_hOwR .checkmark_Uk-P) svg{width:20px;height:20px}.component_2FCo.compact_hOwR .content_ING2{padding-left:var(--gap-xs);justify-content:center}.component_2FCo.compact_hOwR .title_QZFU{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);font-weight:600;margin-bottom:0}.component_2FCo.compact_hOwR .children_tKSv{font-size:13px;line-height:24px;font-weight:500;font-family:var(--font-family);margin-bottom:0}.component_2FCo.compact_hOwR .bottomAddons_ixVc{margin-top:var(--gap-xs)}.component_2FCo.compact_hOwR .closeButton_mFhA{top:50%!important;bottom:auto!important;transform:translateY(-50%);right:var(--gap-2xs)!important;color:var(--color-text-secondary)!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}