@chayns-components/core 5.0.0-beta.860 → 5.0.0-beta.866

package/lib/cjs/components/slider-button/SliderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_calculate","_sliderButton","_SliderButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SliderButton","selectedButtonId","isDisabled","items","onChange","shouldUseFullWidth","selectedButton","setSelectedButton","useState","undefined","dragRange","setDragRange","left","right","sliderButtonRef","useRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","useAnimate","initialItemWidth","useMemo","calculateBiggestWidth","sliderSize","useElementSize","theme","useTheme","isSliderBigger","Math","floor","width","length","itemWidth","sliderWidth","maxShownItemsCount","itemCount","useEffect","count","animation","useCallback","x","current","type","duration","setItemPosition","index","scrollLeft","findIndex","id","_items$","handleClick","buttons","map","text","createElement","StyledSliderButtonItem","$width","key","onClick","$isSelected","thumbText","_items$2","selectedItem","find","snapPoints","points","push","handleDragEnd","setRefreshScrollEnabled","position","getThumbPosition","middle","getNearestPoint","nearestPoint","nearestIndex","_items$nearestIndex","handleWhileDrag","scrollSpeed","_items$nearestIndex2","handleScroll","event","target","_items$nearestIndex3","clearTimeout","window","setTimeout","StyledSliderButton","$isDisabled","ref","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDrag","onDragEnd","whileTap","backgroundColor","whileHover","StyledSliderButtonWrapper","onScroll","AnimatePresence","StyledSliderButtonButtonsWrapper","displayName","_default","exports"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\n    StyledSliderButtonWrapper,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when a button is selected.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The buttons that are slidable.\n     */\n    items: SliderButtonItem[];\n    /**\n     * The id of a button that should be selected.\n     */\n    selectedButtonId?: string;\n    /**\n     * Whether the full width should be used if the slider is smaller.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({\n    selectedButtonId,\n    isDisabled,\n    items,\n    onChange,\n    shouldUseFullWidth = false,\n}) => {\n    const [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const timeout = useRef<number>();\n    const preventHandleScroll = useRef(false);\n\n    const [scope, animate] = useAnimate();\n\n    const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const theme: Theme = useTheme();\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const itemWidth = useMemo(() => {\n        if (shouldUseFullWidth) {\n            const sliderWidth = sliderSize?.width || 0;\n            const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);\n            const itemCount = items.length || 1;\n\n            return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n        }\n\n        return initialItemWidth;\n    }, [initialItemWidth, isSliderBigger, items.length, shouldUseFullWidth, sliderSize?.width]);\n\n    useEffect(() => {\n        if (sliderSize) {\n            const sliderWidth = itemWidth * (items.length - 1);\n\n            const count = Math.floor(sliderSize.width / itemWidth);\n\n            setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n        }\n    }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n    const animation = useCallback(\n        async (x: number) => {\n            await animate(\n                scope.current,\n                { x },\n                {\n                    type: 'tween',\n                    duration: 0.2,\n                },\n            );\n        },\n        [animate, scope],\n    );\n\n    const setItemPosition = useCallback(\n        (index: number) => {\n            if (!isSliderBigger) {\n                void animation(itemWidth * index);\n\n                return;\n            }\n\n            const count = dragRange.right / itemWidth;\n\n            if (items.length - count >= index) {\n                void animation(0);\n            } else {\n                void animation(itemWidth * (count - (items.length - index)));\n            }\n\n            if (sliderButtonWrapperRef.current) {\n                sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;\n            }\n        },\n        [animation, dragRange.right, isSliderBigger, itemWidth, items.length],\n    );\n\n    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                setItemPosition(index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [\n        animation,\n        dragRange.right,\n        isSliderBigger,\n        itemWidth,\n        items,\n        selectedButtonId,\n        setItemPosition,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            setItemPosition(index);\n        },\n        [isDisabled, onChange, setItemPosition],\n    );\n\n    const buttons = useMemo(\n        () =>\n            items.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            )),\n        [handleClick, itemWidth, items, selectedButton],\n    );\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : items[0]?.text;\n    }, [items, selectedButton]);\n\n    /**\n     * Creates an array with the snap points relative to the width of the items\n     */\n    const snapPoints = useMemo(() => {\n        const points = [0];\n\n        for (let i = 1; i < items.length; i++) {\n            points.push(itemWidth * i);\n        }\n\n        return points;\n    }, [itemWidth, items.length]);\n\n    const handleDragEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { middle, left } = position;\n\n        let scrollLeft = 0;\n\n        if (sliderButtonWrapperRef.current) {\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n            sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n                snapPoints,\n                position: middle,\n                scrollLeft: scrollLeft - left,\n            }).nearestPoint;\n        }\n\n        const { nearestIndex } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft,\n        });\n\n        const { nearestPoint } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft: 0,\n        });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n\n        preventHandleScroll.current = false;\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        preventHandleScroll.current = true;\n        void setRefreshScrollEnabled(false);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { right, left, middle } = position;\n\n        let scrollLeft = 0;\n\n        const scrollSpeed = 3;\n\n        if (sliderButtonWrapperRef.current) {\n            if (right >= dragRange.right) {\n                sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;\n            }\n\n            if (left <= dragRange.left) {\n                sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;\n            }\n\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [dragRange, itemWidth, items, scope, snapPoints]);\n\n    // With this, the handleScroll works before the thumb is moved the first time.\n    useEffect(() => {\n        void animation(1);\n        void animation(0);\n    }, [animation]);\n\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLElement>) => {\n            if (preventHandleScroll.current) {\n                return;\n            }\n\n            void setRefreshScrollEnabled(false);\n\n            const position = getThumbPosition({ scope, itemWidth });\n\n            if (!position) {\n                return;\n            }\n\n            const { middle } = position;\n\n            const { scrollLeft } = event.target as HTMLDivElement;\n\n            const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n            if (nearestIndex >= 0) {\n                setSelectedButton(items[nearestIndex]?.id);\n            }\n\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleDragEnd();\n            }, 200);\n        },\n        [handleDragEnd, itemWidth, items, scope, snapPoints],\n    );\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <StyledMotionSliderButtonThumb\n                    ref={scope}\n                    drag={isDisabled ? false : 'x'}\n                    dragElastic={0}\n                    dragConstraints={\n                        isSliderBigger\n                            ? { ...dragRange, right: dragRange.right - itemWidth }\n                            : { ...dragRange }\n                    }\n                    $width={itemWidth}\n                    onDrag={handleWhileDrag}\n                    onDragEnd={handleDragEnd}\n                    whileTap={isDisabled ? {} : { backgroundColor: theme['407'] }}\n                    whileHover={isDisabled ? {} : { backgroundColor: theme['409'] }}\n                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\n                    $isDisabled={isDisabled}\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                    onScroll={handleScroll}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleScroll,\n            handleWhileDrag,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            scope,\n            theme,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SliderButton.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_useElementSize","_calculate","_sliderButton","_Icon","_interopRequireDefault","_Popup","_SliderButton","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SliderButton","selectedButtonId","isDisabled","items","onChange","dragRange","setDragRange","useState","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","sliderButtonRef","useRef","sliderButtonWrapperRef","popupRef","scope","animate","useAnimate","initialItemWidth","useMemo","calculateBiggestWidth","elementSize","useElementSize","useEffect","isSliderBigger","Math","floor","itemWidth","sliderWidth","maxShownItemsCount","itemCount","count","animation","useCallback","x","current","type","duration","setItemPosition","index","findIndex","id","handleClick","show","hide","buttons","newItems","slice","otherItems","elements","map","text","createElement","StyledSliderButtonItem","$width","key","onClick","popupContent","StyledSliderButtonPopupContentItem","push","ref","content","StyledSliderButtonPopupContent","icons","color","pseudoButtons","snapPoints","points","handleDragEnd","setRefreshScrollEnabled","position","getThumbPosition","middle","scrollLeft","getNearestPoint","nearestPoint","nearestIndex","_items$nearestIndex","StyledSliderButton","$isDisabled","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDragEnd","StyledSliderButtonWrapper","AnimatePresence","displayName","_default","exports"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { PopupRef } from '../../types/popup';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\n    StyledSliderButtonPopupContent,\n    StyledSliderButtonPopupContentItem,\n    StyledSliderButtonWrapper,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when a button is selected.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The buttons that are slidable.\n     */\n    items: SliderButtonItem[];\n    /**\n     * The id of a button that should be selected.\n     */\n    selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n    const [shownItemsCount, setShownItemsCount] = useState(items.length);\n    const [sliderSize, setSliderSize] = useState({ width: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<PopupRef>(null);\n\n    const [scope, animate] = useAnimate();\n\n    const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n    const elementSize = useElementSize(sliderButtonRef);\n\n    useEffect(() => {\n        if (elementSize) setSliderSize(elementSize);\n    }, [elementSize]);\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const itemWidth = useMemo(() => {\n        const sliderWidth = sliderSize?.width || 0;\n        const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);\n        const itemCount = items.length || 1;\n\n        setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n        return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n    }, [initialItemWidth, isSliderBigger, items.length, sliderSize?.width]);\n\n    useEffect(() => {\n        if (sliderSize) {\n            const sliderWidth = itemWidth * (items.length - 1);\n\n            const count = Math.floor(sliderSize.width / itemWidth);\n\n            setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n        }\n    }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n    const animation = useCallback(\n        async (x: number) => {\n            await animate(\n                scope.current,\n                { x },\n                {\n                    type: 'tween',\n                    duration: 0.2,\n                },\n            );\n        },\n        [animate, scope],\n    );\n\n    const setItemPosition = useCallback(\n        (index: number) => {\n            void animation(itemWidth * index);\n        },\n        [animation, itemWidth],\n    );\n\n    useEffect(() => {\n        if (typeof selectedButtonId === 'string') {\n            let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n                index = shownItemsCount - 1;\n            }\n\n            if (index >= 0) {\n                setItemPosition(index);\n            }\n        }\n    }, [\n        animation,\n        dragRange.right,\n        isSliderBigger,\n        itemWidth,\n        items,\n        selectedButtonId,\n        setItemPosition,\n        shownItemsCount,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            if (typeof onChange === 'function' && id !== 'more') {\n                onChange(id);\n            }\n\n            if (popupRef.current) {\n                if (id === 'more') {\n                    popupRef.current.show();\n                } else {\n                    popupRef.current.hide();\n                }\n            }\n\n            setItemPosition(index);\n        },\n        [isDisabled, onChange, setItemPosition],\n    );\n\n    const buttons = useMemo(() => {\n        if (items.length > shownItemsCount) {\n            const newItems = items.slice(0, shownItemsCount - 1);\n            const otherItems = items.slice(shownItemsCount - 1);\n\n            const elements = newItems.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            ));\n\n            const popupContent = otherItems.map(({ id, text }) => (\n                <StyledSliderButtonPopupContentItem\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, newItems.length)}\n                >\n                    {text}\n                </StyledSliderButtonPopupContentItem>\n            ));\n\n            const id = 'more';\n\n            elements.push(\n                <StyledSliderButtonItem $width={itemWidth} key={`slider-button-${id}`}>\n                    <Popup\n                        ref={popupRef}\n                        content={\n                            <StyledSliderButtonPopupContent>\n                                {popupContent}\n                            </StyledSliderButtonPopupContent>\n                        }\n                    >\n                        <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n                    </Popup>\n                </StyledSliderButtonItem>,\n            );\n\n            return elements;\n        }\n        return items.map(({ id, text }) => (\n            <StyledSliderButtonItem $width={itemWidth} key={`slider-button-${id}`}>\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [handleClick, itemWidth, items, shownItemsCount]);\n\n    const pseudoButtons = useMemo(() => {\n        if (items.length > shownItemsCount) {\n            const newItems = items.slice(0, shownItemsCount - 1);\n\n            const elements = newItems.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`pseudo-slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            ));\n\n            const id = 'more';\n\n            elements.push(\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`pseudo-slider-button-${id}`}\n                    onClick={() => handleClick(id, newItems.length)}\n                >\n                    <Icon icons={['fa fa-ellipsis']} />\n                </StyledSliderButtonItem>,\n            );\n\n            return elements;\n        }\n        return items.map(({ id, text }, index) => (\n            <StyledSliderButtonItem\n                $width={itemWidth}\n                key={`pseudo-slider-button-${id}`}\n                onClick={() => handleClick(id, index)}\n            >\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [handleClick, itemWidth, items, shownItemsCount]);\n\n    /**\n     * Creates an array with the snap points relative to the width of the items\n     */\n    const snapPoints = useMemo(() => {\n        const points = [0];\n\n        for (let i = 1; i < items.length; i++) {\n            points.push(itemWidth * i);\n        }\n\n        return points;\n    }, [itemWidth, items.length]);\n\n    const handleDragEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { middle, left } = position;\n\n        let scrollLeft = 0;\n\n        if (sliderButtonWrapperRef.current) {\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n            sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n                snapPoints,\n                position: middle,\n                scrollLeft: scrollLeft - left,\n            }).nearestPoint;\n        }\n\n        const { nearestIndex } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft,\n        });\n\n        const { nearestPoint } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft: 0,\n        });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            let id;\n\n            if (nearestIndex === shownItemsCount - 1) {\n                id = 'more';\n            } else {\n                id = items[nearestIndex]?.id;\n            }\n\n            if (popupRef.current) {\n                if (id === 'more') {\n                    popupRef.current.show();\n                } else {\n                    popupRef.current.hide();\n                }\n            }\n\n            if (typeof onChange === 'function' && id && id !== 'more') {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <StyledSliderButtonButtonsWrapper $isInvisible>\n                    {pseudoButtons}\n                </StyledSliderButtonButtonsWrapper>\n                <StyledMotionSliderButtonThumb\n                    ref={scope}\n                    drag={isDisabled ? false : 'x'}\n                    dragElastic={0}\n                    dragConstraints={\n                        isSliderBigger\n                            ? { ...dragRange, right: dragRange.right - itemWidth }\n                            : { ...dragRange }\n                    }\n                    $width={itemWidth}\n                    onDragEnd={handleDragEnd}\n                />\n                <StyledSliderButtonWrapper\n                    $isDisabled={isDisabled}\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            pseudoButtons,\n            scope,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider-button/SliderButton.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSliderButtonWrapper = exports.StyledSliderButtonItem = exports.StyledSliderButtonButtonsWrapper = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
+exports.StyledSliderButtonWrapper = exports.StyledSliderButtonPopupContentItem = exports.StyledSliderButtonPopupContent = exports.StyledSliderButtonItem = exports.StyledSliderButtonButtonsWrapper = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,7 +18,7 @@ const StyledSliderButtonWrapper = exports.StyledSliderButtonWrapper = _styledCom
     align-items: center;
     background-color: ${({
   theme
-}) => theme['404']};
+}) => theme['408']};
     border-radius: 3px;
     border: none;
     color: white;
@@ -29,7 +29,6 @@ const StyledSliderButtonWrapper = exports.StyledSliderButtonWrapper = _styledCom
     position: relative;
     user-select: none;
     transition: opacity 0.3s ease;
-    z-index: 1;
 
     width: ${({
   $width
@@ -67,26 +66,48 @@ const StyledSliderButtonItem = exports.StyledSliderButtonItem = _styledComponent
     justify-content: center;
     color: white;
 `;
+const StyledSliderButtonPopupContent = exports.StyledSliderButtonPopupContent = _styledComponents.default.div`
+    display: flex;
+    flex-direction: column;
+    padding: 7px 12px;
+`;
+const StyledSliderButtonPopupContentItem = exports.StyledSliderButtonPopupContentItem = _styledComponents.default.div`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    cursor: pointer;
+`;
 const StyledSliderButtonButtonsWrapper = exports.StyledSliderButtonButtonsWrapper = _styledComponents.default.div`
     position: absolute;
+    z-index: ${({
+  $isInvisible
+}) => $isInvisible ? '2' : '4'};
+    opacity: ${({
+  $isInvisible
+}) => $isInvisible ? 0 : 1};
     display: flex;
+    cursor: pointer;
     align-items: center;
+    pointer-events: ${({
+  $isInvisible
+}) => $isInvisible ? 'auto' : 'none'};
 `;
 const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0, _styledComponents.default)(_framerMotion.motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
     background-color: ${({
   theme
-}) => theme['408']};
+}) => theme['405']};
+    opacity: 1;
     width: ${({
   $width
-}) => $width}px;
+}) => $width - 8}px;
     position: absolute;
