@chayns-components/core 5.0.0-beta.517 → 5.0.0-beta.519

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

@@ -17,13 +17,6 @@ const SliderButton = _ref => {
   });
   const sliderButtonRef = useRef(null);
   const [scope, animate] = useAnimate();
-  useEffect(() => {
-    if (selectedButtonId) {
-      setSelectedButton(selectedButtonId);
-    } else {
-      setSelectedButton(items[0]?.id);
-    }
-  }, [items, selectedButtonId]);
   const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
   useEffect(() => {
     if (sliderButtonRef.current) {
@@ -41,6 +34,22 @@ const SliderButton = _ref => {
       duration: 0.2
     });
   }, [animate, scope]);
+  useEffect(() => {
+    if (selectedButtonId) {
+      setSelectedButton(selectedButtonId);
+      const index = items.findIndex(_ref2 => {
+        let {
+          id
+        } = _ref2;
+        return id === selectedButtonId;
+      });
+      if (index >= 0) {
+        void animation(itemWidth * index);
+      }
+    } else {
+      setSelectedButton(items[0]?.id);
+    }
+  }, [animation, itemWidth, items, selectedButtonId]);
   const handleClick = useCallback((id, index) => {
     if (isDisabled) {
       return;
@@ -53,11 +62,11 @@ const SliderButton = _ref => {
   }, [animation, isDisabled, itemWidth, onChange]);
   const buttons = useMemo(() => {
     const list = [];
-    items.forEach((_ref2, index) => {
+    items.forEach((_ref3, index) => {
       let {
         id,
         text
-      } = _ref2;
+      } = _ref3;
       list.push( /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
         $width: itemWidth,
         key: `slider-button-${id}`,
@@ -68,10 +77,10 @@ const SliderButton = _ref => {
     return list;
   }, [handleClick, itemWidth, items, selectedButton]);
   const thumbText = useMemo(() => {
-    const selectedItem = items.find(_ref3 => {
+    const selectedItem = items.find(_ref4 => {
       let {
         id
-      } = _ref3;
+      } = _ref4;
       return id === selectedButton;
     });
     return selectedItem ? selectedItem.text : '';

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonItem","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","scope","animate","id","itemWidth","current","offsetWidth","animation","x","type","duration","handleClick","index","buttons","list","forEach","_ref2","text","push","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref3","snapPoints","points","i","length","handleDragEnd","position","nearestPoint","nearestIndex","handleWhileDrag","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","displayName"],"sources":["../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonItem,\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\n    const [scope, animate] = useAnimate();\n\n    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [items, selectedButtonId]);\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    useEffect(() => {\n        if (sliderButtonRef.current) {\n            setDragRange({ left: 0, right: sliderButtonRef.current.offsetWidth - itemWidth });\n        }\n    }, [itemWidth]);\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 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            void animation(itemWidth * index);\n        },\n        [animation, isDisabled, itemWidth, onChange],\n    );\n\n    const buttons = useMemo(() => {\n        const list: ReactElement[] = [];\n\n        items.forEach(({ id, text }, index) => {\n            list.push(\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        });\n\n        return list;\n    }, [handleClick, itemWidth, items, selectedButton]);\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        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestPoint, nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [itemWidth, items, scope, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <AnimatePresence>\n                    {buttons}\n                    <StyledMotionSliderButtonThumb\n                        ref={scope}\n                        drag={isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        dragConstraints={{ ...dragRange }}\n                        $width={itemWidth}\n                        onDrag={handleWhileDrag}\n                        onDragEnd={handleDragEnd}\n                    >\n                        {thumbText}\n                    </StyledMotionSliderButtonThumb>\n                </AnimatePresence>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleWhileDrag,\n            isDisabled,\n            itemWidth,\n            scope,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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"}
+{"version":3,"file":"SliderButton.js","names":["AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonItem","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","scope","animate","itemWidth","current","offsetWidth","animation","x","type","duration","index","findIndex","_ref2","id","handleClick","buttons","list","forEach","_ref3","text","push","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref4","snapPoints","points","i","length","handleDragEnd","position","nearestPoint","nearestIndex","handleWhileDrag","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","displayName"],"sources":["../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonItem,\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\n    const [scope, animate] = useAnimate();\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    useEffect(() => {\n        if (sliderButtonRef.current) {\n            setDragRange({ left: 0, right: sliderButtonRef.current.offsetWidth - itemWidth });\n        }\n    }, [itemWidth]);\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    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                void animation(itemWidth * index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [animation, itemWidth, items, selectedButtonId]);\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            void animation(itemWidth * index);\n        },\n        [animation, isDisabled, itemWidth, onChange],\n    );\n\n    const buttons = useMemo(() => {\n        const list: ReactElement[] = [];\n\n        items.forEach(({ id, text }, index) => {\n            list.push(\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        });\n\n        return list;\n    }, [handleClick, itemWidth, items, selectedButton]);\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        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestPoint, nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [itemWidth, items, scope, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <AnimatePresence>\n                    {buttons}\n                    <StyledMotionSliderButtonThumb\n                        ref={scope}\n                        drag={isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        dragConstraints={{ ...dragRange }}\n                        $width={itemWidth}\n                        onDrag={handleWhileDrag}\n                        onDragEnd={handleDragEnd}\n                    >\n                        {thumbText}\n                    </StyledMotionSliderButtonThumb>\n                </AnimatePresence>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleWhileDrag,\n            isDisabled,\n            itemWidth,\n            scope,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,QAAQ,eAAe;AAC3D,OAAOC,KAAK,IAERC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAEL,OAAO;AAEd,SAASC,qBAAqB,QAAQ,uBAAuB;AAC7D,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,0BAA0B;AAC5E,SACIC,6BAA6B,EAC7BC,kBAAkB,EAClBC,sBAAsB,QACnB,uBAAuB;AAsB9B,MAAMC,YAAmC,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAAJ,IAAA;EAC1F,MAAM,CAACK,cAAc,EAAEC,iBAAiB,CAAC,GAAGd,QAAQ,CAAqBe,SAAS,CAAC;EACnF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGjB,QAAQ,CAAC;IAAEkB,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAE,CAAC,CAAC;EAEjE,MAAMC,eAAe,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAM,CAACsB,KAAK,EAAEC,OAAO,CAAC,GAAG5B,UAAU,CAAC,CAAC;EAErC,MAAM6B,SAAS,GAAGzB,OAAO,CAAC,MAAMG,qBAAqB,CAACU,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEtEd,SAAS,CAAC,MAAM;IACZ,IAAIuB,eAAe,CAACI,OAAO,EAAE;MACzBP,YAAY,CAAC;QAAEC,IAAI,EAAE,CAAC;QAAEC,KAAK,EAAEC,eAAe,CAACI,OAAO,CAACC,WAAW,GAAGF;MAAU,CAAC,CAAC;IACrF;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAMG,SAAS,GAAG9B,WAAW,CACzB,MAAO+B,CAAS,IAAK;IACjB,MAAML,OAAO,CACTD,KAAK,CAACG,OAAO,EACb;MAAEG;IAAE,CAAC,EACL;MACIC,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE;IACd,CACJ,CAAC;EACL,CAAC,EACD,CAACP,OAAO,EAAED,KAAK,CACnB,CAAC;EAEDxB,SAAS,CAAC,MAAM;IACZ,IAAIY,gBAAgB,EAAE;MAClBK,iBAAiB,CAACL,gBAAgB,CAAC;MAEnC,MAAMqB,KAAK,GAAGnB,KAAK,CAACoB,SAAS,CAACC,KAAA;QAAA,IAAC;UAAEC;QAAG,CAAC,GAAAD,KAAA;QAAA,OAAKC,EAAE,KAAKxB,gBAAgB;MAAA,EAAC;MAElE,IAAIqB,KAAK,IAAI,CAAC,EAAE;QACZ,KAAKJ,SAAS,CAACH,SAAS,GAAGO,KAAK,CAAC;MACrC;IACJ,CAAC,MAAM;MACHhB,iBAAiB,CAACH,KAAK,CAAC,CAAC,CAAC,EAAEsB,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,CAACP,SAAS,EAAEH,SAAS,EAAEZ,KAAK,EAAEF,gBAAgB,CAAC,CAAC;EAEnD,MAAMyB,WAAW,GAAGtC,WAAW,CAC3B,CAACqC,EAAU,EAAEH,KAAa,KAAK;IAC3B,IAAIpB,UAAU,EAAE;MACZ;IACJ;IAEAI,iBAAiB,CAACmB,EAAE,CAAC;IAErB,IAAI,OAAOrB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACqB,EAAE,CAAC;IAChB;IAEA,KAAKP,SAAS,CAACH,SAAS,GAAGO,KAAK,CAAC;EACrC,CAAC,EACD,CAACJ,SAAS,EAAEhB,UAAU,EAAEa,SAAS,EAAEX,QAAQ,CAC/C,CAAC;EAED,MAAMuB,OAAO,GAAGrC,OAAO,CAAC,MAAM;IAC1B,MAAMsC,IAAoB,GAAG,EAAE;IAE/BzB,KAAK,CAAC0B,OAAO,CAAC,CAAAC,KAAA,EAAeR,KAAK,KAAK;MAAA,IAAxB;QAAEG,EAAE;QAAEM;MAAK,CAAC,GAAAD,KAAA;MACvBF,IAAI,CAACI,IAAI,eACL7C,KAAA,CAAA8C,aAAA,CAACnC,sBAAsB;QACnBoC,MAAM,EAAEnB,SAAU;QAClBoB,GAAG,EAAG,iBAAgBV,EAAG,EAAE;QAC3BW,OAAO,EAAEA,CAAA,KAAMV,WAAW,CAACD,EAAE,EAAEH,KAAK,CAAE;QACtCe,WAAW,EAAEZ,EAAE,KAAKpB;MAAe,GAElC0B,IACmB,CAC5B,CAAC;IACL,CAAC,CAAC;IAEF,OAAOH,IAAI;EACf,CAAC,EAAE,CAACF,WAAW,EAAEX,SAAS,EAAEZ,KAAK,EAAEE,cAAc,CAAC,CAAC;EAEnD,MAAMiC,SAAS,GAAGhD,OAAO,CAAC,MAAM;IAC5B,MAAMiD,YAAY,GAAGpC,KAAK,CAACqC,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEhB;MAAG,CAAC,GAAAgB,KAAA;MAAA,OAAKhB,EAAE,KAAKpB,cAAc;IAAA,EAAC;IAElE,OAAOkC,YAAY,GAAGA,YAAY,CAACR,IAAI,GAAG,EAAE;EAChD,CAAC,EAAE,CAAC5B,KAAK,EAAEE,cAAc,CAAC,CAAC;;EAE3B;AACJ;AACA;EACI,MAAMqC,UAAU,GAAGpD,OAAO,CAAC,MAAM;IAC7B,MAAMqD,MAAM,GAAG,CAAC,CAAC,CAAC;IAElB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGzC,KAAK,CAAC0C,MAAM,EAAED,CAAC,EAAE,EAAE;MACnCD,MAAM,CAACX,IAAI,CAACjB,SAAS,GAAG6B,CAAC,CAAC;IAC9B;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAAC5B,SAAS,EAAEZ,KAAK,CAAC0C,MAAM,CAAC,CAAC;EAE7B,MAAMC,aAAa,GAAG1D,WAAW,CAAC,MAAM;IACpC,MAAM2D,QAAQ,GAAGpD,gBAAgB,CAAC;MAAEkB,KAAK;MAAEE;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACgC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEC,YAAY;MAAEC;IAAa,CAAC,GAAGvD,eAAe,CAAC;MAAEgD,UAAU;MAAEK;IAAS,CAAC,CAAC;IAEhF,IAAIC,YAAY,IAAI,CAAC,IAAIC,YAAY,IAAI,CAAC,EAAE;MACxC,KAAK/B,SAAS,CAAC8B,YAAY,CAAC;MAE5B,MAAMvB,EAAE,GAAGtB,KAAK,CAAC8C,YAAY,CAAC,EAAExB,EAAE;MAElC,IAAI,OAAOrB,QAAQ,KAAK,UAAU,IAAIqB,EAAE,EAAE;QACtCrB,QAAQ,CAACqB,EAAE,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACP,SAAS,EAAEH,SAAS,EAAEZ,KAAK,EAAEC,QAAQ,EAAES,KAAK,EAAE6B,UAAU,CAAC,CAAC;EAE9D,MAAMQ,eAAe,GAAG9D,WAAW,CAAC,MAAM;IACtC,MAAM2D,QAAQ,GAAGpD,gBAAgB,CAAC;MAAEkB,KAAK;MAAEE;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACgC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEE;IAAa,CAAC,GAAGvD,eAAe,CAAC;MAAEgD,UAAU;MAAEK;IAAS,CAAC,CAAC;IAElE,IAAIE,YAAY,IAAI,CAAC,EAAE;MACnB3C,iBAAiB,CAACH,KAAK,CAAC8C,YAAY,CAAC,EAAExB,EAAE,CAAC;IAC9C;EACJ,CAAC,EAAE,CAACV,SAAS,EAAEZ,KAAK,EAAEU,KAAK,EAAE6B,UAAU,CAAC,CAAC;EAEzC,OAAOpD,OAAO,CACV,mBACIH,KAAA,CAAA8C,aAAA,CAACpC,kBAAkB;IAACsD,WAAW,EAAEjD,UAAW;IAACkD,GAAG,EAAExC;EAAgB,gBAC9DzB,KAAA,CAAA8C,aAAA,CAAChD,eAAe,QACX0C,OAAO,eACRxC,KAAA,CAAA8C,aAAA,CAACrC,6BAA6B;IAC1BwD,GAAG,EAAEvC,KAAM;IACXwC,IAAI,EAAEnD,UAAU,GAAG,KAAK,GAAG,GAAI;IAC/BoD,WAAW,EAAE,CAAE;IACfC,eAAe,EAAE;MAAE,GAAG/C;IAAU,CAAE;IAClC0B,MAAM,EAAEnB,SAAU;IAClByC,MAAM,EAAEN,eAAgB;IACxBO,SAAS,EAAEX;EAAc,GAExBR,SAC0B,CAClB,CACD,CACvB,EACD,CACIX,OAAO,EACPnB,SAAS,EACTsC,aAAa,EACbI,eAAe,EACfhD,UAAU,EACVa,SAAS,EACTF,KAAK,EACLyB,SAAS,CAEjB,CAAC;AACL,CAAC;AAEDvC,YAAY,CAAC2D,WAAW,GAAG,cAAc;AAEzC,eAAe3D,YAAY"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.517",
+    "version": "5.0.0-beta.519",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b8887d00e14734836f17010b55867d0bd3d47a01"
+    "gitHead": "bac868dc6109d2afe6951c66dbc1a33457de959d"
 }