@wallarm-org/design-system 0.59.0 → 0.60.0

package/dist/components/Banner/Banner.d.ts

@@ -7,12 +7,6 @@ export interface BannerProps extends Omit<VariantProps<typeof bannerVariants>, '
     ref?: Ref<HTMLDivElement>;
     /** Visual variant of the banner */
     variant?: BannerVariant;
-    /**
-     * Leading icon. The destructive, info, and warning variants render a default
-     * icon when this is omitted; primary and secondary render none. Passing an
-     * icon always overrides the default.
-     */
-    icon?: ReactNode;
     /** Banner content — compose with Banner sub-components */
     children?: ReactNode;
 }
@@ -25,7 +19,7 @@ export interface BannerProps extends Omit<VariantProps<typeof bannerVariants>, '
  * them is resolved.
  *
  * Supports 5 variants: primary (dark/neutral), secondary, destructive, info,
- * and warning. Compose with: BannerContent, BannerTitle, BannerDescription,
- * BannerLink, BannerControls, BannerClose.
+ * and warning. Compose with: BannerIcon, BannerContent, BannerTitle,
+ * BannerDescription, BannerLink, BannerControls, BannerClose.
  */
 export declare const Banner: FC<BannerProps>;

package/dist/components/Banner/Banner.figma.js

@@ -6,6 +6,7 @@ import { BannerClose } from "./BannerClose.js";
 import { BannerContent } from "./BannerContent.js";
 import { BannerControls } from "./BannerControls.js";
 import { BannerDescription } from "./BannerDescription.js";
+import { BannerIcon } from "./BannerIcon.js";
 import { BannerLink } from "./BannerLink.js";
 import { BannerTitle } from "./BannerTitle.js";
 const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7688-3741';