-    border-radius: 3px;
-    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    top: 4px;
+    left: 4px;
     white-space: nowrap;
     z-index: 3;
-    height: 32px;
+    height: 24px;
     padding: 7px 12px;
     display: flex;
     color: white;

package/lib/cjs/components/slider-button/SliderButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSliderButton","exports","styled","div","$isDisabled","StyledSliderButtonWrapper","theme","$width","StyledSliderButtonItem","StyledSliderButtonButtonsWrapper","StyledMotionSliderButtonThumb","motion"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n    z-index: 1;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n    overflow-y: hidden;\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $isSelected: boolean; $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    white-space: nowrap;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div`\n    position: absolute;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    width: ${({ $width }) => $width}px;\n    position: absolute;\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    white-space: nowrap;\n    z-index: 3;\n    height: 32px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMI,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAR,OAAA,CAAAQ,gCAAA,GAAGP,yBAAM,CAACC,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAIM,MAAMO,6BAA6B,GAAAT,OAAA,CAAAS,6BAAA,GAAG,IAAAR,yBAAM,EAACS,oBAAM,CAACR,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvF,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSliderButton","exports","styled","div","$isDisabled","StyledSliderButtonWrapper","theme","$width","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","motion"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n    overflow-y: hidden;\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    white-space: nowrap;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n    display: flex;\n    flex-direction: column;\n    padding: 7px 12px;\n`;\n\nexport const StyledSliderButtonPopupContentItem = styled.div`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    cursor: pointer;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n    position: absolute;\n    z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n    opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['405']};\n    opacity: 1;\n    width: ${({ $width }) => $width - 8}px;\n    position: absolute;\n    border-radius: 2px;\n    top: 4px;\n    left: 4px;\n    white-space: nowrap;\n    z-index: 3;\n    height: 24px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMI,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,8BAA8B,GAAAR,OAAA,CAAAQ,8BAAA,GAAGP,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAEM,MAAMO,kCAAkC,GAAAT,OAAA,CAAAS,kCAAA,GAAGR,yBAAM,CAACC,GAAG;AAC5D;AACA;AACA;AACA,CAAC;AAIM,MAAMQ,gCAAgC,GAAAV,OAAA,CAAAU,gCAAA,GAAGT,yBAAM,CAACC,GAA0C;AACjG;AACA,eAAe,CAAC;EAAES;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;AAIM,MAAMC,6BAA6B,GAAAZ,OAAA,CAAAY,6BAAA,GAAG,IAAAX,yBAAM,EAACY,oBAAM,CAACX,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5E;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.js

