@seekora-ai/ui-sdk-react 0.2.13 → 0.2.14

package/dist/components/HierarchicalMenu.js

@@ -4,7 +4,7 @@
  * Displays a hierarchical menu for nested category navigation
  * Example: Electronics > Phones > iPhone
  */
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useRef } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
@@ -113,6 +113,112 @@ export const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, sh
     const toggleShowMore = (level) => {
         setExpanded(prev => ({ ...prev, [level]: !prev[level] }));
     };
+    const containerRef = useRef(null);
+    // Collect all visible treeitem elements within the container
+    const getVisibleTreeItems = useCallback(() => {
+        if (!containerRef.current)
+            return [];
+        return Array.from(containerRef.current.querySelectorAll('[role="treeitem"]'));
+    }, []);
+    // Keyboard navigation handler for the tree
+    const handleKeyDown = useCallback((e) => {
+        const items = getVisibleTreeItems();
+        if (items.length === 0)
+            return;
+        const activeElement = document.activeElement;
+        // Find the treeitem that is or contains the active element
+        const currentItem = items.find(item => item === activeElement || item.contains(activeElement));
+        const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                const button = items[nextIndex].querySelector('button');
+                if (button)
+                    button.focus();
+                else
+                    items[nextIndex].focus();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                const button = items[prevIndex].querySelector('button');
+                if (button)
+                    button.focus();
+                else
+                    items[prevIndex].focus();
+                break;
+            }
+            case 'ArrowRight': {
+                if (!currentItem)
+                    break;
+                const isExpanded = currentItem.getAttribute('aria-expanded');
+                if (isExpanded === 'false') {
+                    // Expand (select) this item
+                    e.preventDefault();
+                    const button = currentItem.querySelector('button');
+                    if (button)
+                        button.click();
+                }
+                else if (isExpanded === 'true') {
+                    // Move to first child
+                    e.preventDefault();
+                    const childList = currentItem.querySelector('[role="group"]');
+                    if (childList) {
+                        const firstChild = childList.querySelector('[role="treeitem"]');
+                        if (firstChild) {
+                            const button = firstChild.querySelector('button');
+                            if (button)
+                                button.focus();
+                            else
+                                firstChild.focus();
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                if (!currentItem)
+                    break;
+                const isExpanded = currentItem.getAttribute('aria-expanded');
+                if (isExpanded === 'true') {
+                    // Collapse this item
+                    e.preventDefault();
+                    const button = currentItem.querySelector('button');
+                    if (button)
+                        button.click();
+                }
+                else {
+                    // Move focus to parent treeitem
+                    e.preventDefault();
+                    const parentGroup = currentItem.closest('[role="group"]');
+                    if (parentGroup) {
+                        const parentItem = parentGroup.closest('[role="treeitem"]');
+                        if (parentItem) {
+                            const button = parentItem.querySelector(':scope > button');
+                            if (button)
+                                button.focus();
+                            else
+                                parentItem.focus();
+                        }
+                    }
+                }
+                break;
+            }
+            case 'Enter': {
+                if (!currentItem)
+                    break;
+                e.preventDefault();
+                const button = currentItem.querySelector('button');
+                if (button)
+                    button.click();
+                break;
+            }
+            default:
+                break;
+        }
+    }, [getVisibleTreeItems]);
     // Render a level of the hierarchy
     const renderLevel = (items, level) => {
         if (!items || items.length === 0)
@@ -121,12 +227,14 @@ export const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, sh
         const displayLimit = isExpanded ? showMoreLimit : limit;
         const displayItems = items.slice(0, displayLimit);
         const hasMore = items.length > displayLimit;
-        return (React.createElement("ul", { className: hierarchicalTheme.list, style: {
+        return (React.createElement("ul", { role: level === 0 ? 'tree' : 'group', className: hierarchicalTheme.list, style: {
                 listStyle: 'none',
                 margin: 0,
                 padding: level > 0 ? `0 0 0 ${theme.spacing.medium}` : 0,
             } },
-            displayItems.map((item, index) => (React.createElement("li", { key: item.value, className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
+            displayItems.map((item, index) => (React.createElement("li", { key: item.value, role: "treeitem", ...(item.data && item.data.length > 0
+                    ? { 'aria-expanded': !!item.isRefined }
+                    : {}), className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
                     padding: `${theme.spacing.small} 0`,
                 } }, renderItem ? (renderItem(item, level)) : (React.createElement(React.Fragment, null,
                 React.createElement("button", { type: "button", onClick: () => handleItemClick(item, level), className: hierarchicalTheme.link, style: {
@@ -164,5 +272,5 @@ export const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, sh
     if (processedItems.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: clsx(hierarchicalTheme.root, className), style: style }, renderLevel(processedItems, 0)));
+    return (React.createElement("div", { ref: containerRef, className: clsx(hierarchicalTheme.root, className), style: style, tabIndex: 0, onKeyDown: handleKeyDown }, renderLevel(processedItems, 0)));
 };

package/dist/components/Pagination.d.ts

@@ -1,7 +1,16 @@
 /**
  * Pagination Component
  *
- * Displays pagination controls for search results
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
  */
 import React from 'react';
 import type { SearchResponse } from '@seekora-ai/search-sdk';
@@ -13,6 +22,18 @@ export interface PaginationTheme {
     itemDisabled?: string;
     link?: string;
     ellipsis?: string;
+    /** Class for the Load More button */
+    loadMoreButton?: string;
+    /** Class for the Load More descriptive text (e.g. "X remaining") */
+    loadMoreText?: string;
+    /** Class for the simple variant outer container */
+    simpleContainer?: string;
+    /** Class for the "Page X of Y" text in the simple variant */
+    simpleText?: string;
+    /** Class for Previous/Next buttons in the simple variant */
+    simpleButton?: string;
+    /** Class for the "Page X of Y" info text (usable in any variant) */
+    pageInfo?: string;
 }
 export interface PaginationProps {
     /** Search results response */
@@ -39,6 +60,31 @@ export interface PaginationProps {
     style?: React.CSSProperties;
     /** Custom theme */
     theme?: PaginationTheme;
+    /**
+     * Display variant.
+     * - 'numbered' (default): numbered page buttons with prev/next
+     * - 'load-more': single "Load More" button
+     * - 'simple': Previous / Next buttons with "Page X of Y" text
+     */
+    variant?: 'numbered' | 'load-more' | 'simple';
+    /** Label for the Load More button (default: "Load More") */
+    loadMoreText?: string;
+    /**
+     * Button / text sizing.
+     * - 'small': compact
+     * - 'medium' (default): standard
+     * - 'large': spacious
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Show "Page X of Y" text.
+     * Defaults to false for numbered, true for simple.
+     */
+    showPageInfo?: boolean;
+    /** Label for the Previous button (default: "Previous") */
+    previousLabel?: string;
+    /** Label for the Next button (default: "Next") */
+    nextLabel?: string;
 }
 export declare const Pagination: React.FC<PaginationProps>;
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7F,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0OhD,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7F,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC9C,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkbhD,CAAC"}

package/dist/components/Pagination.js

@@ -1,13 +1,28 @@
 /**
  * Pagination Component
  *
- * Displays pagination controls for search results
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
  */
 import React from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, }) => {
+/** Size-specific style tokens */
+const SIZE_TOKENS = {
+    small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '32px' },
+    medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '40px' },
+    large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px' },
+};
+export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, variant = 'numbered', loadMoreText = 'Load More', size = 'medium', showPageInfo, previousLabel = 'Previous', nextLabel = 'Next', }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, currentPage: stateCurrentPage, setPage } = useSearchState();
     const paginationTheme = customTheme || {};
@@ -30,6 +45,19 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
         || res?.data?.total_pages
         || res?.data?.data?.total_pages
         || Math.ceil(totalResults / itemsPerPage);
+    // Resolve whether to show page info text
+    const resolvedShowPageInfo = showPageInfo !== undefined
+        ? showPageInfo
+        : variant === 'simple';
+    // Size tokens
+    const sizeTokens = SIZE_TOKENS[size];
+    // CSS variable aware helpers — allow overrides via custom properties
+    const cssVarBg = 'var(--seekora-pagination-bg, ' + theme.colors.background + ')';
+    const cssVarColor = 'var(--seekora-pagination-color, ' + theme.colors.text + ')';
+    const cssVarActiveBg = 'var(--seekora-pagination-active-bg, ' + theme.colors.primary + ')';
+    const cssVarActiveColor = 'var(--seekora-pagination-active-color, #fff)';
+    const cssVarBorder = 'var(--seekora-pagination-border, ' + theme.colors.border + ')';
+    const cssVarRadius = 'var(--seekora-pagination-radius, ' + (typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium) + ')';
     const handlePageChange = (page) => {
         if (page < 1 || page > totalPages || page === currentPage)
             return;
@@ -40,22 +68,26 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
             onPageChange(page);
         }
     };
-    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && handlePageChange(page), className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
-            padding: theme.spacing.small,
+    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && handlePageChange(page), "aria-current": isActive ? 'page' : undefined, "aria-label": `Page ${page}`, className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
+            padding: theme.spacing[sizeTokens.paddingKey],
             margin: `0 ${theme.spacing.small}`,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-            backgroundColor: isActive ? theme.colors.primary : theme.colors.background,
-            color: isActive ? '#fff' : theme.colors.text,
+            border: `1px solid ${cssVarBorder}`,
+            borderRadius: cssVarRadius,
+            backgroundColor: isActive ? cssVarActiveBg : cssVarBg,
+            color: isActive ? cssVarActiveColor : cssVarColor,
             cursor: isDisabled ? 'not-allowed' : 'pointer',
             opacity: isDisabled ? 0.5 : 1,
-            fontSize: theme.typography.fontSize.medium,
-            minWidth: '40px',
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            minWidth: sizeTokens.minWidth,
             ...(isActive && {
                 fontWeight: 'bold',
             }),
         } }, page));
-    if (totalPages <= 1) {
+    if (totalPages <= 1 && variant !== 'load-more') {
+        return null;
+    }
+    // For load-more, hide when there are no more pages to load
+    if (variant === 'load-more' && currentPage >= totalPages) {
         return null;
     }
     // Calculate page range to display
@@ -88,6 +120,94 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
         }
         return pages;
     };
+    // ── Page info element ──────────────────────────────────────────────
+    const pageInfoElement = resolvedShowPageInfo ? (React.createElement("span", { className: clsx(paginationTheme.pageInfo), style: {
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            color: cssVarColor,
+            padding: `0 ${theme.spacing.small}`,
+            whiteSpace: 'nowrap',
+        }, "aria-live": "polite" },
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages)) : null;
+    // ── Load More variant ──────────────────────────────────────────────
+    if (variant === 'load-more') {
+        const remaining = Math.max(0, totalResults - currentPage * itemsPerPage);
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.loadMoreButton), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.large}`,
+                    border: 'none',
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarActiveBg,
+                    color: cssVarActiveColor,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                    minWidth: sizeTokens.minWidth,
+                }, "aria-label": remaining > 0 ? `${loadMoreText} (${remaining} remaining)` : loadMoreText },
+                loadMoreText,
+                remaining > 0 && (React.createElement("span", { className: clsx(paginationTheme.loadMoreText), style: {
+                        marginLeft: theme.spacing.small,
+                        opacity: 0.85,
+                        fontSize: theme.typography.fontSize.small,
+                    } },
+                    "(",
+                    remaining,
+                    " remaining)"))),
+            pageInfoElement));
+    }
+    // ── Simple variant ─────────────────────────────────────────────────
+    if (variant === 'simple') {
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, paginationTheme.simpleContainer, className), style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: theme.spacing.medium,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.simpleButton, currentPage === 1 && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === 1 ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Previous page" }, previousLabel),
+            React.createElement("span", { className: clsx(paginationTheme.simpleText, paginationTheme.pageInfo), style: {
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    color: cssVarColor,
+                    whiteSpace: 'nowrap',
+                }, "aria-live": "polite" },
+                "Page ",
+                currentPage,
+                " of ",
+                totalPages),
+            React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.simpleButton, currentPage === totalPages && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === totalPages ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Next page" }, nextLabel)));
+    }
+    // ── Numbered variant (default — original behavior) ─────────────────
     const pageNumbers = getPageNumbers();
     return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: style, "aria-label": "Pagination" },
         React.createElement("ul", { className: paginationTheme.list, style: {
@@ -98,27 +218,44 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
                 padding: 0,
                 margin: 0,
                 flexWrap: 'wrap',
+            }, tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    handlePageChange(currentPage - 1);
+                }
+                else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    handlePageChange(currentPage + 1);
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    handlePageChange(1);
+                }
+                else if (e.key === 'End') {
+                    e.preventDefault();
+                    handlePageChange(totalPages);
+                }
             } },
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.item, currentPage === 1 && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
                         opacity: currentPage === 1 ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Previous page" }, "Previous"))),
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Previous page" }, previousLabel))),
             pageNumbers.map((page, index) => {
                 if (page === 'ellipsis') {
                     return (React.createElement("li", { key: `ellipsis-${index}` },
                         React.createElement("span", { className: paginationTheme.ellipsis, style: {
-                                padding: theme.spacing.small,
+                                padding: theme.spacing[sizeTokens.paddingKey],
                                 margin: `0 ${theme.spacing.small}`,
-                                color: theme.colors.text,
-                                fontSize: theme.typography.fontSize.medium,
+                                color: cssVarColor,
+                                fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
                             } }, "...")));
                 }
                 const isActive = page === currentPage;
@@ -129,14 +266,15 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
             }),
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.item, currentPage === totalPages && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
                         opacity: currentPage === totalPages ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Next page" }, "Next"))))));
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Next page" }, nextLabel))),
+            resolvedShowPageInfo && (React.createElement("li", { style: { marginLeft: theme.spacing.small } }, pageInfoElement)))));
 };

package/dist/components/RangeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4QlD,CAAC"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqUlD,CAAC"}

package/dist/components/RangeSlider.js

@@ -103,6 +103,53 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
     const handleDragEnd = () => {
         setIsDragging(false);
     };
+    // Handle keyboard navigation for enhanced control (Shift+Arrow for 10x step, Home/End)
+    const handleMinKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = min;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = internalMax - step;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(min, internalMin - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(internalMax - step, internalMin + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMin(newValue);
+            debouncedUpdate(newValue, internalMax);
+        }
+    };
+    const handleMaxKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = internalMin + step;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = max;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(internalMin + step, internalMax - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(max, internalMax + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMax(newValue);
+            debouncedUpdate(internalMin, newValue);
+        }
+    };
     // Calculate filled track position
     const minPercent = ((internalMin - min) / (max - min)) * 100;
     const maxPercent = ((internalMax - min) / (max - min)) * 100;
@@ -138,7 +185,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
                     backgroundColor: theme.colors.primary,
                     borderRadius: '2px',
                 } }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMinKeyDown, tabIndex: 0, "aria-valuenow": internalMin, "aria-valuemin": min, "aria-valuemax": max, className: rangeSliderTheme.thumb, style: {
                     position: 'absolute',
                     width: '100%',
                     height: '4px',
@@ -148,7 +195,7 @@ export const RangeSlider = ({ field, label, min, max, step = 1, currentMin: curr
                     cursor: 'pointer',
                     pointerEvents: 'none',
                 }, "aria-label": `Minimum ${label || field}` }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMaxKeyDown, tabIndex: 0, "aria-valuenow": internalMax, "aria-valuemin": min, "aria-valuemax": max, className: rangeSliderTheme.thumb, style: {
                     position: 'absolute',
                     width: '100%',
                     height: '4px',

package/dist/components/RichQuerySuggestions.d.ts

@@ -71,6 +71,13 @@ export interface RichQuerySuggestionsProps extends QuerySuggestionsEventHandlers
     ariaLabel?: string;
     /** Analytics tags */
     analyticsTags?: string[];
+    /** Highlight options for query suggestions (passed to highlight rendering) */
+    highlightOptions?: {
+        highlightColor?: string;
+        highlightTextColor?: string;
+        highlightFontWeight?: string | number;
+        highlightStyle?: 'background' | 'underline' | 'bold' | 'color-only';
+    };
 }
 export interface RichQuerySuggestionsRef {
     getActiveIndex: () => number;

package/dist/components/RichQuerySuggestions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichQuerySuggestions.d.ts","sourceRoot":"","sources":["../../src/components/RichQuerySuggestions.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,cAAc,EAGd,kBAAkB,EAClB,0BAA0B,EAC1B,6BAA6B,EAE7B,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAMlC,MAAM,WAAW,yBAA0B,SAAQ,6BAA6B;IAC9E,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACnC,sCAAsC;IACtC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,sEAAsE;IACtE,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yBAAyB;IACzB,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC,wBAAwB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF,sCAAsC;IACtC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,yGAAyG;IACzG,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,MAAM,CAAC;CAC7B;AAqPD,eAAO,MAAM,oBAAoB,2GAwchC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"RichQuerySuggestions.d.ts","sourceRoot":"","sources":["../../src/components/RichQuerySuggestions.tsx"],"names":[],"mappings":"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"}

package/dist/components/SearchBar.d.ts

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import type { SearchOptions } from '@seekora-ai/search-sdk';
+export type SearchBarSize = 'small' | 'medium' | 'large';
 export interface SearchBarTheme {
     container?: string;
     input?: string;
@@ -14,6 +15,9 @@ export interface SearchBarTheme {
     suggestionItemHover?: string;
     suggestionItemActive?: string;
     loadingIndicator?: string;
+    searchIcon?: string;
+    clearButton?: string;
+    submitButton?: string;
 }
 export interface SearchBarProps {
     placeholder?: string;
@@ -37,6 +41,18 @@ export interface SearchBarProps {
     showLoadingState?: boolean;
     renderSuggestion?: (suggestion: string, index: number) => React.ReactNode;
     renderLoading?: () => React.ReactNode;
+    /** Custom render for the search icon. If not provided, a default magnifying glass SVG is rendered. */
+    renderSearchIcon?: () => React.ReactNode;
+    /** Whether to show a clear button when the query is non-empty (default: true) */
+    showClearButton?: boolean;
+    /** Custom render for the clear icon */
+    renderClearIcon?: () => React.ReactNode;
+    /** Whether to show a submit button to the right of the input (default: false) */
+    showSubmitButton?: boolean;
+    /** Custom render for the submit button */
+    renderSubmitButton?: () => React.ReactNode;
+    /** Size variant controlling padding and font size (default: 'medium') */
+    size?: SearchBarSize;
 }
 export declare const SearchBar: React.FC<SearchBarProps>;
 //# sourceMappingURL=SearchBar.d.ts.map

package/dist/components/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../src/components/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,2HAA2H;IAC3H,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoT9C,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../src/components/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,2HAA2H;IAC3H,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,sGAAsG;IACtG,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACzC,iFAAiF;IACjF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC3C,yEAAyE;IACzE,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAgED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0b9C,CAAC"}