@wallarm-org/design-system 1.18.2 → 1.20.0

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

@@ -7,6 +7,7 @@ import { EmptyState, EmptyStateDescription, EmptyStateMessage } from "../../Empt
 import { Kbd } from "../../Kbd/index.js";
 import { SearchModal, SearchModalBody, SearchModalContent, SearchModalEmpty, SearchModalFooter, SearchModalGroup, SearchModalGroupLabel, SearchModalInput, SearchModalItem, SearchModalTrigger } from "../../SearchModal/index.js";
 import { Text } from "../../Text/index.js";
+import { WallyIcon } from "../../WallyIcon/index.js";
 const recentItems = [
     {
         page: 'Attacks',
@@ -130,9 +131,9 @@ const StorySearchModal = ()=>{
                                     /*#__PURE__*/ jsxs(SearchModalItem, {
                                         onSelect: ()=>{},
                                         children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: "text-lg",
-                                                children: "\uD83D\uDC36"
+                                            /*#__PURE__*/ jsx(WallyIcon, {
+                                                variant: "circle",
+                                                size: "sm"
                                             }),
                                             /*#__PURE__*/ jsx(Text, {
                                                 size: "sm",
@@ -184,7 +185,7 @@ const StorySearchModal = ()=>{
                                             onSelect: ()=>{},
                                             children: [
                                                 /*#__PURE__*/ jsx(LoaderCircle, {
-                                                    className: "text-text-tertiary shrink-0 !icon-md"
+                                                    className: "text-text-primary shrink-0 !icon-md"
                                                 }),
                                                 /*#__PURE__*/ jsxs(Text, {
                                                     size: "sm",
@@ -230,7 +231,7 @@ const StorySearchModal = ()=>{
                                             onSelect: ()=>{},
                                             children: [
                                                 /*#__PURE__*/ jsx(LoaderCircle, {
-                                                    className: "text-text-tertiary shrink-0 !icon-md"
+                                                    className: "text-text-primary shrink-0 !icon-md"
                                                 }),
                                                 /*#__PURE__*/ jsx(Text, {
                                                     size: "sm",

package/dist/components/CopyButton/CopyButton.js

@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
 import { useCopyTooltip } from "../../hooks/index.js";
 import { Check, Copy } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/mergeRefs.js";
 import { Button } from "../Button/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
-const CopyButton = ({ text, label, copiedLabel = 'Copied', tooltipText = 'Click to copy', copiedTooltipText = 'Copied', onClick, variant = 'ghost', color = 'neutral', size, style, ref, ...props })=>{
+const CopyButton = ({ text, label, copiedLabel = 'Copied', tooltipText = 'Click to copy', copiedTooltipText = 'Copied', onClick, variant = 'ghost', color = 'neutral', size, style, className, ref, ...props })=>{
     const { copied, tooltipOpen, onTooltipOpenChange, handleCopy } = useCopyTooltip({
         text
     });
@@ -36,6 +37,7 @@ const CopyButton = ({ text, label, copiedLabel = 'Copied', tooltipText = 'Click
                     color: color,
                     size: resolvedSize,
                     "aria-label": label ?? 'Copy',
+                    className: cn(label ? 'justify-start px-12' : 'px-3', className),
                     "data-slot": "copy-button",
                     ...props,
                     onClick: handleClick,

package/dist/components/Resizable/ResizableHandle.d.ts

@@ -3,7 +3,5 @@ import { type SeparatorProps } from 'react-resizable-panels';
 import { type TestableProps } from '../../utils/testId';
 export interface ResizableHandleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'role' | 'tabIndex'>, Pick<SeparatorProps, 'disabled' | 'disableDoubleClick'>, TestableProps {
     ref?: Ref<HTMLDivElement>;
-    /** Show a visible grip icon on the handle. */
-    withHandle?: boolean;
 }
 export declare const ResizableHandle: FC<ResizableHandleProps>;

package/dist/components/Resizable/ResizableHandle.js

@@ -1,11 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { Separator } from "react-resizable-panels";
-import { GripVertical } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-import { resizableHandleGripVariants, resizableHandleVariants } from "./classes.js";
+import { resizableHandleVariants } from "./classes.js";
 import { useResizableContext } from "./ResizableContext.js";
-const ResizableHandle = ({ ref, className, withHandle = false, 'data-testid': testIdProp, ...props })=>{
+const ResizableHandle = ({ ref, className, 'data-testid': testIdProp, ...props })=>{
     const testId = useTestId('handle', testIdProp);
     const { orientation } = useResizableContext();
     return /*#__PURE__*/ jsx(Separator, {
@@ -15,14 +14,7 @@ const ResizableHandle = ({ ref, className, withHandle = false, 'data-testid': te
         "data-testid": testId,
         className: cn(resizableHandleVariants({
             orientation
-        }), className),
-        children: withHandle && /*#__PURE__*/ jsx("div", {
-            className: resizableHandleGripVariants(),
-            "data-slot": "resizable-handle-grip",
-            children: /*#__PURE__*/ jsx(GripVertical, {
-                className: "size-10"
-            })
-        })
+        }), className)
     });
 };
 ResizableHandle.displayName = 'ResizableHandle';

package/dist/components/Resizable/classes.d.ts

@@ -1,4 +1,3 @@
 export declare const resizableHandleVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const resizableHandleGripVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Resizable/classes.js

@@ -3,13 +3,12 @@ import { cn } from "../../utils/cn.js";
 const resizableHandleVariants = cva(cn('relative', 'flex items-center justify-center', 'outline-none', 'bg-border-primary', 'before:absolute before:content-[""]', 'before:rounded-full', 'before:bg-bg-fill-brand', 'before:opacity-0', 'before:transition-opacity before:duration-150', 'after:absolute after:content-[""]', 'after:z-10', 'hover:before:opacity-100', 'data-[separator=active]:before:opacity-100', 'focus-visible:before:opacity-100', 'focus-visible:ring-2 focus-visible:ring-focus-primary focus-visible:ring-offset-0'), {
     variants: {
         orientation: {
-            horizontal: cn('w-px', 'cursor-col-resize', 'before:w-3 before:inset-y-0', 'after:inset-y-0 after:-inset-x-6', '[&>[data-slot=resizable-handle-grip]]:rotate-0'),
-            vertical: cn('h-px', 'cursor-row-resize', 'before:h-3 before:inset-x-0', 'after:inset-x-0 after:-inset-y-6', '[&>[data-slot=resizable-handle-grip]]:rotate-90')
+            horizontal: cn('w-px', 'cursor-col-resize', 'before:w-3 before:inset-y-0', 'after:inset-y-0 after:-inset-x-6'),
+            vertical: cn('h-px', 'cursor-row-resize', 'before:h-3 before:inset-x-0', 'after:inset-x-0 after:-inset-y-6')
         }
     },
     defaultVariants: {
         orientation: 'horizontal'
     }
 });
-const resizableHandleGripVariants = cva(cn('z-20', 'flex items-center justify-center', 'size-12', 'rounded-4', 'border border-border-primary', 'bg-bg-surface-2', 'text-text-secondary'));
-export { resizableHandleGripVariants, resizableHandleVariants };
+export { resizableHandleVariants };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,4 +1,7 @@
+import type { FC, Ref } from 'react';
 import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
 import { type TestableProps } from '../../utils/testId';
-export type ScrollAreaProps = ArkUiScrollArea.RootProps & TestableProps;
-export declare const ScrollArea: import("react").ForwardRefExoticComponent<ArkUiScrollArea.RootProps & TestableProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ScrollAreaProps = ArkUiScrollArea.RootProps & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const ScrollArea: FC<ScrollAreaProps>;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ScrollArea } from "@ark-ui/react/scroll-area";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-const ScrollArea_ScrollArea = /*#__PURE__*/ forwardRef(({ className, 'data-testid': testId, children, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Root, {
+const ScrollArea_ScrollArea = ({ className, ref, 'data-testid': testId, children, ...props })=>/*#__PURE__*/ jsx(ScrollArea.Root, {
         ...props,
         ref: ref,
         "data-testid": testId,
@@ -12,6 +11,6 @@ const ScrollArea_ScrollArea = /*#__PURE__*/ forwardRef(({ className, 'data-testi
             value: testId,
             children: children
         })
-    }));
+    });
 ScrollArea_ScrollArea.displayName = 'ScrollArea';
 export { ScrollArea_ScrollArea as ScrollArea };

package/dist/components/ScrollArea/ScrollAreaContent.d.ts

@@ -1,4 +1,7 @@
-import type { FC } from 'react';
+import type { FC, Ref } from 'react';
 import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
-export type ScrollAreaContentProps = ArkUiScrollArea.ContentProps;
+import { type TestableProps } from '../../utils/testId';
+export type ScrollAreaContentProps = ArkUiScrollArea.ContentProps & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
 export declare const ScrollAreaContent: FC<ScrollAreaContentProps>;

package/dist/components/ScrollArea/ScrollAreaContent.js

@@ -2,10 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { ScrollArea } from "@ark-ui/react/scroll-area";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const ScrollAreaContent = ({ className, ...props })=>{
-    const testId = useTestId('content');
+const ScrollAreaContent = ({ className, ref, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('content', testIdProp);
     return /*#__PURE__*/ jsx(ScrollArea.Content, {
         ...props,
+        ref: ref,
         "data-testid": testId,
         className: cn('h-full outline-none', className)
     });

package/dist/components/ScrollArea/ScrollAreaCorner.d.ts

@@ -1,4 +1,7 @@
-import type { FC } from 'react';
+import type { FC, Ref } from 'react';
 import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
-export type ScrollAreaCornerProps = ArkUiScrollArea.CornerProps;
+import { type TestableProps } from '../../utils/testId';
+export type ScrollAreaCornerProps = ArkUiScrollArea.CornerProps & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
 export declare const ScrollAreaCorner: FC<ScrollAreaCornerProps>;

package/dist/components/ScrollArea/ScrollAreaCorner.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { ScrollArea } from "@ark-ui/react/scroll-area";
 import { useTestId } from "../../utils/testId.js";
-const ScrollAreaCorner = (props)=>{
-    const testId = useTestId('corner');
+const ScrollAreaCorner = ({ ref, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('corner', testIdProp);
     return /*#__PURE__*/ jsx(ScrollArea.Corner, {
         ...props,
+        ref: ref,
         "data-testid": testId
     });
 };

package/dist/components/ScrollArea/ScrollAreaScrollbar.d.ts

@@ -1,4 +1,7 @@
-import { type FC } from 'react';
+import { type FC, type Ref } from 'react';
 import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
-export type ScrollAreaScrollbarProps = Omit<ArkUiScrollArea.ScrollbarProps, 'className' | 'style'>;
+import { type TestableProps } from '../../utils/testId';
+export type ScrollAreaScrollbarProps = Omit<ArkUiScrollArea.ScrollbarProps, 'className' | 'style'> & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
 export declare const ScrollAreaScrollbar: FC<ScrollAreaScrollbarProps>;

package/dist/components/ScrollArea/ScrollAreaScrollbar.js

@@ -20,8 +20,8 @@ const scrollAreaScrollbarThumbVariants = cva('bg-badge-slate-dark-alt opacity-0
         }
     }
 });
-const ScrollAreaScrollbar = ({ orientation = 'vertical', ...props })=>{
-    const testId = useTestId('scrollbar');
+const ScrollAreaScrollbar = ({ orientation = 'vertical', ref, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('scrollbar', testIdProp);
     const scrollbarStyle = useMemo(()=>{
         if ('horizontal' === orientation) return {
             left: 4,
@@ -37,6 +37,7 @@ const ScrollAreaScrollbar = ({ orientation = 'vertical', ...props })=>{
     ]);
     return /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
         ...props,
+        ref: ref,
         style: scrollbarStyle,
         "data-testid": testId,
         orientation: orientation,

package/dist/components/ScrollArea/ScrollAreaViewport.d.ts

@@ -1,6 +1,7 @@
 import type { FC, Ref } from 'react';
 import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
-export type ScrollAreaViewportProps = Omit<ArkUiScrollArea.ViewportProps, 'className'> & {
+import { type TestableProps } from '../../utils/testId';
+export type ScrollAreaViewportProps = Omit<ArkUiScrollArea.ViewportProps, 'className'> & TestableProps & {
     ref?: Ref<HTMLDivElement>;
 };
 export declare const ScrollAreaViewport: FC<ScrollAreaViewportProps>;

package/dist/components/ScrollArea/ScrollAreaViewport.js

@@ -2,10 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { ScrollArea } from "@ark-ui/react/scroll-area";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const ScrollAreaViewport = (props)=>{
-    const testId = useTestId('viewport');
+const ScrollAreaViewport = ({ ref, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('viewport', testIdProp);
     return /*#__PURE__*/ jsx(ScrollArea.Viewport, {
         ...props,
+        ref: ref,
         "data-testid": testId,
         className: cn('h-full outline-none')
     });

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

@@ -1,5 +1,5 @@
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea';
 export { ScrollAreaContent, type ScrollAreaContentProps, } from './ScrollAreaContent';
-export { ScrollAreaCorner } from './ScrollAreaCorner';
+export { ScrollAreaCorner, type ScrollAreaCornerProps } from './ScrollAreaCorner';
 export { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, } from './ScrollAreaScrollbar';
 export { ScrollAreaViewport, type ScrollAreaViewportProps, } from './ScrollAreaViewport';

package/dist/components/SearchModal/SearchModalEmpty.js

@@ -8,7 +8,7 @@ const SearchModalEmpty = ({ ref, children, className, ...props })=>{
         ref: ref,
         "data-slot": "search-modal-empty",
         "data-testid": testId,
-        className: cn('pb-8', className),
+        className: cn('px-8 py-8', className),
         children: children
     });
 };

package/dist/components/SearchModal/SearchModalFooter.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, CornerDownLeft } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { Kbd } from "../Kbd/index.js";
 import { Text } from "../Text/index.js";
 import { searchModalFooterVariants } from "./classes.js";
 const SearchModalFooter = ({ ref, children, className, ...props })=>{
@@ -17,11 +18,17 @@ const SearchModalFooter = ({ ref, children, className, ...props })=>{
                 /*#__PURE__*/ jsxs("span", {
                     className: "inline-flex items-center gap-4",
                     children: [
-                        /*#__PURE__*/ jsx(ArrowUp, {
-                            className: "text-text-tertiary !icon-sm"
+                        /*#__PURE__*/ jsx(Kbd, {
+                            size: "xsmall",
+                            children: /*#__PURE__*/ jsx(ArrowUp, {
+                                className: "!icon-xs"
+                            })
                         }),
-                        /*#__PURE__*/ jsx(ArrowDown, {
-                            className: "text-text-tertiary !icon-sm"
+                        /*#__PURE__*/ jsx(Kbd, {
+                            size: "xsmall",
+                            children: /*#__PURE__*/ jsx(ArrowDown, {
+                                className: "!icon-xs"
+                            })
                         }),
                         /*#__PURE__*/ jsx(Text, {
                             size: "xs",
@@ -33,8 +40,11 @@ const SearchModalFooter = ({ ref, children, className, ...props })=>{
                 /*#__PURE__*/ jsxs("span", {
                     className: "inline-flex items-center gap-4",
                     children: [
-                        /*#__PURE__*/ jsx(CornerDownLeft, {
-                            className: "text-text-tertiary !icon-sm"
+                        /*#__PURE__*/ jsx(Kbd, {
+                            size: "xsmall",
+                            children: /*#__PURE__*/ jsx(CornerDownLeft, {
+                                className: "!icon-xs"
+                            })
                         }),
                         /*#__PURE__*/ jsx(Text, {
                             size: "xs",

package/dist/components/SearchModal/SearchModalInput.js

@@ -9,7 +9,7 @@ import { searchModalInputVariants } from "./classes.js";
 import { useSearchModalContext } from "./SearchModalContext/index.js";
 const SearchModalInput = ({ ref, loading = false, className, ...props })=>{
     const testId = useTestId('input');
-    const { query, setQuery, inputRef } = useSearchModalContext();
+    const { query, setQuery, inputRef, close } = useSearchModalContext();
     return /*#__PURE__*/ jsxs("div", {
         "data-slot": "search-modal-input",
         "data-testid": testId,
@@ -21,19 +21,26 @@ const SearchModalInput = ({ ref, loading = false, className, ...props })=>{
                     size: "sm"
                 })
             }) : /*#__PURE__*/ jsx(Search, {
-                className: "text-text-tertiary shrink-0 !icon-md"
+                className: "text-text-secondary shrink-0 !icon-md"
             }),
             /*#__PURE__*/ jsx("input", {
                 ...props,
                 ref: mergeRefs(inputRef, ref),
                 value: query,
                 onChange: (e)=>setQuery(e.target.value),
-                className: cn('flex-1 h-48 bg-transparent text-text-primary text-base', 'placeholder:text-text-tertiary outline-none', className),
+                className: cn('flex-1 h-48 bg-transparent text-text-primary text-base', 'placeholder:text-text-hint outline-none', className),
                 autoComplete: "off"
             }),
-            /*#__PURE__*/ jsx(Kbd, {
-                size: "xsmall",
-                children: "ESC"
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                tabIndex: -1,
+                onClick: close,
+                className: "shrink-0 cursor-pointer",
+                "aria-label": "Close",
+                children: /*#__PURE__*/ jsx(Kbd, {
+                    size: "xsmall",
+                    children: "ESC"
+                })
             })
         ]
     });

package/dist/components/SearchModal/classes.js

@@ -1,8 +1,8 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const searchModalContentVariants = cva(cn('w-[560px] max-h-[70vh]', 'bg-bg-surface-1', 'rounded-12', 'shadow-lg', 'border border-border-primary', 'overflow-hidden', 'flex flex-col', 'outline-none', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', 'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95', 'data-[state=open]:slide-in-from-top-[2%]', 'data-[state=closed]:slide-out-to-top-[2%]', 'data-[state=open]:duration-200 data-[state=closed]:duration-150'));
-const searchModalInputVariants = cva(cn('flex items-center gap-8 px-16', 'border-b border-border-primary'));
-const searchModalItemVariants = cva(cn('flex items-center gap-12 w-full', 'px-16 py-8 rounded-6', 'cursor-pointer text-left no-underline', 'transition-colors'), {
+const searchModalContentVariants = cva(cn('w-[560px] max-h-[70vh]', 'bg-bg-surface-2', 'rounded-12', 'shadow-xl', 'border border-border-primary-light', 'overflow-hidden', 'flex flex-col', 'outline-none', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', 'data-[state=open]:slide-in-from-bottom-[25%]', 'data-[state=closed]:slide-out-to-bottom-[25%]', 'data-[state=open]:duration-300 data-[state=closed]:duration-150'));
+const searchModalInputVariants = cva(cn('flex items-center gap-12 px-16', 'border-b border-border-primary-light'));
+const searchModalItemVariants = cva(cn('flex items-center gap-8 w-full', 'px-8 py-6 rounded-6', 'cursor-pointer text-left no-underline', 'transition-colors'), {
     variants: {
         active: {
             true: 'bg-states-primary-hover',
@@ -18,7 +18,7 @@ const searchModalItemVariants = cva(cn('flex items-center gap-12 w-full', 'px-16
         disabled: false
     }
 });
-const searchModalBodyVariants = cva(cn('overflow-y-auto flex-1 py-8'));
-const searchModalGroupLabelVariants = cva(cn('px-16 pt-8'));
-const searchModalFooterVariants = cva(cn('flex items-center gap-16 px-16 py-8', 'border-t border-border-primary'));
+const searchModalBodyVariants = cva(cn('overflow-y-auto flex-1 px-8 py-8'));
+const searchModalGroupLabelVariants = cva(cn('px-8 pt-8 pb-2'));
+const searchModalFooterVariants = cva(cn('flex items-center gap-16 px-16 py-8', 'border-t border-border-primary-light'));
 export { searchModalBodyVariants, searchModalContentVariants, searchModalFooterVariants, searchModalGroupLabelVariants, searchModalInputVariants, searchModalItemVariants };

package/dist/components/SimpleCharts/AreaChart/AreaChartArea.js

@@ -4,7 +4,7 @@ import { Area } from "recharts";
 import { LineChartActiveContext, LineChartDataContext } from "../LineChart/LineChartContext.js";
 import { warnLineChartLine } from "../LineChart/lib/warn.js";
 import { AreaChartVariantContext } from "./AreaChartContext.js";
-import { AREA_ANIMATION_BEGIN, AREA_ANIMATION_DURATION, AREA_FILL_OPACITY, AREA_INACTIVE_OPACITY, AREA_STROKE_FILL, AREA_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
+import { AREA_FILL_OPACITY, AREA_INACTIVE_OPACITY, AREA_STROKE_FILL, AREA_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
 const AreaChartArea = ({ seriesKey, curve = 'monotone', disableAnimation = false, connectNulls = false, strokeWidth = AREA_STROKE_WIDTH })=>{
     const dataCtx = useContext(LineChartDataContext);
     const { activeKey } = useContext(LineChartActiveContext);
@@ -40,10 +40,7 @@ const AreaChartArea = ({ seriesKey, curve = 'monotone', disableAnimation = false
         opacity: opacity,
         connectNulls: connectNulls,
         stackId: 'stacked' === variant ? 'area-stack' : void 0,
-        isAnimationActive: disableAnimation ? false : 'auto',
-        animationBegin: AREA_ANIMATION_BEGIN,
-        animationDuration: AREA_ANIMATION_DURATION,
-        animationEasing: "ease-out",
+        isAnimationActive: false,
         "data-slot": "area-chart-area",
         "data-key": seriesKey,
         "data-active": isActive ? 'true' : void 0

package/dist/components/SimpleCharts/AreaChart/constants.d.ts

@@ -1,4 +1,6 @@
-export { LINE_ANIMATION_BEGIN as AREA_ANIMATION_BEGIN, LINE_ANIMATION_DURATION as AREA_ANIMATION_DURATION, LINE_CARD_HEIGHT as AREA_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as AREA_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as AREA_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as AREA_INACTIVE_OPACITY, LINE_STROKE_WIDTH as AREA_STROKE_WIDTH, } from '../LineChart/constants';
+export { LINE_CARD_HEIGHT as AREA_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as AREA_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as AREA_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as AREA_INACTIVE_OPACITY, } from '../LineChart/constants';
+/** 1.5px stroke per Figma spec — thinner than LineChart's 2px. */
+export declare const AREA_STROKE_WIDTH = 1.5;
 export { CHART_PALETTE_FILL as AREA_STROKE_FILL, resolveChartColor as resolveSeriesColor, } from '../lib/chartPalette';
 /** 20% fill opacity per Figma spec — semi-transparent bands. */
 export declare const AREA_FILL_OPACITY = 0.2;

package/dist/components/SimpleCharts/AreaChart/constants.js

@@ -1,4 +1,5 @@
+const AREA_STROKE_WIDTH = 1.5;
 const AREA_FILL_OPACITY = 0.2;
-export { LINE_ANIMATION_BEGIN as AREA_ANIMATION_BEGIN, LINE_ANIMATION_DURATION as AREA_ANIMATION_DURATION, LINE_CARD_HEIGHT as AREA_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as AREA_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as AREA_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as AREA_INACTIVE_OPACITY, LINE_STROKE_WIDTH as AREA_STROKE_WIDTH } from "../LineChart/constants.js";
+export { LINE_CARD_HEIGHT as AREA_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN as AREA_DEFAULT_BODY_MARGIN, LINE_HEADER_HEIGHT as AREA_HEADER_HEIGHT, LINE_INACTIVE_OPACITY as AREA_INACTIVE_OPACITY } from "../LineChart/constants.js";
 export { CHART_PALETTE_FILL as AREA_STROKE_FILL, resolveChartColor as resolveSeriesColor } from "../lib/chartPalette.js";
-export { AREA_FILL_OPACITY };
+export { AREA_FILL_OPACITY, AREA_STROKE_WIDTH };

package/dist/components/SimpleCharts/LineChart/LineChartLegendItem.js

@@ -14,6 +14,7 @@ const LineChartLegendItem = ({ seriesKey, selected: selectedProp, className, chi
     const active = activeKey === seriesKey;
     const selected = selectedProp ?? !hiddenSet.has(seriesKey);
     const dimmed = !selected && !active && hiddenSet.size > 0;
+    const filtering = hiddenSet.size > 0;
     const color = series?.color;
     const label = series?.label;
     const itemValue = useMemo(()=>({
@@ -102,7 +103,8 @@ const LineChartLegendItem = ({ seriesKey, selected: selectedProp, className, chi
                 interactive,
                 active,
                 selected,
-                dimmed
+                dimmed,
+                filtering
             }), className),
             children: children
         })

package/dist/components/SimpleCharts/LineChart/LineChartLine.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext, useEffect } from "react";
 import { Line } from "recharts";
-import { LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_DASH_DASHARRAY, LINE_INACTIVE_OPACITY, LINE_STROKE_FILL, LINE_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
+import { LINE_DASH_DASHARRAY, LINE_INACTIVE_OPACITY, LINE_STROKE_FILL, LINE_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
 import { LineChartActiveContext, LineChartDataContext } from "./LineChartContext.js";
 import { warnLineChartLine } from "./lib/warn.js";
 const wrap = (cb)=>cb ? (_props, event)=>cb(event) : void 0;
@@ -37,10 +37,7 @@ const LineChartLine = ({ seriesKey, curve = 'monotone', disableAnimation = false
         activeDot: false,
         opacity: opacity,
         connectNulls: connectNulls,
-        isAnimationActive: disableAnimation ? false : 'auto',
-        animationBegin: LINE_ANIMATION_BEGIN,
-        animationDuration: LINE_ANIMATION_DURATION,
-        animationEasing: "ease-out",
+        isAnimationActive: false,
         onClick: wrap(onClick),
         onMouseEnter: wrap(onMouseEnter),
         onMouseLeave: wrap(onMouseLeave),

package/dist/components/SimpleCharts/LineChart/classes.d.ts

@@ -11,6 +11,7 @@ export declare const lineChartLegendItemVariants: (props?: ({
     active?: boolean | null | undefined;
     selected?: boolean | null | undefined;
     dimmed?: boolean | null | undefined;
+    filtering?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const lineChartHoverPopoverTimestampClasses: string;
 export declare const lineChartZoomPopoverClasses: string;

package/dist/components/SimpleCharts/LineChart/classes.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 const lineChartRootClasses = "relative w-full flex flex-col min-h-0";
-const lineChartBodyClasses = "relative flex-1 min-h-0 min-w-0 [&_*]:outline-none";
+const lineChartBodyClasses = "relative flex-1 min-h-0 min-w-0 [&_*]:outline-none [&_.recharts-line]:animate-[ds-chart-fade-in_400ms_ease-out] [&_.recharts-area]:animate-[ds-chart-fade-in_400ms_ease-out] motion-reduce:[&_.recharts-line]:animate-none motion-reduce:[&_.recharts-area]:animate-none";
 const lineChartBodyZoomEnabledClasses = "select-none [&_.recharts-wrapper]:cursor-crosshair!";
 const lineChartZoomCursorPopoverClasses = "fixed z-30 pointer-events-none";
 const lineChartLegendVariants = cva('flex', {
@@ -69,13 +69,25 @@ const lineChartLegendItemVariants = cva("group/line-chart-legend-item relative f
         dimmed: {
             true: 'opacity-60',
             false: ''
+        },
+        filtering: {
+            true: '',
+            false: ''
         }
     },
+    compoundVariants: [
+        {
+            filtering: true,
+            selected: true,
+            class: 'bg-states-primary-active'
+        }
+    ],
     defaultVariants: {
         interactive: false,
         active: false,
         selected: true,
-        dimmed: false
+        dimmed: false,
+        filtering: false
     }
 });
 const lineChartHoverPopoverTimestampClasses = "text-xs font-medium text-text-primary";

package/dist/index.d.ts

@@ -67,7 +67,7 @@ export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type R
 export { type BreadcrumbSegment, findFirstLinkPath, type NavConfig, type NavConfigDrill, type NavConfigGroup, type NavConfigLink, type NavConfigNode, type NavStackEntry, pushPathname, RemoteShell, RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps, RemoteShellContent, type RemoteShellContentProps, type RemoteShellContextValue, RemoteShellPanel, type RemoteShellPanelProps, type RemoteShellProps, useLocationPathname, useRemoteShellContext, } from './components/RemoteShell';
 export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, } from './components/Resizable';
 export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type ResponseCodeCategory, type ResponseCodeProps, } from './components/ResponseCode';
-export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
+export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
 export { SearchModal, SearchModalBody, type SearchModalBodyProps, SearchModalContent, type SearchModalContentProps, SearchModalEmpty, type SearchModalEmptyProps, SearchModalFooter, type SearchModalFooterProps, SearchModalGroup, SearchModalGroupLabel, type SearchModalGroupLabelProps, type SearchModalGroupProps, SearchModalInput, type SearchModalInputProps, SearchModalItem, type SearchModalItemProps, type SearchModalProps, SearchModalTrigger, type SearchModalTriggerProps, useSearchModalContext, } from './components/SearchModal';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.18.1",
-  "generatedAt": "2026-09-08T15:27:22.704Z",
+  "version": "1.19.0",
+  "generatedAt": "2026-09-09T09:55:16.853Z",
   "components": [
     {
       "name": "Accordion",
@@ -22832,7 +22832,7 @@
         },
         {
           "name": "WithToast",
-          "code": "() => {\n  const toast = useToast();\n\n  const handleCopy = () => {\n    toast.create({ title: 'Copied', type: 'success', variant: 'simple' });\n  };\n\n  return (\n    <>\n      <Toaster />\n      <CopyButton\n        text={SAMPLE_TEXT}\n        label='Copy code'\n        copiedLabel='Copied'\n        size='medium'\n        onClick={handleCopy}\n      />\n    </>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n\n  const handleCopy = () => {\n    toast.create({ title: 'Copied', type: 'default', variant: 'simple' });\n  };\n\n  return (\n    <>\n      <Toaster />\n      <CopyButton\n        text={SAMPLE_TEXT}\n        label='Copy code'\n        copiedLabel='Copied'\n        size='medium'\n        onClick={handleCopy}\n      />\n    </>\n  );\n}",
           "description": "When the button itself cannot transform (e.g. a context menu item), show a\ntoast to confirm the copy. Click the button to see the \"Copied\" toast."
         }
       ]
@@ -53925,13 +53925,6 @@
         {
           "name": "ResizableHandle",
           "props": [
-            {
-              "name": "withHandle",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Show a visible grip icon on the handle.",
-              "defaultValue": "false"
-            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",
@@ -54838,11 +54831,6 @@
           "code": "() => (\n  <div className='h-[400px] w-[400px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='vertical'>\n      <ResizablePanel id='top' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Top</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='bottom' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Bottom</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
           "description": "Two panels stacked vertically."
         },
-        {
-          "name": "WithHandle",
-          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='left' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Panel A</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel id='right' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Panel B</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
-          "description": "A visible grip icon on the resize handle."
-        },
         {
           "name": "ThreePanels",
           "code": "() => (\n  <div className='h-[320px] w-[800px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='left' defaultSize='25%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='center' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Content</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='right' defaultSize='25%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Inspector</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
@@ -54850,18 +54838,28 @@
         },
         {
           "name": "Nested",
-          "code": "() => (\n  <div className='h-[400px] w-[700px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='left' defaultSize='40%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel id='right' defaultSize='60%'>\n        <ResizablePanelGroup orientation='vertical'>\n          <ResizablePanel id='top' defaultSize='60%'>\n            <div className='flex h-full items-center justify-center p-24'>\n              <span className='text-text-secondary'>Editor</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel id='bottom' defaultSize='40%'>\n            <div className='flex h-full items-center justify-center p-24'>\n              <span className='text-text-secondary'>Terminal</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
+          "code": "() => (\n  <div className='h-[400px] w-[700px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='left' defaultSize='40%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='right' defaultSize='60%'>\n        <ResizablePanelGroup orientation='vertical'>\n          <ResizablePanel id='top' defaultSize='60%'>\n            <div className='flex h-full items-center justify-center p-24'>\n              <span className='text-text-secondary'>Editor</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel id='bottom' defaultSize='40%'>\n            <div className='flex h-full items-center justify-center p-24'>\n              <span className='text-text-secondary'>Terminal</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
           "description": "A horizontal group with a vertical sub-group nested inside one panel."
         },
         {
           "name": "Collapsible",
-          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='sidebar' defaultSize='30%' collapsible minSize='15%' collapsedSize='0%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Collapsible</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel id='content' defaultSize='70%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
+          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='sidebar' defaultSize='30%' collapsible minSize='15%' collapsedSize='0%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Collapsible</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='content' defaultSize='70%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
           "description": "A panel that can be collapsed by dragging past its minimum size. Double-click the handle to reset."
         },
         {
           "name": "WithConstraints",
-          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='constrained' defaultSize='40%' minSize='20%' maxSize='60%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Min 20% / Max 60%</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel id='flexible' defaultSize='60%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Flexible</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
+          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='constrained' defaultSize='40%' minSize='20%' maxSize='60%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Min 20% / Max 60%</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='flexible' defaultSize='60%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Flexible</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
           "description": "Panels with minimum and maximum size constraints."
+        },
+        {
+          "name": "WithTooltip",
+          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='left' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Panel A</span>\n        </div>\n      </ResizablePanel>\n      <Tooltip positioning={{ placement: 'right' }}>\n        <TooltipTrigger asChild>\n          <ResizableHandle />\n        </TooltipTrigger>\n        <TooltipContent>Drag to resize</TooltipContent>\n      </Tooltip>\n      <ResizablePanel id='right' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Panel B</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
+          "description": "A \"Drag to resize\" tooltip appears on hover, like the Drawer resize handle."
+        },
+        {
+          "name": "WithOverflowList",
+          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='tags' defaultSize='50%' minSize='20%'>\n        <div className='flex h-full items-center p-16'>\n          <OverflowList\n            className='gap-4'\n            items={OVERFLOW_TAGS}\n            itemRenderer={item => <Tag key={item}>{item}</Tag>}\n            overflowRenderer={renderOverflow}\n          />\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='content' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
+          "description": "Resizing with content that reflows — the tag list adapts live as the panel width changes. Overflow items appear in a popover."
         }
       ]
     },
@@ -55759,6 +55757,287 @@
             }
           ]
         },
+        {
+          "name": "ScrollAreaCorner",
+          "props": [
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "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": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"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": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | 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 {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"search\" | \"text\" | \"none\" | \"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": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+            }
+          ]
+        },
         {
           "name": "ScrollAreaScrollbar",
           "props": [
@@ -56338,6 +56617,11 @@
           "name": "Horizontal",
           "code": "() => (\n  <div className='w-320 h-320 overflow-hidden'>\n    <ScrollArea>\n      <ScrollAreaViewport>\n        <ScrollAreaContent>\n          <HStack>\n            {new Array(50).fill(null).map((_, index) => {\n              const value = `${index + 1}`;\n\n              return (\n                <Box key={value} className='h-320 w-40'>\n                  {value}\n                </Box>\n              );\n            })}\n          </HStack>\n        </ScrollAreaContent>\n      </ScrollAreaViewport>\n\n      <ScrollAreaScrollbar orientation='horizontal' />\n\n      <ScrollAreaCorner />\n    </ScrollArea>\n  </div>\n)",
           "description": "`orientation='horizontal'` puts the bar along the bottom edge, for a row that runs past its container rather than a column that runs below it."
+        },
+        {
+          "name": "Virtualized",
+          "code": "() => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const virtualizer = useVirtualizer({\n    count: 10_000,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => 44,\n    overscan: 8,\n  });\n\n  return (\n    <div className='w-320 h-320 overflow-hidden'>\n      <ScrollArea>\n        <ScrollAreaViewport ref={scrollRef}>\n          <ScrollAreaContent className='h-auto min-h-full'>\n            <div className='relative w-full' style={{ height: virtualizer.getTotalSize() }}>\n              {virtualizer.getVirtualItems().map(item => (\n                <div\n                  key={item.key}\n                  className='absolute top-0 left-0 w-full pb-4'\n                  style={{ height: item.size, transform: `translateY(${item.start}px)` }}\n                >\n                  <Box className='h-full w-full'>{item.index + 1}</Box>\n                </div>\n              ))}\n            </div>\n          </ScrollAreaContent>\n        </ScrollAreaViewport>\n\n        <ScrollAreaScrollbar />\n\n        <ScrollAreaCorner />\n      </ScrollArea>\n    </div>\n  );\n}",
+          "description": "`ScrollAreaViewport` forwards its `ref` to the scrolling element itself, so a row\nvirtualiser such as `@tanstack/react-virtual` can track scroll position inside the\nhouse scrollbar instead of falling back to a bare `overflow-y: auto` div. Ten thousand\nrows here, a few dozen in the DOM.\n\nTwo things this story is deliberately showing:\n\n- `useVirtualizer` is called in the same component that declares the ref. Called from a\n  component rendered *inside* the viewport, `getScrollElement()` runs once — before React\n  has attached the host element's ref — returns `null`, and nothing ever re-runs it, so the\n  list stays permanently empty.\n- `ScrollAreaContent` gets `h-auto min-h-full` so it grows with the virtual sizer. The\n  scrollbar is only rendered while the viewport reports `data-overflow-y`, and that flag is\n  recomputed from a `ResizeObserver` watching the content box — which at its default `h-full`\n  stays the height of the viewport. A list that grows *after* mount therefore keeps its\n  scrollbar hidden until something else forces a remeasure."
         }
       ]
     },
@@ -59119,42 +59403,42 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filteredRecents = useMemo(() => filterItems(RECENT_ITEMS, query), [query]);\n  const filteredJumpTo = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n  const hasResults = filteredRecents.length > 0 || filteredJumpTo.length > 0;\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery} data-testid='search'>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          <SearchModalGroup>\n            <SearchModalGroupLabel>\n              <Text size='xs' color='secondary' weight='medium'>\n                Quick actions\n              </Text>\n            </SearchModalGroupLabel>\n            <SearchModalItem onSelect={noop}>\n              <WallyIcon size='sm' />\n              <Text size='sm'>{query ? `Ask Wally \"${query}\"` : 'Ask Wally'}</Text>\n            </SearchModalItem>\n            {!query && (\n              <>\n                <SearchModalItem onSelect={noop}>\n                  <Users className='!icon-md' />\n                  <Text size='sm'>Switch tenant</Text>\n                </SearchModalItem>\n                <SearchModalItem onSelect={noop}>\n                  <Plus className='!icon-md' />\n                  <Text size='sm'>Create&hellip;</Text>\n                </SearchModalItem>\n              </>\n            )}\n          </SearchModalGroup>\n\n          {filteredRecents.length > 0 && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Recent\n                </Text>\n              </SearchModalGroupLabel>\n              {filteredRecents.map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  <span className='ml-auto'>\n                    <Text size='xs' color='secondary'>\n                      {item.date}\n                    </Text>\n                  </span>\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          )}\n\n          {(hasResults || !query) && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  {query ? 'Go to' : 'Jump to'}\n                </Text>\n              </SearchModalGroupLabel>\n              {(query ? filteredJumpTo : JUMP_TO_ITEMS).map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  <ChevronRight className='text-text-tertiary ml-auto !icon-sm' />\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          )}\n\n          {query && !hasResults && (\n            <SearchModalGroup>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filteredRecents = useMemo(() => filterItems(RECENT_ITEMS, query), [query]);\n  const filteredJumpTo = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n  const hasResults = filteredRecents.length > 0 || filteredJumpTo.length > 0;\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery} data-testid='search'>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          <SearchModalGroup>\n            <SearchModalGroupLabel>\n              <Text size='xs' color='secondary' weight='medium'>\n                Quick actions\n              </Text>\n            </SearchModalGroupLabel>\n            <SearchModalItem onSelect={noop}>\n              <WallyIcon variant='circle' size='sm' />\n              <Text size='sm'>{query ? `Ask Wally \"${query}\"` : 'Ask Wally'}</Text>\n            </SearchModalItem>\n            {!query && (\n              <>\n                <SearchModalItem onSelect={noop}>\n                  <Users className='!icon-md' />\n                  <Text size='sm'>Switch tenant</Text>\n                </SearchModalItem>\n                <SearchModalItem onSelect={noop}>\n                  <Plus className='!icon-md' />\n                  <Text size='sm'>Create&hellip;</Text>\n                </SearchModalItem>\n              </>\n            )}\n          </SearchModalGroup>\n\n          {filteredRecents.length > 0 && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Recent\n                </Text>\n              </SearchModalGroupLabel>\n              {filteredRecents.map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  <span className='ml-auto'>\n                    <Text size='xs' color='secondary'>\n                      {item.date}\n                    </Text>\n                  </span>\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          )}\n\n          {(hasResults || !query) && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  {query ? 'Go to' : 'Jump to'}\n                </Text>\n              </SearchModalGroupLabel>\n              {(query ? filteredJumpTo : JUMP_TO_ITEMS).map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  <ChevronRight className='text-text-tertiary ml-auto !icon-sm' />\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          )}\n\n          {query && !hasResults && (\n            <SearchModalGroup>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
           "description": "The full palette with recent history. Type to filter: \"Jump to\" relabels to\n\"Go to\", recents hide when nothing matches, and a no-results fallback offers\nAsk Wally. Covers PRD states 1, 3, 4 and 5."
         },
         {
           "name": "EmptyRecents",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filteredJumpTo = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          <SearchModalGroup>\n            <SearchModalGroupLabel>\n              <Text size='xs' color='secondary' weight='medium'>\n                Quick actions\n              </Text>\n            </SearchModalGroupLabel>\n            <SearchModalItem onSelect={noop}>\n              <WallyIcon size='sm' />\n              <Text size='sm'>{query ? `Ask Wally \"${query}\"` : 'Ask Wally'}</Text>\n            </SearchModalItem>\n            {!query && (\n              <>\n                <SearchModalItem onSelect={noop}>\n                  <Users className='!icon-md' />\n                  <Text size='sm'>Switch tenant</Text>\n                </SearchModalItem>\n                <SearchModalItem onSelect={noop}>\n                  <Plus className='!icon-md' />\n                  <Text size='sm'>Create&hellip;</Text>\n                </SearchModalItem>\n              </>\n            )}\n          </SearchModalGroup>\n\n          {!query && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Recent\n                </Text>\n              </SearchModalGroupLabel>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  Nothing recent yet\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n\n          {filteredJumpTo.length > 0 && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  {query ? 'Go to' : 'Jump to'}\n                </Text>\n              </SearchModalGroupLabel>\n              {filteredJumpTo.map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  <ChevronRight className='text-text-tertiary ml-auto !icon-sm' />\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          )}\n\n          {query && filteredJumpTo.length === 0 && (\n            <SearchModalGroup>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filteredJumpTo = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          <SearchModalGroup>\n            <SearchModalGroupLabel>\n              <Text size='xs' color='secondary' weight='medium'>\n                Quick actions\n              </Text>\n            </SearchModalGroupLabel>\n            <SearchModalItem onSelect={noop}>\n              <WallyIcon variant='circle' size='sm' />\n              <Text size='sm'>{query ? `Ask Wally \"${query}\"` : 'Ask Wally'}</Text>\n            </SearchModalItem>\n            {!query && (\n              <>\n                <SearchModalItem onSelect={noop}>\n                  <Users className='!icon-md' />\n                  <Text size='sm'>Switch tenant</Text>\n                </SearchModalItem>\n                <SearchModalItem onSelect={noop}>\n                  <Plus className='!icon-md' />\n                  <Text size='sm'>Create&hellip;</Text>\n                </SearchModalItem>\n              </>\n            )}\n          </SearchModalGroup>\n\n          {!query && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Recent\n                </Text>\n              </SearchModalGroupLabel>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  Nothing recent yet\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n\n          {filteredJumpTo.length > 0 && (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  {query ? 'Go to' : 'Jump to'}\n                </Text>\n              </SearchModalGroupLabel>\n              {filteredJumpTo.map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  <ChevronRight className='text-text-tertiary ml-auto !icon-sm' />\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          )}\n\n          {query && filteredJumpTo.length === 0 && (\n            <SearchModalGroup>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
           "description": "A new user with no history. The Recent section shows \"Nothing recent yet\"\ninstead of items. Matches PRD state 2."
         },
         {
           "name": "SubList",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filtered = useMemo(() => filterItems(CREATE_ITEMS, query), [query]);\n  const grouped = useMemo(() => {\n    const map = new Map<string, NavItem[]>();\n    for (const item of filtered) {\n      const key = item.section ?? 'Other';\n      const list = map.get(key);\n      if (list) list.push(item);\n      else map.set(key, [item]);\n    }\n    return map;\n  }, [filtered]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Filter creatable items\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            [...grouped.entries()].map(([section, items]) => (\n              <SearchModalGroup key={section}>\n                <SearchModalGroupLabel>\n                  <Text size='xs' color='secondary' weight='medium'>\n                    {section}\n                  </Text>\n                </SearchModalGroupLabel>\n                {items.map(item => (\n                  <SearchModalItem key={item.id} onSelect={noop}>\n                    {item.icon}\n                    <Text size='sm'>{item.label}</Text>\n                  </SearchModalItem>\n                ))}\n              </SearchModalGroup>\n            ))\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter>\n          <span className='inline-flex items-center gap-4'>\n            <Kbd size='xsmall'>esc</Kbd>\n            <Text size='xs' color='secondary'>\n              back\n            </Text>\n          </span>\n          <span className='inline-flex items-center gap-4'>\n            <Kbd size='xsmall'>&crarr;</Kbd>\n            <Text size='xs' color='secondary'>\n              to select\n            </Text>\n          </span>\n        </SearchModalFooter>\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filtered = useMemo(() => filterItems(CREATE_ITEMS, query), [query]);\n  const grouped = useMemo(() => {\n    const map = new Map<string, NavItem[]>();\n    for (const item of filtered) {\n      const key = item.section ?? 'Other';\n      const list = map.get(key);\n      if (list) list.push(item);\n      else map.set(key, [item]);\n    }\n    return map;\n  }, [filtered]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Filter creatable items\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            [...grouped.entries()].map(([section, items]) => (\n              <SearchModalGroup key={section}>\n                <SearchModalGroupLabel>\n                  <Text size='xs' color='secondary' weight='medium'>\n                    {section}\n                  </Text>\n                </SearchModalGroupLabel>\n                {items.map(item => (\n                  <SearchModalItem key={item.id} onSelect={noop}>\n                    {item.icon}\n                    <Text size='sm'>{item.label}</Text>\n                  </SearchModalItem>\n                ))}\n              </SearchModalGroup>\n            ))\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter>\n          <span className='inline-flex items-center gap-4'>\n            <Kbd size='xsmall'>esc</Kbd>\n            <Text size='xs' color='secondary'>\n              back\n            </Text>\n          </span>\n          <span className='inline-flex items-center gap-4'>\n            <Kbd size='xsmall'>&crarr;</Kbd>\n            <Text size='xs' color='secondary'>\n              to select\n            </Text>\n          </span>\n        </SearchModalFooter>\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
           "description": "A sub-list page pushed in place of the main body. Used for \"Create\\u2026\" and\n\"Switch tenant\". The footer changes to show \"esc back\" and \"enter to select\".\nDemonstrates PRD states 6 and 7."
         },
         {
           "name": "ItemsAsLinks",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filtered = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  {query ? 'Go to' : 'Jump to'}\n                </Text>\n              </SearchModalGroupLabel>\n              {filtered.map(item => (\n                <SearchModalItem key={item.id} asChild onSelect={noop}>\n                  <a href={`#${item.id}`}>\n                    {item.icon}\n                    <Text size='sm'>{item.label}</Text>\n                    <ChevronRight className='text-text-tertiary ml-auto !icon-sm' />\n                  </a>\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filtered = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  {query ? 'Go to' : 'Jump to'}\n                </Text>\n              </SearchModalGroupLabel>\n              {filtered.map(item => (\n                <SearchModalItem key={item.id} asChild onSelect={noop}>\n                  <a href={`#${item.id}`}>\n                    {item.icon}\n                    <Text size='sm'>{item.label}</Text>\n                    <ChevronRight className='text-text-tertiary ml-auto !icon-sm' />\n                  </a>\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
           "description": "Items rendered as links via `asChild`, for cases where results navigate to a URL."
         },
         {
           "name": "DisabledItems",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const actions = useMemo(\n    () =>\n      filterItems(\n        [\n          { id: 'ask-wally', label: 'Ask Wally', icon: <WallyIcon size='sm' /> },\n          { id: 'switch-tenant', label: 'Switch tenant', icon: <Users className='!icon-md' /> },\n          { id: 'create', label: 'Create\\u2026', icon: <Plus className='!icon-md' /> },\n        ],\n        query,\n      ),\n    [query],\n  );\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          {actions.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Quick actions\n                </Text>\n              </SearchModalGroupLabel>\n              {actions.map(item => (\n                <SearchModalItem\n                  key={item.id}\n                  onSelect={item.id === 'switch-tenant' ? undefined : noop}\n                  disabled={item.id === 'switch-tenant'}\n                >\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  {item.id === 'switch-tenant' && (\n                    <span className='ml-auto'>\n                      <Text size='xs' color='secondary'>\n                        Unavailable\n                      </Text>\n                    </span>\n                  )}\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const actions = useMemo(\n    () =>\n      filterItems(\n        [\n          { id: 'ask-wally', label: 'Ask Wally', icon: <WallyIcon variant='circle' size='sm' /> },\n          { id: 'switch-tenant', label: 'Switch tenant', icon: <Users className='!icon-md' /> },\n          { id: 'create', label: 'Create\\u2026', icon: <Plus className='!icon-md' /> },\n        ],\n        query,\n      ),\n    [query],\n  );\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          {actions.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Quick actions\n                </Text>\n              </SearchModalGroupLabel>\n              {actions.map(item => (\n                <SearchModalItem\n                  key={item.id}\n                  onSelect={item.id === 'switch-tenant' ? undefined : noop}\n                  disabled={item.id === 'switch-tenant'}\n                >\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  {item.id === 'switch-tenant' && (\n                    <span className='ml-auto'>\n                      <Text size='xs' color='secondary'>\n                        Unavailable\n                      </Text>\n                    </span>\n                  )}\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
           "description": "Disabled items are excluded from keyboard navigation and cannot be selected."
         },
         {
           "name": "CloseOnSelectFalse",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [selected, setSelected] = useState<string[]>([]);\n\n  const filtered = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  const toggleItem = useCallback(\n    (id: string) =>\n      setSelected(prev => (prev.includes(id) ? prev.filter(v => v !== id) : [...prev, id])),\n    [],\n  );\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Pick items (modal stays open)\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Products {selected.length > 0 && `(${selected.length} selected)`}\n                </Text>\n              </SearchModalGroupLabel>\n              {filtered.map(item => (\n                <SearchModalItem\n                  key={item.id}\n                  closeOnSelect={false}\n                  onSelect={() => toggleItem(item.id)}\n                >\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  {selected.includes(item.id) && (\n                    <span className='ml-auto'>\n                      <Text size='xs' color='primary-alt'>\n                        Selected\n                      </Text>\n                    </span>\n                  )}\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [selected, setSelected] = useState<string[]>([]);\n\n  const filtered = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  const toggleItem = useCallback(\n    (id: string) =>\n      setSelected(prev => (prev.includes(id) ? prev.filter(v => v !== id) : [...prev, id])),\n    [],\n  );\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Pick items (modal stays open)\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  Products {selected.length > 0 && `(${selected.length} selected)`}\n                </Text>\n              </SearchModalGroupLabel>\n              {filtered.map(item => (\n                <SearchModalItem\n                  key={item.id}\n                  closeOnSelect={false}\n                  onSelect={() => toggleItem(item.id)}\n                >\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                  {selected.includes(item.id) && (\n                    <span className='ml-auto'>\n                      <Text size='xs' color='primary-alt'>\n                        Selected\n                      </Text>\n                    </span>\n                  )}\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
           "description": "`closeOnSelect={false}` keeps the modal open after selecting an item, useful\nfor multi-step flows like the sub-list mechanic."
         },
         {
           "name": "Controlled",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filtered = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  return (\n    <>\n      <Button variant='outline' color='neutral' onClick={() => setOpen(true)}>\n        Open Programmatically\n      </Button>\n      <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n        <SearchModalContent>\n          <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n          <SearchModalBody>\n            {filtered.length > 0 ? (\n              <SearchModalGroup>\n                <SearchModalGroupLabel>\n                  <Text size='xs' color='secondary' weight='medium'>\n                    {query ? 'Go to' : 'Jump to'}\n                  </Text>\n                </SearchModalGroupLabel>\n                {filtered.map(item => (\n                  <SearchModalItem key={item.id} onSelect={noop}>\n                    {item.icon}\n                    <Text size='sm'>{item.label}</Text>\n                  </SearchModalItem>\n                ))}\n              </SearchModalGroup>\n            ) : (\n              <SearchModalGroup>\n                <SearchModalEmpty className='px-16 py-8'>\n                  <Text size='sm' color='secondary'>\n                    No results\n                  </Text>\n                </SearchModalEmpty>\n              </SearchModalGroup>\n            )}\n          </SearchModalBody>\n          <SearchModalFooter />\n        </SearchModalContent>\n      </SearchModal>\n    </>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const filtered = useMemo(() => filterItems(JUMP_TO_ITEMS, query), [query]);\n\n  return (\n    <>\n      <Button variant='outline' color='neutral' onClick={() => setOpen(true)}>\n        Open Programmatically\n      </Button>\n      <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n        <SearchModalContent>\n          <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n          <SearchModalBody>\n            {filtered.length > 0 ? (\n              <SearchModalGroup>\n                <SearchModalGroupLabel>\n                  <Text size='xs' color='secondary' weight='medium'>\n                    {query ? 'Go to' : 'Jump to'}\n                  </Text>\n                </SearchModalGroupLabel>\n                {filtered.map(item => (\n                  <SearchModalItem key={item.id} onSelect={noop}>\n                    {item.icon}\n                    <Text size='sm'>{item.label}</Text>\n                  </SearchModalItem>\n                ))}\n              </SearchModalGroup>\n            ) : (\n              <SearchModalGroup>\n                <SearchModalEmpty>\n                  <Text size='sm' color='secondary'>\n                    No results\n                  </Text>\n                </SearchModalEmpty>\n              </SearchModalGroup>\n            )}\n          </SearchModalBody>\n          <SearchModalFooter />\n        </SearchModalContent>\n      </SearchModal>\n    </>\n  );\n}",
           "description": "Controlled open state, driven entirely from outside the component.\nNo `SearchModalTrigger` — the button calls `setOpen` directly."
         },
         {
           "name": "Scrollable",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const allItems = useMemo(\n    () =>\n      Array.from({ length: 30 }, (_, i) => ({\n        id: `item-${i}`,\n        label: `Feature ${i + 1}`,\n        icon: <Compass className='text-text-tertiary !icon-md' />,\n      })),\n    [],\n  );\n\n  const filtered = useMemo(() => filterItems(allItems, query), [allItems, query]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  All features\n                </Text>\n              </SearchModalGroupLabel>\n              {filtered.map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty className='px-16 py-8'>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const allItems = useMemo(\n    () =>\n      Array.from({ length: 30 }, (_, i) => ({\n        id: `item-${i}`,\n        label: `Feature ${i + 1}`,\n        icon: <Compass className='text-text-primary !icon-md' />,\n      })),\n    [],\n  );\n\n  const filtered = useMemo(() => filterItems(allItems, query), [allItems, query]);\n\n  return (\n    <SearchModal open={open} onOpenChange={setOpen} onQueryChange={setQuery}>\n      <SearchTriggerButton />\n      <SearchModalContent>\n        <SearchModalInput placeholder='Search products, features, and more\\u2026' />\n        <SearchModalBody>\n          {filtered.length > 0 ? (\n            <SearchModalGroup>\n              <SearchModalGroupLabel>\n                <Text size='xs' color='secondary' weight='medium'>\n                  All features\n                </Text>\n              </SearchModalGroupLabel>\n              {filtered.map(item => (\n                <SearchModalItem key={item.id} onSelect={noop}>\n                  {item.icon}\n                  <Text size='sm'>{item.label}</Text>\n                </SearchModalItem>\n              ))}\n            </SearchModalGroup>\n          ) : (\n            <SearchModalGroup>\n              <SearchModalEmpty>\n                <Text size='sm' color='secondary'>\n                  No results\n                </Text>\n              </SearchModalEmpty>\n            </SearchModalGroup>\n          )}\n        </SearchModalBody>\n        <SearchModalFooter />\n      </SearchModalContent>\n    </SearchModal>\n  );\n}",
           "description": "The scrollable body when there are many items. The input and footer stay fixed\nwhile the body scrolls."
         }
       ]

package/dist/theme/components/chart.css

@@ -0,0 +1,8 @@
+@keyframes ds-chart-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/theme/index.css

@@ -28,6 +28,7 @@
 @import './components/progress.css';
 @import './components/product-nav.css';
 @import './components/animated-background.css';
+@import './components/chart.css';
 
 [data-scope='scroll-area'][data-part='viewport'] {
     scrollbar-width: none;

package/package.json

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