@chayns-components/core 5.0.0-beta.13 → 5.0.0-beta.1301

package/lib/esm/components/combobox/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentWidth","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","browser","areaProvider","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","result","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","allItems","baseWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","$direction","onClick","$isOpen","$isTouch","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","$browser","name","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    FocusEventHandler,\n    forwardRef,\n    Fragment,\n    ReactHTML,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateContentWidth } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\n\nexport interface ComboBoxRef {\n    hide: VoidFunction;\n    show: VoidFunction;\n}\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The width of the body.\n     */\n    bodyWidth?: number;\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: number;\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input gets its focus.\n     */\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> | boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the combo box if an item is selected.\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * If true, the dropdown will use the maximum width of the items.\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n};\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n    (\n        {\n            bodyWidth,\n            direction = DropdownDirection.RIGHT,\n            isDisabled = false,\n            lists,\n            maxHeight = 280,\n            onSelect,\n            placeholder,\n            prefix,\n            container,\n            selectedItem,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldShowRoundImage,\n            onInputFocus,\n            shouldUseFullWidth = false,\n            onInputChange,\n            shouldUseCurrentItemWidth = false,\n            onInputBlur,\n            shouldShowTransparentBackground = false,\n            inputValue,\n            shouldDropDownUseMaxItemWidth = false,\n        },\n        ref,\n    ) => {\n        const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n        const [bodyMinWidth, setBodyMinWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n        const isInputFocused = useRef(false);\n\n        const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n\n        const parentSize = useElementSize(styledComboBoxElementRef, {\n            shouldUseParentElement: true,\n        });\n\n        const functions = useFunctions();\n        const values = useValues();\n\n        const isTouch = getIsTouch();\n\n        const { browser } = useDevice();\n\n        const areaProvider = useContext(AreaContext);\n\n        useEffect(() => {\n            if (shouldUseFullWidth && parentSize) {\n                setMinWidth(parentSize.width);\n            }\n        }, [parentSize, shouldUseFullWidth]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldDisableActions = useMemo(() => {\n            if (!selectedItem) {\n                return false;\n            }\n\n            const combinedLists = lists.flatMap((list) => list.list);\n\n            return (\n                combinedLists.length === 1 &&\n                combinedLists.some((item) => item.value === selectedItem.value)\n            );\n        }, [lists, selectedItem]);\n\n        const contentHeight = useMemo(() => {\n            const flatItems = lists.flatMap((list) => list.list);\n\n            let result = flatItems.length * 36;\n\n            if (lists.length > 1) {\n                result += lists.length * 36;\n            }\n\n            if (maxHeight < result) {\n                result = maxHeight;\n            }\n\n            return result;\n        }, [lists, maxHeight]);\n\n        const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = true;\n                onInputFocus?.(event);\n            },\n            [onInputFocus],\n        );\n\n        const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = false;\n                onInputBlur?.(event);\n            },\n            [onInputBlur],\n        );\n\n        const handleOpen = useCallback(() => {\n            setIsAnimating(true);\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        /**\n         * This function sets the selected item\n         */\n        const handleSetSelectedItem = useCallback(\n            (itemToSelect?: IComboBoxItem) => {\n                if (typeof onSelect === 'function') {\n                    const onSelectResult = onSelect(itemToSelect);\n\n                    if (onSelectResult === false) {\n                        return;\n                    }\n\n                    if (onSelectResult instanceof Promise) {\n                        void onSelectResult.then((shouldPreventSelection) => {\n                            if (shouldPreventSelection) return;\n\n                            setInternalSelectedItem(itemToSelect);\n                            setIsAnimating(false);\n                        });\n\n                        return;\n                    }\n                }\n\n                setInternalSelectedItem(itemToSelect);\n                setIsAnimating(false);\n            },\n            [onSelect],\n        );\n\n        const handleClear = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleSetSelectedItem(undefined);\n            },\n            [handleSetSelectedItem],\n        );\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) return;\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n\n                    const children = contentRef.current?.children;\n\n                    if (!children || children.length === 0) return;\n\n                    const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                    let newIndex = focusedIndex ?? -1;\n\n                    let attempts = 0;\n\n                    do {\n                        newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n\n                        let shouldSkip = false;\n\n                        if (\n                            newElement.id.startsWith('combobox-group--') ||\n                            newElement.id.endsWith('--disabled-item')\n                        ) {\n                            shouldSkip = true;\n                        }\n\n                        if (!shouldSkip) break;\n\n                        attempts++;\n                    } while (attempts < children.length);\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const focusedElement = children[newIndex] as HTMLDivElement;\n\n                    focusedElement.tabIndex = 0;\n\n                    focusedElement.focus();\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) return;\n\n                    const { id } = element;\n\n                    let newSelectedItem: IComboBoxItem | undefined;\n\n                    lists.some((list) => {\n                        newSelectedItem = list.list.find(\n                            ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                        );\n\n                        return !!newSelectedItem;\n                    });\n\n                    if (newSelectedItem) {\n                        handleSetSelectedItem(newSelectedItem);\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => document.removeEventListener('keydown', handleKeyDown);\n        }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n        /**\n         * This function calculates the greatest width\n         */\n        useEffect(() => {\n            const allItems = lists.flatMap((list) => list.list);\n\n            let baseWidth = calculateContentWidth(\n                [\n                    ...allItems,\n                    { text: placeholder, value: 'placeholder' },\n                    ...(selectedItem ? [selectedItem] : []),\n                ],\n                functions,\n                values,\n            );\n\n            if (shouldDropDownUseMaxItemWidth) {\n                baseWidth += 20 + 2; // 20px padding left and right and 2px border\n                setBodyMinWidth(baseWidth);\n                setMinWidth(baseWidth);\n                return;\n            }\n\n            const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n            const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n            const parentWidth =\n                styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n            const paddingWidth = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear icon\n            const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n            const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n            let prefixWidth = 0;\n\n            if (prefix) {\n                const prefixTextWidth =\n                    calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) +\n                    5;\n\n                prefixWidth = Math.max(prefixTextWidth, 32);\n            }\n\n            const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n            let tmpMinWidth = calculatedWidth;\n            let tmpBodyMinWidth = calculatedWidth;\n\n            // Full width settings\n            if (shouldUseFullWidth) {\n                tmpMinWidth = parentWidth;\n\n                tmpBodyMinWidth =\n                    parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n            }\n            // Current item width settings\n            else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n                const itemWidth =\n                    calculateContentWidth([internalSelectedItem], functions, values) +\n                    paddingWidth +\n                    imageWidth +\n                    iconWidth +\n                    prefixWidth;\n\n                tmpMinWidth = itemWidth;\n\n                tmpBodyMinWidth =\n                    itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n            }\n\n            if (tmpMinWidth > parentWidth) {\n                tmpMinWidth = parentWidth;\n            }\n\n            if (tmpBodyMinWidth > parentWidth) {\n                tmpBodyMinWidth = parentWidth;\n            }\n\n            setMinWidth(tmpMinWidth);\n            setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n        }, [\n            lists,\n            placeholder,\n            shouldUseFullWidth,\n            shouldUseCurrentItemWidth,\n            internalSelectedItem,\n            prefix,\n            selectedItem,\n            functions,\n            values,\n            shouldDropDownUseMaxItemWidth,\n        ]);\n\n        /**\n         * This function sets the external selected item\n         */\n        useEffect(() => {\n            setIsAnimating(false);\n            setInternalSelectedItem(selectedItem);\n        }, [selectedItem]);\n\n        const placeholderImageUrl = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.imageUrl;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.imageUrl;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        const placeholderIcon = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.icons;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.icons;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        /**\n         * This function resets the placeholder\n         */\n        const placeholderText = useMemo(() => {\n            let text = placeholder;\n\n            if (selectedItem) {\n                text = selectedItem.text;\n            } else if (internalSelectedItem) {\n                text = internalSelectedItem.text;\n            }\n\n            return text;\n        }, [internalSelectedItem, placeholder, selectedItem]);\n\n        const shouldShowRoundPlaceholderImage = useMemo(() => {\n            const selectedItemList = lists.find((list) =>\n                list.list.some(\n                    ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n                ),\n            );\n\n            return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n        }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n        /**\n         * This function opens the content of the combobox\n         */\n        const handleHeaderClick = useCallback(() => {\n            if (!isDisabled && !isInputFocused.current) {\n                if (isAnimating) {\n                    handleClose();\n                } else {\n                    handleOpen();\n                }\n            }\n        }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleClose,\n                show: handleOpen,\n            }),\n            [handleClose, handleOpen],\n        );\n\n        const comboBoxGroups = useMemo(\n            () =>\n                lists.map((list) => (\n                    <Fragment key={list.groupName ?? 'default-group'}>\n                        {list.groupName && lists.length > 1 && (\n                            <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                                {list.groupName}\n                            </StyledComboBoxTopic>\n                        )}\n                        {list.list.map((item) => (\n                            <ComboBoxItem\n                                key={`item-${item.text}`}\n                                item={item}\n                                isSelected={\n                                    selectedItem ? item.value === selectedItem.value : false\n                                }\n                                onSelect={handleSetSelectedItem}\n                                shouldShowBigImage={shouldShowBigImage}\n                                shouldShowRoundImage={\n                                    list.shouldShowRoundImage ?? shouldShowRoundImage\n                                }\n                            />\n                        ))}\n                    </Fragment>\n                )),\n            [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n        );\n\n        return useMemo(\n            () => (\n                <StyledComboBox\n                    ref={styledComboBoxElementRef}\n                    $minWidth={minWidth}\n                    $shouldUseFullWidth={shouldUseFullWidth}\n                    $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                >\n                    <StyledComboBoxHeader\n                        $direction={direction}\n                        onClick={handleHeaderClick}\n                        $isOpen={isAnimating}\n                        $isTouch={isTouch}\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $isDisabled={isDisabled}\n                        $shouldChangeColor={shouldChangeColor}\n                        $shouldShowBigImage={shouldShowBigImage}\n                    >\n                        <StyledComboBoxPrefixAndPlaceholderWrapper>\n                            {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                {typeof inputValue === 'string' ? (\n                                    <StyledComboBoxInput\n                                        disabled={isDisabled}\n                                        value={inputValue}\n                                        onChange={onInputChange}\n                                        onBlur={handleInputBlur}\n                                        onFocus={handleInputFocus}\n                                        placeholder={placeholderText}\n                                    />\n                                ) : (\n                                    <StyledComboBoxPlaceholderText>\n                                        {placeholderText}\n                                    </StyledComboBoxPlaceholderText>\n                                )}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        </StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {shouldShowClearIcon && internalSelectedItem && (\n                            <StyledComboBoxClearIconWrapper onClick={handleClear}>\n                                <Icon icons={['fa fa-times']} />\n                            </StyledComboBoxClearIconWrapper>\n                        )}\n                        {!shouldDisableActions && (\n                            <StyledComboBoxIconWrapper\n                                $shouldShowBorderLeft={\n                                    shouldShowClearIcon === true &&\n                                    internalSelectedItem !== undefined\n                                }\n                            >\n                                <Icon icons={['fa fa-chevron-down']} />\n                            </StyledComboBoxIconWrapper>\n                        )}\n                    </StyledComboBoxHeader>\n                    {styledComboBoxElementRef.current && (\n                        <DropdownBodyWrapper\n                            anchorElement={styledComboBoxElementRef.current}\n                            bodyWidth={bodyWidth}\n                            contentHeight={contentHeight}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                            maxHeight={maxHeight}\n                        >\n                            <StyledComboBoxBody\n                                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                                $maxHeight={maxHeight}\n                                $minWidth={bodyWidth ?? bodyMinWidth}\n                                $browser={browser?.name as BrowserName}\n                                ref={contentRef}\n                                tabIndex={0}\n                            >\n                                {comboBoxGroups}\n                            </StyledComboBoxBody>\n                        </DropdownBodyWrapper>\n                    )}\n                </StyledComboBox>\n            ),\n            [\n                minWidth,\n                shouldUseFullWidth,\n                shouldUseCurrentItemWidth,\n                direction,\n                handleHeaderClick,\n                isAnimating,\n                isTouch,\n                shouldShowTransparentBackground,\n                isDisabled,\n                shouldChangeColor,\n                shouldShowBigImage,\n                prefix,\n                selectedItem,\n                internalSelectedItem,\n                placeholderImageUrl,\n                shouldShowRoundPlaceholderImage,\n                placeholderIcon,\n                inputValue,\n                onInputChange,\n                handleInputBlur,\n                handleInputFocus,\n                placeholderText,\n                shouldShowClearIcon,\n                handleClear,\n                shouldDisableActions,\n                bodyWidth,\n                contentHeight,\n                handleClose,\n                container,\n                bodyMinWidth,\n                maxHeight,\n                browser?.name,\n                comboBoxGroups,\n            ],\n        );\n    },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.styles.js

@@ -0,0 +1,243 @@
+import styled, { css } from 'styled-components';
+import { DropdownDirection } from '../../types/dropdown';
+export const StyledComboBox = styled.div`
+    user-select: none;
+    position: relative;
+
+    ${({
+  $shouldUseFullWidth,
+  $minWidth,
+  $shouldUseCurrentItemWidth
+}) => {
+  if (typeof $minWidth !== 'number') {
+    return css`
+                width: fit-content;
+            `;
+  }
+  if ($shouldUseFullWidth) {
+    return css`
+                min-width: ${$minWidth}px;
+                width: 100%;
+            `;
+  }
+  if ($shouldUseCurrentItemWidth) {
+    return '';
+  }
+  return css`
+            min-width: ${$minWidth}px;
+            max-width: ${$minWidth}px;
+        `;
+}}
+`;
+export const StyledComboBoxHeader = styled.div`
+    display: flex;
+    border: 1px solid transparent;
+    cursor: ${({
+  $isDisabled
+}) => !$isDisabled ? 'pointer' : 'default'};
+    justify-content: space-between;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    transition: background-color 0.2s ease-in-out;
+
+    ${({
+  theme,
+  $shouldShowTransparentBackground,
+  $shouldChangeColor
+}) => {
+  if ($shouldShowTransparentBackground) {
+    if (theme.colorMode === 'dark') {
+      return css`
+                    border-color: rgba(255, 255, 255, 0.5);
+                    background-color: transparent;
+                `;
+    }
+    return css`
+                border-color: rgba(0, 0, 0, 0.5);
+                background-color: transparent;
+            `;
+  }
+  return css`
+            border-color: rgba(160, 160, 160, 0.3);
+            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+        `;
+}}
+
+    ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage && css`
+            height: 42px;
+        `}
+
+    ${({
+  $isOpen,
+  $direction
+}) => {
+  if ($isOpen) {
+    return [DropdownDirection.BOTTOM, DropdownDirection.BOTTOM_LEFT, DropdownDirection.BOTTOM_RIGHT].includes($direction) ? css`
+                      border-top-left-radius: 3px;
+                      border-top-right-radius: 3px;
+                  ` : css`
+                      border-bottom-left-radius: 3px;
+                      border-bottom-right-radius: 3px;
+                  `;
+  }
+  return css`
+            border-radius: 3px;
+        `;
+}}
+
+    ${({
+  $isTouch,
+  $isDisabled,
+  theme
+}) => !$isTouch && !$isDisabled && css`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `}
+`;
+export const StyledComboBoxPlaceholder = styled.div`
+    align-items: center;
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    min-width: 0;
+    opacity: ${({
+  $shouldReduceOpacity
+}) => $shouldReduceOpacity ? 0.5 : 1};
+`;
+export const StyledComboBoxPlaceholderText = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+export const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 4px 10px;
+`;
+export const StyledComboBoxPrefix = styled.div`
+    flex: 0 0 auto;
+    min-width: 32px;
+    padding-right: 5px;
+`;
+export const StyledComboBoxInput = styled.input`
+    color: ${({
+  theme
+}) => theme.text};
+    border: none;
+    background-color: transparent;
+    width: 100%;
+`;
+export const StyledComboBoxPlaceholderImage = styled.img`
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    height: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '32px' : '22px'};
+    width: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '32px' : '22px'};
+
+    ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `}
+`;
+export const StyledComboBoxClearIconWrapper = styled.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    width: 40px;
+`;
+export const StyledComboBoxIconWrapper = styled.div`
+    align-items: center;
+    border-left: ${({
+  $shouldShowBorderLeft
+}) => $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    width: 40px;
+`;
+export const StyledComboBoxBody = styled.div`
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    max-height: ${({
+  $maxHeight
+}) => $maxHeight}px;
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                      height: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
+              `}
+`;
+export const StyledComboBoxTopic = styled.div`
+    align-items: center;
+    color: rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.65);
+    position: sticky;
+    top: 0;
+    border: black 5px;
+    cursor: default;
+    font-weight: bold;
+    display: flex;
+    gap: 10px;
+    z-index: 10;
+    padding: 4px 10px;
+    background-color: ${({
+  theme
+}) => theme['secondary-101']};
+`;
+//# sourceMappingURL=ComboBox.styles.js.map

package/lib/esm/components/combobox/ComboBox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","StyledComboBox","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$isDisabled","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\nimport { DropdownDirection } from '../../types/dropdown';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n    $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n        if (typeof $minWidth !== 'number') {\n            return css`\n                width: fit-content;\n            `;\n        }\n\n        if ($shouldUseFullWidth) {\n            return css`\n                min-width: ${$minWidth}px;\n                width: 100%;\n            `;\n        }\n\n        if ($shouldUseCurrentItemWidth) {\n            return '';\n        }\n\n        return css`\n            min-width: ${$minWidth}px;\n            max-width: ${$minWidth}px;\n        `;\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: DropdownDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    border: 1px solid transparent;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    justify-content: space-between;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                    background-color: transparent;\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n                background-color: transparent;\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor\n                ? theme['000']\n                : theme['100']};\n        `;\n    }}\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    min-width: 0;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: 4px 10px;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n    flex: 0 0 auto;\n    min-width: 32px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    color: ${({ theme }: { theme: Theme }) => theme.text};\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxClearIconWrapper = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = { $shouldShowBorderLeft: boolean };\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowBorderLeft }) =>\n        $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $shouldUseCurrentItemWidth: boolean;\n    $browser: BrowserName;\n    $maxHeight: number;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    max-height: ${({ $maxHeight }) => $maxHeight}px;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\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: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,SAASC,iBAAiB,QAAQ,sBAAsB;AAQxD,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA,MAAM,CAAC;EAAEC,mBAAmB;EAAEC,SAAS;EAAEC;AAA2B,CAAC,KAAK;EAClE,IAAI,OAAOD,SAAS,KAAK,QAAQ,EAAE;IAC/B,OAAOL,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAII,mBAAmB,EAAE;IACrB,OAAOJ,GAAG;AACtB,6BAA6BK,SAAS;AACtC;AACA,aAAa;EACL;EAEA,IAAIC,0BAA0B,EAAE;IAC5B,OAAO,EAAE;EACb;EAEA,OAAON,GAAG;AAClB,yBAAyBK,SAAS;AAClC,yBAAyBA,SAAS;AAClC,SAAS;AACL,CAAC;AACL,CAAC;AAYD,OAAO,MAAME,oBAAoB,GAAGR,MAAM,CAACI,GAA8B;AACzE;AACA;AACA,cAAc,CAAC;EAAEK;AAAY,CAAC,KAAM,CAACA,WAAW,GAAG,SAAS,GAAG,SAAU;AACzE;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,MAAM,CAAC;EAAEC,KAAK;EAAEC,gCAAgC;EAAEC;AAAmB,CAAC,KAAK;EACnE,IAAID,gCAAgC,EAAE;IAClC,IAAID,KAAK,CAACG,SAAS,KAAK,MAAM,EAAE;MAC5B,OAAOZ,GAAG;AAC1B;AACA;AACA,iBAAiB;IACL;IAEA,OAAOA,GAAG;AACtB;AACA;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,gCAAgCS,KAAK,CAACG,SAAS,KAAK,SAAS,IAAID,kBAAkB,GACjEF,KAAK,CAAC,KAAK,CAAC,GACZA,KAAK,CAAC,KAAK,CAAC;AAC9B,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEI;AAAoB,CAAC,KACtBA,mBAAmB,IACnBb,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEc,OAAO;EAAEC;AAAW,CAAC,KAAK;EAC3B,IAAID,OAAO,EAAE;IACT,OAAO,CACHb,iBAAiB,CAACe,MAAM,EACxBf,iBAAiB,CAACgB,WAAW,EAC7BhB,iBAAiB,CAACiB,YAAY,CACjC,CAACC,QAAQ,CAACJ,UAAU,CAAC,GAChBf,GAAG;AACrB;AACA;AACA,mBAAmB,GACDA,GAAG;AACrB;AACA;AACA,mBAAmB;EACX;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEoB,QAAQ;EAAEZ,WAAW;EAAEC;AAAiC,CAAC,KAC1D,CAACW,QAAQ,IACT,CAACZ,WAAW,IACZR,GAAG;AACX;AACA,oCAAoCS,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMY,yBAAyB,GAAGtB,MAAM,CAACI,GAAmC;AACnF;AACA,aAAa,CAAC;EAAEM;AAAsC,CAAC,KAAKA,KAAK,CAACa,IAAI;AACtE;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,GAAG,GAAG,CAAE;AAC7E,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGzB,MAAM,CAACI,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMsB,yCAAyC,GAAG1B,MAAM,CAACI,GAAG;AACnE;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMuB,oBAAoB,GAAG3B,MAAM,CAACI,GAAG;AAC9C;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMwB,mBAAmB,GAAG5B,MAAM,CAAC6B,KAAK;AAC/C,aAAa,CAAC;EAAEnB;AAAwB,CAAC,KAAKA,KAAK,CAACa,IAAI;AACxD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,8BAA8B,GAAG9B,MAAM,CAAC+B,GAAwC;AAC7F;AACA,eAAe,CAAC;EAAErB;AAA2C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACnF,cAAc,CAAC;EAAEI;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AAClF,aAAa,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACjF;AACA,MAAM,CAAC;EAAEkB;AAAsB,CAAC,KACxBA,qBAAqB,IACrB/B,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMgC,8BAA8B,GAAGjC,MAAM,CAACI,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAM8B,yBAAyB,GAAGlC,MAAM,CAACI,GAAmC;AACnF;AACA,mBAAmB,CAAC;EAAE+B;AAAsB,CAAC,KACrCA,qBAAqB,GAAG,oCAAoC,GAAG,MAAM;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,kBAAkB,GAAGpC,MAAM,CAACI,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEiC;AAAW,CAAC,KAAKA,UAAU;AAChD;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAE5B;AAA+B,CAAC,KAC3C4B,QAAQ,KAAK,SAAS,GAChBrC,GAAG;AACjB,0CAA0CS,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDT,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CS,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC;AAID,OAAO,MAAM6B,mBAAmB,GAAGvC,MAAM,CAACI,GAAG;AAC7C;AACA,kBAAkB,CAAC;EAAEM;AAAgC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEA;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACvF,CAAC","ignoreList":[]}

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo } from 'react';
+import { getIsTouch } from '../../../utils/environment';
+import Icon from '../../icon/Icon';
+import { StyledComboBoxItem, StyledComboBoxItemContent, StyledComboBoxItemContentHeader, StyledComboBoxItemContentHeaderRightElement, StyledComboBoxItemContentHeaderWrapper, StyledComboBoxItemContentHeaderWrapperText, StyledComboBoxItemContentSubtext, StyledComboBoxItemImage } from './ComboBoxItem.styles';
+const ComboBoxItem = ({
+  item,
+  isSelected,
+  onSelect,
+  shouldShowBigImage,
+  shouldShowRoundImage
+}) => {
+  const {
+    icons,
+    imageUrl,
+    isDisabled,
+    imageBackground,
+    suffixElement,
+    textStyles,
+    rightElement,
+    text,
+    value,
+    subtext
+  } = item;
+  const id = value;
+  const handleItemClick = useCallback(() => {
+    if (!isDisabled) {
+      onSelect({
+        text,
+        value,
+        suffixElement,
+        imageUrl,
+        icons
+      });
+    }
+  }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);
+  const isTouch = getIsTouch();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
+    id: `combobox-item__${typeof id === 'number' ? String(id) : id}${isDisabled ? '--disabled-item' : ''}`,
+    onClick: handleItemClick,
+    $isDisabled: isDisabled,
+    $isSelected: isSelected,
+    $isTouch: isTouch
+  }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
+    src: imageUrl,
+    $background: imageBackground,
+    $shouldShowBigImage: shouldShowBigImage || typeof subtext === 'string' && subtext.trim() !== '',
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), icons && /*#__PURE__*/React.createElement(Icon, {
+    icons: icons
+  }), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, {
+    $text: text,
+    $subtext: subtext
+  }, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderWrapper, {
+    as: textStyles?.tagName,
+    style: textStyles?.styles
+  }, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderWrapperText, null, text), suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageBackground, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text, textStyles?.styles, textStyles?.tagName]);
+};
+ComboBoxItem.displayName = 'ComboBoxItem';
+export default ComboBoxItem;
+//# sourceMappingURL=ComboBoxItem.js.map

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","item","isSelected","onSelect","shouldShowBigImage","shouldShowRoundImage","icons","imageUrl","isDisabled","imageBackground","suffixElement","textStyles","rightElement","text","value","subtext","id","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$background","$shouldShowBigImage","trim","$shouldShowRoundImage","$text","$subtext","as","tagName","style","styles","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderWrapper,\n    StyledComboBoxItemContentHeaderWrapperText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    item: IComboBoxItem;\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    item,\n    isSelected,\n    onSelect,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n}) => {\n    const {\n        icons,\n        imageUrl,\n        isDisabled,\n        imageBackground,\n        suffixElement,\n        textStyles,\n        rightElement,\n        text,\n        value,\n        subtext,\n    } = item;\n    const id = value;\n\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl, icons });\n        }\n    }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}${isDisabled ? '--disabled-item' : ''}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $background={imageBackground}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader $text={text} $subtext={subtext}>\n                        <StyledComboBoxItemContentHeaderWrapper\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                        >\n                            <StyledComboBoxItemContentHeaderWrapperText>\n                                {text}\n                            </StyledComboBoxItemContentHeaderWrapperText>\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderWrapper>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageBackground,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n            textStyles?.styles,\n            textStyles?.tagName,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js

@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components';
+export const StyledComboBoxItem = styled.div`
+    align-items: center;
+    background-color: ${({
+  theme,
+  $isSelected
+}) => $isSelected && theme['secondary-102']};
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    gap: 10px;
+    padding: 8px 10px;
+    transition: background-color 0.2s ease-in-out;
+
+    ${({
+  $isDisabled
+}) => $isDisabled && css`
+            opacity: 0.5;
+            pointer-events: none;
+        `}
+
+    ${({
+  $isDisabled,
+  $isTouch,
+  theme
+}) => !$isDisabled && !$isTouch && css`
+            &:hover {
+                background-color: ${theme['secondary-101']};
+            }
+
+            &:focus {
+                background-color: ${theme['secondary-101']};
+            }
+        `}
+`;
+export const StyledComboBoxItemImage = styled.img`
+    ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `}
+
+    background: ${({
+  $background,
+  theme
+}) => $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    flex: 0 0 auto;
+    height: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+    object-fit: cover;
+    width: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+`;
+export const StyledComboBoxItemContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    line-height: normal;
+    min-width: 0;
+    width: 100%;
+`;
+export const StyledComboBoxItemContentHeader = styled.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+`;
+export const StyledComboBoxItemContentHeaderWrapper = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    gap: 4px;
+    min-width: 0;
+`;
+export const StyledComboBoxItemContentHeaderWrapperText = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+export const StyledComboBoxItemContentHeaderRightElement = styled.div`
+    align-items: center;
+    display: flex;
+`;
+export const StyledComboBoxItemContentSubtext = styled.div`
+    font-size: 85%;
+    margin-top: 2px;
+`;
+//# sourceMappingURL=ComboBoxItem.styles.js.map

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","theme","$isSelected","text","$isDisabled","$isTouch","StyledComboBoxItemImage","img","$shouldShowRoundImage","$background","$shouldShowBigImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isDisabled?: boolean;\n    $isSelected: boolean;\n    $isTouch: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-102']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 8px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n\n    ${({ $isDisabled, $isTouch, theme }: StyledComboBoxItemProps) =>\n        !$isDisabled &&\n        !$isTouch &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-101']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-101']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowBigImage?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n\n    background: ${({ $background, theme }: StyledComboBoxItemImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    flex: 0 0 auto;\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n    object-fit: cover;\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    line-height: normal;\n    min-width: 0;\n    width: 100%;\n`;\n\ntype StyledComboBoxItemContentHeaderProps = {\n    $text?: string;\n    $subtext?: string;\n};\n\nexport const StyledComboBoxItemContentHeader = styled.div<StyledComboBoxItemContentHeaderProps>`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapper = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    gap: 4px;\n    min-width: 0;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapperText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAqC,CAAC,KAChEA,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAC7C,aAAa,CAAC;EAAEA;AAA+B,CAAC,KAAKA,KAAK,CAACE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXN,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,QAAQ;EAAEJ;AAA+B,CAAC,KACxD,CAACG,WAAW,IACZ,CAACC,QAAQ,IACTP,GAAG;AACX;AACA,oCAAoCG,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;AAQD,OAAO,MAAMK,uBAAuB,GAAGT,MAAM,CAACU,GAAiC;AAC/E,MAAM,CAAC;EAAEC;AAAsB,CAAC,KACxBA,qBAAqB,IACrBV,GAAG;AACX;AACA,SAAS;AACT;AACA,kBAAkB,CAAC;EAAEW,WAAW;EAAER;AAAoC,CAAC,KAC/DQ,WAAW,IAAI,QAAQR,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA,cAAc,CAAC;EAAES;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AAClF;AACA,aAAa,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACjF,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGd,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMY,+BAA+B,GAAGf,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,sCAAsC,GAAGhB,MAAM,CAACG,GAAG;AAChE;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMc,0CAA0C,GAAGjB,MAAM,CAACG,GAAG;AACpE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMe,2CAA2C,GAAGlB,MAAM,CAACG,GAAG;AACrE;AACA;AACA,CAAC;AAED,OAAO,MAAMgB,gCAAgC,GAAGnB,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/content-card/ContentCard.js

@@ -0,0 +1,23 @@
+import React, { useContext, useMemo } from 'react';
+import { ContentCardType } from '../../types/contentCard';
+import AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';
+import { StyledContentCard } from './ContentCard.styles';
+const ContentCard = ({
+  children,
+  onClick,
+  type = ContentCardType.Default
+}) => {
+  const areaProvider = useContext(AreaContext);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  return /*#__PURE__*/React.createElement(StyledContentCard, {
+    onClick: onClick,
+    $type: type,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/React.createElement(AreaContextProvider, {
+    contentCardType: type,
+    shouldChangeColor: !shouldChangeColor
+  }, children));
+};
+ContentCard.displayName = 'ContentCard';
+export default ContentCard;
+//# sourceMappingURL=ContentCard.js.map

package/lib/esm/components/content-card/ContentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.js","names":["React","useContext","useMemo","ContentCardType","AreaContextProvider","AreaContext","StyledContentCard","ContentCard","children","onClick","type","Default","areaProvider","shouldChangeColor","createElement","$type","$shouldChangeColor","contentCardType","displayName"],"sources":["../../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useMemo } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => {\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    return (\n        <StyledContentCard onClick={onClick} $type={type} $shouldChangeColor={shouldChangeColor}>\n            <AreaContextProvider contentCardType={type} shouldChangeColor={!shouldChangeColor}>\n                {children}\n            </AreaContextProvider>\n        </StyledContentCard>\n    );\n};\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACjE,SAASC,eAAe,QAAQ,yBAAyB;AACzD,OAAOC,mBAAmB,IAAIC,WAAW,QAAQ,sCAAsC;AACvF,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGA,CAAC;EACvCC,QAAQ;EACRC,OAAO;EACPC,IAAI,GAAGP,eAAe,CAACQ;AAC3B,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGX,UAAU,CAACI,WAAW,CAAC;EAE5C,MAAMQ,iBAAiB,GAAGX,OAAO,CAC7B,MAAMU,YAAY,CAACC,iBAAiB,IAAI,KAAK,EAC7C,CAACD,YAAY,CAACC,iBAAiB,CACnC,CAAC;EAED,oBACIb,KAAA,CAAAc,aAAA,CAACR,iBAAiB;IAACG,OAAO,EAAEA,OAAQ;IAACM,KAAK,EAAEL,IAAK;IAACM,kBAAkB,EAAEH;EAAkB,gBACpFb,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAACa,eAAe,EAAEP,IAAK;IAACG,iBAAiB,EAAE,CAACA;EAAkB,GAC7EL,QACgB,CACN,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACW,WAAW,GAAG,aAAa;AAEvC,eAAeX,WAAW","ignoreList":[]}