skillgrid 0.0.91-dev-68351-trigger-fixes.1802697 → 0.0.93

package/dist/assets/components/Notification/Notification.module-BVePCO8H.css

@@ -0,0 +1 @@
+:root{--ease-in-out: cubic-bezier(.4, .24, 0, 1);--duration-100: .1s;--duration-300: .3s;--duration-400: .4s;--duration-500: .5s}._semantic-animation_y2jij_1{transition-property:transform,opacity;transition-timing-function:var(--ease-in-out)}._semantic-animation--100_y2jij_1{transition-duration:var(--duration-100)}._semantic-animation--300_y2jij_1{transition-duration:var(--duration-300)}._semantic-animation--400_y2jij_1{transition-duration:var(--duration-400)}._semantic-animation--500_y2jij_1{transition-duration:var(--duration-500)}._notification_y2jij_3{--notification-padding: 1rem;--notification-gap: 1rem;--notification-radius: .75rem;--notification-icon-padding: .5rem;--notification-actions-gap: .75rem;display:flex;gap:var(--notification-gap);align-items:flex-start;box-sizing:border-box;width:100%;padding:var(--notification-padding);background:var(--notification-bg, var(--bg-primary));border:none;border-radius:var(--notification-radius);box-shadow:var(--shadow-medium)}._notification_y2jij_3._desktop_y2jij_24{max-width:25rem}._notification_y2jij_3._mobile_y2jij_28{max-width:20.375rem}._notification_y2jij_3._mobile_y2jij_28._narrow_y2jij_32{max-width:17.9375rem}._entering_y2jij_36{will-change:transform,opacity;animation-name:_notificationEnter_y2jij_1;animation-duration:var(--duration-300);animation-timing-function:var(--ease-in-out);animation-fill-mode:both}._exiting_y2jij_45{will-change:transform,opacity;animation-name:_notificationExit_y2jij_1;animation-duration:var(--duration-300);animation-timing-function:var(--ease-in-out);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){._entering_y2jij_36,._exiting_y2jij_45{animation:none}}._iconSlot_y2jij_61{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--notification-icon-padding);color:var(--notification-icon-color);background:var(--notification-icon-bg);border-radius:50%}._iconSlotInner_y2jij_75{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--notification-icon-size, 1rem);height:var(--notification-icon-size, 1rem)}._iconSlotInner_y2jij_75>*{display:flex;align-items:center;justify-content:center}._content_y2jij_91{display:flex;flex:1;flex-direction:column;gap:var(--notification-gap);min-width:0}._header_y2jij_100{display:flex;gap:.5rem;align-items:flex-start;justify-content:space-between}._title_y2jij_107{flex:1;min-width:0;margin:0;color:var(--text-primary)}._collapseToggle_y2jij_114{cursor:pointer;display:block;flex:1;min-width:0;margin:0;padding:0;color:var(--text-primary);text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none}._body_y2jij_132{margin:0;color:var(--text-secondary);word-break:break-word}._bodyCollapsed_y2jij_138{display:none}._controls_y2jij_142{display:flex;flex-shrink:0;gap:.25rem;align-items:center}._actions_y2jij_149{display:flex;flex-wrap:wrap;gap:var(--notification-actions-gap);align-items:center}._linkRow_y2jij_156{display:flex;flex-wrap:wrap}._referenceComposition_y2jij_161 ._content_y2jij_91{gap:.75rem}._referenceTextStack_y2jij_165{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}._referenceTopRow_y2jij_174{display:flex;gap:.5rem;align-items:flex-start;justify-content:space-between}._referenceControlsColumn_y2jij_181{flex-direction:column;align-items:flex-end;align-self:stretch;justify-content:space-between}._referenceRootAside_y2jij_188{flex-shrink:0}._referenceGuidelines326_y2jij_193{--notification-padding: 13.04px;--notification-gap: .625rem;--notification-icon-padding: 6.52px;--notification-icon-size: .8125rem;--notification-actions-gap: .625rem}._referenceGuidelines287_y2jij_201{--notification-padding: 11.48px;--notification-gap: .5rem;--notification-icon-padding: 5.74px;--notification-icon-size: .75rem;--notification-actions-gap: .5rem}._referenceGuidelines326_y2jij_193 ._iconSlotInner_y2jij_75>*,._referenceGuidelines287_y2jij_201 ._iconSlotInner_y2jij_75>*{transform-origin:center center;transform:scale(calc(var(--notification-icon-size) / 1rem))}._referenceGeometry32611573_y2jij_220,._referenceGeometry3268034_y2jij_221{width:326px;max-width:326px}._referenceGeometry28794925_y2jij_226,._referenceGeometry28770315_y2jij_227{width:287px;max-width:287px}._referenceGeometry400142_y2jij_232{width:400px;max-width:400px}@keyframes _notificationEnter_y2jij_1{0%{transform:translateY(-.5rem) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes _notificationExit_y2jij_1{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-.5rem) scale(.98);opacity:0}}

