@wallarm-org/design-system 0.46.0-rc-feature-progress.1 → 0.47.0-rc-feature-shell.1

package/dist/components/AppShell/AppShell.js

@@ -8,7 +8,7 @@ const AppShell = ({ ref, className, children, 'data-testid': testId, ...props })
             ref: ref,
             "data-slot": "app-shell",
             "data-testid": testId,
-            className: cn('grid h-screen [grid-template-areas:"header_header""rail_remote"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr] bg-bg-surface-5', className),
+            className: cn('grid h-screen overscroll-none [grid-template-areas:"header_header""rail_remote"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr] bg-bg-surface-5', className),
             children: children
         })
     });

package/dist/components/AppShell/AppShellRemote.js

@@ -8,7 +8,7 @@ const AppShellRemote = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "app-shell-remote",
         "data-testid": testId,
-        className: cn('[grid-area:remote] overflow-auto rounded-tl-12 border border-border-primary-light bg-bg-page-bg', className),
+        className: cn('[grid-area:remote] overflow-auto overscroll-none rounded-tl-12 border border-border-primary-light bg-bg-page-bg', className),
         children: children
     });
 };

package/dist/components/AppShell/story-content/_storyAccountDropdown.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from '../../ThemeProvider';
+export type SidebarMode = 'adaptive' | 'expanded';
+export declare const AccountDropdown: ({ sidebarMode, onSidebarModeChange, theme, onThemeChange, }: {
+    sidebarMode: SidebarMode;
+    onSidebarModeChange: (mode: SidebarMode) => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/story-content/_storyAccountDropdown.js

@@ -0,0 +1,189 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, LogOut, PanelLeftDashed, PencilRuler, Settings, User } from "../../../icons/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
+import { NavRailItem } from "../../NavRail/index.js";
+import { HStack, VStack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+const USER_NAME = 'Meow Meow';
+const USER_EMAIL = 'meow@meow.com';
+const THEME_LABELS = {
+    light: 'Light',
+    dark: 'Dark'
+};
+const SIDEBAR_MODE_LABELS = {
+    adaptive: 'Adaptive',
+    expanded: 'Always expanded'
+};
+const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChange })=>/*#__PURE__*/ jsxs(DropdownMenu, {
+        positioning: {
+            placement: 'right-end',
+            gutter: 8
+        },
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(NavRailItem, {
+                    icon: User,
+                    label: USER_NAME
+                })
+            }),
+            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                className: "w-256",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "rounded-6 border border-border-primary-light bg-states-primary-hover px-8 py-8 mb-4",
+                        children: /*#__PURE__*/ jsxs(HStack, {
+                            gap: 8,
+                            align: "start",
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    children: /*#__PURE__*/ jsx(User, {})
+                                }),
+                                /*#__PURE__*/ jsxs(VStack, {
+                                    gap: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            size: "sm",
+                                            color: "primary",
+                                            children: USER_NAME
+                                        }),
+                                        /*#__PURE__*/ jsx(Text, {
+                                            size: "xs",
+                                            color: "secondary",
+                                            children: USER_EMAIL
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(Settings, {})
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                children: "Profile settings"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsxs(DropdownMenuTriggerItem, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                        children: /*#__PURE__*/ jsx(PencilRuler, {})
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropdownMenuItemText, {
+                                        children: [
+                                            "Theme:",
+                                            ' ',
+                                            /*#__PURE__*/ jsx(Text, {
+                                                size: "sm",
+                                                weight: "medium",
+                                                style: {
+                                                    display: 'inline'
+                                                },
+                                                children: THEME_LABELS[theme]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                                className: "w-200",
+                                children: [
+                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                        onSelect: ()=>onThemeChange('light'),
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Light"
+                                            }),
+                                            'light' === theme && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
+                                                children: /*#__PURE__*/ jsx(Check, {})
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                        onSelect: ()=>onThemeChange('dark'),
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Dark"
+                                            }),
+                                            'dark' === theme && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
+                                                children: /*#__PURE__*/ jsx(Check, {})
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsxs(DropdownMenuTriggerItem, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                        children: /*#__PURE__*/ jsx(PanelLeftDashed, {})
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropdownMenuItemText, {
+                                        children: [
+                                            "Sidebar mode:",
+                                            ' ',
+                                            /*#__PURE__*/ jsx(Text, {
+                                                size: "sm",
+                                                weight: "medium",
+                                                style: {
+                                                    display: 'inline'
+                                                },
+                                                children: SIDEBAR_MODE_LABELS[sidebarMode]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                                className: "w-200",
+                                children: [
+                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                        onSelect: ()=>onSidebarModeChange('adaptive'),
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Adaptive"
+                                            }),
+                                            'adaptive' === sidebarMode && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
+                                                children: /*#__PURE__*/ jsx(Check, {})
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                        onSelect: ()=>onSidebarModeChange('expanded'),
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: "Always expanded"
+                                            }),
+                                            'expanded' === sidebarMode && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
+                                                children: /*#__PURE__*/ jsx(Check, {})
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(LogOut, {})
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                children: "Sign out"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+export { AccountDropdown };

package/dist/components/AppShell/story-content/_storyNavConfigs.js

@@ -43,30 +43,36 @@ const edgeNavConfig = {
                     type: 'link',
                     id: 'dp-overview',
                     label: 'Overview',
-                    path: 'overview'
+                    path: 'overview',
+                    icon: CircleDashed
                 },
                 {
                     type: 'link',
                     id: 'dp-nodes',
                     label: 'Nodes',
-                    path: 'nodes'
+                    path: 'nodes',
+                    icon: CircleDashed
                 },
                 {
                     type: 'link',
                     id: 'dp-services',
                     label: 'Services',
-                    path: 'services'
+                    path: 'services',
+                    icon: CircleDashed,
+                    dividerAfter: true
                 },
                 {
                     type: 'link',
                     id: 'dp-govern',
                     label: 'Govern',
-                    path: 'govern'
+                    path: 'govern',
+                    icon: CircleDashed
                 },
                 {
                     type: 'group',
                     id: 'dp-operations',
                     label: 'Operations',
+                    icon: CircleDashed,
                     children: [
                         {
                             type: 'link',
@@ -89,7 +95,8 @@ const edgeNavConfig = {
             id: 'dashboards',
             label: 'Dashboards',
             path: 'dashboards',
-            icon: CircleDashed
+            icon: CircleDashed,
+            dividerAfter: true
         },
         {
             type: 'section-header',

package/dist/components/AppShell/story-content/_storyQuickHelpDropdown.d.ts

@@ -0,0 +1 @@
+export declare const QuickHelpDropdown: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/story-content/_storyQuickHelpDropdown.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Activity, Book, CircleHelp, LifeBuoy, NotebookText, SquareArrowOutUpRight } from "../../../icons/index.js";
+import { Button } from "../../Button/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuTrigger } from "../../DropdownMenu/index.js";
+import { Text } from "../../Text/index.js";
+const QuickHelpDropdown = ()=>/*#__PURE__*/ jsxs(DropdownMenu, {
+        positioning: {
+            placement: 'bottom-end',
+            gutter: 4
+        },
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "small",
+                    color: "neutral",
+                    "aria-label": "Quick Help",
+                    children: /*#__PURE__*/ jsx(CircleHelp, {})
+                })
+            }),
+            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                className: "w-320",
+                children: [
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        onSelect: ()=>window.open('https://docs.wallarm.com/', '_blank'),
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(Book, {})
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                        children: "Documentation"
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "xs",
+                                        color: "secondary",
+                                        children: "Setup, deployment, and how-tos"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        onSelect: ()=>window.open('https://status.wallarm.com/', '_blank'),
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(Activity, {})
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                        children: "Service status"
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "xs",
+                                        color: "secondary",
+                                        children: "Live uptime and alerts"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        onSelect: ()=>window.open('mailto:support@wallarm.com'),
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(LifeBuoy, {})
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                        children: "Support"
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "xs",
+                                        color: "secondary",
+                                        children: "Talk to our team"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        onSelect: ()=>window.open('https://lab.wallarm.com', '_blank'),
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(NotebookText, {})
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                        children: "Blog"
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "xs",
+                                        color: "secondary",
+                                        children: "Security news and updates"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        onSelect: ()=>window.open('https://playground.wallarm.com', '_blank'),
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                children: /*#__PURE__*/ jsx(SquareArrowOutUpRight, {})
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                        children: "Wallarm Playground"
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "xs",
+                                        color: "secondary",
+                                        children: "Try the platform without any setup"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+export { QuickHelpDropdown };

package/dist/components/AppShell/story-content/index.d.ts

@@ -1,3 +1,5 @@
+export { AccountDropdown, type SidebarMode } from './_storyAccountDropdown';
 export { ConfigRemote } from './_storyConfigRenderer';
 export { HomeContent } from './_storyHomeContent';
 export { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig, } from './_storyNavConfigs';
+export { QuickHelpDropdown } from './_storyQuickHelpDropdown';

package/dist/components/AppShell/story-content/index.js

@@ -1,4 +1,6 @@
+import { AccountDropdown } from "./_storyAccountDropdown.js";
 import { ConfigRemote } from "./_storyConfigRenderer.js";
 import { HomeContent } from "./_storyHomeContent.js";
 import { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig } from "./_storyNavConfigs.js";
-export { ConfigRemote, HomeContent, aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig };
+import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
+export { AccountDropdown, ConfigRemote, HomeContent, QuickHelpDropdown, aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig };

package/dist/components/NavPanel/NavPanel.js

@@ -65,10 +65,10 @@ const NavPanel = ({ ref, className, children, resizable = false, 'data-testid':
                 style: {
                     width
                 },
-                className: cn('relative h-full shrink-0 border-r border-border-primary pt-8', isResizing && 'select-none', className),
+                className: cn('relative h-full shrink-0 border-r border-border-primary-light pt-8', isResizing && 'select-none', className),
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: "flex h-full flex-col gap-2 overflow-y-auto [scrollbar-width:thin] px-8 pb-8",
+                        className: "flex h-full flex-col gap-2 overflow-y-auto overscroll-none [scrollbar-width:thin] px-8 pb-8",
                         children: children
                     }),
                     /*#__PURE__*/ jsx(NavPanelResizeHandle, {})
@@ -84,7 +84,7 @@ const NavPanel = ({ ref, className, children, resizable = false, 'data-testid':
             "aria-label": ariaLabel,
             "data-slot": "nav-panel",
             "data-testid": testId,
-            className: cn('flex h-full w-[216px] shrink-0 flex-col gap-2 overflow-y-auto [scrollbar-width:thin] border-r border-border-primary p-8', className),
+            className: cn('flex h-full w-[216px] shrink-0 flex-col gap-2 overflow-y-auto overscroll-none [scrollbar-width:thin] border-r border-border-primary-light p-8', className),
             children: children
         })
     });

package/dist/components/NavPanel/NavPanelBack.js

@@ -11,7 +11,7 @@ const NavPanelBack = ({ ref, className, children, ...props })=>{
         type: "button",
         "data-slot": "nav-panel-back",
         "data-testid": testId,
-        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-secondary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-primary opacity-64 transition-colors outline-none hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
         children: [
             /*#__PURE__*/ jsx(CornerUpLeft, {
                 size: "md"

package/dist/components/NavPanel/NavPanelGroupContent.js

@@ -16,7 +16,7 @@ const NavPanelGroupContent = ({ ref, className, children, ...props })=>{
         className: cn('relative grid transition-[grid-template-rows] duration-150 ease-out', expanded ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr]', className),
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: "absolute top-0 bottom-0 w-px bg-border-primary",
+                className: "absolute top-0 bottom-0 w-px bg-border-primary-light",
                 style: {
                     left: 16 * depth + 8 * parentDepth
                 }

package/dist/components/NavPanel/NavPanelGroupLabel.js

@@ -20,7 +20,7 @@ const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=
         style: {
             paddingLeft: 8 + 24 * depth
         },
-        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-secondary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-primary opacity-64 transition-colors outline-none hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
         children: [
             Icon && /*#__PURE__*/ jsx("span", {
                 className: "flex shrink-0 items-center justify-center",
@@ -38,7 +38,7 @@ const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=
                 children: children
             }),
             /*#__PURE__*/ jsx(ChevronRight, {
-                size: "sm",
+                size: "xs",
                 className: cn('shrink-0 transition-transform duration-150', expanded && 'rotate-90')
             })
         ]

package/dist/components/NavPanel/NavPanelSectionHeader.js

@@ -9,7 +9,7 @@ const NavPanelSectionHeader = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "nav-panel-section-header",
         "data-testid": testId,
-        className: cn('flex shrink-0 items-center px-8 pt-6', className),
+        className: cn('flex h-26 shrink-0 items-center px-8 pt-8 pb-2', className),
         children: /*#__PURE__*/ jsx(Text, {
             size: "xs",
             weight: "medium",

package/dist/components/NavPanel/classes.js

@@ -1,20 +1,20 @@
 import { cva } from "class-variance-authority";
-const navPanelItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm transition-colors outline-none', {
+const navPanelItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-primary transition-colors outline-none', {
     variants: {
         active: {
-            true: 'overlay-states-primary-active font-semibold text-text-primary',
-            false: 'text-text-secondary hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            true: 'overlay-states-primary-active font-semibold',
+            false: 'opacity-64 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {
         active: false
     }
 });
-const navPanelGroupItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm transition-colors outline-none', {
+const navPanelGroupItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-primary transition-colors outline-none', {
     variants: {
         active: {
-            true: 'overlay-states-primary-active font-semibold text-text-primary',
-            false: 'text-text-secondary hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            true: 'overlay-states-primary-active font-semibold',
+            false: 'opacity-64 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {

package/dist/components/ProductNav/ProductNavPanel.js

@@ -3,17 +3,17 @@ import { NavPanel, NavPanelBack, NavPanelDivider, NavPanelGroup, NavPanelGroupCo
 import { findDrillNode } from "./navUtils.js";
 import { useProductNavContext } from "./ProductNavContext.js";
 function renderNavItems(items, activeItemId, onNavigate, onDrillClick, level = 'root') {
-    return items.map((item)=>{
+    const result = [];
+    for (const item of items){
         if ('link' === item.type) {
             const Item = 'group' === level ? NavPanelGroupItem : NavPanelItem;
-            return /*#__PURE__*/ jsx(Item, {
+            result.push(/*#__PURE__*/ jsx(Item, {
                 icon: item.icon,
                 active: activeItemId === item.id,
                 onClick: ()=>onNavigate(item.path),
                 children: item.label
-            }, item.id);
-        }
-        if ('group' === item.type) return /*#__PURE__*/ jsxs(NavPanelGroup, {
+            }, item.id));
+        } else if ('group' === item.type) result.push(/*#__PURE__*/ jsxs(NavPanelGroup, {
             defaultExpanded: item.defaultExpanded,
             children: [
                 /*#__PURE__*/ jsx(NavPanelGroupLabel, {
@@ -24,55 +24,53 @@ function renderNavItems(items, activeItemId, onNavigate, onDrillClick, level = '
                     children: renderNavItems(item.children, activeItemId, onNavigate, onDrillClick, 'group')
                 })
             ]
-        }, item.id);
-        if ('section-header' === item.type) return /*#__PURE__*/ jsx(NavPanelSectionHeader, {
+        }, item.id));
+        else if ('section-header' === item.type) result.push(/*#__PURE__*/ jsx(NavPanelSectionHeader, {
             children: item.label
-        }, item.id);
-        if ('drill' === item.type) {
+        }, item.id));
+        else if ('drill' === item.type) {
             const Item = 'group' === level ? NavPanelGroupItem : NavPanelItem;
-            return /*#__PURE__*/ jsx(Item, {
+            result.push(/*#__PURE__*/ jsx(Item, {
                 icon: item.icon,
                 active: activeItemId === item.id,
                 onClick: ()=>onDrillClick?.(item),
                 children: item.label
-            }, item.id);
+            }, item.id));
         }
-        return null;
-    });
+        if (item.dividerAfter) result.push(/*#__PURE__*/ jsx(NavPanelDivider, {}, `divider-${item.id}`));
+    }
+    return result;
 }
 const ProductNavPanel = ({ resizable })=>{
     const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack, drillLevel } = useProductNavContext();
     const currentEntry = navStack[Math.min(drillLevel, navStack.length - 1)];
-    if (0 === drillLevel) {
-        const itemsWithDividers = [];
-        for (const item of config.items){
-            itemsWithDividers.push(renderNavItems([
-                item
-            ], effectiveActiveItemId, navigate, drillInto));
-            if (item.dividerAfter) itemsWithDividers.push(/*#__PURE__*/ jsx(NavPanelDivider, {}, `divider-${item.id}`));
-        }
-        return /*#__PURE__*/ jsxs(NavPanel, {
-            resizable: resizable,
-            children: [
-                /*#__PURE__*/ jsx(NavPanelHeader, {
-                    children: config.productLabel
-                }),
-                itemsWithDividers
-            ]
-        });
-    }
+    if (0 === drillLevel) return /*#__PURE__*/ jsxs(NavPanel, {
+        resizable: resizable,
+        children: [
+            /*#__PURE__*/ jsx(NavPanelHeader, {
+                children: config.productLabel
+            }),
+            renderNavItems(config.items, effectiveActiveItemId, navigate, drillInto)
+        ]
+    });
     const parentEntry = navStack[drillLevel - 1];
     const drillNode = findDrillNode(parentEntry.items, parentEntry.activeItemId);
     const backLabel = drillNode?.label ?? 'Back';
     return /*#__PURE__*/ jsxs(NavPanel, {
         resizable: resizable,
         children: [
-            /*#__PURE__*/ jsx(NavPanelHeader, {
-                children: currentEntry.title
-            }),
-            /*#__PURE__*/ jsx(NavPanelBack, {
-                onClick: goBack,
-                children: backLabel
+            /*#__PURE__*/ jsxs("div", {
+                className: "sticky top-0 z-10 flex flex-col gap-2 bg-bg-surface-1",
+                children: [
+                    /*#__PURE__*/ jsx(NavPanelHeader, {
+                        children: currentEntry.title
+                    }),
+                    /*#__PURE__*/ jsx(NavPanelBack, {
+                        onClick: goBack,
+                        children: backLabel
+                    }),
+                    /*#__PURE__*/ jsx(NavPanelDivider, {})
+                ]
             }),
             renderNavItems(currentEntry.items, effectiveActiveItemId, navigate, drillInto)
         ]

package/dist/components/RemoteShell/RemoteShell.js

@@ -8,7 +8,7 @@ const RemoteShell = ({ ref, className, children, 'data-testid': testId, ...props
             ref: ref,
             "data-slot": "remote-shell",
             "data-testid": testId,
-            className: cn('grid h-full overflow-hidden [grid-template-areas:"panel_breadcrumb""panel_content"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr]', className),
+            className: cn('grid h-full overflow-hidden overscroll-none [grid-template-areas:"panel_breadcrumb""panel_content"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr]', className),
             children: children
         })
     });

package/dist/components/RemoteShell/RemoteShellContent.js

@@ -8,7 +8,7 @@ const RemoteShellContent = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "remote-shell-content",
         "data-testid": testId,
-        className: cn('[grid-area:content] min-h-0 overflow-auto px-24 py-16 [scrollbar-width:thin]', className),
+        className: cn('[grid-area:content] min-h-0 overflow-auto overscroll-none px-24 py-16 [scrollbar-width:thin]', className),
         children: children
     });
 };

package/dist/icons/Book.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const Book: FC<SvgIconProps>;

package/dist/icons/Book.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const Book = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M11 21C11 20.4696 10.7891 19.961 10.4141 19.5859C10.039 19.2109 9.53043 19 9 19H2C1.44772 19 1 18.5523 1 18V3C1 2.44772 1.44772 2 2 2H8C9.32608 2 10.5975 2.52716 11.5352 3.46484C11.7036 3.63332 11.8587 3.81256 12 4.00098C12.1413 3.81256 12.2964 3.63332 12.4648 3.46484C13.4025 2.52716 14.6739 2 16 2H22C22.5523 2 23 2.44772 23 3V18C23 18.5523 22.5523 19 22 19H15C14.4696 19 13.961 19.2109 13.5859 19.5859C13.2109 19.961 13 20.4696 13 21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21ZM3 17H9C9.70844 17 10.397 17.1889 11 17.5371V7C11 6.20435 10.6837 5.44152 10.1211 4.87891C9.55849 4.3163 8.79565 4 8 4H3V17ZM13 17.5371C13.603 17.1889 14.2916 17 15 17H21V4H16C15.2044 4 14.4415 4.3163 13.8789 4.87891C13.3163 5.44152 13 6.20435 13 7V17.5371Z",
+            fill: "currentColor"
+        })
+    });
+Book.displayName = 'BookIcon';
+export { Book };

package/dist/icons/LifeBuoy.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const LifeBuoy: FC<SvgIconProps>;

package/dist/icons/LifeBuoy.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const LifeBuoy = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M7 12C7 10.9808 7.30454 10.0327 7.82812 9.24219L4.96875 6.38281C3.73712 7.92249 3 9.87498 3 12C3 14.1247 3.7374 16.0766 4.96875 17.6162L7.82812 14.7568C7.30481 13.9665 7 13.0189 7 12ZM14.7568 16.1709C13.9664 16.6944 13.0191 17 12 17C10.9806 17 10.0327 16.6947 9.24219 16.1709L6.38281 19.0303C7.92256 20.2621 9.87476 21 12 21C14.125 21 16.0766 20.2619 17.6162 19.0303L14.7568 16.1709ZM12 3C9.87498 3 7.92249 3.73712 6.38281 4.96875L9.24219 7.82812C10.0327 7.30454 10.9808 7 12 7C13.0189 7 13.9665 7.30481 14.7568 7.82812L17.6162 4.96875C16.0766 3.7374 14.1247 3 12 3ZM9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3432 13.6568 9 12 9C10.3432 9 9.00001 10.3432 9 12ZM17 12C17 13.0191 16.6944 13.9664 16.1709 14.7568L19.0303 17.6162C20.2619 16.0766 21 14.125 21 12C21 9.87476 20.2621 7.92256 19.0303 6.38281L16.1709 9.24219C16.6947 10.0327 17 10.9807 17 12ZM23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12Z",
+            fill: "currentColor"
+        })
+    });
+LifeBuoy.displayName = 'LifeBuoyIcon';
+export { LifeBuoy };

package/dist/icons/LogOut.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const LogOut: FC<SvgIconProps>;

package/dist/icons/LogOut.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const LogOut = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M9 2C9.55228 2 10 2.44772 10 3C10 3.55228 9.55228 4 9 4H5C4.73478 4 4.4805 4.10543 4.29297 4.29297C4.10543 4.4805 4 4.73478 4 5V19C4 19.2652 4.10543 19.5195 4.29297 19.707C4.48051 19.8946 4.73478 20 5 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H5C4.20435 22 3.44152 21.6837 2.87891 21.1211C2.3163 20.5585 2 19.7957 2 19V5C2 4.20435 2.3163 3.44152 2.87891 2.87891C3.44152 2.3163 4.20435 2 5 2H9ZM15.293 6.29297C15.6835 5.90244 16.3165 5.90244 16.707 6.29297L21.707 11.293C21.7548 11.3408 21.7976 11.3935 21.835 11.4502C21.8597 11.4877 21.8812 11.5266 21.9004 11.5664C21.9222 11.6116 21.9412 11.6584 21.9561 11.707C21.9623 11.7273 21.9668 11.748 21.9717 11.7686C21.9893 11.8429 22 11.9202 22 12C22 12.0563 21.9933 12.1112 21.9844 12.165C21.9772 12.2078 21.9688 12.2503 21.9561 12.292C21.9412 12.3407 21.9222 12.3874 21.9004 12.4326C21.8936 12.4468 21.8864 12.4607 21.8789 12.4746C21.851 12.5262 21.8184 12.5745 21.7822 12.6201C21.7586 12.6498 21.7345 12.6796 21.707 12.707L16.707 17.707C16.3165 18.0976 15.6835 18.0976 15.293 17.707C14.9024 17.3165 14.9024 16.6835 15.293 16.293L18.5859 13H9C8.44772 13 8 12.5523 8 12C8 11.4477 8.44772 11 9 11H18.5859L15.293 7.70703C14.9024 7.31651 14.9024 6.68349 15.293 6.29297Z",
+            fill: "currentColor"
+        })
+    });
+LogOut.displayName = 'LogOutIcon';
+export { LogOut };

package/dist/icons/NotebookText.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const NotebookText: FC<SvgIconProps>;

package/dist/icons/NotebookText.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const NotebookText = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M19 4C19 3.44772 18.5523 3 18 3H6C5.44772 3 5 3.44772 5 4V5H6C6.55228 5 7 5.44772 7 6C7 6.55228 6.55228 7 6 7H5V9H6C6.55228 9 7 9.44771 7 10C7 10.5523 6.55228 11 6 11H5V13H6C6.55228 13 7 13.4477 7 14C7 14.5523 6.55228 15 6 15H5V17H6C6.55228 17 7 17.4477 7 18C7 18.5523 6.55228 19 6 19H5V20C5 20.5523 5.44771 21 6 21H18C18.5523 21 19 20.5523 19 20V4ZM14 15C14.5523 15 15 15.4477 15 16C15 16.5523 14.5523 17 14 17H9.5C8.94772 17 8.5 16.5523 8.5 16C8.5 15.4477 8.94772 15 9.5 15H14ZM16 11C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H9.5C8.94772 13 8.5 12.5523 8.5 12C8.5 11.4477 8.94772 11 9.5 11H16ZM14.5 7C15.0523 7 15.5 7.44772 15.5 8C15.5 8.55228 15.0523 9 14.5 9H9.5C8.94772 9 8.5 8.55228 8.5 8C8.5 7.44772 8.94772 7 9.5 7H14.5ZM21 20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V19H2C1.44772 19 1 18.5523 1 18C1 17.4477 1.44772 17 2 17H3V15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H3V11H2C1.44772 11 1 10.5523 1 10C1 9.44771 1.44772 9 2 9H3V7H2C1.44772 7 1 6.55228 1 6C1 5.44772 1.44772 5 2 5H3V4C3 2.34315 4.34315 1 6 1H18C19.6569 1 21 2.34315 21 4V20Z",
+            fill: "currentColor"
+        })
+    });
+NotebookText.displayName = 'NotebookTextIcon';
+export { NotebookText };

