semrush · ilyabrower · Jun 30, 2026 · Jul 1, 2026 · Jul 2, 2026 · Jul 2, 2026
diff --git a/...ced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/...ced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png
diff --git a/...nced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/...nced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png
diff --git a/...anced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/...anced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png
diff --git a/...nced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/...nced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png
diff --git a/...anced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/...anced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png
diff --git a/...vanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/...vanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png
diff --git a/...sual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png b/...sual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png
diff --git a/...isual-Verify-focus-when-notice-and-interactive-item-in-menu-1-firefox-linux.png b/...isual-Verify-focus-when-notice-and-interactive-item-in-menu-1-firefox-linux.png
diff --git a/...visual-Verify-focus-when-notice-and-interactive-item-in-menu-1-webkit-linux.png b/...visual-Verify-focus-when-notice-and-interactive-item-in-menu-1-webkit-linux.png
diff --git a/semcore/dropdown/src/Notice.tsx b/semcore/dropdown/src/Notice.tsx
@@ -1,25 +1,43 @@
+import { Flex } from '@semcore/base-components';
 import { Component, createComponent, Root, sstyled } from '@semcore/core';
 import Notice, { type NSNotice } from '@semcore/notice';
+import { Text } from '@semcore/typography';
 import React from 'react';
 
+import type { NSDropdown } from './index';
 import style from './style/dropdownNotice.shadow.css';
 