package/dist/assets/components/Trigger/Trigger.module-BWzHgDVC.css

@@ -0,0 +1 @@
+:root{--trigger-wrapper: 8px;--trigger-border-radius: 12px;--trigger-background-color-disabled: var(--base-graphite-97);--trigger-border-color-disabled: var(--base-graphite-95);--trigger-outline-with-default: 1px;--trigger-outline-with-focused: 2px;--trigger-outline-with-applied: 2px;--trigger-outline-color-focused: var(--stroke-accent);--trigger-outline-color-applied: var(--base-gray-0);--trigger-outline-color-invalid: var(--base-red-60);--trigger-ring-width: 4px;--trigger-ring-color-focused: color-mix(in srgb, var(--brand-primary-500) 40%, transparent);--trigger-ring-color-invalid: color-mix(in srgb, var(--trigger-outline-color-invalid) 40%, transparent);--trigger-border-shadow-default: 0 0 0 var(--trigger-ring-width) var(--trigger-ring-color-focused);--trigger-border-shadow-invalid: 0 0 0 var(--trigger-ring-width) var(--trigger-ring-color-invalid);--trigger-label-floating-top: 16px;--trigger-label-floating-left: 16px;--trigger-postfix-color: var(--text-secondary);--trigger-error-color: var(--base-red-60);--trigger-chevron-rotation-focused: -180deg;--trigger-gap-content: 8px;--trigger-padding-inline-S: 10px;--trigger-padding-inline-M: 12px;--trigger-padding-right-L: 12px;--trigger-padding-left-L: 16px;--trigger-padding-inline-XL: 16px;--trigger-label-floating-padding-right: 65px;--trigger-padding-block-S: 8px;--trigger-padding-block-M: 10px;--trigger-padding-block-L: 13px;--trigger-padding-block-XL: 17px;--trigger-content-container-floating-padding-top: 18px;--trigger-min-width-XS: 32px;--trigger-min-width-S: 52px;--trigger-min-width-M: 55px;--trigger-min-width-L: 72px;--trigger-min-width-XL: 100px;--trigger-margin-postfix: 6px;--trigger-margin-icon-large: 12px;--trigger-margin-icon-small: 8px;--semantic-animation-ease-in-out-100: all .1s ease-in-out}*,*:before,*:after{box-sizing:border-box}._trigger-wrapper_1vv90_77{display:flex;flex-direction:column;gap:var(--trigger-wrapper)}._trigger-container_1vv90_83{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between;width:fit-content;background-color:var(--bg-primary);border:none;border-radius:var(--trigger-border-radius);outline:var(--base-graphite-90) solid var(--trigger-outline-with-default)}._trigger-container_1vv90_83:disabled{cursor:not-allowed;background-color:var(--trigger-background-color-disabled);outline-color:var(--trigger-border-color-disabled)}._trigger-container-applied_1vv90_106{outline-color:var(--trigger-outline-color-applied);outline-width:var(--trigger-outline-with-applied)}._trigger-container-open_1vv90_111{outline-color:var(--trigger-outline-color-focused);outline-width:var(--trigger-outline-with-focused)}._trigger-container_1vv90_83:focus-visible{outline-color:var(--trigger-outline-color-focused);outline-width:var(--trigger-outline-with-focused);box-shadow:var(--trigger-border-shadow-default)}._trigger-container-error_1vv90_122{outline-color:var(--trigger-outline-color-invalid);outline-width:var(--trigger-outline-with-default);transition:var(--semantic-animation-ease-in-out-100)}._trigger-container-error_1vv90_122:focus-visible{outline-color:var(--trigger-outline-color-invalid);outline-width:var(--trigger-outline-with-default);box-shadow:var(--trigger-border-shadow-invalid)}._trigger-container-size-XS_1vv90_134{min-width:var(--trigger-min-width-XS);padding:0;outline:none}._trigger-container-size-XS_1vv90_134:disabled{background:transparent}._trigger-container-size-S_1vv90_144{min-width:var(--trigger-min-width-S);padding-block:var(--trigger-padding-block-S);padding-inline:var(--trigger-padding-inline-S)}._trigger-container-size-M_1vv90_150{min-width:var(--trigger-min-width-M);padding-block:var(--trigger-padding-block-M);padding-inline:var(--trigger-padding-inline-M)}._trigger-container-size-L_1vv90_156{min-width:var(--trigger-min-width-L);padding-right:var(--trigger-padding-right-L);padding-left:var(--trigger-padding-left-L);padding-block:var(--trigger-padding-block-L)}._trigger-container-size-XL_1vv90_164{min-width:var(--trigger-min-width-XL);padding-block:var(--trigger-padding-block-XL);padding-inline:var(--trigger-padding-inline-XL)}._trigger-container-floating_1vv90_170{width:"w-fit";padding-block:var(--trigger-padding-block-S)}._trigger-stretched_1vv90_175{width:100%}._trigger-content-container_1vv90_179{overflow:hidden;display:flex;flex:1;gap:var(--trigger-gap-content);align-items:center;min-width:0}._trigger-content-container-floating_1vv90_189{align-items:end;padding-top:var(--trigger-content-container-floating-padding-top)}._trigger-label_1vv90_194{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:var(--semantic-animation-ease-in-out-100)}._trigger-label-floating_1vv90_201{position:absolute;top:var(--trigger-label-floating-top);left:var(--trigger-label-floating-left);transform:translateY(-50%);width:100%;max-width:calc(100% - var(--trigger-label-floating-padding-right));text-align:start}._trigger-label-hidden_1vv90_213{display:none}._trigger-content_1vv90_179{overflow:hidden;min-width:0;text-align:start;text-overflow:ellipsis;white-space:nowrap}._trigger-prefix-icon_1vv90_227{display:flex;margin-right:6px}._trigger-chevron-icon_1vv90_232{flex-shrink:0;transition:var(--semantic-animation-ease-in-out-100)}._trigger-container-size-XL_1vv90_164 ._trigger-chevron-icon_1vv90_232,._trigger-container-size-L_1vv90_156 ._trigger-chevron-icon_1vv90_232{margin-left:var(--trigger-margin-icon-large)}._trigger-container-size-M_1vv90_150 ._trigger-chevron-icon_1vv90_232,._trigger-container-size-S_1vv90_144 ._trigger-chevron-icon_1vv90_232,._trigger-container-size-XS_1vv90_134 ._trigger-chevron-icon_1vv90_232{margin-left:var(--trigger-margin-icon-small)}._trigger-clear-icon_1vv90_248{flex-shrink:0;transition:var(--semantic-animation-ease-in-out-100)}._trigger-container-size-XL_1vv90_164 ._trigger-clear-icon_1vv90_248,._trigger-container-size-L_1vv90_156 ._trigger-clear-icon_1vv90_248{margin-left:var(--trigger-margin-icon-large)}._trigger-container-size-M_1vv90_150 ._trigger-clear-icon_1vv90_248,._trigger-container-size-S_1vv90_144 ._trigger-clear-icon_1vv90_248,._trigger-container-size-XS_1vv90_134 ._trigger-clear-icon_1vv90_248{margin-left:var(--trigger-margin-icon-small)}._trigger-postfix_1vv90_264{flex-shrink:0;margin-left:var(--trigger-margin-postfix);color:var(--trigger-postfix-color)}._trigger-container-open_1vv90_111 ._trigger-chevron-icon_1vv90_232{transform:rotate(var(--trigger-chevron-rotation-focused))}._trigger-container-error_1vv90_122._trigger-container-size-XS_1vv90_134 ._trigger-content-container_1vv90_179 span:not(._trigger-postfix_1vv90_264){color:var(--trigger-error-color)}