package/dist/icons/PanelLeftDashed.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const PanelLeftDashed: FC<SvgIconProps>;

package/dist/icons/PanelLeftDashed.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const PanelLeftDashed = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M8 15V14C8 13.4477 8.44772 13 9 13C9.55228 13 10 13.4477 10 14V15C10 15.5523 9.55228 16 9 16C8.44772 16 8 15.5523 8 15ZM8 10V9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9V10C10 10.5523 9.55228 11 9 11C8.44772 11 8 10.5523 8 10ZM8 5V4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44771 20 5 20H8V19C8 18.4477 8.44772 18 9 18C9.55228 18 10 18.4477 10 19V20H19C19.5523 20 20 19.5523 20 19V5C20 4.44771 19.5523 4 19 4H10V5C10 5.55228 9.55228 6 9 6C8.44772 6 8 5.55228 8 5ZM22 19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19Z",
+            fill: "currentColor"
+        })
+    });
+PanelLeftDashed.displayName = 'PanelLeftDashedIcon';
+export { PanelLeftDashed };

package/dist/icons/index.d.ts

@@ -11,6 +11,7 @@ export { ArrowUp } from './ArrowUp';
 export { ArrowUpLeft } from './ArrowUpLeft';
 export { ArrowUpRight } from './ArrowUpRight';
 export { Bell } from './Bell';
