@wallarm-org/design-system 1.5.1-rc-fix-switch.1 → 1.6.0

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

@@ -2,30 +2,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Bell, ChevronUpDown } from "../../../icons/index.js";
 import { Button } from "../../Button/index.js";
 import { Code } from "../../Code/index.js";
-import { Kbd } from "../../Kbd/index.js";
 import { Text } from "../../Text/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
 import { TopHeaderSeparator } from "../../TopHeader/index.js";
 import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
+import { StorySearchModal } from "./_storySearchModal.js";
 const HeaderActions = ()=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsxs(Button, {
-                variant: "ghost",
-                size: "small",
-                color: "neutral",
-                className: "p-4 gap-6 rounded-6",
-                children: [
-                    /*#__PURE__*/ jsx(Code, {
-                        size: "s",
-                        color: "secondary",
-                        children: "Search Wallarm"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "xsmall",
-                        children: "⌘ K"
-                    })
-                ]
-            }),
+            /*#__PURE__*/ jsx(StorySearchModal, {}),
             /*#__PURE__*/ jsx(TopHeaderSeparator, {}),
             /*#__PURE__*/ jsxs(Button, {
                 variant: "ghost",

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

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

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

@@ -0,0 +1,251 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Building, LoaderCircle, Plus } from "../../../icons/index.js";
+import { Button } from "../../Button/index.js";
+import { Code } from "../../Code/index.js";
+import { EmptyState, EmptyStateDescription, EmptyStateMessage } from "../../EmptyState/index.js";
+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";
+const recentItems = [
+    {
+        page: 'Attacks',
+        product: 'Cloud WAF',
+        date: '2 hours ago',
+        href: '/attacks'
+    },
+    {
+        page: 'Rules',
+        product: 'Cloud WAF',
+        date: '5 hours ago',
+        href: '/rules'
+    },
+    {
+        page: 'Endpoints',
+        product: 'US East',
+        dataPlane: true,
+        productExtra: 'API Discovery',
+        date: 'Yesterday',
+        href: '/endpoints'
+    },
+    {
+        page: 'Dashboards',
+        product: 'Cloud WAF',
+        date: '2 days ago',
+        href: '/dashboards'
+    },
+    {
+        page: 'Triggers',
+        product: 'Cloud WAF',
+        date: '3 days ago',
+        href: '/triggers'
+    }
+];
+const jumpToItems = [
+    {
+        name: 'Cloud WAF',
+        href: '/cloud-waf'
+    },
+    {
+        name: 'API Discovery',
+        href: '/api-discovery'
+    }
+];
+const filterRecent = (query)=>{
+    if (!query) return recentItems;
+    return recentItems.filter((item)=>{
+        const text = `${item.page} ${item.product} ${item.productExtra ?? ''}`.toLowerCase();
+        return text.includes(query);
+    });
+};
+const filterJumpTo = (query)=>{
+    if (!query) return jumpToItems;
+    return jumpToItems.filter((item)=>item.name.toLowerCase().includes(query));
+};
+const StorySearchModal = ()=>{
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const lowerQuery = query.toLowerCase();
+    const filteredRecent = filterRecent(lowerQuery);
+    const filteredJumpTo = filterJumpTo(lowerQuery);
+    const hasResults = filteredRecent.length > 0 || filteredJumpTo.length > 0 || !lowerQuery;
+    const handleOpenChange = (nextOpen)=>{
+        setOpen(nextOpen);
+        if (!nextOpen) setQuery('');
+    };
+    return /*#__PURE__*/ jsxs(SearchModal, {
+        open: open,
+        onOpenChange: handleOpenChange,
+        onQueryChange: setQuery,
+        children: [
+            /*#__PURE__*/ jsx(SearchModalTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "ghost",
+                    size: "small",
+                    color: "neutral",
+                    className: "p-4 gap-6 rounded-6",
+                    "data-slot": "top-header-search",
+                    children: [
+                        /*#__PURE__*/ jsx(Code, {
+                            size: "s",
+                            color: "secondary",
+                            children: "Search Wallarm"
+                        }),
+                        /*#__PURE__*/ jsx(Kbd, {
+                            size: "xsmall",
+                            children: "⌘ K"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(SearchModalContent, {
+                children: [
+                    /*#__PURE__*/ jsx(SearchModalInput, {
+                        placeholder: "Search products, features, and more..."
+                    }),
+                    lowerQuery && !hasResults && /*#__PURE__*/ jsx(SearchModalEmpty, {
+                        children: /*#__PURE__*/ jsx(EmptyState, {
+                            type: "no-results",
+                            className: "pb-8",
+                            children: /*#__PURE__*/ jsx(EmptyStateMessage, {
+                                children: /*#__PURE__*/ jsx(EmptyStateDescription, {
+                                    children: "No results"
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(SearchModalBody, {
+                        children: [
+                            /*#__PURE__*/ jsxs(SearchModalGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(SearchModalGroupLabel, {
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "xs",
+                                            color: "secondary",
+                                            weight: "medium",
+                                            children: "Quick actions"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs(SearchModalItem, {
+                                        onSelect: ()=>{},
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text-lg",
+                                                children: "\uD83D\uDC36"
+                                            }),
+                                            /*#__PURE__*/ jsx(Text, {
+                                                size: "sm",
+                                                children: "Ask Wally"
+                                            })
+                                        ]
+                                    }),
+                                    !lowerQuery && /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ jsxs(SearchModalItem, {
+                                                onSelect: ()=>{},
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Building, {
+                                                        className: "text-text-secondary !icon-md"
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Text, {
+                                                        size: "sm",
+                                                        children: "Switch tenant"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsxs(SearchModalItem, {
+                                                onSelect: ()=>{},
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Plus, {
+                                                        className: "text-text-secondary !icon-md"
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Text, {
+                                                        size: "sm",
+                                                        children: "Create..."
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            filteredRecent.length > 0 && /*#__PURE__*/ jsxs(SearchModalGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(SearchModalGroupLabel, {
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "xs",
+                                            color: "secondary",
+                                            weight: "medium",
+                                            children: "Recent"
+                                        })
+                                    }),
+                                    filteredRecent.map((item)=>/*#__PURE__*/ jsxs(SearchModalItem, {
+                                            onSelect: ()=>{},
+                                            children: [
+                                                /*#__PURE__*/ jsx(LoaderCircle, {
+                                                    className: "text-text-tertiary shrink-0 !icon-md"
+                                                }),
+                                                /*#__PURE__*/ jsxs(Text, {
+                                                    size: "sm",
+                                                    grow: true,
+                                                    truncate: true,
+                                                    children: [
+                                                        item.page,
+                                                        /*#__PURE__*/ jsxs(Text, {
+                                                            size: "sm",
+                                                            color: "secondary",
+                                                            inline: true,
+                                                            children: [
+                                                                ' ',
+                                                                "— ",
+                                                                item.dataPlane ? `${item.productExtra} · ${item.product}` : item.product
+                                                            ]
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "shrink-0",
+                                                    children: /*#__PURE__*/ jsx(Text, {
+                                                        size: "xs",
+                                                        color: "secondary",
+                                                        children: item.date
+                                                    })
+                                                })
+                                            ]
+                                        }, `${item.page}-${item.product}`))
+                                ]
+                            }),
+                            filteredJumpTo.length > 0 && /*#__PURE__*/ jsxs(SearchModalGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(SearchModalGroupLabel, {
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "xs",
+                                            color: "secondary",
+                                            weight: "medium",
+                                            children: "Jump to"
+                                        })
+                                    }),
+                                    filteredJumpTo.map((item)=>/*#__PURE__*/ jsxs(SearchModalItem, {
+                                            onSelect: ()=>{},
+                                            children: [
+                                                /*#__PURE__*/ jsx(LoaderCircle, {
+                                                    className: "text-text-tertiary shrink-0 !icon-md"
+                                                }),
+                                                /*#__PURE__*/ jsx(Text, {
+                                                    size: "sm",
+                                                    children: item.name
+                                                })
+                                            ]
+                                        }, item.href))
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(SearchModalFooter, {})
+                ]
+            })
+        ]
+    });
+};
+export { StorySearchModal };

package/dist/components/Badge/Badge.js

@@ -13,7 +13,7 @@ const Badge = ({ ref, className, variant = 'default', size = 'medium', type = 's
         textVariant,
         isIconOnly: isIconOnly(children),
         isClickable: !!onClick
-    }), className);
+    }), onClick ? 'cursor-pointer' : '', className);
     const handleClick = onClick ? (event)=>{
         event.stopPropagation();
         onClick(event);

package/dist/components/Card/CardFooter.js

@@ -1,16 +1,19 @@
 import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 const CardFooter = ({ ref, asChild = false, className, children, ...props })=>{
     const Comp = asChild ? Slot : 'div';
     const testId = useTestId('footer');
+    const childCount = Children.count(children);
+    const justifyClass = childCount > 1 ? 'justify-between' : 'justify-end';
     return /*#__PURE__*/ jsx(Comp, {
         ...props,
         ref: ref,
         "data-slot": "card-footer",
         "data-testid": testId,
-        className: cn('mt-auto flex items-center justify-end gap-12 px-16', className),
+        className: cn('mt-auto flex items-center gap-12 px-16', justifyClass, className),
         children: children
     });
 };

package/dist/components/Card/CardHeader.js

@@ -10,7 +10,7 @@ const CardHeader = ({ ref, asChild = false, className, children, ...props })=>{
         ref: ref,
         "data-slot": "card-header",
         "data-testid": testId,
-        className: cn('flex items-center justify-between gap-8 px-16', className),
+        className: cn('flex items-center justify-between gap-8 px-16 text-base', className),
         children: children
     });
 };

package/dist/components/Card/classes.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-const cardVariants = cva('flex flex-col gap-8 rounded-8 border-1 shadow-sm min-w-[120px] overflow-hidden py-16 transition-colors duration-200 h-full', {
+const cardVariants = cva('flex flex-col gap-8 rounded-8 border-1 shadow-sm min-w-[240px] overflow-hidden py-16 transition-colors duration-200 h-full text-sm', {
     variants: {
         color: {
             primary: 'bg-bg-surface-1 border-border-primary-light',

package/dist/components/SearchModal/SearchModal.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode } from 'react';
+import type { TestableProps } from '../../utils/testId';
+export interface SearchModalProps extends TestableProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onQueryChange?: (query: string) => void;
+}
+export declare const SearchModal: FC<SearchModalProps>;

package/dist/components/SearchModal/SearchModal.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { Dialog } from "@ark-ui/react/dialog";
+import { TestIdProvider } from "../../utils/testId.js";
+import { SearchModalProvider } from "./SearchModalContext/index.js";
+const SearchModal = ({ children, open, onOpenChange, onQueryChange, 'data-testid': testId })=>{
+    const onOpenChangeRef = useRef(onOpenChange);
+    onOpenChangeRef.current = onOpenChange;
+    const openRef = useRef(open);
+    openRef.current = open;
+    const handleOpenChange = useCallback(({ open })=>{
+        onOpenChangeRef.current?.(open);
+    }, []);
+    const handleClose = useCallback(()=>{
+        onOpenChangeRef.current?.(false);
+    }, []);
+    useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if ('k' === e.key && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                onOpenChangeRef.current?.(!openRef.current);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, []);
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            "data-slot": "search-modal",
+            "data-testid": testId,
+            children: /*#__PURE__*/ jsx(Dialog.Root, {
+                open: open,
+                onOpenChange: handleOpenChange,
+                closeOnEscape: true,
+                closeOnInteractOutside: true,
+                lazyMount: true,
+                unmountOnExit: true,
+                children: /*#__PURE__*/ jsx(SearchModalProvider, {
+                    open: open,
+                    onQueryChange: onQueryChange,
+                    onClose: handleClose,
+                    children: children
+                })
+            })
+        })
+    });
+};
+SearchModal.displayName = 'SearchModal';
+export { SearchModal };

package/dist/components/SearchModal/SearchModalBody.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SearchModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+export declare const SearchModalBody: FC<SearchModalBodyProps>;

package/dist/components/SearchModal/SearchModalBody.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { useTestId } from "../../utils/testId.js";
+import { searchModalBodyVariants } from "./classes.js";
+import { useSearchModalContext } from "./SearchModalContext/index.js";
+const SearchModalBody = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('body');
+    const { listRef } = useSearchModalContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: mergeRefs(listRef, ref),
+        "data-slot": "search-modal-body",
+        "data-testid": testId,
+        role: "listbox",
+        className: cn(searchModalBodyVariants(), className),
+        children: children
+    });
+};
+SearchModalBody.displayName = 'SearchModalBody';
+export { SearchModalBody };

package/dist/components/SearchModal/SearchModalContent.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SearchModalContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+export declare const SearchModalContent: FC<SearchModalContentProps>;

package/dist/components/SearchModal/SearchModalContent.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Dialog } from "@ark-ui/react/dialog";
+import { Portal } from "@ark-ui/react/portal";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Overlay } from "../Overlay/index.js";
+import { searchModalContentVariants } from "./classes.js";
+import { useSearchModalContext } from "./SearchModalContext/index.js";
+const SearchModalContent = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('content');
+    const { activeIndex, setActiveIndex, getItems, inputRef } = useSearchModalContext();
+    useEffect(()=>{
+        requestAnimationFrame(()=>{
+            inputRef.current?.focus();
+        });
+    }, [
+        inputRef
+    ]);
+    useEffect(()=>{
+        if (activeIndex >= 0) {
+            const items = getItems();
+            items[activeIndex]?.scrollIntoView({
+                block: 'nearest'
+            });
+        }
+    }, [
+        activeIndex,
+        getItems
+    ]);
+    const handleKeyDown = (e)=>{
+        if ('ArrowDown' === e.key || 'ArrowUp' === e.key) {
+            e.preventDefault();
+            const totalItems = getItems().length;
+            if (0 === totalItems) return;
+            'ArrowDown' === e.key ? setActiveIndex(activeIndex + 1 >= totalItems ? 0 : activeIndex + 1) : setActiveIndex(activeIndex - 1 < 0 ? totalItems - 1 : activeIndex - 1);
+        } else if ('Enter' === e.key && activeIndex >= 0) {
+            e.preventDefault();
+            getItems()[activeIndex]?.click();
+        }
+    };
+    return /*#__PURE__*/ jsxs(Portal, {
+        children: [
+            /*#__PURE__*/ jsx(Dialog.Backdrop, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Overlay, {})
+            }),
+            /*#__PURE__*/ jsx(Dialog.Positioner, {
+                className: "fixed inset-0 z-[calc(var(--drawer-overlay-z-index)+1)] flex items-start justify-center pt-[10vh]",
+                children: /*#__PURE__*/ jsx(Dialog.Content, {
+                    ...props,
+                    ref: ref,
+                    "data-slot": "search-modal-content",
+                    "data-testid": testId,
+                    className: cn(searchModalContentVariants(), className),
+                    onKeyDown: handleKeyDown,
+                    children: children
+                })
+            })
+        ]
+    });
+};
+SearchModalContent.displayName = 'SearchModalContent';
+export { SearchModalContent };

package/dist/components/SearchModal/SearchModalContext/SearchModalContext.d.ts

@@ -0,0 +1,2 @@
+import type { SearchModalContextValue } from './types';
+export declare const SearchModalContext: import("react").Context<SearchModalContextValue | null>;

package/dist/components/SearchModal/SearchModalContext/SearchModalContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const SearchModalContext = createContext(null);
+export { SearchModalContext };

package/dist/components/SearchModal/SearchModalContext/SearchModalProvider.d.ts

@@ -0,0 +1,9 @@
+import { type FC, type ReactNode } from 'react';
+interface SearchModalProviderProps {
+    children: ReactNode;
+    open?: boolean;
+    onQueryChange?: (query: string) => void;
+    onClose: () => void;
+}
+export declare const SearchModalProvider: FC<SearchModalProviderProps>;
+export {};

package/dist/components/SearchModal/SearchModalContext/SearchModalProvider.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SearchModalContext } from "./SearchModalContext.js";
+const SearchModalProvider = ({ children, open, onQueryChange, onClose })=>{
+    const [query, setQueryState] = useState('');
+    const [activeIndex, setActiveIndex] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const onQueryChangeRef = useRef(onQueryChange);
+    onQueryChangeRef.current = onQueryChange;
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    useEffect(()=>{
+        if (open) {
+            setQueryState('');
+            setActiveIndex(0);
+        }
+    }, [
+        open
+    ]);
+    const setQuery = useCallback((value)=>{
+        setQueryState(value);
+        setActiveIndex(0);
+        onQueryChangeRef.current?.(value);
+    }, []);
+    const close = useCallback(()=>{
+        onCloseRef.current();
+    }, []);
+    const getItems = useCallback(()=>listRef.current ? Array.from(listRef.current.querySelectorAll('[data-search-item]:not([disabled])')) : [], []);
+    const contextValue = useMemo(()=>({
+            query,
+            setQuery,
+            activeIndex,
+            setActiveIndex,
+            close,
+            getItems,
+            inputRef,
+            listRef
+        }), [
+        query,
+        activeIndex,
+        setQuery,
+        close,
+        getItems
+    ]);
+    return /*#__PURE__*/ jsx(SearchModalContext.Provider, {
+        value: contextValue,
+        children: children
+    });
+};
+export { SearchModalProvider };

package/dist/components/SearchModal/SearchModalContext/index.d.ts

@@ -0,0 +1,4 @@
+export { SearchModalContext } from './SearchModalContext';
+export { SearchModalProvider } from './SearchModalProvider';
+export type { SearchModalContextValue } from './types';
+export { useSearchModalContext } from './useSearchModalContext';

package/dist/components/SearchModal/SearchModalContext/index.js

@@ -0,0 +1,3 @@
+export { SearchModalContext } from "./SearchModalContext.js";
+export { SearchModalProvider } from "./SearchModalProvider.js";
+export { useSearchModalContext } from "./useSearchModalContext.js";

package/dist/components/SearchModal/SearchModalContext/types.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+export interface SearchModalContextValue {
+    query: string;
+    setQuery: (query: string) => void;
+    activeIndex: number;
+    setActiveIndex: (index: number) => void;
+    close: () => void;
+    getItems: () => HTMLElement[];
+    inputRef: RefObject<HTMLInputElement | null>;
+    listRef: RefObject<HTMLDivElement | null>;
+}

package/dist/components/SearchModal/SearchModalContext/useSearchModalContext.d.ts

@@ -0,0 +1 @@
+export declare const useSearchModalContext: () => import("./types").SearchModalContextValue;

package/dist/components/SearchModal/SearchModalContext/useSearchModalContext.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { SearchModalContext } from "./SearchModalContext.js";
+const useSearchModalContext = ()=>{
+    const context = useContext(SearchModalContext);
+    if (!context) throw new Error('useSearchModalContext must be used within a SearchModal');
+    return context;
+};
+export { useSearchModalContext };

package/dist/components/SearchModal/SearchModalEmpty.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SearchModalEmptyProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+export declare const SearchModalEmpty: FC<SearchModalEmptyProps>;

package/dist/components/SearchModal/SearchModalEmpty.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SearchModalEmpty = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('empty');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "search-modal-empty",
+        "data-testid": testId,
+        className: cn('pb-8', className),
+        children: children
+    });
+};
+SearchModalEmpty.displayName = 'SearchModalEmpty';
+export { SearchModalEmpty };

package/dist/components/SearchModal/SearchModalFooter.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SearchModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const SearchModalFooter: FC<SearchModalFooterProps>;