package/dist/components/Avatar/AvatarGroup/AvatarGroupRoot.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import d from "classnames";
-import { useBackgroundColor as g } from "../../../hooks/useBackgroundColor.js";
-import v from "./AvatarGroup.module.css.js";
-import { AvatarGroupProvider as B } from "./AvatarGroupProvider.js";
+import g from "./AvatarGroup.module.css.js";
+import { AvatarGroupProvider as v } from "./AvatarGroupProvider.js";
+import { useBackgroundColor as B } from "../../../hooks/useBackgroundColor.js";
 const G = (t) => {
   const {
     children: a,
@@ -12,12 +12,12 @@ const G = (t) => {
     cutoutBackground: u,
     className: m,
     style: n
-  } = t, { ref: p, bgColor: f } = g(), o = u || f || "#ffffff", l = d(v.avatarGroup, m), i = {
+  } = t, { ref: p, bgColor: f } = B(), o = u || f || "#ffffff", l = d(g.avatarGroup, m), i = {
     "--avatar-cutout-bg": o,
     ...n
   };
   return /* @__PURE__ */ r(
-    B,
+    v,
     {
       size: s,
       shape: c,

package/dist/components/FileUpload/FileUpload.js

@@ -2,11 +2,11 @@ import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { clsx as p } from "clsx";
 import Ge from "rc-upload";
 import { forwardRef as je, useContext as Fe, useState as W, useRef as se, useMemo as we, useLayoutEffect as He } from "react";
-import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { interpolate as de } from "../../locale/interpolate.js";
 import t from "./FileUpload.module.css.js";
 import { isMobileViewport as ve } from "../../utils/adaptive.js";
 import { useLocale as ue } from "../ConfigProvider/ConfigProvider.hook.js";
+import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { SnackbarContext as We } from "../Snackbar/lib/useSnackbar.js";
 import { Button as M } from "../Button/Button.js";
 import { Icon as h } from "../Icon/IconWithCategories.js";

package/dist/components/InputBase/Input.js

@@ -2,9 +2,9 @@ import { jsx as r, jsxs as W } from "react/jsx-runtime";
 import { forwardRef as z, useImperativeHandle as P } from "react";
 import { clsx as f } from "clsx";
 import e from "./InputBase.module.css.js";
-import { useCompatId as Q } from "../../hooks/useCompatId.js";
-import { useInputSync as Y } from "./lib/useInputSync.js";
-import { useTextareaResize as Z } from "./lib/useTextareaResize.js";
+import { useInputSync as Q } from "./lib/useInputSync.js";
+import { useTextareaResize as Y } from "./lib/useTextareaResize.js";
+import { useCompatId as Z } from "../../hooks/useCompatId.js";
 import { MAX_HINT_LENGTH as k } from "./lib/constants.js";
 import { useGripResize as U } from "./lib/useGripResize.js";
 import { GripIcon as E } from "./assets/GripIcon.js";
@@ -32,8 +32,8 @@ const K = z(
     resize: c,
     ...H
   }, R) => {
-    const { textareaRef: w, inputRef: j, currentRef: d } = Y(a, t);
-    if (Z(a, c, w), P(R, () => d.current, [d]), t === "textarea")
+    const { textareaRef: w, inputRef: j, currentRef: d } = Q(a, t);
+    if (Y(a, c, w), P(R, () => d.current, [d]), t === "textarea")
       return /* @__PURE__ */ r(
         "textarea",
         {
@@ -132,7 +132,7 @@ const K = z(
     showGrip: T = !1,
     ...L
   }, O) => {
-    const X = Q("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
+    const X = Z("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
       e.wrapper,
       e[`size-${m}`],
       a && e.error,

package/dist/components/Modal/Modal.type.d.ts

@@ -18,7 +18,7 @@ export interface ModalProps extends Omit<DialogProps, 'style' | 'className'> {
     /** Содержимое футера (например, кнопки). */
     footer?: ReactNode;
     /** Ширина модального окна в px. */
-    size?: 480 | 620 | 800 | (number & {});
+    size?: 480 | 620 | 800;
     /** Inline-стили для отдельных частей модального окна. */
     styles?: Partial<Record<ModalFields, HTMLProps<HTMLDivElement>['style']>>;
     /** CSS-классы для отдельных частей модального окна. */

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { NotificationProps } from './Notification.type';
+/**
+ * Публичный тип — без reference props.
+ * Reference props остаются runtime-capable через {@link NotificationComponentProps} в stories/tests.
+ */
+export declare const Notification: ForwardRefExoticComponent<NotificationProps & RefAttributes<HTMLDivElement>>;

package/dist/components/Notification/Notification.i18n.json.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+  "en": {
+    "notification": {
+      "close": "Close",
+      "copy": "Copy"
+    }
+  },
+  "ru": {
+    "notification": {
+      "close": "Закрыть",
+      "copy": "Копировать"
+    }
+  }
+}
+;
+
+export default _default;

package/dist/components/Notification/Notification.i18n.json.js

@@ -0,0 +1,9 @@
+const o = { notification: { close: "Close", copy: "Copy" } }, n = { notification: { close: "Закрыть", copy: "Копировать" } }, t = {
+  en: o,
+  ru: n
+};
+export {
+  t as default,
+  o as en,
+  n as ru
+};

package/dist/components/Notification/Notification.js

@@ -0,0 +1,299 @@
+import { jsxs as s, jsx as o, Fragment as J } from "react/jsx-runtime";
+import { forwardRef as Le, useState as L, useCallback as W, useRef as Ae, useEffect as K } from "react";
+import { clsx as r } from "clsx";
+import Ie from "../../styles/typography.module.css.js";
+import { resolveReferenceGuidelinesGeometry as Re } from "./lib/referenceGuidelinesGeometry.js";
+import { NotificationControls as Y } from "./NotificationControls.js";
+import t from "./Notification.module.css.js";
+import { useLocale as we } from "../ConfigProvider/ConfigProvider.hook.js";
+import { NOTIFICATION_STYLE_CONFIG as ve, ASSERTIVE_NOTIFICATION_STYLES as xe } from "./lib/notificationStyleConfig.js";
+import { Typography as A } from "../Typography/Typography.js";
+import { Button as j } from "../Button/Button.js";
+const Ge = {
+  "326-11573": t.referenceGeometry32611573,
+  "287-94925": t.referenceGeometry28794925,
+  "400-142": t.referenceGeometry400142,
+  "287-70315": t.referenceGeometry28770315,
+  "326-8034": t.referenceGeometry3268034
+}, Oe = 300, P = 16, ke = 16;
+function ee() {
+  return typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function Q() {
+  return ee() ? 0 : Oe;
+}
+const te = Le((oe, ne) => {
+  const {
+    platform: I = "desktop",
+    style: R = "neutral",
+    showButton: ie = !0,
+    collapse: re = !1,
+    open: U,
+    onOpenChange: p,
+    referenceComposition: w = !1,
+    referenceControlsColumn: v = !1,
+    referenceGuidelinesScale: x,
+    title: l,
+    body: m,
+    width: le = "default",
+    showClose: d = !0,
+    showCopy: f = !1,
+    onClose: y,
+    onCopy: G,
+    closeAriaLabel: ae,
+    copyAriaLabel: ce,
+    primaryAction: a,
+    secondaryAction: c,
+    linkProps: Z,
+    className: se,
+    classNames: e,
+    rootStyle: de,
+    "data-testid": n = "notification",
+    ...h
+  } = oe, { notification: q } = we(), O = ae ?? q.close, k = ce ?? q.copy, b = ve[R], fe = b.icon, N = U !== void 0, [ue, pe] = L(!1), _ = N ? U : ue, me = W(
+    (i) => {
+      N || pe(i), p == null || p(i);
+    },
+    [N, p]
+  ), z = !!(re && l), B = !z || _, V = xe.includes(R), ye = z, X = w && !!l && !!m && !z, he = X && !v && (d || f), [g, S] = L(() => !ee()), [u, be] = L(!1), [ge, Se] = L(!0), C = Ae(null), T = W(() => {
+    C.current && (clearTimeout(C.current), C.current = null);
+  }, []);
+  K(() => T, [T]), K(() => {
+    if (!g) return;
+    const i = Q();
+    if (i === 0) {
+      S(!1);
+      return;
+    }
+    const E = setTimeout(() => S(!1), i);
+    return () => clearTimeout(E);
+  }, [g]);
+  const Ce = (i) => {
+    i.target === i.currentTarget && g && !u && S(!1);
+  }, M = W(() => {
+    u || (S(!1), be(!0), T(), C.current = setTimeout(() => {
+      Se(!1), y == null || y();
+    }, Q()));
+  }, [T, u, y]), Te = () => {
+    me(!_);
+  }, D = ie && B && ((a == null ? void 0 : a.children) || (c == null ? void 0 : c.children)), H = !!Z, $ = Re({
+    referenceComposition: w,
+    referenceGuidelinesScale: x,
+    referenceControlsColumn: v,
+    hasActions: !!D,
+    hasLink: !!H
+  }), Ee = {
+    ...de,
+    "--notification-bg": b.background,
+    "--notification-icon-color": b.iconColor,
+    "--notification-icon-bg": b.iconBackground
+  }, F = r(
+    t.title,
+    Ie["typography-subtitle-1-semibold"],
+    e == null ? void 0 : e.title
+  );
+  return ge ? /* @__PURE__ */ s(
+    "div",
+    {
+      ref: ne,
+      role: V ? "alert" : "status",
+      "aria-live": V ? "assertive" : "polite",
+      "aria-atomic": "true",
+      "data-testid": n,
+      "data-style": R,
+      "data-platform": I,
+      "data-expanded": B ? "true" : "false",
+      "data-reference-geometry": $,
+      className: r(
+        t.notification,
+        t[I],
+        le === "narrow" && I === "mobile" && t.narrow,
+        w && t.referenceComposition,
+        x === "326" && t.referenceGuidelines326,
+        x === "287" && t.referenceGuidelines287,
+        $ && Ge[$],
+        g && !u && t.entering,
+        u && t.exiting,
+        se,
+        e == null ? void 0 : e.root
+      ),
+      style: Ee,
+      ...h,
+      onAnimationEnd: (i) => {
+        var E;
+        (E = h.onAnimationEnd) == null || E.call(h, i), Ce(i);
+      },
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: r(t.iconSlot, e == null ? void 0 : e.icon),
+            "data-testid": `${n}-icon`,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ o("span", { className: t.iconSlotInner, children: /* @__PURE__ */ o(
+              fe,
+              {
+                iconSize: ke,
+                as: "div",
+                style: "none",
+                padding: !1
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: r(t.content, e == null ? void 0 : e.content), children: [
+          X ? /* @__PURE__ */ o(J, { children: /* @__PURE__ */ s("div", { className: r(t.referenceTopRow, e == null ? void 0 : e.header), children: [
+            /* @__PURE__ */ s("div", { className: t.referenceTextStack, children: [
+              /* @__PURE__ */ o(
+                A.Subtitle,
+                {
+                  as: "h3",
+                  size: 1,
+                  fontWeight: "semibold",
+                  className: F,
+                  "data-testid": `${n}-title`,
+                  children: l
+                }
+              ),
+              /* @__PURE__ */ o(
+                A.Label,
+                {
+                  as: "p",
+                  size: 3,
+                  fontWeight: "regular",
+                  typographyStyle: "secondary",
+                  className: r(t.body, e == null ? void 0 : e.body),
+                  "data-testid": `${n}-body`,
+                  children: m
+                }
+              )
+            ] }),
+            v && /* @__PURE__ */ o(
+              Y,
+              {
+                showClose: d,
+                showCopy: f,
+                closeAriaLabel: O,
+                copyAriaLabel: k,
+                iconSize: P,
+                order: "close-first",
+                column: !0,
+                className: e == null ? void 0 : e.controls,
+                dataTestId: n,
+                onClose: M,
+                onCopy: G
+              }
+            )
+          ] }) }) : /* @__PURE__ */ s(J, { children: [
+            (l || d || f) && /* @__PURE__ */ s("div", { className: r(t.header, e == null ? void 0 : e.header), children: [
+              l && (ye ? /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  className: r(t.collapseToggle, F),
+                  "aria-expanded": _,
+                  "data-testid": `${n}-collapse-toggle`,
+                  onClick: Te,
+                  children: l
+                }
+              ) : /* @__PURE__ */ o(
+                A.Subtitle,
+                {
+                  as: "h3",
+                  size: 1,
+                  fontWeight: "semibold",
+                  className: F,
+                  "data-testid": `${n}-title`,
+                  children: l
+                }
+              )),
+              /* @__PURE__ */ o(
+                Y,
+                {
+                  showClose: d,
+                  showCopy: f,
+                  closeAriaLabel: O,
+                  copyAriaLabel: k,
+                  iconSize: P,
+                  order: "copy-first",
+                  className: e == null ? void 0 : e.controls,
+                  dataTestId: n,
+                  onClose: M,
+                  onCopy: G
+                }
+              )
+            ] }),
+            m && /* @__PURE__ */ o(
+              A.Label,
+              {
+                as: "p",
+                size: 3,
+                fontWeight: "regular",
+                typographyStyle: "secondary",
+                className: r(
+                  t.body,
+                  !B && t.bodyCollapsed,
+                  e == null ? void 0 : e.body
+                ),
+                "data-testid": `${n}-body`,
+                children: m
+              }
+            )
+          ] }),
+          H && /* @__PURE__ */ o("div", { className: t.linkRow, children: /* @__PURE__ */ o(j.Link, { size: "m", buttonStyle: "accent", ...Z }) }),
+          D && /* @__PURE__ */ s(
+            "div",
+            {
+              className: r(t.actions, e == null ? void 0 : e.actions),
+              "data-testid": `${n}-actions`,
+              children: [
+                (c == null ? void 0 : c.children) && /* @__PURE__ */ o(
+                  j,
+                  {
+                    as: "button",
+                    mode: "tertiary",
+                    size: "s",
+                    buttonStyle: "neutral",
+                    ...c
+                  }
+                ),
+                (a == null ? void 0 : a.children) && /* @__PURE__ */ o(
+                  j,
+                  {
+                    as: "button",
+                    mode: "secondary",
+                    size: "s",
+                    buttonStyle: "neutral",
+                    ...a
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        he && /* @__PURE__ */ o(
+          Y,
+          {
+            showClose: d,
+            showCopy: f,
+            closeAriaLabel: O,
+            copyAriaLabel: k,
+            iconSize: P,
+            order: "close-first",
+            column: !0,
+            aside: !0,
+            className: e == null ? void 0 : e.controls,
+            dataTestId: n,
+            onClose: M,
+            onCopy: G
+          }
+        )
+      ]
+    }
+  ) : null;
+});
+te.displayName = "Notification";
+const Ue = te;
+export {
+  Ue as Notification
+};

package/dist/components/Notification/Notification.module.css.js

@@ -0,0 +1,72 @@
+import '../../assets/components/Notification/Notification.module-BVePCO8H.css';const e = "_notification_y2jij_3", n = "_desktop_y2jij_24", o = "_mobile_y2jij_28", i = "_narrow_y2jij_32", t = "_entering_y2jij_36", r = "_notificationEnter_y2jij_1", c = "_exiting_y2jij_45", _ = "_notificationExit_y2jij_1", s = "_iconSlot_y2jij_61", j = "_iconSlotInner_y2jij_75", a = "_content_y2jij_91", y = "_header_y2jij_100", f = "_title_y2jij_107", l = "_collapseToggle_y2jij_114", m = "_body_y2jij_132", d = "_bodyCollapsed_y2jij_138", G = "_controls_y2jij_142", p = "_actions_y2jij_149", g = "_linkRow_y2jij_156", C = "_referenceComposition_y2jij_161", u = "_referenceTextStack_y2jij_165", x = "_referenceTopRow_y2jij_174", b = "_referenceControlsColumn_y2jij_181", k = "_referenceRootAside_y2jij_188", w = "_referenceGuidelines326_y2jij_193", R = "_referenceGuidelines287_y2jij_201", S = "_referenceGeometry32611573_y2jij_220", T = "_referenceGeometry3268034_y2jij_221", E = "_referenceGeometry28794925_y2jij_226", h = "_referenceGeometry28770315_y2jij_227", A = "_referenceGeometry400142_y2jij_232", I = {
+  "semantic-animation": "_semantic-animation_y2jij_1",
+  "semantic-animation--100": "_semantic-animation--100_y2jij_1",
+  "semantic-animation--300": "_semantic-animation--300_y2jij_1",
+  "semantic-animation--400": "_semantic-animation--400_y2jij_1",
+  "semantic-animation--500": "_semantic-animation--500_y2jij_1",
+  notification: e,
+  desktop: n,
+  mobile: o,
+  narrow: i,
+  entering: t,
+  notificationEnter: r,
+  exiting: c,
+  notificationExit: _,
+  iconSlot: s,
+  iconSlotInner: j,
+  content: a,
+  header: y,
+  title: f,
+  collapseToggle: l,
+  body: m,
+  bodyCollapsed: d,
+  controls: G,
+  actions: p,
+  linkRow: g,
+  referenceComposition: C,
+  referenceTextStack: u,
+  referenceTopRow: x,
+  referenceControlsColumn: b,
+  referenceRootAside: k,
+  referenceGuidelines326: w,
+  referenceGuidelines287: R,
+  referenceGeometry32611573: S,
+  referenceGeometry3268034: T,
+  referenceGeometry28794925: E,
+  referenceGeometry28770315: h,
+  referenceGeometry400142: A
+};
+export {
+  p as actions,
+  m as body,
+  d as bodyCollapsed,
+  l as collapseToggle,
+  a as content,
+  G as controls,
+  I as default,
+  n as desktop,
+  t as entering,
+  c as exiting,
+  y as header,
+  s as iconSlot,
+  j as iconSlotInner,
+  g as linkRow,
+  o as mobile,
+  i as narrow,
+  e as notification,
+  r as notificationEnter,
+  _ as notificationExit,
+  C as referenceComposition,
+  b as referenceControlsColumn,
+  h as referenceGeometry28770315,
+  E as referenceGeometry28794925,
+  S as referenceGeometry32611573,
+  T as referenceGeometry3268034,
+  A as referenceGeometry400142,
+  R as referenceGuidelines287,
+  w as referenceGuidelines326,
+  k as referenceRootAside,
+  u as referenceTextStack,
+  x as referenceTopRow,
+  f as title
+};

package/dist/components/Notification/Notification.type.d.ts

@@ -0,0 +1,146 @@
+import { CSSProperties, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { LinkButtonProps } from '../Button';
+/** Платформа отображения уведомления. */
+export type NotificationPlatform = 'desktop' | 'mobile';
+/** Визуальный стиль уведомления. */
+export type NotificationStyle = 'neutral' | 'positive' | 'warning' | 'error' | 'negative';
+/** Узкие ширины из Figma guidelines (326 / 287 px). */
+export type NotificationWidth = 'default' | 'narrow';
+type NotificationField = 'root' | 'icon' | 'content' | 'header' | 'title' | 'body' | 'actions' | 'controls';
+/** Параметры основной action-кнопки (secondary). */
+export type NotificationPrimaryAction = {
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    loading?: boolean;
+    'data-testid'?: string;
+};
+/** Параметры дополнительной action-кнопки (tertiary). */
+export type NotificationSecondaryAction = NotificationPrimaryAction;
+/**
+ * Публичные props компонента Notification.
+ *
+ * @interface
+ */
+export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onCopy' | 'style'> {
+    /**
+     * Платформа: desktop фиксирует max-width 400px, mobile — 326px (или 287px при `width="narrow"`).
+     * @default 'desktop'
+     */
+    platform?: NotificationPlatform;
+    /**
+     * Визуальный стиль и семантика иконки/фона.
+     * @default 'neutral'
+     */
+    style?: NotificationStyle;
+    /**
+     * Показывать группу action-кнопок в footer.
+     * Не скрывает close/copy и link.
+     * @default true
+     */
+    showButton?: boolean;
+    /**
+     * Компактный режим: body и actions скрыты, пока `open=false`.
+     * Без `title` игнорируется (контент остаётся развёрнутым).
+     * @default false
+     */
+    collapse?: boolean;
+    /**
+     * Развёрнутое состояние при `collapse=true` и наличии `title`.
+     * Игнорируется, если `collapse=false` или нет `title`.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback при смене `open` (раскрытие/сворачивание).
+     * Без `open` при активном collapse используется внутреннее состояние (uncontrolled).
+     * С переданным `open` состояние полностью controlled снаружи.
+     * @optional
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Заголовок уведомления. */
+    title?: ReactNode;
+    /** Основной текст уведомления. */
+    body?: ReactNode;
+    /**
+     * Узкая ширина для mobile (287px). На desktop игнорируется.
+     * @default 'default'
+     */
+    width?: NotificationWidth;
+    /**
+     * Показывать кнопку закрытия.
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Показывать кнопку копирования.
+     * @default false
+     */
+    showCopy?: boolean;
+    /**
+     * Вызывается после завершения exit-анимации при закрытии.
+     * @optional
+     */
+    onClose?: () => void;
+    /**
+     * Вызывается при нажатии на copy.
+     * @optional
+     */
+    onCopy?: () => void;
+    /**
+     * Aria-label для кнопки закрытия.
+     * По умолчанию из ConfigProvider locale (`notification.close`).
+     */
+    closeAriaLabel?: string;
+    /**
+     * Aria-label для кнопки копирования.
+     * По умолчанию из ConfigProvider locale (`notification.copy`).
+     */
+    copyAriaLabel?: string;
+    /**
+     * Основная action-кнопка (Button secondary, size s — 32px).
+     * @optional
+     */
+    primaryAction?: NotificationPrimaryAction;
+    /**
+     * Дополнительная action-кнопка (Button tertiary, size s — 32px).
+     * @optional
+     */
+    secondaryAction?: NotificationSecondaryAction;
+    /**
+     * Ссылка под текстом (Button.Link).
+     * @optional
+     */
+    linkProps?: LinkButtonProps;
+    /** CSS-классы для частей компонента. */
+    classNames?: Partial<Record<NotificationField, string>>;
+    /** Inline-стили корневого контейнера (не путать с prop `style`). */
+    rootStyle?: CSSProperties;
+    /** data-testid корневого элемента. @default 'notification' */
+    'data-testid'?: string;
+}
+/**
+ * Internal / Storybook / Visual QA props.
+ * Не входят в публичный `NotificationProps` и не экспортируются из package index.
+ *
+ * @internal
+ */
+export type NotificationReferenceProps = {
+    /**
+     * Компоновка guidelines/Figma reference: title+body в одном stack.
+     * @default false
+     */
+    referenceComposition?: boolean;
+    /**
+     * В referenceComposition: close/copy в колонке справа (Figma 326×80.34).
+     * @default false
+     */
+    referenceControlsColumn?: boolean;
+    /**
+     * Масштаб guidelines instance (padding/типографика/controls + fixed geometry).
+     */
+    referenceGuidelinesScale?: 'desktop' | '326' | '287';
+};
+/** Полные props реализации (публичные + reference). @internal */
+export type NotificationComponentProps = NotificationProps & NotificationReferenceProps;
+export {};