+export { Book } from './Book';
 export { Calendar } from './Calendar';
 export { CalendarCheck } from './CalendarCheck';
 export { CalendarCheck2 } from './CalendarCheck2';
@@ -109,11 +110,13 @@ export { LayoutPanelLeft } from './LayoutPanelLeft';
 export { LayoutPanelTop } from './LayoutPanelTop';
 export { LayoutTemplate } from './LayoutTemplate';
 export { LibraryBig } from './LibraryBig';
+export { LifeBuoy } from './LifeBuoy';
 export { Link } from './Link';
 export { Loader } from './Loader';
 export { LoaderCircle } from './LoaderCircle';
 export { Lock } from './Lock';
 export { LockOpen } from './LockOpen';
+export { LogOut } from './LogOut';
 export { MapPin } from './MapPin';
 export { Maximize } from './Maximize';
 export { Maximize2 } from './Maximize2';
@@ -131,10 +134,12 @@ export { MoveDown } from './MoveDown';
 export { MoveUp } from './MoveUp';
 export { MoveVertical } from './MoveVertical';
 export { NotebookPen } from './NotebookPen';
+export { NotebookText } from './NotebookText';
 export { NotepadText } from './NotepadText';
 export { OctagonAlert } from './OctagonAlert';
 export { PanelBottom } from './PanelBottom';
 export { PanelBottomOpen } from './PanelBottomOpen';
