@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.982

package/lib/cjs/components/search-box/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_styledComponents","_calculate","_searchBox","_Icon","_interopRequireDefault","_Input","_GroupName","_SearchBoxBody","_SearchBoxItem","_SearchBoxItem2","_SearchBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchBox","forwardRef","placeholder","leftIcons","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldHideFilterButtons","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","ref","matchingListsItems","setMatchingListsItems","useState","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","useRef","contentRef","inputRef","theme","useTheme","browser","getDevice","useEffect","current","el","element","closest","Element","getBoundingClientRect","filterButtons","useMemo","items","forEach","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","newList","searchList","searchString","undefined","filteredMatchingListItems","map","filter","item","handleOpen","useCallback","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","calculateContentHeight","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","selectedItem","find","imageUrl","createElement","StyledSearchBoxItemImage","src","$shouldShowRoundImage","handleFocus","toLowerCase","handleClick","rightElement","StyledSearchBoxIcon","onClick","icons","color","leftElement","StyledSearchBoxLeftWrapper","handleChange","filteredLists","handleBlur","handleSelect","newItem","replace","content","index","key","name","handleKeyDown","_contentRef$current","_childrenArray$find","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","_element$children$","textContent","attributes","_element$children$2","nodeValue","handleKeyPress","keyCode","useImperativeHandle","clear","createPortal","AnimatePresence","initial","trim","selectedGroups","coordinates","onGroupSelect","StyledSearchBox","onFocus","displayName","_default","exports"],"sources":["../../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n    StyledSearchBox,\n    StyledSearchBoxIcon,\n    StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * An optional icon that is displayed inside the left side of the input.\n     */\n    leftIcons?: string[];\n    /**\n     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n     */\n    lists: ISearchBoxItems[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * If true, the value in the Input is displayed in the list.\n     */\n    shouldAddInputToList: boolean;\n    /**\n     * If true, the filter buttons are hidden.\n     */\n    shouldHideFilterButtons?: boolean;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the icon to open and close the list should be displayed.\n     */\n    shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            leftIcons,\n            lists,\n            onChange,\n            onBlur,\n            onSelect,\n            onKeyDown,\n            selectedId,\n            container,\n            shouldHideFilterButtons = false,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n            shouldAddInputToList = true,\n            shouldShowToggleIcon = false,\n        },\n        ref,\n    ) => {\n        const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n        const [selectedImage, setSelectedImage] = useState<ReactElement>();\n        const [value, setValue] = useState('');\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [height, setHeight] = useState<number>(0);\n        const [width, setWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n        const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n        const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n        const [inputToListValue, setInputToListValue] = useState<string>('');\n        const [groups, setGroups] = useState<string[]>(['all']);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme();\n\n        const { browser } = getDevice();\n\n        useEffect(() => {\n            if (boxRef.current && !container) {\n                const el = boxRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner') || el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (boxRef.current) {\n                const { x, y } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y,\n                });\n            }\n        }, []);\n\n        /**\n         * Checks if Lists are smaller then 1\n         */\n        useEffect(() => {\n            setHasMultipleGroups(lists.length > 1);\n        }, [lists]);\n\n        const filterButtons = useMemo(() => {\n            const items: IFilterButtonItem[] = [];\n\n            if (lists.length <= 1) {\n                return items;\n            }\n\n            lists.forEach(({ groupName }) => {\n                if (groupName) {\n                    items.push({\n                        id: groupName,\n                        text: groupName,\n                    });\n                }\n            });\n\n            return items;\n        }, [lists]);\n\n        /**\n         * Filters the lists by the FilterButtons\n         */\n        const activeList = useMemo(() => {\n            let newLists: ISearchBoxItems[] = [];\n\n            if (groups[0] === 'all') {\n                newLists = lists;\n            } else {\n                lists.forEach((list) => {\n                    if (list.groupName && groups.includes(list.groupName)) {\n                        newLists.push(list);\n                    }\n                });\n            }\n\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            newLists.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                groupName,\n                list: list.filter(\n                    (item) => !(newMatchingItems.length === 1 && item.text === value),\n                ),\n            }));\n\n            setMatchingListsItems(filteredMatchingListItems);\n\n            return newLists;\n        }, [groups, lists, shouldAddInputToList, value]);\n\n        const handleOpen = useCallback(() => {\n            if (boxRef.current) {\n                const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y: y + bodyHeight,\n                });\n\n                setIsAnimating(true);\n            }\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        const handleFilterButtonsGroupSelect = (keys: string[]) => {\n            setGroups(keys.length === 0 ? ['all'] : keys);\n        };\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    boxRef.current &&\n                    !boxRef.current.contains(event.target as Node) &&\n                    contentRef.current &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => handleClose());\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n                window.addEventListener('blur', () => handleClose());\n            };\n        }, [handleOutsideClick, boxRef, handleClose]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray: string[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                list.forEach(({ text }) => textArray.push(text));\n                if (!groupName) {\n                    return;\n                }\n                textArray.push(groupName);\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                textArray.push(inputToListValue);\n            }\n\n            setHeight(calculateContentHeight(textArray));\n        }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            const getInputWidth = () => {\n                if (input) {\n                    setWidth(input.offsetWidth);\n                }\n            };\n\n            if (input) {\n                new ResizeObserver(getInputWidth).observe(input);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                activeList.forEach(({ list }) => {\n                    const selectedItem = list.find(({ id }) => id === selectedId);\n                    if (selectedItem) {\n                        setValue(selectedItem.text);\n\n                        if (selectedItem.imageUrl) {\n                            setSelectedImage(\n                                <StyledSearchBoxItemImage\n                                    src={selectedItem.imageUrl}\n                                    $shouldShowRoundImage={shouldShowRoundImage}\n                                />,\n                            );\n                        }\n                    }\n                });\n            }\n        }, [activeList, selectedId, shouldShowRoundImage]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\n                setValue('');\n            }\n        }, [selectedId]);\n\n        /**\n         * This function sets the items on focus if shouldShowContentOnEmptyInput\n         */\n        const handleFocus = useCallback(() => {\n            if (shouldShowContentOnEmptyInput) {\n                const newMatchingItems: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: value });\n\n                    if (newList.length > 0) {\n                        newMatchingItems.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                    newMatchingItems.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                    groupName,\n                    list: list.filter(\n                        (item) => !(newMatchingItems.length === 1 && item.text === value),\n                    ),\n                }));\n\n                setMatchingListsItems(filteredMatchingListItems);\n\n                if (filteredMatchingListItems.length !== 0) {\n                    handleOpen();\n                }\n            }\n        }, [activeList, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);\n\n        /**\n         * This function filters the lists by input\n         */\n\n        useEffect(() => {\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                newMatchingItems.forEach(({ list }) => {\n                    list.forEach(({ text }) => {\n                        if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n                            setInputToListValue('');\n                        }\n                    });\n                });\n            }\n        }, [\n            inputToListValue,\n            activeList,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        const handleClick = useCallback(() => {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }, [handleClose, handleOpen, isAnimating]);\n\n        const rightElement = useMemo(() => {\n            if (!shouldShowToggleIcon) {\n                return undefined;\n            }\n\n            return (\n                <StyledSearchBoxIcon onClick={handleClick}>\n                    <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n                </StyledSearchBoxIcon>\n            );\n        }, [handleClick, shouldShowToggleIcon, theme]);\n\n        const leftElement = useMemo(\n            () => (\n                <StyledSearchBoxLeftWrapper>\n                    {leftIcons && <Icon icons={leftIcons} />}\n                    {selectedImage && selectedImage}\n                </StyledSearchBoxLeftWrapper>\n            ),\n            [leftIcons, selectedImage],\n        );\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const filteredLists: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: event.target.value });\n\n                    if (newList.length > 0) {\n                        filteredLists.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (filteredLists.length === 0 && shouldAddInputToList) {\n                    filteredLists.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                setSelectedImage(undefined);\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingListsItems([]);\n                } else {\n                    setMatchingListsItems(filteredLists);\n                }\n\n                if (filteredLists.length !== 0) {\n                    handleOpen();\n                }\n\n                setValue(event.target.value);\n                setInputToListValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [activeList, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput],\n        );\n\n        /**\n         * This function handles the blur event of the input\n         */\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                if (typeof onBlur === 'function') {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        /**\n         * This function handles the item selection\n         */\n        const handleSelect = useCallback(\n            (item: ISearchBoxItem) => {\n                const newItem = {\n                    ...item,\n                    text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n                };\n\n                setValue(newItem.text);\n                handleClose();\n\n                setSelectedImage(\n                    newItem.imageUrl ? (\n                        <StyledSearchBoxItemImage\n                            src={newItem.imageUrl}\n                            $shouldShowRoundImage={shouldShowRoundImage}\n                        />\n                    ) : undefined,\n                );\n\n                setMatchingListsItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(newItem);\n                }\n            },\n            [handleClose, onSelect, shouldShowRoundImage],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingListsItems.forEach(({ groupName, list }, index) => {\n                if (hasMultipleGroups) {\n                    if (list.length <= 0) {\n                        return;\n                    }\n\n                    if (index !== 0) {\n                        items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n                    }\n                }\n\n                list.forEach(({ id, text, imageUrl }) => {\n                    items.push(\n                        <SearchBoxItem\n                            key={`${id}_${groupName ?? ''}`}\n                            id={id}\n                            text={text}\n                            imageUrl={imageUrl}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            onSelect={handleSelect}\n                            groupName={groupName}\n                        />,\n                    );\n                });\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                items.push(\n                    <SearchBoxItem\n                        id=\"input-value\"\n                        onSelect={handleSelect}\n                        text={`<b>${inputToListValue}</b`}\n                    />,\n                );\n            }\n\n            return items;\n        }, [\n            matchingListsItems,\n            shouldAddInputToList,\n            inputToListValue,\n            hasMultipleGroups,\n            shouldShowRoundImage,\n            handleSelect,\n        ]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating || matchingListsItems.length === 0) {\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n\n                    if (!children) {\n                        return;\n                    }\n\n                    const childrenArray = Array.from(children);\n\n                    const newChildren = childrenArray.find((child) =>\n                        child.id.startsWith('searchbox-content__'),\n                    )?.children;\n\n                    if (newChildren && newChildren.length > 0) {\n                        const filteredChildren = Array.from(newChildren).filter(\n                            (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n                        );\n                        setFilteredChildrenArray(filteredChildren);\n\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      filteredChildren.length) %\n                                  filteredChildren.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = filteredChildren[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    if (filteredChildrenArray) {\n                        const element = filteredChildrenArray[focusedIndex];\n\n                        if (!element) {\n                            return;\n                        }\n\n                        const { id, textContent } = element;\n\n                        let imageUrl: string | undefined;\n\n                        // Just Ignore, it works\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        if (element.children[0]?.attributes.src) {\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                            imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n                        }\n\n                        handleSelect({\n                            id: id.replace('search-box-item__', ''),\n                            text: textContent ?? '',\n                            imageUrl,\n                        });\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [\n            filteredChildrenArray,\n            focusedIndex,\n            handleSelect,\n            isAnimating,\n            matchingListsItems.length,\n        ]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingListsItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isAnimating &&\n                            matchingListsItems.length !== 0 &&\n                            (value.trim() !== '' || shouldShowContentOnEmptyInput) && (\n                                <SearchBoxBody\n                                    filterButtons={filterButtons}\n                                    selectedGroups={groups}\n                                    width={width}\n                                    coordinates={internalCoordinates}\n                                    browser={browser?.name}\n                                    height={height}\n                                    ref={contentRef}\n                                    onGroupSelect={handleFilterButtonsGroupSelect}\n                                    shouldHideFilterButtons={shouldHideFilterButtons}\n                                >\n                                    {content}\n                                </SearchBoxBody>\n                            )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            browser?.name,\n            newContainer,\n            content,\n            filterButtons,\n            groups,\n            height,\n            internalCoordinates,\n            isAnimating,\n            width,\n            shouldHideFilterButtons,\n            matchingListsItems.length,\n            value,\n            shouldShowContentOnEmptyInput,\n        ]);\n\n        return useMemo(\n            () => (\n                <StyledSearchBox ref={boxRef}>\n                    <div id=\"search_box_input\">\n                        <Input\n                            ref={inputRef}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            placeholder={placeholder}\n                            onKeyDown={onKeyDown}\n                            leftElement={leftElement}\n                            rightElement={rightElement}\n                            value={value}\n                        />\n                    </div>\n                    {portal}\n                </StyledSearchBox>\n            ),\n            [\n                handleBlur,\n                handleChange,\n                handleFocus,\n                leftElement,\n                onKeyDown,\n                placeholder,\n                portal,\n                rightElement,\n                value,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-box/SearchBox.styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSearchBoxLeftWrapper = exports.StyledSearchBoxIcon = exports.StyledSearchBox = exports.StyledMotionSearchBoxBody = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledSearchBox = exports.StyledSearchBox = _styledComponents.default.div``;
+const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background: ${({
+  theme
+}) => theme['101']};
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-top: none;
+    cursor: pointer;
+    width: ${({
+  $width
+}) => $width}px;
+    max-height: 300px;
+    overflow-y: ${({
+  $height
+}) => $height <= 300 ? 'hidden' : 'auto'};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `}
+`;
+const StyledSearchBoxIcon = exports.StyledSearchBoxIcon = _styledComponents.default.div`
+    cursor: pointer;
+    padding: 0 10px;
+`;
+const StyledSearchBoxLeftWrapper = exports.StyledSearchBoxLeftWrapper = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+`;
+//# sourceMappingURL=SearchBox.styles.js.map

package/lib/cjs/components/search-box/SearchBox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSearchBox","exports","styled","div","StyledMotionSearchBoxBody","motion","theme","$width","$height","$browser","css","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    $height: number;\n    $width: number;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    width: ${({ $width }) => $width}px;\n    max-height: 300px;\n    overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\nexport const StyledSearchBoxIcon = styled.div`\n    cursor: pointer;\n    padding: 0 10px;\n`;\n\nexport const StyledSearchBoxLeftWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGzC,MAAMW,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAQpC,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAiC;AAC3F,kBAAkB,CAAC;EAAEG;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA,kBAAkB,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AACvE;AACA,eAAe,CAAC;EAAEF;AAAsC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC9E;AACA;AACA,MAAM,CAAC;EAAEG,QAAQ;EAAEH;AAAsC,CAAC,KAClDG,QAAQ,KAAK,SAAS,GAChB,IAAAC,qBAAG;AACjB,0CAA0CJ,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAI,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CJ,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMK,mBAAmB,GAAAV,OAAA,CAAAU,mBAAA,GAAGT,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA,CAAC;AAEM,MAAMS,0BAA0B,GAAAX,OAAA,CAAAW,0BAAA,GAAGV,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/search-box/group-name/GroupName.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _GroupName = require("./GroupName.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GroupName = ({
+  name
+}) => /*#__PURE__*/_react.default.createElement(_GroupName.StyledGroupName, {
+  $groupName: name,
+  "data-isgroupname": "true",
+  id: `${name}`
+}, name);
+GroupName.displayName = 'GroupName';
+var _default = exports.default = GroupName;
+//# sourceMappingURL=GroupName.js.map

package/lib/cjs/components/search-box/group-name/GroupName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupName.js","names":["_react","_interopRequireDefault","require","_GroupName","e","__esModule","default","GroupName","name","createElement","StyledGroupName","$groupName","id","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/group-name/GroupName.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyledGroupName } from './GroupName.styles';\n\nexport type GroupNameProps = {\n    name: string;\n};\n\nconst GroupName: FC<GroupNameProps> = ({ name }) => (\n    <StyledGroupName $groupName={name} data-isgroupname=\"true\" id={`${name}`}>\n        {name}\n    </StyledGroupName>\n);\n\nGroupName.displayName = 'GroupName';\n\nexport default GroupName;\n"],"mappings":";;;;;;AAAC,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACD,IAAAC,UAAA,GAAAD,OAAA;AAAqD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMrD,MAAMG,SAA6B,GAAGA,CAAC;EAAEC;AAAK,CAAC,kBAC3CR,MAAA,CAAAM,OAAA,CAAAG,aAAA,CAACN,UAAA,CAAAO,eAAe;EAACC,UAAU,EAAEH,IAAK;EAAC,oBAAiB,MAAM;EAACI,EAAE,EAAE,GAAGJ,IAAI;AAAG,GACpEA,IACY,CACpB;AAEDD,SAAS,CAACM,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAErBC,SAAS","ignoreList":[]}

package/lib/cjs/components/search-box/group-name/GroupName.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledGroupName = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledGroupName = exports.StyledGroupName = _styledComponents.default.span`
+    color: ${({
+  theme
+}) => theme.text};
+    font-weight: bold;
+
+    padding: 4px 10px;
+    ${({
+  $groupName
+}) => !$groupName && (0, _styledComponents.css)`
+            border: 1px ${({
+  theme
+}) => theme['103']} solid;
+            padding: 0;
+        `}
+    cursor: default;
+`;
+//# sourceMappingURL=GroupName.styles.js.map

package/lib/cjs/components/search-box/group-name/GroupName.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupName.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledGroupName","exports","styled","span","theme","text","$groupName","css"],"sources":["../../../../../src/components/search-box/group-name/GroupName.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupNameProps = WithTheme<{ $groupName?: string }>;\n\nexport const StyledGroupName = styled.span<StyledGroupNameProps>`\n    color: ${({ theme }: StyledGroupNameProps) => theme.text};\n    font-weight: bold;\n\n    padding: 4px 10px;\n    ${({ $groupName }) =>\n        !$groupName &&\n        css`\n            border: 1px ${({ theme }: StyledGroupNameProps) => theme['103']} solid;\n            padding: 0;\n        `}\n    cursor: default;\n`;\n"],"mappings":";;;;;;AAAC,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAK1C,MAAMW,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,IAA0B;AAChE,aAAa,CAAC;EAAEC;AAA4B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5D;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,CAACA,UAAU,IACX,IAAAC,qBAAG;AACX,0BAA0B,CAAC;EAAEH;AAA4B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC3E;AACA,SAAS;AACT;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useElementSize = require("../../../hooks/useElementSize");
+var _uuid = require("../../../hooks/uuid");
+var _searchBox = require("../../../utils/searchBox");
+var _FilterButtons = _interopRequireDefault(require("../../filter-buttons/FilterButtons"));
+var _SearchBoxBody = require("./SearchBoxBody.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SearchBoxBody = /*#__PURE__*/(0, _react.forwardRef)(({
+  filterButtons,
+  coordinates,
+  selectedGroups,
+  width,
+  browser,
+  height,
+  children,
+  onGroupSelect,
+  shouldHideFilterButtons
+}, ref) => {
+  const [hasScrolled, setHasScrolled] = (0, _react.useState)(false);
+  const [currentGroupName, setCurrentGroupName] = (0, _react.useState)('');
+  const headRef = (0, _react.useRef)(null);
+  const headSize = (0, _useElementSize.useElementSize)(headRef);
+  const uuid = (0, _uuid.useUuid)();
+  const headHeight = (0, _react.useMemo)(() => headSize !== null && headSize !== void 0 && headSize.height ? headSize.height + 15 : 0, [headSize === null || headSize === void 0 ? void 0 : headSize.height]);
+  (0, _react.useEffect)(() => {
+    const element = document.getElementById(`searchbox-content__${uuid}`);
+    if (element && ((selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) === 1 && selectedGroups[0] === 'all' || (selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) !== 1)) {
+      setCurrentGroupName((0, _searchBox.getCurrentGroupName)(element));
+    } else {
+      setCurrentGroupName('');
+    }
+  }, [uuid, children, selectedGroups]);
+  const handleScroll = (0, _react.useCallback)(event => {
+    const {
+      scrollTop
+    } = event.target;
+    setHasScrolled(scrollTop > 1);
+    if ((selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) === 1 && selectedGroups[0] === 'all' || (selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) !== 1) {
+      setCurrentGroupName((0, _searchBox.getCurrentGroupName)(event.target));
+    }
+  }, [selectedGroups]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledMotionSearchBoxBody, {
+    ref: ref,
+    $width: width,
+    style: {
+      left: coordinates.x,
+      top: coordinates.y
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    animate: {
+      height: 'fit-content',
+      opacity: 1
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    }
+  }, filterButtons && (filterButtons === null || filterButtons === void 0 ? void 0 : filterButtons.length) > 1 && /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledSearchBoxBodyHead, {
+    ref: headRef,
+    $hasScrolled: hasScrolled,
+    $hasGroupName: !!currentGroupName
+  }, !shouldHideFilterButtons && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, {
+    items: filterButtons,
+    size: 0,
+    onSelect: onGroupSelect,
+    selectedItemIds: selectedGroups
+  }), /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledSearchBoxBodyHeadGroupName, null, currentGroupName)), /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledSearchBoxBodyContent, {
+    $height: height,
+    $headHeight: headHeight,
+    key: "content",
+    id: `searchbox-content__${uuid}`,
+    $browser: browser,
+    tabIndex: 0,
+    onScroll: handleScroll
+  }, children)), [browser, children, coordinates.x, coordinates.y, currentGroupName, filterButtons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, shouldHideFilterButtons, uuid, width]);
+});
+SearchBoxBody.displayName = 'SearchBoxBody';
+var _default = exports.default = SearchBoxBody;
+//# sourceMappingURL=SearchBoxBody.js.map

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxBody.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_uuid","_searchBox","_FilterButtons","_interopRequireDefault","_SearchBoxBody","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchBoxBody","forwardRef","filterButtons","coordinates","selectedGroups","width","browser","height","children","onGroupSelect","shouldHideFilterButtons","ref","hasScrolled","setHasScrolled","useState","currentGroupName","setCurrentGroupName","headRef","useRef","headSize","useElementSize","uuid","useUuid","headHeight","useMemo","useEffect","element","document","getElementById","length","getCurrentGroupName","handleScroll","useCallback","event","scrollTop","target","createElement","StyledMotionSearchBoxBody","$width","style","left","x","top","y","initial","opacity","exit","animate","transition","duration","type","StyledSearchBoxBodyHead","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","StyledSearchBoxBodyHeadGroupName","StyledSearchBoxBodyContent","$height","$headHeight","key","id","$browser","tabIndex","onScroll","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport React, {\n    forwardRef,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledMotionSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterButtons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n    onGroupSelect?: (keys: string[]) => void;\n    coordinates: { x: number; y: number };\n    shouldHideFilterButtons?: boolean;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    (\n        {\n            filterButtons,\n            coordinates,\n            selectedGroups,\n            width,\n            browser,\n            height,\n            children,\n            onGroupSelect,\n            shouldHideFilterButtons,\n        },\n        ref,\n    ) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchbox-content__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledMotionSearchBoxBody\n                    ref={ref}\n                    $width={width}\n                    style={{ left: coordinates.x, top: coordinates.y }}\n                    initial={{ height: 0, opacity: 0 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'fit-content', opacity: 1 }}\n                    transition={{\n                        duration: 0.2,\n                        type: 'tween',\n                    }}\n                >\n                    {filterButtons && filterButtons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            {!shouldHideFilterButtons && (\n                                <FilterButtons\n                                    items={filterButtons}\n                                    size={0}\n                                    onSelect={onGroupSelect}\n                                    selectedItemIds={selectedGroups}\n                                />\n                            )}\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchbox-content__${uuid}`}\n                        $browser={browser}\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledMotionSearchBoxBody>\n            ),\n            [\n                browser,\n                children,\n                coordinates.x,\n                coordinates.y,\n                currentGroupName,\n                filterButtons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                shouldHideFilterButtons,\n                uuid,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSearchBoxBodyHeadGroupName = exports.StyledSearchBoxBodyHead = exports.StyledSearchBoxBodyContent = exports.StyledMotionSearchBoxBody = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background: ${({
+  theme
+}) => theme['101']};
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-top: none;
+    width: ${({
+  $width
+}) => $width - 2}px;
+    max-height: 300px;
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+`;
+const StyledSearchBoxBodyHead = exports.StyledSearchBoxBodyHead = _styledComponents.default.div`
+    padding: 10px 10px 5px;
+    display: flex;
+    flex-direction: column;
+
+    ${({
+  $hasGroupName
+}) => $hasGroupName && (0, _styledComponents.css)`
+            gap: 15px;
+        `}
+
+    ${({
+  $hasScrolled
+}) => $hasScrolled && (0, _styledComponents.css)`
+            box-shadow: 0 1px 4px #0000001a;
+        `}
+`;
+const StyledSearchBoxBodyHeadGroupName = exports.StyledSearchBoxBodyHeadGroupName = _styledComponents.default.div`
+    color: ${({
+  theme
+}) => theme.text};
+    font-weight: bold;
+`;
+const StyledSearchBoxBodyContent = exports.StyledSearchBoxBodyContent = _styledComponents.default.div`
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    width: 100%;
+    max-height: ${({
+  $headHeight
+}) => 300 - $headHeight}px;
+    overflow-y: ${({
+  $height,
+  $headHeight
+}) => $height + $headHeight <= 300 ? 'hidden' : 'auto'};
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `}
+`;
+//# sourceMappingURL=SearchBoxBody.styles.js.map

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxBody.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionSearchBoxBody","exports","styled","motion","div","theme","$width","StyledSearchBoxBodyHead","$hasGroupName","css","$hasScrolled","StyledSearchBoxBodyHeadGroupName","text","StyledSearchBoxBodyContent","$headHeight","$height","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    $width: number;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    width: ${({ $width }) => $width - 2}px;\n    max-height: 300px;\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n    color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledSearchBoxBodyContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-item/SearchBoxItem.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SearchBoxItem = require("./SearchBoxItem.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SearchBoxItem = ({
+  id,
+  text,
+  imageUrl,
+  shouldShowRoundImage,
+  onSelect,
+  groupName
+}) => {
+  const handleClick = (0, _react.useCallback)(() => {
+    onSelect({
+      id,
+      text,
+      imageUrl
+    }, groupName);
+  }, [onSelect, id, text, imageUrl, groupName]);
+  let idString = `search-box-item__${id}`;
+  if (groupName) {
+    idString = `_${groupName}`;
+  }
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItem, {
+    id: idString,
+    onClick: handleClick
+  }, imageUrl && /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemImage, {
+    src: imageUrl,
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, {
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  })), [handleClick, idString, imageUrl, shouldShowRoundImage, text]);
+};
+SearchBoxItem.displayName = 'SearchBoxItem';
+var _default = exports.default = SearchBoxItem;
+//# sourceMappingURL=SearchBoxItem.js.map

package/lib/cjs/components/search-box/search-box-item/SearchBoxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchBoxItem","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","handleClick","useCallback","idString","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemImage","src","$shouldShowRoundImage","StyledSearchBoxItemText","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem, groupName?: ISearchBoxItems['groupName']) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowRoundImage?: boolean;\n    groupName?: ISearchBoxItems['groupName'];\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowRoundImage,\n    onSelect,\n    groupName,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text, imageUrl }, groupName);\n    }, [onSelect, id, text, imageUrl, groupName]);\n\n    let idString = `search-box-item__${id}`;\n\n    if (groupName) {\n        idString = `_${groupName}`;\n    }\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={idString} onClick={handleClick}>\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText dangerouslySetInnerHTML={{ __html: text }} />\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, idString, imageUrl, shouldShowRoundImage, text],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAIgC,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAWhC,MAAMW,aAAqC,GAAGA,CAAC;EAC3CC,EAAE;EACFC,IAAI;EACJC,QAAQ;EACRC,oBAAoB;EACpBC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCH,QAAQ,CAAC;MAAEJ,EAAE;MAAEC,IAAI;MAAEC;IAAS,CAAC,EAAEG,SAAS,CAAC;EAC/C,CAAC,EAAE,CAACD,QAAQ,EAAEJ,EAAE,EAAEC,IAAI,EAAEC,QAAQ,EAAEG,SAAS,CAAC,CAAC;EAE7C,IAAIG,QAAQ,GAAG,oBAAoBR,EAAE,EAAE;EAEvC,IAAIK,SAAS,EAAE;IACXG,QAAQ,GAAG,IAAIH,SAAS,EAAE;EAC9B;EAEA,OAAO,IAAAI,cAAO,EACV,mBACIlC,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAChC,cAAA,CAAAiC,mBAAmB;IAACX,EAAE,EAAEQ,QAAS;IAACI,OAAO,EAAEN;EAAY,GACnDJ,QAAQ,iBACL3B,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAChC,cAAA,CAAAmC,wBAAwB;IACrBC,GAAG,EAAEZ,QAAS;IACda,qBAAqB,EAAEZ;EAAqB,CAC/C,CACJ,eACD5B,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAChC,cAAA,CAAAsC,uBAAuB;IAACC,uBAAuB,EAAE;MAAEC,MAAM,EAAEjB;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACK,WAAW,EAAEE,QAAQ,EAAEN,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,CAChE,CAAC;AACL,CAAC;AAEDF,aAAa,CAACoB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAE7Bc,aAAa","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-item/SearchBoxItem.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSearchBoxItemText = exports.StyledSearchBoxItemImage = exports.StyledSearchBoxItem = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledSearchBoxItem = exports.StyledSearchBoxItem = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+
+    &:hover {
+        background: ${({
+  theme
+}) => theme['secondary-102']};
+    }
+
+    &:focus {
+        background: ${({
+  theme
+}) => theme['secondary-102']};
+    }
+`;
+const StyledSearchBoxItemImage = exports.StyledSearchBoxItemImage = _styledComponents.default.img`
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage && (0, _styledComponents.css)`
+            border-radius: 50%;
+        `}
+`;
+const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledComponents.default.p`
+    color: ${({
+  theme
+}) => theme.text};
+    margin: 5px 0 !important;
+
+    b {
+        color: ${({
+  theme
+}) => theme.headline};
+    }
+`;
+//# sourceMappingURL=SearchBoxItem.styles.js.map