-class DropdownNoticeRoot extends Component<NSNotice.Props> {
+class DropdownNoticeRoot extends Component<NSDropdown.Notice.Props> {
   static displayName = 'Notice';
   static style = style;
 
   render() {
-    const { styles } = this.asProps;
+    const { styles, Children, icon, title, theme } = this.asProps;
     const SDropdownNotice = Root;
-    return sstyled(styles)(<SDropdownNotice render={Notice} />);
+    const SIcon = 'div';
+    const STitle = Text;
+
+    return sstyled(styles)(
+      <SDropdownNotice render={Notice} use:icon={undefined}>
+        <Flex alignItems='baseline' gap={2}>
+          {Boolean(icon) && (
+            <SIcon
+            // @ts-expect-error for css styles only
+              theme={theme}
+            >
+              {icon}
+            </SIcon>
+          )}
+          <STitle bold size={300}>{title}</STitle>
+        </Flex>
+        <Children />
+      </SDropdownNotice>,
+    );
   }
 }
 
-export const DropdownNotice = createComponent<NSNotice.Component, typeof DropdownNoticeRoot>(DropdownNoticeRoot, {
-  Label: Notice.Label,
-  Title: Notice.Title,
+export const DropdownNotice = createComponent<NSDropdown.Notice.Component, typeof DropdownNoticeRoot>(DropdownNoticeRoot, {
   Text: Notice.Text,
   Actions: Notice.Actions,
-  Content: Notice.Content,
   Close: Notice.Close,
 }, { parent: Notice });
diff --git a/semcore/dropdown/src/index.d.ts b/semcore/dropdown/src/index.d.ts
@@ -1,8 +1,22 @@
 import type { NSBox, NSPopper } from '@semcore/base-components';
 import type { Intergalactic, PropGetterFn } from '@semcore/core';
-import type Notice from '@semcore/notice';
+import type { NSNotice } from '@semcore/notice';
 import type React from 'react';
 
+declare namespace NSDropdown {
+
+  namespace Notice {
+    type Props = NSNotice.Props & {
+      title: React.ReactNode;
+    };
+
+    type Component = Intergalactic.Component<'div', Props> & {
+      Actions: NSNotice.Actions.Component;
+      Text: NSNotice.Text.Component;
+    };
+  }
+}
+
 export type DropdownProps = NSPopper.Props & {
   /**
    * Modifier responsible for the size of the pop-up window:
@@ -65,8 +79,6 @@ export type DropdownStatusItemProps = {
 
 export type StatusItemComponent = Intergalactic.Component<'div', DropdownStatusItemProps>;
 
-export type DropdownNoticeComponent = typeof Notice;
-
 declare const Dropdown: Intergalactic.Component<
   'div',
   DropdownProps,
@@ -83,7 +95,9 @@ declare const Dropdown: Intergalactic.Component<
   Item: Intergalactic.Component<NSBox.Component>;
   Group: Intergalactic.Component<'div', DropdownGroupProps>;
   StatusItem: StatusItemComponent;
-  Notice: DropdownNoticeComponent;
+  Notice: NSDropdown.Notice.Component;
 };
 
 export default Dropdown;
+
+export type { NSDropdown };
diff --git a/semcore/dropdown/src/style/dropdownNotice.shadow.css b/semcore/dropdown/src/style/dropdownNotice.shadow.css
@@ -8,4 +8,27 @@ SDropdownNotice {
   border-bottom-right-radius: calc(var(--intergalactic-rounded-small, 4px) + 1px);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+
+  flex-direction: column;
+  gap: 0;
+
+  SIcon[theme='info'] {
+    color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
+  }
+
+  SIcon[theme='danger'] {
+    color: var(--intergalactic-icon-primary-critical, oklch(0.552 0.226 28.7 / 0.848));
+  }
+
+  SIcon[theme='warning'] {
+    color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8));
+  }
+
+  SIcon[theme='success'] {
+    color: var(--intergalactic-icon-primary-success, oklch(0.595 0.124 165.4));
+  }
+
+  SIcon[theme='muted'] {
+    color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
+  }
 }
diff --git a/...isual-Verify-select-with-notice-without-focusable-elements-1-chromium-linux.png b/...isual-Verify-select-with-notice-without-focusable-elements-1-chromium-linux.png
diff --git a/...visual-Verify-select-with-notice-without-focusable-elements-1-firefox-linux.png b/...visual-Verify-select-with-notice-without-focusable-elements-1-firefox-linux.png
diff --git a/...-visual-Verify-select-with-notice-without-focusable-elements-1-webkit-linux.png b/...-visual-Verify-select-with-notice-without-focusable-elements-1-webkit-linux.png
diff --git a/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx
@@ -54,16 +54,12 @@ const Demo = () => {
             theme='warning'
             style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
             icon={<WarningIcon />}
+            title='Warning'
           >
-            <Dropdown.Notice.Content>
-              <Flex mb={1}>
-                <Dropdown.Notice.Title>
-                  Warning
-                </Dropdown.Notice.Title>
-              </Flex>
+            <Dropdown.Notice.Text>
               If you change your location, all previously collected data for this article will be
               lost.
-            </Dropdown.Notice.Content>
+            </Dropdown.Notice.Text>
           </Dropdown.Notice>
         </DateRangeComparator.Popper>
       </DateRangeComparator>

diff --git a/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx
@@ -54,16 +54,12 @@ const Demo = () => {
             theme='warning'
             style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
             icon={<WarningIcon />}
+            title='Warning'
           >
-            <Dropdown.Notice.Content>
-              <Flex mb={1}>
-                <Dropdown.Notice.Title>
-                  Warning
-                </Dropdown.Notice.Title>
-              </Flex>
+            <Dropdown.Notice.Text>
               If you change your location, all previously collected data for this article will be
               lost.
-            </Dropdown.Notice.Content>
+            </Dropdown.Notice.Text>
           </Dropdown.Notice>
         </MonthDateRangeComparator.Popper>
       </MonthDateRangeComparator>

diff --git a/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx b/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx
@@ -40,12 +40,12 @@ const Demo = () => {
               <DropdownMenu.Item onClick={handleClick}>CSV</DropdownMenu.Item>
               <DropdownMenu.Item onClick={handleClick}>CSV Semicolon</DropdownMenu.Item>
             </DropdownMenu.List>
-            <DropdownMenu.Notice px={3} theme='warning'>
-              <DropdownMenu.Notice.Content>
+            <DropdownMenu.Notice px={3} theme='warning' title='Unsaved changes'>
+              <DropdownMenu.Notice.Actions>
                 <Button onClick={handleOpen} use='primary'>
                   Open modal
                 </Button>
-              </DropdownMenu.Notice.Content>
+              </DropdownMenu.Notice.Actions>
             </DropdownMenu.Notice>
           </SpinContainer>
         </DropdownMenu.Popper>

diff --git a/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx b/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx
@@ -40,19 +40,15 @@ const Demo = () => {
             aria-labelledby='export-notice-title'
             theme='warning'
             px={3}
+            title='Export failed'
           >
-            <DropdownMenu.Notice.Content>
-              <Text tag='strong' mb={1} style={{ display: 'block' }} id='export-notice-title'>
-                Export failed
-              </Text>
-              <Text>
-                If the problem persists, please contact us at
-                {' '}
-                <Link href='mailto:feedback@semrush.com'>
-                  feedback@semrush.com
-                </Link>
-              </Text>
-            </DropdownMenu.Notice.Content>
+            <DropdownMenu.Notice.Text>
+              If the problem persists, please contact us at
+              {' '}
+              <Link href='mailto:feedback@semrush.com'>
+                feedback@semrush.com
+              </Link>
+            </DropdownMenu.Notice.Text>
           </DropdownMenu.Notice>
         </SpinContainer>
       </DropdownMenu.Popper>

diff --git a/stories/components/dropdown-menu/tests/Dropdown-menu.stories.tsx b/stories/components/dropdown-menu/tests/Dropdown-menu.stories.tsx
@@ -95,10 +95,6 @@ const noticeArgTypes = {
     control: { type: 'text' },
     table: { category: 'Notice content' },
   },
-  showNoticeClose: {
-    control: { type: 'boolean' },
-    table: { category: 'Notice content' },
-  },
 } as const;
 
 export const WithFocusableTrigger: Story = {

diff --git a/stories/components/dropdown-menu/tests/examples/dropdown-base-props.tsx b/stories/components/dropdown-menu/tests/examples/dropdown-base-props.tsx
@@ -1,4 +1,4 @@
-import InfoM from '@semcore/icon/Info/m';
+import WarningM from '@semcore/icon/Warning/m';
 import { Flex } from '@semcore/ui/base-components';
 import Button from '@semcore/ui/button';
 import Divider from '@semcore/ui/divider';
@@ -34,7 +34,6 @@ type DropDownPropsExample = DropdownMenuProps & DropdownMenuListProps & {
   noticeText?: string;
   showNoticeActions?: boolean;
   noticeActionText?: string;
-  showNoticeClose?: boolean;
 };
 const Demo = (props: DropDownPropsExample) => {
   const {
@@ -62,7 +61,6 @@ const Demo = (props: DropDownPropsExample) => {
     noticeText,
     showNoticeActions,
     noticeActionText,
-    showNoticeClose,
   } = props;
 
   const [search, setSearch] = React.useState('');
@@ -85,24 +83,15 @@ const Demo = (props: DropDownPropsExample) => {
       <DropdownMenu.Notice
         theme={noticeTheme}
         hidden={noticeHidden}
+        icon={showNoticeLabel ? (<WarningM />) : undefined}
+        title={noticeTitle}
       >
-        {showNoticeLabel && (
-          <DropdownMenu.Notice.Label>
-            <InfoM />
-          </DropdownMenu.Notice.Label>
+        {noticeText && <DropdownMenu.Notice.Text>{noticeText}</DropdownMenu.Notice.Text>}
+        {showNoticeActions && (
+          <DropdownMenu.Notice.Actions>
+            <Button use='primary'>{noticeActionText}</Button>
+          </DropdownMenu.Notice.Actions>
         )}
-        <DropdownMenu.Notice.Content>
-          {noticeTitle && (
-            <DropdownMenu.Notice.Title>{noticeTitle}</DropdownMenu.Notice.Title>
-          )}
-          {noticeText && <DropdownMenu.Notice.Text>{noticeText}</DropdownMenu.Notice.Text>}
-          {showNoticeActions && (
-            <DropdownMenu.Notice.Actions>
-              <Button use='primary'>{noticeActionText}</Button>
-            </DropdownMenu.Notice.Actions>
-          )}
-        </DropdownMenu.Notice.Content>
-        {showNoticeClose && <DropdownMenu.Notice.Close />}
       </DropdownMenu.Notice>
     );
   };
@@ -209,7 +198,6 @@ export const defaultDropDownPropsExample: DropDownPropsExample = {
   noticeText: 'Additional information related to the available actions.',
   showNoticeActions: true,
   noticeActionText: 'Action',
-  showNoticeClose: false,
 };
 
 Demo.defaultProps = defaultDropDownPropsExample;

diff --git a/stories/components/dropdown-menu/tests/examples/multiselect-props.tsx b/stories/components/dropdown-menu/tests/examples/multiselect-props.tsx
@@ -27,7 +27,6 @@ type DropDownPropsExample = DropdownMenuProps & DropdownMenuListProps & {
   noticeText?: string;
   showNoticeActions?: boolean;
   noticeActionText?: string;
-  showNoticeClose?: boolean;
 };
 const Demo = (props: DropDownPropsExample) => {
   const [selected, setSelected] = React.useState<number[]>([0, 1]);
@@ -45,26 +44,17 @@ const Demo = (props: DropDownPropsExample) => {
       <DropdownMenu.Notice
         theme={props.noticeTheme}
         hidden={props.noticeHidden}
+        icon={props.showNoticeLabel ? (<InfoM />) : undefined}
+        title={props.noticeTitle}
       >
-        {props.showNoticeLabel && (
-          <DropdownMenu.Notice.Label>
-            <InfoM />
-          </DropdownMenu.Notice.Label>
+        {props.noticeText && (
+          <DropdownMenu.Notice.Text>{props.noticeText}</DropdownMenu.Notice.Text>
+        )}
+        {props.showNoticeActions && (
+          <DropdownMenu.Notice.Actions>
+            <Button use='primary'>{props.noticeActionText}</Button>
+          </DropdownMenu.Notice.Actions>
         )}
-        <DropdownMenu.Notice.Content>
-          {props.noticeTitle && (
-            <DropdownMenu.Notice.Title>{props.noticeTitle}</DropdownMenu.Notice.Title>
-          )}
-          {props.noticeText && (
-            <DropdownMenu.Notice.Text>{props.noticeText}</DropdownMenu.Notice.Text>
-          )}
-          {props.showNoticeActions && (
-            <DropdownMenu.Notice.Actions>
-              <Button use='primary'>{props.noticeActionText}</Button>
-            </DropdownMenu.Notice.Actions>
-          )}
-        </DropdownMenu.Notice.Content>
-        {props.showNoticeClose && <DropdownMenu.Notice.Close />}
       </DropdownMenu.Notice>
     );
   };
@@ -179,7 +169,6 @@ export const defaultDropDownMultiselectPropsExample: DropDownPropsExample = {
   noticeText: 'Additional information related to the available actions.',
   showNoticeActions: true,
   noticeActionText: 'Action',
-  showNoticeClose: false,
 };
 
 Demo.defaultProps = defaultDropDownMultiselectPropsExample;

diff --git a/stories/components/dropdown/tests/dropdown.stories.tsx b/stories/components/dropdown/tests/dropdown.stories.tsx
@@ -110,10 +110,6 @@ export const ExampleWithProps: StoryObj<typeof defaultDropdownExampleProps> = {
       control: { type: 'text' },
       table: { category: 'Notice content' },
     },
-    showNoticeClose: {
-      control: { type: 'boolean' },
-      table: { category: 'Notice content' },
-    },
   },
   args: defaultDropdownExampleProps,
 };

diff --git a/stories/components/dropdown/tests/examples/example-with-props.tsx b/stories/components/dropdown/tests/examples/example-with-props.tsx
@@ -25,7 +25,6 @@ type DropdownExampleProps =
     noticeText?: string;
     showNoticeActions?: boolean;
     noticeActionText?: string;
-    showNoticeClose?: boolean;
   };
 const Demo = (props: DropdownExampleProps) => (
   <Flex p={30}>
@@ -73,24 +72,15 @@ const Demo = (props: DropdownExampleProps) => (
           <Dropdown.Notice
             theme={props.noticeTheme}
             hidden={props.noticeHidden}
+            icon={props.showNoticeLabel ? (<InfoM />) : undefined}
+            title={props.noticeTitle}
           >
-            {props.showNoticeLabel && (
-              <Dropdown.Notice.Label>
-                <InfoM />
-              </Dropdown.Notice.Label>
+            {props.noticeText && <Dropdown.Notice.Text>{props.noticeText}</Dropdown.Notice.Text>}
+            {props.showNoticeActions && (
+              <Dropdown.Notice.Actions>
+                <Button use='primary'>{props.noticeActionText}</Button>
+              </Dropdown.Notice.Actions>
             )}
-            <Dropdown.Notice.Content>
-              {props.noticeTitle && (
-                <Dropdown.Notice.Title>{props.noticeTitle}</Dropdown.Notice.Title>
-              )}
-              {props.noticeText && <Dropdown.Notice.Text>{props.noticeText}</Dropdown.Notice.Text>}
-              {props.showNoticeActions && (
-                <Dropdown.Notice.Actions>
-                  <Button use='primary'>{props.noticeActionText}</Button>
-                </Dropdown.Notice.Actions>
-              )}
-            </Dropdown.Notice.Content>
-            {props.showNoticeClose && <Dropdown.Notice.Close />}
           </Dropdown.Notice>
         )}
       </Dropdown.Popper>
@@ -121,7 +111,6 @@ export const defaultDropdownExampleProps: DropdownExampleProps = {
   noticeText: 'Additional information related to the dropdown content.',
   showNoticeActions: true,
   noticeActionText: 'Action',
-  showNoticeClose: false,
 };
 
 Demo.defaultProps = defaultDropdownExampleProps;