+export { PanelLeftDashed } from './PanelLeftDashed';
 export { PanelRight } from './PanelRight';
 export { PanelRightAnimated, type PanelRightAnimatedProps } from './PanelRightAnimated';
 export { PanelRightClose } from './PanelRightClose';

package/dist/icons/index.js

@@ -11,6 +11,7 @@ import { ArrowUp } from "./ArrowUp.js";
 import { ArrowUpLeft } from "./ArrowUpLeft.js";
 import { ArrowUpRight } from "./ArrowUpRight.js";
 import { Bell } from "./Bell.js";
+import { Book } from "./Book.js";
 import { Calendar } from "./Calendar.js";
 import { CalendarCheck } from "./CalendarCheck.js";
 import { CalendarCheck2 } from "./CalendarCheck2.js";
@@ -109,11 +110,13 @@ import { LayoutPanelLeft } from "./LayoutPanelLeft.js";
 import { LayoutPanelTop } from "./LayoutPanelTop.js";
 import { LayoutTemplate } from "./LayoutTemplate.js";
 import { LibraryBig } from "./LibraryBig.js";
+import { LifeBuoy } from "./LifeBuoy.js";
 import { Link } from "./Link.js";
 import { Loader } from "./Loader.js";
 import { LoaderCircle } from "./LoaderCircle.js";
 import { Lock } from "./Lock.js";
 import { LockOpen } from "./LockOpen.js";
