@snack-uikit/notification 0.13.17 → 0.13.19

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.13.19 (2025-10-29)</small>
+
+* fix(PDS-2914): removed extra div ([636b983](https://github.com/cloud-ru-tech/snack-uikit/commit/636b983))
+
+
+
+
+
+## <small>0.13.18 (2025-10-29)</small>
+
+* feat(PDS-2914): chips changed to segments ([833f610](https://github.com/cloud-ru-tech/snack-uikit/commit/833f610))
+
+
+
+
+
 ## <small>0.13.17 (2025-10-28)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -102,8 +102,8 @@ const cards = [
 |------|------|---------------|-------------|
 | title* | `string` | - | Заголовок панели |
 | settings | `NotificationPanelSettingsProps` | - | Кнопка настроек и выпадающий список |
-| chips | `Omit<ChipToggleProps, "data-test-id" \| "size">[]` | - | Чипы для фильтрации |
-| readAllButton | `Omit<ButtonFunctionProps, "data-test-id"> & { onClick: MouseEventHandler<HTMLElement>; }` | - | Кнопка в "шапке" панели |
+| segments | `Omit<SegmentedControlProps, "size" \| "data-test-id">` | - | Сегменты для фильтрации |
+| readAllButton | `Omit<ButtonFunctionProps, 'data-test-id'> & { tooltip?: TooltipProps; }` | - | Кнопка в "шапке" панели |
 | footerButton | `{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }` | - | Кнопка внизу панели |
 | className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |

package/dist/cjs/components/NotificationCard/NotificationCard.js

@@ -48,15 +48,7 @@ function NotificationCard(_a) {
       className
     } = _a,
     rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "primaryButton", "secondaryButton", "actions", "onVisible", "className"]);
-  const {
-    icon,
-    linkOnColor,
-    buttonAppearance
-  } = (0, react_1.useMemo)(() => ({
-    icon: (0, helpers_1.getIcon)(appearance),
-    linkOnColor: appearance === constants_1.APPEARANCE.ErrorCritical ? 'red' : undefined,
-    buttonAppearance: appearance === constants_1.APPEARANCE.ErrorCritical ? 'destructive' : 'primary'
-  }), [appearance]);
+  const icon = (0, react_1.useMemo)(() => (0, helpers_1.getIcon)(appearance), [appearance]);
   const [isDroplistOpen, setDroplistOpen] = (0, react_1.useState)(false);
   const cardRef = (0, react_1.useRef)(null);
   (0, react_1.useEffect)(() => {
@@ -130,11 +122,11 @@ function NotificationCard(_a) {
     }), (primaryButton || secondaryButton) && (0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.notificationCardButtons,
       children: [secondaryButton && (0, jsx_runtime_1.jsx)(button_1.ButtonSimple, Object.assign({}, secondaryButton, {
-        appearance: buttonAppearance,
+        appearance: 'neutral',
         size: 's',
         "data-test-id": constants_1.TEST_IDS.primaryButton
       })), primaryButton && (0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({}, primaryButton, {
-        appearance: buttonAppearance,
+        appearance: 'neutral',
         size: 's',
         "data-test-id": constants_1.TEST_IDS.secondaryButton
       }))]
@@ -142,8 +134,8 @@ function NotificationCard(_a) {
       className: styles_module_scss_1.default.notificationCardFooter,
       children: [link && (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, link, {
         onClick: handleLinkClick,
-        appearance: linkOnColor,
-        textMode: 'default',
+        appearance: 'primary',
+        textMode: 'accent',
         size: 's',
         "data-test-id": constants_1.TEST_IDS.link
       })), date && (0, jsx_runtime_1.jsx)(typography_1.Typography.LightLabelS, {

package/dist/cjs/components/NotificationCard/styles.module.css

@@ -47,7 +47,8 @@
   box-sizing:border-box;
   width:100%;
   height:calc(100% + var(--border-width-notification-panel-card, 1px));
-  opacity:var(--opacity-a004, 0.04);
+  opacity:0;
+  background-color:var(--sys-neutral-accent-default, #787b8a);
 }
 .notificationCard:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -57,7 +58,7 @@
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
 .notificationCard[data-droplist-open]::before, .notificationCard:hover::before, .notificationCard:focus-visible::before, .notificationCard:focus-within:not(:focus)::before{
-  background-color:var(--sys-neutral-accent-default, #787b8a);
+  opacity:var(--opacity-a004, 0.04);
 }
 .notificationCard[data-droplist-open] .notificationCardFunction, .notificationCard:hover .notificationCardFunction, .notificationCard:focus-visible .notificationCardFunction, .notificationCard:focus-within:not(:focus) .notificationCardFunction{
   pointer-events:auto;
@@ -68,26 +69,34 @@
 }
 .notificationCard[data-unread]::before{
   opacity:var(--opacity-a008, 0.08);
-  background-color:var(--sys-neutral-accent-default, #787b8a);
 }
 .notificationCard[data-unread][data-droplist-open]::before, .notificationCard[data-unread]:hover::before, .notificationCard[data-unread]:focus-visible::before, .notificationCard[data-unread]:focus-within:not(:focus)::before{
   opacity:var(--opacity-a004, 0.04);
 }
+.notificationCard[data-appearance=neutral]::before{
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
 .notificationCard[data-appearance=neutral] .notificationCardTitleIcon{
   color:var(--sys-neutral-accent-default, #787b8a);
 }
+.notificationCard[data-appearance=error]::before, .notificationCard[data-appearance=errorCritical]::before{
+  background-color:var(--sys-red-accent-default, #cb3f3e);
+}
 .notificationCard[data-appearance=error] .notificationCardTitleIcon, .notificationCard[data-appearance=errorCritical] .notificationCardTitleIcon{
   color:var(--sys-red-accent-default, #cb3f3e);
 }
-.notificationCard[data-appearance=errorCritical][data-unread]::before, .notificationCard[data-appearance=errorCritical][data-droplist-open]::before, .notificationCard[data-appearance=errorCritical]:hover::before, .notificationCard[data-appearance=errorCritical]:focus-visible::before, .notificationCard[data-appearance=errorCritical]:focus-within:not(:focus)::before{
-  background-color:var(--sys-red-accent-default, #cb3f3e);
-}
 .notificationCard[data-appearance=errorCritical] .notificationCardTitleText{
   color:var(--sys-red-accent-default, #cb3f3e);
 }
+.notificationCard[data-appearance=warning]::before{
+  background-color:var(--sys-yellow-accent-default, #e2b134);
+}
 .notificationCard[data-appearance=warning] .notificationCardTitleIcon{
   color:var(--sys-yellow-accent-default, #e2b134);
 }
+.notificationCard[data-appearance=success]::before{
+  background-color:var(--sys-green-accent-default, #57b762);
+}
 .notificationCard[data-appearance=success] .notificationCardTitleIcon{
   color:var(--sys-green-accent-default, #57b762);
 }

package/dist/cjs/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,6 +1,7 @@
 import { MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
-import { ChipToggleProps } from '@snack-uikit/chips';
+import { SegmentedControlProps } from '@snack-uikit/segmented-control';
+import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
@@ -10,11 +11,11 @@ export type NotificationPanelProps = WithSupportProps<{
     title: string;
     /** Кнопка настроек и выпадающий список */
     settings?: NotificationPanelSettingsProps;
-    /** Чипы для фильтрации */
-    chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
+    /** Сегменты для фильтрации */
+    segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
     /** Кнопка в "шапке" панели */
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
-        onClick: ButtonFunctionProps['onClick'];
+        tooltip?: TooltipProps;
     };
     /** Кнопка внизу панели */
     footerButton?: {
@@ -34,7 +35,7 @@ export type NotificationPanelProps = WithSupportProps<{
     scrollContainerRef?: RefObject<HTMLElement>;
 }>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;

package/dist/cjs/components/NotificationPanel/NotificationPanel.js

@@ -17,13 +17,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NotificationPanel = NotificationPanel;
-const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
-const react_2 = require("react");
+const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
-const chips_1 = require("@snack-uikit/chips");
 const scroll_1 = require("@snack-uikit/scroll");
+const segmented_control_1 = require("@snack-uikit/segmented-control");
 const skeleton_1 = require("@snack-uikit/skeleton");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const typography_1 = require("@snack-uikit/typography");
@@ -32,13 +31,14 @@ const components_1 = require("../NotificationCard/components");
 const components_2 = require("./components");
 const NotificationPanelDivider_1 = require("./components/NotificationPanelDivider");
 const constants_1 = require("./constants");
+const helperComponents_1 = require("./helperComponents");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /** Компонент панели для уведомлений */
 function NotificationPanel(_a) {
   var {
       title,
       settings,
-      chips,
+      segments,
       readAllButton,
       footerButton,
       content,
@@ -48,8 +48,8 @@ function NotificationPanel(_a) {
       scrollContainerRef,
       className
     } = _a,
-    rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
-  const skeletons = (0, react_2.useMemo)(() => Array.from({
+    rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
+  const skeletons = (0, react_1.useMemo)(() => Array.from({
     length: skeletonsAmount
   }, (_, i) => i), [skeletonsAmount]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
@@ -65,22 +65,26 @@ function NotificationPanel(_a) {
             text: title,
             "data-test-id": constants_1.TEST_IDS.title
           })
-        }), settings && (0, jsx_runtime_1.jsx)(components_2.NotificationPanelSettings, Object.assign({}, settings))]
-      }), (0, jsx_runtime_1.jsxs)("div", {
-        className: styles_module_scss_1.default.notificationPanelHeaderFunctions,
-        children: [(0, jsx_runtime_1.jsx)("div", {
-          className: styles_module_scss_1.default.notificationPanelChips,
-          children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (0, react_1.createElement)(chips_1.ChipToggle, Object.assign({}, chip, {
-            key: chip.label,
-            "data-test-id": `${constants_1.TEST_IDS.chip}-${chip.label}`,
-            size: 'xs',
-            disabled: chip.disabled || loading
-          })))
-        }), readAllButton && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, readAllButton, {
-          size: 'xs',
-          disabled: readAllButton.disabled || loading,
-          "data-test-id": constants_1.TEST_IDS.readAll
-        }))]
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: styles_module_scss_1.default.notificationPanelHeaderActions,
+          children: [readAllButton && (0, jsx_runtime_1.jsx)(helperComponents_1.WithTooltip, {
+            tooltip: readAllButton.tooltip,
+            children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, readAllButton, {
+              onClick: readAllButton.onClick,
+              size: 'xs',
+              disabled: readAllButton.disabled || loading,
+              "data-test-id": constants_1.TEST_IDS.readAll
+            }))
+          }), settings && (0, jsx_runtime_1.jsx)(components_2.NotificationPanelSettings, Object.assign({}, settings))]
+        })]
+      }), (0, jsx_runtime_1.jsx)("div", {
+        children: segments && (0, jsx_runtime_1.jsx)(segmented_control_1.SegmentedControl, Object.assign({}, segments, {
+          size: 's',
+          items: segments.items.map(item => Object.assign(Object.assign({}, item), {
+            disabled: item.disabled || loading
+          })),
+          "data-test-id": constants_1.TEST_IDS.segments
+        }))
       })]
     }), (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
       size: 'm',

package/dist/cjs/components/NotificationPanel/components/NotificationPanelDivider/styles.module.css

@@ -5,6 +5,7 @@
   align-items:center;
   justify-content:center;
   color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
   border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
   border-bottom-style:solid;
 }

package/dist/cjs/components/NotificationPanel/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const TEST_IDS: {
     title: string;
-    chip: string;
+    segments: string;
     settings: {
         droplist: string;
         droplistTrigger: string;

package/dist/cjs/components/NotificationPanel/constants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TEST_IDS = void 0;
 exports.TEST_IDS = {
   title: 'notification-panel__title',
-  chip: 'notification-panel__chip',
+  segments: 'notification-panel__segments',
   settings: {
     droplist: 'notification-panel__settings__droplist',
     droplistTrigger: 'notification-panel__settings__droplist-trigger',

package/dist/cjs/components/NotificationPanel/helperComponents/WithTooltip/WithTooltip.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+type WithTooltipProps = PropsWithChildren<{
+    tooltip?: TooltipProps;
+}>;
+export declare function WithTooltip({ tooltip, children }: WithTooltipProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/cjs/components/NotificationPanel/helperComponents/WithTooltip/WithTooltip.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithTooltip = WithTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@snack-uikit/tooltip");
+function WithTooltip(_ref) {
+  let {
+    tooltip,
+    children
+  } = _ref;
+  if (!tooltip) {
+    return children;
+  }
+  return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({}, tooltip, {
+    children: children
+  }));
+}

package/dist/cjs/components/NotificationPanel/helperComponents/WithTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/dist/cjs/components/NotificationPanel/helperComponents/WithTooltip/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./WithTooltip"), exports);

package/dist/cjs/components/NotificationPanel/helperComponents/index.d.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/dist/cjs/components/NotificationPanel/helperComponents/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./WithTooltip"), exports);

package/dist/cjs/components/NotificationPanel/styles.module.css

@@ -8,35 +8,17 @@
   position:relative;
   display:flex;
   flex-direction:column;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
   border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
   border-bottom-style:solid;
 }
-.notificationPanelHeader::before{
-  pointer-events:none;
-  content:"";
-  position:absolute;
-  top:0;
-  left:0;
-  box-sizing:border-box;
-  width:100%;
-  height:calc(100% + var(--border-width-notification-panel-container, 1px));
-  opacity:var(--opacity-a004, 0.04);
-  background-color:var(--sys-neutral-accent-default, #787b8a);
-  border-radius:inherit;
-}
 
-.notificationPanelChips{
+.notificationPanelSegments{
   gap:var(--space-notification-panel-header-chips-gap, 8px);
   display:flex;
   align-items:center;
 }
 
-.notificationPanelHeaderFunctions{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-}
-
 .notificationPanelHeadline{
   gap:var(--space-notification-panel-header-headline-gap, 16px);
   display:flex;
@@ -70,7 +52,7 @@
   margin:0;
   padding:0;
   color:var(--sys-neutral-text-light, #8b8e9b);
-  background:none;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
   border-top-style:solid;
   border-right:none;
@@ -102,10 +84,18 @@
   box-sizing:border-box;
   width:100%;
   height:100%;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
 }
 
 .scrollStub{
   height:calc(var(--dimension-025m, 2px) / 2);
   margin-top:calc(var(--dimension-025m, 2px) / -2);
   background:transparent;
+}
+
+.notificationPanelHeaderActions{
+  display:flex;
+  -moz-column-gap:var(--dimension-1m, 8px);
+       column-gap:var(--dimension-1m, 8px);
+  align-items:center;
 }

package/dist/esm/components/NotificationCard/NotificationCard.js

@@ -24,11 +24,7 @@ import styles from './styles.module.css';
 /** Компонент карточки уведомления */
 export function NotificationCard(_a) {
     var { id, appearance = APPEARANCE.Neutral, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className } = _a, rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "primaryButton", "secondaryButton", "actions", "onVisible", "className"]);
-    const { icon, linkOnColor, buttonAppearance } = useMemo(() => ({
-        icon: getIcon(appearance),
-        linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
-        buttonAppearance: appearance === APPEARANCE.ErrorCritical ? 'destructive' : 'primary',
-    }), [appearance]);
+    const icon = useMemo(() => getIcon(appearance), [appearance]);
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const cardRef = useRef(null);
     useEffect(() => {
@@ -57,5 +53,5 @@ export function NotificationCard(_a) {
         e.stopPropagation();
         (_a = link === null || link === void 0 ? void 0 : link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e);
     };
-    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), (primaryButton || secondaryButton) && (_jsxs("div", { className: styles.notificationCardButtons, children: [secondaryButton && (_jsx(ButtonSimple, Object.assign({}, secondaryButton, { appearance: buttonAppearance, size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: buttonAppearance, size: 's', "data-test-id": TEST_IDS.secondaryButton })))] })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: linkOnColor, textMode: 'default', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
+    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), (primaryButton || secondaryButton) && (_jsxs("div", { className: styles.notificationCardButtons, children: [secondaryButton && (_jsx(ButtonSimple, Object.assign({}, secondaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.secondaryButton })))] })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: 'primary', textMode: 'accent', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
 }

package/dist/esm/components/NotificationCard/styles.module.css

@@ -47,7 +47,8 @@
   box-sizing:border-box;
   width:100%;
   height:calc(100% + var(--border-width-notification-panel-card, 1px));
-  opacity:var(--opacity-a004, 0.04);
+  opacity:0;
+  background-color:var(--sys-neutral-accent-default, #787b8a);
 }
 .notificationCard:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -57,7 +58,7 @@
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
 .notificationCard[data-droplist-open]::before, .notificationCard:hover::before, .notificationCard:focus-visible::before, .notificationCard:focus-within:not(:focus)::before{
-  background-color:var(--sys-neutral-accent-default, #787b8a);
+  opacity:var(--opacity-a004, 0.04);
 }
 .notificationCard[data-droplist-open] .notificationCardFunction, .notificationCard:hover .notificationCardFunction, .notificationCard:focus-visible .notificationCardFunction, .notificationCard:focus-within:not(:focus) .notificationCardFunction{
   pointer-events:auto;
@@ -68,26 +69,34 @@
 }
 .notificationCard[data-unread]::before{
   opacity:var(--opacity-a008, 0.08);
-  background-color:var(--sys-neutral-accent-default, #787b8a);
 }
 .notificationCard[data-unread][data-droplist-open]::before, .notificationCard[data-unread]:hover::before, .notificationCard[data-unread]:focus-visible::before, .notificationCard[data-unread]:focus-within:not(:focus)::before{
   opacity:var(--opacity-a004, 0.04);
 }
+.notificationCard[data-appearance=neutral]::before{
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
 .notificationCard[data-appearance=neutral] .notificationCardTitleIcon{
   color:var(--sys-neutral-accent-default, #787b8a);
 }
+.notificationCard[data-appearance=error]::before, .notificationCard[data-appearance=errorCritical]::before{
+  background-color:var(--sys-red-accent-default, #cb3f3e);
+}
 .notificationCard[data-appearance=error] .notificationCardTitleIcon, .notificationCard[data-appearance=errorCritical] .notificationCardTitleIcon{
   color:var(--sys-red-accent-default, #cb3f3e);
 }
-.notificationCard[data-appearance=errorCritical][data-unread]::before, .notificationCard[data-appearance=errorCritical][data-droplist-open]::before, .notificationCard[data-appearance=errorCritical]:hover::before, .notificationCard[data-appearance=errorCritical]:focus-visible::before, .notificationCard[data-appearance=errorCritical]:focus-within:not(:focus)::before{
-  background-color:var(--sys-red-accent-default, #cb3f3e);
-}
 .notificationCard[data-appearance=errorCritical] .notificationCardTitleText{
   color:var(--sys-red-accent-default, #cb3f3e);
 }
+.notificationCard[data-appearance=warning]::before{
+  background-color:var(--sys-yellow-accent-default, #e2b134);
+}
 .notificationCard[data-appearance=warning] .notificationCardTitleIcon{
   color:var(--sys-yellow-accent-default, #e2b134);
 }
+.notificationCard[data-appearance=success]::before{
+  background-color:var(--sys-green-accent-default, #57b762);
+}
 .notificationCard[data-appearance=success] .notificationCardTitleIcon{
   color:var(--sys-green-accent-default, #57b762);
 }

package/dist/esm/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,6 +1,7 @@
 import { MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
-import { ChipToggleProps } from '@snack-uikit/chips';
+import { SegmentedControlProps } from '@snack-uikit/segmented-control';
+import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
@@ -10,11 +11,11 @@ export type NotificationPanelProps = WithSupportProps<{
     title: string;
     /** Кнопка настроек и выпадающий список */
     settings?: NotificationPanelSettingsProps;
-    /** Чипы для фильтрации */
-    chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
+    /** Сегменты для фильтрации */
+    segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
     /** Кнопка в "шапке" панели */
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
-        onClick: ButtonFunctionProps['onClick'];
+        tooltip?: TooltipProps;
     };
     /** Кнопка внизу панели */
     footerButton?: {
@@ -34,7 +35,7 @@ export type NotificationPanelProps = WithSupportProps<{
     scrollContainerRef?: RefObject<HTMLElement>;
 }>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;

package/dist/esm/components/NotificationPanel/NotificationPanel.js

@@ -9,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
-import { ChipToggle } from '@snack-uikit/chips';
 import { Scroll } from '@snack-uikit/scroll';
+import { SegmentedControl } from '@snack-uikit/segmented-control';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
@@ -24,12 +23,13 @@ import { NotificationCardSkeleton } from '../NotificationCard/components';
 import { NotificationPanelBlank, NotificationPanelSettings, } from './components';
 import { NotificationPanelDivider } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
+import { WithTooltip } from './helperComponents';
 import styles from './styles.module.css';
 /** Компонент панели для уведомлений */
 export function NotificationPanel(_a) {
-    var { title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
+    var { title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), _jsxs("div", { className: styles.notificationPanelHeaderActions, children: [readAllButton && (_jsx(WithTooltip, { tooltip: readAllButton.tooltip, children: _jsx(ButtonFunction, Object.assign({}, readAllButton, { onClick: readAllButton.onClick, size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })) })), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] })] }), _jsx("div", { children: segments && (_jsx(SegmentedControl, Object.assign({}, segments, { size: 's', items: segments.items.map(item => (Object.assign(Object.assign({}, item), { disabled: item.disabled || loading }))), "data-test-id": TEST_IDS.segments }))) })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;

package/dist/esm/components/NotificationPanel/components/NotificationPanelDivider/styles.module.css

@@ -5,6 +5,7 @@
   align-items:center;
   justify-content:center;
   color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
   border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
   border-bottom-style:solid;
 }

package/dist/esm/components/NotificationPanel/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const TEST_IDS: {
     title: string;
-    chip: string;
+    segments: string;
     settings: {
         droplist: string;
         droplistTrigger: string;

package/dist/esm/components/NotificationPanel/constants.js

@@ -1,6 +1,6 @@
 export const TEST_IDS = {
     title: 'notification-panel__title',
-    chip: 'notification-panel__chip',
+    segments: 'notification-panel__segments',
     settings: {
         droplist: 'notification-panel__settings__droplist',
         droplistTrigger: 'notification-panel__settings__droplist-trigger',

package/dist/esm/components/NotificationPanel/helperComponents/WithTooltip/WithTooltip.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+type WithTooltipProps = PropsWithChildren<{
+    tooltip?: TooltipProps;
+}>;
+export declare function WithTooltip({ tooltip, children }: WithTooltipProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/esm/components/NotificationPanel/helperComponents/WithTooltip/WithTooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@snack-uikit/tooltip';
+export function WithTooltip({ tooltip, children }) {
+    if (!tooltip) {
+        return children;
+    }
+    return _jsx(Tooltip, Object.assign({}, tooltip, { children: children }));
+}

package/dist/esm/components/NotificationPanel/helperComponents/WithTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/dist/esm/components/NotificationPanel/helperComponents/WithTooltip/index.js

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/dist/esm/components/NotificationPanel/helperComponents/index.d.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/dist/esm/components/NotificationPanel/helperComponents/index.js

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/dist/esm/components/NotificationPanel/styles.module.css

@@ -8,35 +8,17 @@
   position:relative;
   display:flex;
   flex-direction:column;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
   border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
   border-bottom-style:solid;
 }
-.notificationPanelHeader::before{
-  pointer-events:none;
-  content:"";
-  position:absolute;
-  top:0;
-  left:0;
-  box-sizing:border-box;
-  width:100%;
-  height:calc(100% + var(--border-width-notification-panel-container, 1px));
-  opacity:var(--opacity-a004, 0.04);
-  background-color:var(--sys-neutral-accent-default, #787b8a);
-  border-radius:inherit;
-}
 
-.notificationPanelChips{
+.notificationPanelSegments{
   gap:var(--space-notification-panel-header-chips-gap, 8px);
   display:flex;
   align-items:center;
 }
 
-.notificationPanelHeaderFunctions{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-}
-
 .notificationPanelHeadline{
   gap:var(--space-notification-panel-header-headline-gap, 16px);
   display:flex;
@@ -70,7 +52,7 @@
   margin:0;
   padding:0;
   color:var(--sys-neutral-text-light, #8b8e9b);
-  background:none;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
   border-top-style:solid;
   border-right:none;
@@ -102,10 +84,18 @@
   box-sizing:border-box;
   width:100%;
   height:100%;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
 }
 
 .scrollStub{
   height:calc(var(--dimension-025m, 2px) / 2);
   margin-top:calc(var(--dimension-025m, 2px) / -2);
   background:transparent;
+}
+
+.notificationPanelHeaderActions{
+  display:flex;
+  -moz-column-gap:var(--dimension-1m, 8px);
+       column-gap:var(--dimension-1m, 8px);
+  align-items:center;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.13.17",
+  "version": "0.13.19",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,19 +37,20 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/chips": "0.28.6",
     "@snack-uikit/icons": "0.27.3",
     "@snack-uikit/info-block": "0.6.33",
     "@snack-uikit/link": "0.17.12",
     "@snack-uikit/list": "0.32.6",
     "@snack-uikit/popover-private": "0.15.3",
     "@snack-uikit/scroll": "0.10.5",
+    "@snack-uikit/segmented-control": "0.6.12",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/tag": "0.15.10",
+    "@snack-uikit/tooltip": "0.18.5",
     "@snack-uikit/truncate-string": "0.7.3",
     "@snack-uikit/typography": "0.8.11",
     "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "4b590b25862e58fae2addec0ca0ddbb56d6d39f5"
+  "gitHead": "aa80f463fc1e5e9412d766dbfe5d09b1350b9e71"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames';
 import { ElementType, MouseEventHandler, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ButtonSimple, ButtonSimpleProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
-import { Link, LinkProps, PickLinkProps } from '@snack-uikit/link';
+import { Link, PickLinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
@@ -68,18 +68,7 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
   className,
   ...rest
 }: NotificationCardProps<LinkElement>) {
-  const { icon, linkOnColor, buttonAppearance } = useMemo<{
-    icon: ReturnType<typeof getIcon>;
-    linkOnColor: LinkProps['appearance'];
-    buttonAppearance: ButtonTonalProps['appearance'];
-  }>(
-    () => ({
-      icon: getIcon(appearance),
-      linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
-      buttonAppearance: appearance === APPEARANCE.ErrorCritical ? 'destructive' : 'primary',
-    }),
-    [appearance],
-  );
+  const icon = useMemo(() => getIcon(appearance), [appearance]);
 
   const [isDroplistOpen, setDroplistOpen] = useState(false);
 
@@ -159,21 +148,11 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
       {(primaryButton || secondaryButton) && (
         <div className={styles.notificationCardButtons}>
           {secondaryButton && (
-            <ButtonSimple
-              {...secondaryButton}
-              appearance={buttonAppearance}
-              size='s'
-              data-test-id={TEST_IDS.primaryButton}
-            />
+            <ButtonSimple {...secondaryButton} appearance='neutral' size='s' data-test-id={TEST_IDS.primaryButton} />
           )}
 
           {primaryButton && (
-            <ButtonTonal
-              {...primaryButton}
-              appearance={buttonAppearance}
-              size='s'
-              data-test-id={TEST_IDS.secondaryButton}
-            />
+            <ButtonTonal {...primaryButton} appearance='neutral' size='s' data-test-id={TEST_IDS.secondaryButton} />
           )}
         </div>
       )}
@@ -184,8 +163,8 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
             <Link
               {...link}
               onClick={handleLinkClick}
-              appearance={linkOnColor}
-              textMode='default'
+              appearance='primary'
+              textMode='accent'
               size='s'
               data-test-id={TEST_IDS.link}
             />

package/src/components/NotificationCard/styles.module.scss

@@ -55,7 +55,8 @@
     width: 100%;
     height: calc(100% + styles-tokens-notification-notificationCard.$border-width-notification-panel-card);
 
-    opacity: styles-tokens-notification-notificationCard.$opacity-a004;
+    opacity: 0;
+    background-color: styles-tokens-notification-notificationCard.$sys-neutral-accent-default;
   }
 
   &:focus-visible {
@@ -67,7 +68,7 @@
 
   &[data-droplist-open], &:hover, &:focus-visible, &:focus-within:not(:focus) {
     &::before {
-      background-color: styles-tokens-notification-notificationCard.$sys-neutral-accent-default;
+      opacity: styles-tokens-notification-notificationCard.$opacity-a004;
     }
 
     .notificationCardFunction {
@@ -83,7 +84,6 @@
   &[data-unread] {
     &::before {
       opacity: styles-tokens-notification-notificationCard.$opacity-a008;
-      background-color: styles-tokens-notification-notificationCard.$sys-neutral-accent-default;
     }
 
     &[data-droplist-open], &:hover, &:focus-visible, &:focus-within:not(:focus) {
@@ -94,6 +94,10 @@
   }
 
   &[data-appearance='neutral'] {
+    &::before {
+      background-color: styles-tokens-notification-notificationCard.$sys-neutral-accent-default;
+    }
+
     .notificationCardTitleIcon {
       color: styles-tokens-notification-notificationCard.$sys-neutral-accent-default;
     }
@@ -101,30 +105,36 @@
 
   &[data-appearance='error'],
   &[data-appearance='errorCritical'] {
+    &::before {
+      background-color: styles-tokens-notification-notificationCard.$sys-red-accent-default;
+    }
+
     .notificationCardTitleIcon {
       color: styles-tokens-notification-notificationCard.$sys-red-accent-default;
     }
   }
 
   &[data-appearance='errorCritical'] {
-    &[data-unread], &[data-droplist-open], &:hover, &:focus-visible, &:focus-within:not(:focus) {
-      &::before {
-        background-color: styles-tokens-notification-notificationCard.$sys-red-accent-default;
-      }
-    }
-
     .notificationCardTitleText {
       color: styles-tokens-notification-notificationCard.$sys-red-accent-default;
     }
   }
 
   &[data-appearance='warning'] {
+    &::before {
+      background-color: styles-tokens-notification-notificationCard.$sys-yellow-accent-default;
+    }
+
     .notificationCardTitleIcon {
       color: styles-tokens-notification-notificationCard.$sys-yellow-accent-default;
     }
   }
 
   &[data-appearance='success'] {
+    &::before {
+      background-color: styles-tokens-notification-notificationCard.$sys-green-accent-default;
+    }
+
     .notificationCardTitleIcon {
       color: styles-tokens-notification-notificationCard.$sys-green-accent-default;
     }

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -2,9 +2,10 @@ import cn from 'classnames';
 import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
-import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
 import { Scroll } from '@snack-uikit/scroll';
+import { SegmentedControl, SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
+import { TooltipProps } from '@snack-uikit/tooltip';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -18,6 +19,7 @@ import {
 } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
+import { WithTooltip } from './helperComponents';
 import styles from './styles.module.scss';
 
 export type { NotificationPanelBlankProps };
@@ -27,11 +29,11 @@ export type NotificationPanelProps = WithSupportProps<{
   title: string;
   /** Кнопка настроек и выпадающий список */
   settings?: NotificationPanelSettingsProps;
-  /** Чипы для фильтрации */
-  chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
+  /** Сегменты для фильтрации */
+  segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
   /** Кнопка в "шапке" панели */
   readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
-    onClick: ButtonFunctionProps['onClick'];
+    tooltip?: TooltipProps;
   };
   /** Кнопка внизу панели */
   footerButton?: {
@@ -55,7 +57,7 @@ export type NotificationPanelProps = WithSupportProps<{
 export function NotificationPanel({
   title,
   settings,
-  chips,
+  segments,
   readAllButton,
   footerButton,
   content,
@@ -76,28 +78,33 @@ export function NotificationPanel({
             <TruncateString text={title} data-test-id={TEST_IDS.title} />
           </Typography.SansHeadlineS>
 
-          {settings && <NotificationPanelSettings {...settings} />}
-        </div>
+          <div className={styles.notificationPanelHeaderActions}>
+            {readAllButton && (
+              <WithTooltip tooltip={readAllButton.tooltip}>
+                <ButtonFunction
+                  {...readAllButton}
+                  onClick={readAllButton.onClick}
+                  size='xs'
+                  disabled={readAllButton.disabled || loading}
+                  data-test-id={TEST_IDS.readAll}
+                />
+              </WithTooltip>
+            )}
 
-        <div className={styles.notificationPanelHeaderFunctions}>
-          <div className={styles.notificationPanelChips}>
-            {chips?.map(chip => (
-              <ChipToggle
-                {...chip}
-                key={chip.label}
-                data-test-id={`${TEST_IDS.chip}-${chip.label}`}
-                size='xs'
-                disabled={chip.disabled || loading}
-              />
-            ))}
+            {settings && <NotificationPanelSettings {...settings} />}
           </div>
+        </div>
 
-          {readAllButton && (
-            <ButtonFunction
-              {...readAllButton}
-              size='xs'
-              disabled={readAllButton.disabled || loading}
-              data-test-id={TEST_IDS.readAll}
+        <div>
+          {segments && (
+            <SegmentedControl
+              {...segments}
+              size='s'
+              items={segments.items.map(item => ({
+                ...item,
+                disabled: item.disabled || loading,
+              }))}
+              data-test-id={TEST_IDS.segments}
             />
           )}
         </div>

package/src/components/NotificationPanel/components/NotificationPanelDivider/styles.module.scss

@@ -9,6 +9,7 @@
 
   color: styles-tokens-notification-notificationPanel.$sys-neutral-text-light;
 
+  background-color: styles-tokens-notification-notificationPanel.$sys-neutral-background2-level;
   border-bottom-color: styles-tokens-notification-notificationPanel.$sys-neutral-decor-default;
   border-bottom-style: solid;
 }

package/src/components/NotificationPanel/constants.ts

@@ -1,6 +1,6 @@
 export const TEST_IDS = {
   title: 'notification-panel__title',
-  chip: 'notification-panel__chip',
+  segments: 'notification-panel__segments',
   settings: {
     droplist: 'notification-panel__settings__droplist',
     droplistTrigger: 'notification-panel__settings__droplist-trigger',

package/src/components/NotificationPanel/helperComponents/WithTooltip/WithTooltip.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+
+import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
+
+type WithTooltipProps = PropsWithChildren<{
+  tooltip?: TooltipProps;
+}>;
+
+export function WithTooltip({ tooltip, children }: WithTooltipProps) {
+  if (!tooltip) {
+    return children;
+  }
+
+  return <Tooltip {...tooltip}>{children}</Tooltip>;
+}

package/src/components/NotificationPanel/helperComponents/WithTooltip/index.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/src/components/NotificationPanel/helperComponents/index.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/src/components/NotificationPanel/styles.module.scss

@@ -9,40 +9,17 @@
   display: flex;
   flex-direction: column;
 
+  background-color: styles-tokens-notification-notificationPanel.$sys-neutral-background2-level;
   border-bottom-color: styles-tokens-notification-notificationPanel.$sys-neutral-decor-default;
   border-bottom-style: solid;
-
-  &::before {
-    pointer-events: none;
-    content: '';
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    box-sizing: border-box;
-    width: 100%;
-    height: calc(100% + styles-tokens-notification-notificationPanel.$border-width-notification-panel-container);
-
-    opacity: styles-tokens-notification-notificationPanel.$opacity-a004;
-    background-color: styles-tokens-notification-notificationPanel.$sys-neutral-accent-default;
-    border-radius: inherit;
-  }
 }
-.notificationPanelChips {
+.notificationPanelSegments {
   @include styles-tokens-notification-notificationPanel.composite-var(styles-tokens-notification-notificationPanel.$notification-panel-header-chips);
 
   display: flex;
   align-items: center;
 }
 
-.notificationPanelHeaderFunctions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-
 .notificationPanelHeadline {
   @include styles-tokens-notification-notificationPanel.composite-var(styles-tokens-notification-notificationPanel.$notification-panel-header-headline);
 
@@ -81,7 +58,7 @@
 
   color: styles-tokens-notification-notificationPanel.$sys-neutral-text-light;
 
-  background: none;
+  background-color: styles-tokens-notification-notificationPanel.$sys-neutral-background2-level;
   border-color: styles-tokens-notification-notificationPanel.$sys-neutral-decor-default;
   border-top-style: solid;
   border-right: none;
@@ -115,6 +92,8 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
+
+  background-color: styles-tokens-notification-notificationPanel.$sys-neutral-background2-level;
 }
 
 .scrollStub {
@@ -122,3 +101,9 @@
   margin-top: calc(styles-tokens-notification-notificationPanel.$dimension-025m / -2);
   background: transparent;
 }
+
+.notificationPanelHeaderActions {
+  display: flex;
+  column-gap: styles-tokens-notification-notificationPanel.$dimension-1m;
+  align-items: center;
+}