@@ -110,6 +110,7 @@ const AccordionHead = _ref => {
     initial: false,
     onClick: !isFixed && tmp ? onClick : undefined,
     ref: titleWrapperRef,
+    $isWrapped: isWrapped,
     key: `accordionHeadContentWrapper--${uuid}`
   }, typeof onTitleInputChange === 'function' ?
   /*#__PURE__*/

package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","Provider","shouldChangeColor","_extends","onFocus","onBlur","onChange","scale","exit","$isOpen","$isWrapped","$color","$hasSearch","transition","duration","layout","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                    hasSearch: typeof onSearchChange === 'function',\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    $color={titleColor}\n                                    $hasSearch={typeof onSearchChange === 'function'}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onFocus","onBlur","onChange","scale","exit","$isOpen","$color","$hasSearch","transition","duration","layout","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                    hasSearch: typeof onSearchChange === 'function',\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                $isWrapped={isWrapped}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    $color={titleColor}\n                                    $hasSearch={typeof onSearchChange === 'function'}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js

@@ -60,6 +60,15 @@ export const StyledMotionContentWrapper = styled(motion.div)`
     height: 100%;
     overflow: hidden;
     margin-right: 10px;
+
+    ${_ref6 => {
+  let {
+    $isWrapped
+  } = _ref6;
+  return $isWrapped && css`
+            align-items: center;
+        `;
+}}
 `;
 export const StyledMotionTitleWrapper = styled(motion.div)`
     display: grid;
@@ -67,54 +76,54 @@ export const StyledMotionTitleWrapper = styled(motion.div)`
     grid-template-areas: 'header';
 `;
 export const StyledMotionTitle = styled(motion.div)`