+import { LogOut } from "./LogOut.js";
 import { MapPin } from "./MapPin.js";
 import { Maximize } from "./Maximize.js";
 import { Maximize2 } from "./Maximize2.js";
@@ -131,10 +134,12 @@ import { MoveDown } from "./MoveDown.js";
 import { MoveUp } from "./MoveUp.js";
 import { MoveVertical } from "./MoveVertical.js";
 import { NotebookPen } from "./NotebookPen.js";
+import { NotebookText } from "./NotebookText.js";
 import { NotepadText } from "./NotepadText.js";
 import { OctagonAlert } from "./OctagonAlert.js";
 import { PanelBottom } from "./PanelBottom.js";
 import { PanelBottomOpen } from "./PanelBottomOpen.js";
+import { PanelLeftDashed } from "./PanelLeftDashed.js";
 import { PanelRight } from "./PanelRight.js";
 import { PanelRightAnimated } from "./PanelRightAnimated.js";
 import { PanelRightClose } from "./PanelRightClose.js";
@@ -180,4 +185,4 @@ import { X } from "./X.js";
 import { Zap } from "./Zap.js";
 import { ZoomIn } from "./ZoomIn.js";
 import { ZoomOut } from "./ZoomOut.js";
-export { Activity, Alt, ArrowBigUp, ArrowBigUpDash, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Bell, Calendar, CalendarCheck, CalendarCheck2, CalendarClock, CalendarCog, CalendarDays, CalendarFold, CalendarHeart, CalendarMinus, CalendarMinus2, CalendarOff, CalendarPlus, CalendarPlus2, CalendarRange, CalendarSearch, CalendarX, CalendarX2, Check, CheckCheck, CheckboxIndeterminate, ChevronDown, ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, ChevronUp, ChevronUpDown, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Circle, CircleArrowDown, CircleArrowLeft, CircleArrowOutDownLeft, CircleArrowOutDownRight, CircleArrowOutUpLeft, CircleArrowOutUpRight, CircleArrowRight, CircleArrowUp, CircleCheck, CircleCheckBig, CircleChevronDown, CircleChevronLeft, CircleChevronRight, CircleChevronUp, CircleDashed, CircleDotDashed, CircleEllipsis, CircleHelp, CirclePlus, Clock, Command, Copy, CornerUpLeft, CornerUpRight, Ctrl, Dot, Earth, EarthLock, Ellipsis, EyeOff, Filter, FilterX, Folder, FunnelPlus, GitCommitHorizontal, GitCommitVertical, GitCompare, GitCompareArrows, GitFork, GitGraph, GitMerge, GitPullRequest, GitPullRequestArrow, GitPullRequestClosed, GitPullRequestCreate, GitPullRequestCreateArrow, GitPullRequestDraft, Globe, GlobeLock, GripVertical, History, Home, Info, KeyRound, KeySquare, Keyboard, Layers, Layers2, Layers3, LayoutDashboard, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutPanelTop, LayoutTemplate, LibraryBig, Link, Loader, LoaderCircle, Lock, LockOpen, MapPin, Maximize, Maximize2, Megaphone, MegaphoneOff, MessageSquare, MessageSquareText, MessageSquareWarning, MessageSquareX, MessagesSquare, Minus, Mouse, Move3D, MoveDown, MoveUp, MoveVertical, NotebookPen, NotepadText, OctagonAlert, PanelBottom, PanelBottomOpen, PanelRight, PanelRightAnimated, PanelRightClose, PanelRightDashed, PanelRightOpen, Paperclip, Pen, PenLine, PenOff, PenTool, Pencil, PencilLine, PencilOff, PencilRuler, Pentagon, Pin, PinOff, Plus, Quote, Redo, Redo2, RedoDot, RefreshCcw, RefreshCwOff, Search, Settings, Sheet, Shift, Skull, SlidersHorizontal, SlidersVertical, Space, SquareArrowOutUpRight, Trash, Trash2, TriangleAlert, Undo, Undo2, UndoDot, User, Wrench, X, Zap, ZoomIn, ZoomOut };
+export { Activity, Alt, ArrowBigUp, ArrowBigUpDash, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Bell, Book, Calendar, CalendarCheck, CalendarCheck2, CalendarClock, CalendarCog, CalendarDays, CalendarFold, CalendarHeart, CalendarMinus, CalendarMinus2, CalendarOff, CalendarPlus, CalendarPlus2, CalendarRange, CalendarSearch, CalendarX, CalendarX2, Check, CheckCheck, CheckboxIndeterminate, ChevronDown, ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, ChevronUp, ChevronUpDown, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Circle, CircleArrowDown, CircleArrowLeft, CircleArrowOutDownLeft, CircleArrowOutDownRight, CircleArrowOutUpLeft, CircleArrowOutUpRight, CircleArrowRight, CircleArrowUp, CircleCheck, CircleCheckBig, CircleChevronDown, CircleChevronLeft, CircleChevronRight, CircleChevronUp, CircleDashed, CircleDotDashed, CircleEllipsis, CircleHelp, CirclePlus, Clock, Command, Copy, CornerUpLeft, CornerUpRight, Ctrl, Dot, Earth, EarthLock, Ellipsis, EyeOff, Filter, FilterX, Folder, FunnelPlus, GitCommitHorizontal, GitCommitVertical, GitCompare, GitCompareArrows, GitFork, GitGraph, GitMerge, GitPullRequest, GitPullRequestArrow, GitPullRequestClosed, GitPullRequestCreate, GitPullRequestCreateArrow, GitPullRequestDraft, Globe, GlobeLock, GripVertical, History, Home, Info, KeyRound, KeySquare, Keyboard, Layers, Layers2, Layers3, LayoutDashboard, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutPanelTop, LayoutTemplate, LibraryBig, LifeBuoy, Link, Loader, LoaderCircle, Lock, LockOpen, LogOut, MapPin, Maximize, Maximize2, Megaphone, MegaphoneOff, MessageSquare, MessageSquareText, MessageSquareWarning, MessageSquareX, MessagesSquare, Minus, Mouse, Move3D, MoveDown, MoveUp, MoveVertical, NotebookPen, NotebookText, NotepadText, OctagonAlert, PanelBottom, PanelBottomOpen, PanelLeftDashed, PanelRight, PanelRightAnimated, PanelRightClose, PanelRightDashed, PanelRightOpen, Paperclip, Pen, PenLine, PenOff, PenTool, Pencil, PencilLine, PencilOff, PencilRuler, Pentagon, Pin, PinOff, Plus, Quote, Redo, Redo2, RedoDot, RefreshCcw, RefreshCwOff, Search, Settings, Sheet, Shift, Skull, SlidersHorizontal, SlidersVertical, Space, SquareArrowOutUpRight, Trash, Trash2, TriangleAlert, Undo, Undo2, UndoDot, User, Wrench, X, Zap, ZoomIn, ZoomOut };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.45.1",
-  "generatedAt": "2026-05-25T17:50:50.832Z",
+  "version": "0.46.0",
+  "generatedAt": "2026-05-26T00:20:03.149Z",
   "components": [
     {
       "name": "Accordion",
@@ -4436,7 +4436,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <Logo size='md' />\n          </TopHeaderLogo>\n          <TopHeaderActions>\n            <Button variant='ghost' size='small' color='neutral'>\n              <Code size='s' color='secondary'>\n                Search Wallarm\n              </Code>\n              <Kbd size='small'>⌘K</Kbd>\n            </Button>\n            <TopHeaderSeparator />\n            <Button variant='ghost' size='small' color='neutral'>\n              Tenant Name\n              <Code size='s' color='secondary'>\n                · 12345\n              </Code>\n              <ChevronDown size='sm' />\n            </Button>\n            <Button variant='ghost' size='small' color='neutral' aria-label='Notifications'>\n              <Bell size='sm' />\n            </Button>\n            <Button variant='ghost' size='small' color='neutral' aria-label='Help'>\n              <CircleHelp size='sm' />\n            </Button>\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <NavRailSeparator />\n            <NavRailItem\n              icon={CircleDashed}\n              label='Edge'\n              shortcut={['G', 'E']}\n              active={activeProduct === 'edge'}\n              onClick={() => navigateToProduct('edge')}\n            />\n            <NavRailItem\n              icon={CircleDashed}\n              label='AI Hypervisor'\n              shortcut={['G', 'A']}\n              active={activeProduct === 'ai-hypervisor'}\n              onClick={() => navigateToProduct('ai-hypervisor')}\n            />\n            <NavRailItem\n              icon={CircleDashed}\n              label='Infra Discovery'\n              shortcut={['G', 'I']}\n              active={activeProduct === 'infra-discovery'}\n              onClick={() => navigateToProduct('infra-discovery')}\n            />\n            <NavRailItem\n              icon={CircleDashed}\n              label='Security Testing'\n              shortcut={['G', 'T']}\n              active={activeProduct === 'security-testing'}\n              onClick={() => navigateToProduct('security-testing')}\n            />\n          </NavRailBody>\n          <NavRailFooter>\n            <NavRailItem\n              icon={Settings}\n              label='Settings'\n              shortcut={['G', 'S']}\n              active={activeProduct === 'settings'}\n              onClick={() => navigateToProduct('settings')}\n            />\n            <AccountDropdown sidebarMode={sidebarMode} onSidebarModeChange={setSidebarMode} />\n          </NavRailFooter>\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}"
+          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <Logo size='md' />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            <Button variant='ghost' size='small' color='neutral'>\n              <Code size='s' color='secondary'>\n                Search Wallarm\n              </Code>\n              <Kbd size='small'>⌘K</Kbd>\n            </Button>\n\n            <TopHeaderSeparator />\n\n            <Button variant='ghost' size='small' color='neutral'>\n              <Text size='xs' weight='medium'>\n                Tenant Name\n              </Text>\n              <span className='text-text-tertiary'>•</span>\n              <Code size='s' color='secondary'>\n                12345\n              </Code>\n              <ChevronUpDown className='!icon-sm' />\n            </Button>\n\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant='ghost' size='small' color='neutral' aria-label='Wallarm Updates'>\n                  <Bell />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Wallarm updates</TooltipContent>\n            </Tooltip>\n\n            <QuickHelpDropdown />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <NavRailSeparator />\n            <NavRailItem\n              icon={CircleDashed}\n              label='Edge'\n              shortcut={['G', 'E']}\n              active={activeProduct === 'edge'}\n              onClick={() => navigateToProduct('edge')}\n            />\n            <NavRailItem\n              icon={CircleDashed}\n              label='AI Hypervisor'\n              shortcut={['G', 'A']}\n              active={activeProduct === 'ai-hypervisor'}\n              onClick={() => navigateToProduct('ai-hypervisor')}\n            />\n            <NavRailItem\n              icon={CircleDashed}\n              label='Infra Discovery'\n              shortcut={['G', 'I']}\n              active={activeProduct === 'infra-discovery'}\n              onClick={() => navigateToProduct('infra-discovery')}\n            />\n            <NavRailItem\n              icon={CircleDashed}\n              label='Security Testing'\n              shortcut={['G', 'T']}\n              active={activeProduct === 'security-testing'}\n              onClick={() => navigateToProduct('security-testing')}\n            />\n          </NavRailBody>\n          <NavRailFooter>\n            <NavRailItem\n              icon={Settings}\n              label='Settings'\n              shortcut={['G', 'S']}\n              active={activeProduct === 'settings'}\n              onClick={() => navigateToProduct('settings')}\n            />\n            <AccountDropdown\n              sidebarMode={sidebarMode}\n              onSidebarModeChange={setSidebarMode}\n              theme={theme}\n              onThemeChange={setTheme}\n            />\n          </NavRailFooter>\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}"
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.46.0-rc-feature-progress.1",
+  "version": "0.47.0-rc-feature-shell.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",