@chayns-components/core 5.0.0-beta.606 → 5.0.0-beta.607

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

@@ -31,7 +31,7 @@ const SliderButton = ({
   const [scope, animate] = (0, _framerMotion.useAnimate)();
   const itemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
   const sliderSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
-  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && sliderSize.width < itemWidth * (items.length - 1), [itemWidth, items.length, sliderSize]);
+  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
   (0, _react.useEffect)(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
@@ -99,10 +99,11 @@ const SliderButton = ({
     $isSelected: id === selectedButton
   }, text)), [handleClick, itemWidth, items, selectedButton]);
   const thumbText = (0, _react.useMemo)(() => {
+    var _items$2;
     const selectedItem = items.find(({
       id
     }) => id === selectedButton);
-    return selectedItem ? selectedItem.text : '';
+    return selectedItem ? selectedItem.text : (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.text;
   }, [items, selectedButton]);
 
   /**

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_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","selectedButton","setSelectedButton","useState","undefined","dragRange","setDragRange","left","right","sliderButtonRef","useRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","useAnimate","itemWidth","useMemo","calculateBiggestWidth","sliderSize","useElementSize","isSliderBigger","width","length","useEffect","sliderWidth","count","Math","floor","animation","useCallback","x","current","type","duration","setItemPosition","index","scrollLeft","findIndex","id","_items$","handleClick","buttons","map","text","createElement","StyledSliderButtonItem","$width","key","onClick","$isSelected","thumbText","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","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 { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\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\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\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 itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && sliderSize.width < itemWidth * (items.length - 1),\n        [itemWidth, items.length, sliderSize],\n    );\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 : '';\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                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\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            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","_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","selectedButton","setSelectedButton","useState","undefined","dragRange","setDragRange","left","right","sliderButtonRef","useRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","useAnimate","itemWidth","useMemo","calculateBiggestWidth","sliderSize","useElementSize","isSliderBigger","Math","floor","width","length","useEffect","sliderWidth","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","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 { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\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\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\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 itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length,\n        [itemWidth, items.length, sliderSize],\n    );\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                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\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            thumbText,\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

@@ -61,6 +61,7 @@ const StyledSliderButtonItem = exports.StyledSliderButtonItem = _styledComponent
 }) => $width}px;
     display: flex;
     justify-content: center;
+    color: white;
 `;
 const StyledSliderButtonButtonsWrapper = exports.StyledSliderButtonButtonsWrapper = _styledComponents.default.div`
     position: absolute;
@@ -83,6 +84,7 @@ const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0
     height: 32px;
     padding: 7px 12px;
     display: flex;
+    color: white;
     justify-content: center;
     align-items: center;
     cursor: pointer;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__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 }>;\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: scroll;\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    justify-content: center;\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    z-index: 3;\n    height: 32px;\n    padding: 7px 12px;\n    display: flex;\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,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACtE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAG;AAC5D;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAoC;AACpF;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAO;AACxC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAO;AACxC;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAR,OAAA,CAAAQ,gCAAA,GAAGP,yBAAM,CAACC,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAIM,MAAMO,6BAA6B,GAAAT,OAAA,CAAAS,6BAAA,GAAG,IAAAR,yBAAM,EAACS,oBAAM,CAACR,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AACxF,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__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 }>;\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: scroll;\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    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    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,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACtE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAG;AAC5D;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAoC;AACpF;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAO;AACxC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAO;AACxC;AACA;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAR,OAAA,CAAAQ,gCAAA,GAAGP,yBAAM,CAACC,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAIM,MAAMO,6BAA6B,GAAAT,OAAA,CAAAS,6BAAA,GAAG,IAAAR,yBAAM,EAACS,oBAAM,CAACR,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AACxF,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/slider-button/SliderButton.js

@@ -24,7 +24,7 @@ const SliderButton = _ref => {
   const [scope, animate] = useAnimate();
   const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
   const sliderSize = useElementSize(sliderButtonRef);
-  const isSliderBigger = useMemo(() => sliderSize && sliderSize.width < itemWidth * (items.length - 1), [itemWidth, items.length, sliderSize]);
+  const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
   useEffect(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
@@ -103,7 +103,7 @@ const SliderButton = _ref => {
       } = _ref4;
       return id === selectedButton;
     });
-    return selectedItem ? selectedItem.text : '';
+    return selectedItem ? selectedItem.text : items[0]?.text;
   }, [items, selectedButton]);
 
   /**

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","itemWidth","sliderSize","isSliderBigger","width","length","sliderWidth","count","Math","floor","animation","x","current","type","duration","setItemPosition","index","scrollLeft","findIndex","_ref2","id","handleClick","buttons","map","_ref3","text","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref4","snapPoints","points","i","push","handleDragEnd","position","middle","nearestPoint","nearestIndex","handleWhileDrag","scrollSpeed","handleScroll","event","target","clearTimeout","window","setTimeout","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","onScroll","displayName"],"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 { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\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\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\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 itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && sliderSize.width < itemWidth * (items.length - 1),\n        [itemWidth, items.length, sliderSize],\n    );\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 : '';\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                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\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            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":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","itemWidth","sliderSize","isSliderBigger","Math","floor","width","length","sliderWidth","count","animation","x","current","type","duration","setItemPosition","index","scrollLeft","findIndex","_ref2","id","handleClick","buttons","map","_ref3","text","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref4","snapPoints","points","i","push","handleDragEnd","position","middle","nearestPoint","nearestIndex","handleWhileDrag","scrollSpeed","handleScroll","event","target","clearTimeout","window","setTimeout","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","onScroll","displayName"],"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 { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\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\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\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 itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length,\n        [itemWidth, items.length, sliderSize],\n    );\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                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\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            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

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

@@ -69,6 +69,7 @@ export const StyledSliderButtonItem = styled.div`
 }}px;
     display: flex;
     justify-content: center;
+    color: white;
 `;
 export const StyledSliderButtonButtonsWrapper = styled.div`
     position: absolute;
@@ -97,6 +98,7 @@ export const StyledMotionSliderButtonThumb = styled(motion.div)`
     height: 32px;
     padding: 7px 12px;
     display: flex;
+    color: white;
     justify-content: center;
     align-items: center;
     cursor: pointer;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","$isDisabled","StyledSliderButtonWrapper","_ref2","theme","_ref3","$width","StyledSliderButtonItem","_ref4","_ref5","StyledSliderButtonButtonsWrapper","StyledMotionSliderButtonThumb","_ref6","_ref7"],"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 }>;\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: scroll;\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    justify-content: center;\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    z-index: 3;\n    height: 32px;\n    padding: 7px 12px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA6B;AACtE,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACE,GAAoC;AACpF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiBS,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA,CAAC;AACxC,iBAAiBG,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA,CAAC;AACxC;AACA;AACA,CAAC;AAED,OAAO,MAAMI,gCAAgC,GAAGb,MAAM,CAACE,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMY,6BAA6B,GAAGd,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwBa,KAAA;EAAA,IAAC;IAAER;EAA0C,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACxF,aAAaS,KAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,KAAA;EAAA,OAAKP,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","$isDisabled","StyledSliderButtonWrapper","_ref2","theme","_ref3","$width","StyledSliderButtonItem","_ref4","_ref5","StyledSliderButtonButtonsWrapper","StyledMotionSliderButtonThumb","_ref6","_ref7"],"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 }>;\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: scroll;\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    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    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,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA6B;AACtE,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACE,GAAoC;AACpF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiBS,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA,CAAC;AACxC,iBAAiBG,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA,CAAC;AACxC;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,gCAAgC,GAAGb,MAAM,CAACE,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMY,6BAA6B,GAAGd,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwBa,KAAA;EAAA,IAAC;IAAER;EAA0C,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACxF,aAAaS,KAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,KAAA;EAAA,OAAKP,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.606",
+    "version": "5.0.0-beta.607",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -83,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8ef526915e20f2f57bf154241c3a9c891007c4ee"
+    "gitHead": "dfe932f9f2cf91b1bdec6bb31ca808be0221af4a"
 }