-    font-size: ${_ref6 => {
+    font-size: ${_ref7 => {
   let {
     $isOpen,
     $isWrapped
-  } = _ref6;
+  } = _ref7;
   return $isOpen && !$isWrapped ? '1.3rem' : undefined;
 }};
-    font-weight: ${_ref7 => {
+    font-weight: ${_ref8 => {
   let {
     $isOpen,
     $isWrapped
-  } = _ref7;
+  } = _ref8;
   return $isOpen && $isWrapped ? 700 : 'normal';
 }};
     grid-area: header;
-    height: ${_ref8 => {
+    height: ${_ref9 => {
   let {
     $isWrapped,
     $hasSearch
-  } = _ref8;
+  } = _ref9;
   return $isWrapped || $hasSearch ? '100%' : undefined;
 }};
     overflow: hidden;
     text-overflow: ellipsis;
     transform-origin: top left;
     user-select: none;
-    color: ${_ref9 => {
+    color: ${_ref10 => {
   let {
     $color,
     theme
-  } = _ref9;
+  } = _ref10;
   return $color ?? theme.text;
 }};
-    white-space: ${_ref10 => {
+    white-space: ${_ref11 => {
   let {
     $isOpen,
     $isWrapped,
     $hasSearch
-  } = _ref10;
+  } = _ref11;
   return $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap';
 }};
 
     will-change: unset !important;
 
-    ${_ref11 => {
+    ${_ref12 => {
   let {
     $isWrapped
-  } = _ref11;
+  } = _ref12;
   return $isWrapped && css`
             align-content: center;
         `;
@@ -147,25 +156,25 @@ export const StyledMotionRightInput = styled(motion.input)`
     background-color: transparent;
     border: 1px solid transparent;
     border-bottom-color: rgba(
-        ${_ref12 => {
+        ${_ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme['headline-rgb'];
 }},
         0.45
     );
-    color: ${_ref13 => {
+    color: ${_ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.text;
 }};
     grid-area: header;
-    padding: ${_ref14 => {
+    padding: ${_ref15 => {
   let {
     $hasIcon
-  } = _ref14;
+  } = _ref15;
   return $hasIcon ? '5px 23px 5px 1px' : '5px 1px';
 }};
 `;

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","StyledMotionTitleWrapper","StyledMotionTitle","_ref6","$isOpen","$isWrapped","undefined","_ref7","_ref8","$hasSearch","_ref9","$color","_ref10","_ref11","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref12","_ref13","_ref14","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n    $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n        $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","_ref6","$isWrapped","StyledMotionTitleWrapper","StyledMotionTitle","_ref7","$isOpen","undefined","_ref8","_ref9","$hasSearch","_ref10","$color","_ref11","_ref12","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref13","_ref14","_ref15","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-items: center;\n        `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n    $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n        $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}