@@ -29,6 +30,7 @@ code_connect.connect(Banner, figmaNodeUrl, {
     example: ({ variant, description, inlineAction, rightActions, closable, title, text })=>/*#__PURE__*/ jsxs(Banner, {
             variant: variant,
             children: [
+                /*#__PURE__*/ jsx(BannerIcon, {}),
                 /*#__PURE__*/ jsxs(BannerContent, {
                     children: [
                         /*#__PURE__*/ jsx(BannerTitle, {

package/dist/components/Banner/Banner.js

@@ -1,14 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { BannerVariantProvider } from "./BannerContext.js";
-import { BannerIcon } from "./BannerIcon.js";
 import { bannerVariants } from "./classes.js";
-const Banner = ({ ref, variant = 'primary', icon, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(BannerVariantProvider, {
+const Banner = ({ ref, variant = 'primary', className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(BannerVariantProvider, {
         value: variant,
         children: /*#__PURE__*/ jsx(TestIdProvider, {
             value: testId,
-            children: /*#__PURE__*/ jsxs("div", {
+            children: /*#__PURE__*/ jsx("div", {
                 ...props,
                 ref: ref,
                 role: "status",
@@ -18,12 +17,7 @@ const Banner = ({ ref, variant = 'primary', icon, className, children, 'data-tes
                 className: cn(bannerVariants({
                     variant
                 }), className),
-                children: [
-                    /*#__PURE__*/ jsx(BannerIcon, {
-                        icon: icon
-                    }),
-                    children
-                ]
+                children: children
             })
         })
     });

package/dist/components/Banner/BannerIcon.d.ts

@@ -1,14 +1,18 @@
-import type { FC, ReactNode } from 'react';
-export interface BannerIconProps {
-    /** Custom icon — always overrides the variant default. */
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface BannerIconProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    /** Override the default icon for the variant. */
     icon?: ReactNode;
 }
 /**
- * Leading icon for Banner — rendered internally by Banner, not part of the
- * public API.
+ * Leading icon for Banner — compose it as a child of Banner.
  *
- * The destructive, info, and warning variants show a default icon; primary and
- * secondary show none. A custom `icon` (passed via Banner's `icon` prop) always
- * overrides the default. Renders nothing when there is no icon to show.
+ * Automatically displays the appropriate icon based on the parent Banner's
+ * variant: destructive, info, and warning each render a default icon; primary
+ * and secondary render none. Pass a custom `icon` to override the default (or
+ * to add an icon to primary/secondary).
+ *
+ * Renders nothing when there is no icon to show — i.e. on a variant without a
+ * default icon and no custom `icon` provided.
  */
 export declare const BannerIcon: FC<BannerIconProps>;

package/dist/components/Banner/BannerIcon.js

@@ -8,7 +8,7 @@ const defaultIconMap = {
     info: Info,
     warning: TriangleAlert
 };
-const BannerIcon = ({ icon })=>{
+const BannerIcon = ({ ref, icon, ...props })=>{
     const testId = useTestId('icon');
     const variant = useBannerVariant();
     const DefaultIcon = defaultIconMap[variant];
@@ -20,6 +20,8 @@ const BannerIcon = ({ icon })=>{
     }) : null);
     if (null == content) return null;
     return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
         "data-slot": "banner-icon",
         "data-testid": testId,
         className: "flex items-center py-2 shrink-0",

package/dist/components/Banner/index.d.ts

@@ -3,5 +3,6 @@ export { BannerClose, type BannerCloseProps } from './BannerClose';
 export { BannerContent, type BannerContentProps } from './BannerContent';
 export { BannerControls, type BannerControlsProps } from './BannerControls';
 export { BannerDescription, type BannerDescriptionProps } from './BannerDescription';
+export { BannerIcon, type BannerIconProps } from './BannerIcon';
 export { BannerLink, type BannerLinkProps } from './BannerLink';
 export { BannerTitle, type BannerTitleProps } from './BannerTitle';

package/dist/components/Banner/index.js

@@ -3,6 +3,7 @@ import { BannerClose } from "./BannerClose.js";
 import { BannerContent } from "./BannerContent.js";
 import { BannerControls } from "./BannerControls.js";
 import { BannerDescription } from "./BannerDescription.js";
+import { BannerIcon } from "./BannerIcon.js";
 import { BannerLink } from "./BannerLink.js";
 import { BannerTitle } from "./BannerTitle.js";
-export { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle };
+export { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle };

package/dist/components/UtilityPage/UtilityPage.js

@@ -8,25 +8,25 @@ const UtilityPage = ({ ref, title, subtitle, description, className, children, .
         "data-slot": "utility-page",
         className: cn('min-h-screen w-full bg-component-app-shell-bg', className),
         children: /*#__PURE__*/ jsxs("div", {
-            className: "flex w-[482px] flex-col items-center gap-32 rounded-12 border-1 border-border-primary-light bg-bg-surface-1 px-48 pt-32 pb-80 shadow-xs",
+            className: "flex w-[482px] flex-col items-center gap-32 rounded-12 border-1 border-border-primary-light bg-bg-surface-1 px-48 pt-32 pb-80",
             children: [
                 /*#__PURE__*/ jsx(Logo, {
                     type: "full",
-                    size: "lg",
+                    size: "md",
                     className: "self-start mb-32"
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: "w-full flex flex-col items-start gap-12",
+                    className: "w-full flex flex-col items-start",
                     children: [
                         /*#__PURE__*/ jsx("h1", {
-                            className: "font-mono text-6xl font-medium text-text-primary",
+                            className: "font-mono text-6xl leading-7xl font-medium text-text-primary",
                             children: title
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: "flex flex-col items-start gap-4",
+                            className: "flex flex-col items-start",
                             children: [
                                 /*#__PURE__*/ jsx("p", {
-                                    className: "text-lg font-medium text-text-primary",
+                                    className: "text-lg leading-xl font-medium text-text-primary",
                                     children: subtitle
                                 }),
                                 /*#__PURE__*/ jsx("p", {

package/dist/index.d.ts

@@ -16,7 +16,7 @@ export { AnimatedBackground, type AnimatedBackgroundProps, } from './components/
 export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell';
 export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute';
 export { Badge, type BadgeProps } from './components/Badge';
-export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner';
+export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerIcon, type BannerIconProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner';
 export { Breadcrumbs, BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, type ScopeSwitcherItem, } from './components/Breadcrumbs';
 export { Button, type ButtonProps } from './components/Button';
 export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarBody, type CalendarBodyProps, CalendarContent, type CalendarContentProps, type CalendarContextValue, CalendarDayName, CalendarFooter, CalendarFooterControls, type CalendarFooterControlsProps, type CalendarFooterProps, CalendarGrid, CalendarGrids, type CalendarGridsProps, CalendarHeader, CalendarInputHeader, type CalendarInputHeaderProps, CalendarKeyboardHints, type CalendarKeyboardHintsProps, CalendarPresetItem, CalendarPresets, type CalendarPresetsProps, type CalendarProps, CalendarProvider, CalendarResetButton, type CalendarResetButtonProps, CalendarTrigger, type CalendarTriggerProps, type CalendarType, DAY_NAMES, type DateRangePreset, type DateValue, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, type PresetConfig, type PresetValue, useCalendarContext, } from './components/Calendar';

package/dist/index.js

@@ -5,7 +5,7 @@ import { AnimatedBackground } from "./components/AnimatedBackground/index.js";
 import { AppShell, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
 import { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
 import { Badge } from "./components/Badge/index.js";
-import { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle } from "./components/Banner/index.js";
+import { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle } from "./components/Banner/index.js";
 import { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator } from "./components/Breadcrumbs/index.js";
 import { Button } from "./components/Button/index.js";
 import { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, useCalendarContext } from "./components/Calendar/index.js";
@@ -68,4 +68,4 @@ import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHead
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { UtilityPage } from "./components/UtilityPage/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, UtilityPage, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useLocationPathname, usePageHost, useRemoteShellContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, UtilityPage, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useLocationPathname, usePageHost, useRemoteShellContext, useTestId, useTheme, useTour, waitForStepEvent };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.58.1",
-  "generatedAt": "2026-06-13T22:37:33.156Z",
+  "version": "0.59.0",
+  "generatedAt": "2026-06-14T20:20:21.089Z",
   "components": [
     {
       "name": "Accordion",
@@ -7916,7 +7916,7 @@
     },
     {
       "name": "Banner",
-      "description": "Banner displays a prominent, full-width message at the top of the page\n(above the header) to communicate system-wide status, announcements,\nwarnings, errors, or promotional messages to all users.\n\nBanners persist until dismissed by the user or until the state that caused\nthem is resolved.\n\nSupports 5 variants: primary (dark/neutral), secondary, destructive, info,\nand warning. Compose with: BannerContent, BannerTitle, BannerDescription,\nBannerLink, BannerControls, BannerClose.",
+      "description": "Banner displays a prominent, full-width message at the top of the page\n(above the header) to communicate system-wide status, announcements,\nwarnings, errors, or promotional messages to all users.\n\nBanners persist until dismissed by the user or until the state that caused\nthem is resolved.\n\nSupports 5 variants: primary (dark/neutral), secondary, destructive, info,\nand warning. Compose with: BannerIcon, BannerContent, BannerTitle,\nBannerDescription, BannerLink, BannerControls, BannerClose.",
       "importPath": "@wallarm-org/design-system/Banner",
       "props": [
         {
@@ -7926,12 +7926,6 @@
           "description": "Visual variant of the banner",
           "defaultValue": "primary"
         },
-        {
-          "name": "icon",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Leading icon. The destructive, info, and warning variants render a default\nicon when this is omitted; primary and secondary render none. Passing an\nicon always overrides the default."
-        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -9367,6 +9361,287 @@
             }
           ]
         },
+        {
+          "name": "BannerIcon",
+          "props": [
+            {
+              "name": "icon",
+              "type": "ReactNode",
+              "required": false,
+              "description": "Override the default icon for the variant."
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            }
+          ]
+        },
         {
           "name": "BannerLink",
           "props": [
@@ -9980,21 +10255,21 @@
       "examples": [
         {
           "name": "Default",
-          "code": "({\n  variant,\n  customIcon,\n  description,\n  inlineAction,\n  actions,\n  closable,\n  title,\n  text,\n}) => (\n  <Banner\n    variant={variant}\n    icon={customIcon ? <Megaphone size='lg' className='text-icon-brand' /> : undefined}\n  >\n    <BannerContent>\n      <BannerTitle action={inlineAction ? <BannerLink href='#'>Action</BannerLink> : undefined}>\n        {title}\n      </BannerTitle>\n      {description && <BannerDescription>{text}</BannerDescription>}\n    </BannerContent>\n    {(actions || closable) && (\n      <BannerControls>\n        {actions && (\n          <Button variant='secondary' color='neutral' size='small'>\n            Button\n          </Button>\n        )}\n        {closable && <BannerClose />}\n      </BannerControls>\n    )}\n  </Banner>\n)",
-          "description": "Interactive preview — toggle the controls below to compose the banner.\nThe destructive, info, and warning variants show a default icon; enable\n\"customIcon\" to override it (and to add an icon to primary/secondary)."
+          "code": "({\n  variant,\n  customIcon,\n  description,\n  inlineAction,\n  actions,\n  closable,\n  title,\n  text,\n}) => (\n  <Banner variant={variant}>\n    <BannerIcon\n      icon={customIcon ? <Megaphone size='lg' className='text-icon-brand' /> : undefined}\n    />\n    <BannerContent>\n      <BannerTitle action={inlineAction ? <BannerLink href='#'>Action</BannerLink> : undefined}>\n        {title}\n      </BannerTitle>\n      {description && <BannerDescription>{text}</BannerDescription>}\n    </BannerContent>\n    {(actions || closable) && (\n      <BannerControls>\n        {actions && (\n          <Button variant='secondary' color='neutral' size='small'>\n            Button\n          </Button>\n        )}\n        {closable && <BannerClose />}\n      </BannerControls>\n    )}\n  </Banner>\n)",
+          "description": "Interactive preview — toggle the controls below to compose the banner.\nBannerIcon shows the default icon on destructive, info, and warning; enable\n\"customIcon\" to override it (and to add an icon to primary/secondary)."
         },
         {
           "name": "AllColors",
-          "code": "() => (\n  <div className='flex flex-col gap-16'>\n    <Banner variant='primary'>\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='secondary'>\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='destructive'>\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='info'>\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='warning'>\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n  </div>\n)",
+          "code": "() => (\n  <div className='flex flex-col gap-16'>\n    <Banner variant='primary'>\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='secondary'>\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='destructive'>\n      <BannerIcon />\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='info'>\n      <BannerIcon />\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n\n    <Banner variant='warning'>\n      <BannerIcon />\n      <BannerContent>\n        <BannerTitle>Message goes here</BannerTitle>\n      </BannerContent>\n    </Banner>\n  </div>\n)",
           "description": "primary and secondary have no icon by default; destructive, info, and warning\neach render their own default icon."
         },
         {
           "name": "WithDescription",
-          "code": "() => (\n  <Banner variant='info'>\n    <BannerContent>\n      <BannerTitle>Credential Stuffing Detection</BannerTitle>\n      <BannerDescription>\n        Credential Stuffing Detection requires Wallarm node version 4.10.3 or higher.\n      </BannerDescription>\n    </BannerContent>\n  </Banner>\n)"
+          "code": "() => (\n  <Banner variant='info'>\n    <BannerIcon />\n    <BannerContent>\n      <BannerTitle>Credential Stuffing Detection</BannerTitle>\n      <BannerDescription>\n        Credential Stuffing Detection requires Wallarm node version 4.10.3 or higher.\n      </BannerDescription>\n    </BannerContent>\n  </Banner>\n)"
         },
         {
           "name": "WithInlineLink",
-          "code": "() => (\n  <Banner variant='warning'>\n    <BannerContent>\n      <BannerTitle action={<BannerLink href='#'>Learn more</BannerLink>}>\n        You have exceeded the monthly quota for your company\n      </BannerTitle>\n    </BannerContent>\n  </Banner>\n)"
+          "code": "() => (\n  <Banner variant='warning'>\n    <BannerIcon />\n    <BannerContent>\n      <BannerTitle action={<BannerLink href='#'>Learn more</BannerLink>}>\n        You have exceeded the monthly quota for your company\n      </BannerTitle>\n    </BannerContent>\n  </Banner>\n)"
         },
         {
           "name": "LongText",
@@ -10003,12 +10278,12 @@
         },
         {
           "name": "CustomIcon",
-          "code": "() => (\n  <Banner variant='secondary' icon={<Megaphone size='lg' className='text-icon-brand' />}>\n    <BannerContent>\n      <BannerTitle action={<BannerLink href='#'>View plans</BannerLink>}>\n        New features are now available on the Pro plan\n      </BannerTitle>\n    </BannerContent>\n    <BannerControls>\n      <BannerClose />\n    </BannerControls>\n  </Banner>\n)",
-          "description": "Override the default variant icon (or add one to primary/secondary) by\npassing the `icon` prop to Banner."
+          "code": "() => (\n  <Banner variant='secondary'>\n    <BannerIcon icon={<Megaphone size='lg' className='text-icon-brand' />} />\n    <BannerContent>\n      <BannerTitle action={<BannerLink href='#'>View plans</BannerLink>}>\n        New features are now available on the Pro plan\n      </BannerTitle>\n    </BannerContent>\n    <BannerControls>\n      <BannerClose />\n    </BannerControls>\n  </Banner>\n)",
+          "description": "Override the default variant icon (or add one to primary/secondary) by\npassing the `icon` prop to BannerIcon."
         },
         {
           "name": "WithActions",
-          "code": "() => (\n  <Banner variant='destructive'>\n    <BannerContent>\n      <BannerTitle>Your subscription has expired</BannerTitle>\n    </BannerContent>\n    <BannerControls>\n      <Button variant='outline' color='neutral' size='small'>\n        Dismiss\n      </Button>\n      <Button variant='outline' color='neutral' size='small'>\n        Renew\n      </Button>\n    </BannerControls>\n  </Banner>\n)"
+          "code": "() => (\n  <Banner variant='destructive'>\n    <BannerIcon />\n    <BannerContent>\n      <BannerTitle>Your subscription has expired</BannerTitle>\n    </BannerContent>\n    <BannerControls>\n      <Button variant='outline' color='neutral' size='small'>\n        Dismiss\n      </Button>\n      <Button variant='outline' color='neutral' size='small'>\n        Renew\n      </Button>\n    </BannerControls>\n  </Banner>\n)"
         },
         {
           "name": "Closable",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",