@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/esm/components/slider/Slider.styles.js

@@ -1,52 +1,32 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 export const StyledSlider = styled.div`
     width: 100%;
     height: 30px;
-    cursor: ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return $isDisabled ? 'default' : 'pointer';
-}} !important;
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'} !important;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     touch-action: none;
     user-select: none;
-    opacity: ${_ref2 => {
-  let {
-    $isDisabled
-  } = _ref2;
-  return $isDisabled ? 0.5 : 1;
-}};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
 `;
-export const StyledSliderInput = styled(motion.input).attrs(_ref3 => {
-  let {
-    $isInterval,
-    $value,
-    $thumbWidth,
-    $min,
-    $max,
-    theme
-  } = _ref3;
-  return {
-    style: {
-      pointerEvents: $isInterval ? 'none' : 'all',
-      width: `calc(100% - ${$thumbWidth}px)`,
-      background: !$isInterval ? `linear-gradient(
-            to right,
-            ${theme['409'] ?? ''} 0%,
-            ${theme['409'] ?? ''}
-            ${($value - $min) / ($max - $min) * 100}%,
-            ${theme['403'] ?? ''}
-            ${($value - $min) / ($max - $min) * 100}%,
-            ${theme['403'] ?? ''}
-        )` : undefined
-    }
-  };
-})`
+export const StyledSliderInput = styled(motion.input).attrs(({
+  $background,
+  $isInterval,
+  $thumbWidth
+}) => ({
+  style: {
+    pointerEvents: $isInterval ? 'none' : 'all',
+    width: `calc(100% - ${$thumbWidth}px)`,
+    background: $background
+  }
+}))`
     position: absolute;
     border-radius: 100px;
     -webkit-appearance: none;
@@ -79,18 +59,15 @@ export const StyledSliderInput = styled(motion.input).attrs(_ref3 => {
         position: relative;
     }
 `;
-export const StyledSliderThumb = styled.div.attrs(_ref4 => {
-  let {
-    $position,
-    $isBigSlider
-  } = _ref4;
-  return {
-    style: {
-      left: `${$position}px`,
-      height: `${$isBigSlider ? 0 : 20}px`
-    }
-  };
-})`
+export const StyledSliderThumb = styled.div.attrs(({
+  $position,
+  $isBigSlider
+}) => ({
+  style: {
+    left: `${$position}px`,
+    height: `${$isBigSlider ? 0 : 20}px`
+  }
+}))`
     width: 20px;
     height: 20px;
     cursor: pointer;
@@ -98,7 +75,7 @@ export const StyledSliderThumb = styled.div.attrs(_ref4 => {
     background-color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
     pointer-events: none;
-    z-index: 3;
+    z-index: 5;
     position: absolute;
     display: flex;
     align-items: center;
@@ -109,20 +86,17 @@ export const StyledSliderThumb = styled.div.attrs(_ref4 => {
 
     transition: top 0.2s ease 0s;
 `;
-export const StyledSliderThumbLabel = styled.span.attrs(_ref5 => {
-  let {
-    $position,
-    $isBigSlider,
-    $width
-  } = _ref5;
-  return {
-    style: {
-      minWidth: `${$width}px`,
-      top: `-${$isBigSlider ? 56 : 48}px`,
-      left: `${$position}px`
-    }
-  };
-})`
+export const StyledSliderThumbLabel = styled.span.attrs(({
+  $position,
+  $isBigSlider,
+  $width
+}) => ({
+  style: {
+    minWidth: `${$width}px`,
+    top: `-${$isBigSlider ? 56 : 48}px`,
+    left: `${$position}px`
+  }
+}))`
     pointer-events: none;
     color: #222;
 
@@ -151,12 +125,9 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref5 => {
         position: absolute;
         width: 14px;
         z-index: -2;
-        left: ${_ref6 => {
-  let {
-    $position
-  } = _ref6;
-  return $position * -1;
-}}px;
+        left: ${({
+  $position
+}) => $position * -1}px;
         transform: rotate(225deg);
         bottom: -7px;
     }
@@ -173,4 +144,26 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref5 => {
         z-index: -1;
     }
 `;
+export const StyledHighlightedStep = styled.div`
+    background-color: ${({
+  $isDisabled,
+  $isFilled,
+  theme
+}) => {
+  if ($isDisabled) return 'rgb(215, 215, 215)';
+  if ($isFilled) return theme['409'];
+  return theme['403'];
+}};
+    border-radius: 50%;
+    height: 18px;
+    left: ${({
+  $leftPosition
+}) => $leftPosition}px;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 18px;
+    z-index: 3;
+`;
 //# sourceMappingURL=Slider.styles.js.map

package/lib/esm/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","_ref","$isDisabled","_ref2","StyledSliderInput","input","attrs","_ref3","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref4","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","_ref5","$width","minWidth","top","_ref6"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n    width: 100%;\n    height: 30px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 56 : 48}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","$isDisabled","StyledSliderInput","input","attrs","$background","$isInterval","$thumbWidth","style","pointerEvents","width","background","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top","StyledHighlightedStep","$isFilled","theme","$leftPosition"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n    width: 100%;\n    height: 30px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $background?: string;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $background, $isInterval, $thumbWidth }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: $background,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 5;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 56 : 48}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledHighlightedStepProps = WithTheme<{\n    $isDisabled: boolean;\n    $isFilled: boolean;\n    $leftPosition: number;\n}>;\n\nexport const StyledHighlightedStep = styled.div<StyledHighlightedStepProps>`\n    background-color: ${({ $isDisabled, $isFilled, theme }) => {\n        if ($isDisabled) return 'rgb(215, 215, 215)';\n        if ($isFilled) return theme['409'];\n        return theme['403'];\n    }};\n    border-radius: 50%;\n    height: 18px;\n    left: ${({ $leftPosition }) => $leftPosition}px;\n    pointer-events: none;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 18px;\n    z-index: 3;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAsB;AACzD;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACD,MAAM,CAACM,KAAK,CAAC,CAACC,KAAK,CACvD,CAAC;EAAEC,WAAW;EAAEC,WAAW;EAAEC;AAAY,CAAC,MAAM;EAC5CC,KAAK,EAAE;IACHC,aAAa,EAAEH,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CI,KAAK,EAAE,eAAeH,WAAW,KAAK;IACtCI,UAAU,EAAEN;EAChB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,iBAAiB,GAAGd,MAAM,CAACE,GAAG,CAACI,KAAK,CAC7C,CAAC;EAAES,SAAS;EAAEC;AAAa,CAAC,MAAM;EAC9BN,KAAK,EAAE;IACHO,IAAI,EAAE,GAAGF,SAAS,IAAI;IACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;EACpC;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,sBAAsB,GAAGnB,MAAM,CAACoB,IAAI,CAACd,KAAK,CACnD,CAAC;EAAES,SAAS;EAAEC,YAAY;EAAEK;AAAO,CAAC,MAAM;EACtCX,KAAK,EAAE;IACHY,QAAQ,EAAE,GAAGD,MAAM,IAAI;IACvBE,GAAG,EAAE,IAAIP,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;IACnCC,IAAI,EAAE,GAAGF,SAAS;EACtB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,CAAC;EAAEA;AAAU,CAAC,KAAKA,SAAS,GAAG,CAAC,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMS,qBAAqB,GAAGxB,MAAM,CAACE,GAA+B;AAC3E,wBAAwB,CAAC;EAAEC,WAAW;EAAEsB,SAAS;EAAEC;AAAM,CAAC,KAAK;EACvD,IAAIvB,WAAW,EAAE,OAAO,oBAAoB;EAC5C,IAAIsB,SAAS,EAAE,OAAOC,KAAK,CAAC,KAAK,CAAC;EAClC,OAAOA,KAAK,CAAC,KAAK,CAAC;AACvB,CAAC;AACL;AACA;AACA,YAAY,CAAC;EAAEC;AAAc,CAAC,KAAKA,aAAa;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -1,19 +1,20 @@
 import { setRefreshScrollEnabled } from 'chayns-api';
-import { AnimatePresence, useAnimate } from 'framer-motion';
+import { AnimatePresence, useAnimate } from 'motion/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useElementSize } from '../../hooks/useElementSize';
+import { useElementSize } from '../../hooks/element';
 import { calculateBiggestWidth } from '../../utils/calculate';
 import { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';
 import Icon from '../icon/Icon';
 import Popup from '../popup/Popup';
 import { StyledMotionSliderButtonThumb, StyledSliderButton, StyledSliderButtonButtonsWrapper, StyledSliderButtonItem, StyledSliderButtonPopupContent, StyledSliderButtonPopupContentItem, StyledSliderButtonWrapper } from './SliderButton.styles';
-const SliderButton = _ref => {
-  let {
-    selectedButtonId,
-    isDisabled,
-    items,
-    onChange
-  } = _ref;
+import { useTheme } from 'styled-components';
+const SliderButton = ({
+  isDisabled,
+  isSecondary,
+  items,
+  onChange,
+  selectedButtonId
+}) => {
   const [dragRange, setDragRange] = useState({
     left: 0,
     right: 0
@@ -29,18 +30,16 @@ const SliderButton = _ref => {
   const sliderButtonWrapperRef = useRef(null);
   const popupRef = useRef(null);
   const [scope, animate] = useAnimate();
+  const theme = useTheme();
   const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
   const elementSize = useElementSize(sliderButtonRef);
   useEffect(() => {
     if (elementSize) setSliderSize(elementSize);
   }, [elementSize]);
   const setPopupId = useCallback(selectedId => {
-    const ids = items.slice(shownItemsCount - 1).map(_ref2 => {
-      let {
-        id
-      } = _ref2;
-      return id;
-    });
+    const ids = items.slice(shownItemsCount - 1).map(({
+      id
+    }) => id);
     const newId = ids.find(id => id === selectedId);
     if (newId) {
       setCurrentId('more');
@@ -92,12 +91,9 @@ const SliderButton = _ref => {
   }, [animation, itemWidth]);
   useEffect(() => {
     if (typeof selectedButtonId === 'string') {
-      let index = items.findIndex(_ref3 => {
-        let {
-          id
-        } = _ref3;
-        return id === selectedButtonId;
-      });
+      let index = items.findIndex(({
+        id
+      }) => id === selectedButtonId);
       setCurrentId(selectedButtonId);
       setPopupId(selectedButtonId);
       if (items.length > shownItemsCount && index > shownItemsCount - 1) {
@@ -125,34 +121,54 @@ const SliderButton = _ref => {
     }
     setItemPosition(index);
   }, [isDisabled, onChange, setItemPosition, setPopupId]);
+  const backgroundColor = useMemo(() => {
+    let color;
+    if (isSecondary) {
+      color = theme['202'];
+    } else {
+      color = theme.buttonBackgroundColor ?? theme['408'];
+    }
+    if (theme.buttonDesign === '2') {
+      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
+    }
+    return color;
+  }, [isSecondary, theme]);
+  const thumbBackgroundColor = useMemo(() => {
+    let color;
+    if (isSecondary) {
+      color = theme['207'];
+    } else {
+      color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;
+    }
+    if (theme.buttonDesign === '2') {
+      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
+    }
+    return color;
+  }, [isSecondary, theme]);
   const buttons = useMemo(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
       const otherItems = items.slice(shownItemsCount - 1);
-      const elements = newItems.map((_ref4, index) => {
-        let {
-          id,
-          text
-        } = _ref4;
-        return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
-          $width: itemWidth,
-          key: `slider-button-${id}`,
-          onClick: () => handleClick(id, index)
-        }, text);
-      });
-      const popupContent = otherItems.map(_ref5 => {
-        let {
-          id,
-          text
-        } = _ref5;
-        return /*#__PURE__*/React.createElement(StyledSliderButtonPopupContentItem, {
-          key: `slider-button-${id}`,
-          onClick: () => handleClick(id, newItems.length),
-          $isSelected: id === currentPopupId
-        }, text);
-      });
+      const elements = newItems.map(({
+        id,
+        text
+      }, index) => /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
+        $width: itemWidth,
+        key: `slider-button-${id}`,
+        onClick: () => handleClick(id, index)
+      }, text));
+      const popupContent = otherItems.map(({
+        id,
+        text
+      }) => /*#__PURE__*/React.createElement(StyledSliderButtonPopupContentItem, {
+        key: `slider-button-${id}`,
+        onClick: () => handleClick(id, newItems.length),
+        $isSelected: id === currentPopupId
+      }, text));
       const id = 'more';
       elements.push(/*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
         $width: itemWidth,
         key: `slider-button-${id}`
       }, /*#__PURE__*/React.createElement(Popup, {
@@ -164,33 +180,30 @@ const SliderButton = _ref => {
       }))));
       return elements;
     }
-    return items.map(_ref6 => {
-      let {
-        id,
-        text
-      } = _ref6;
-      return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
-        $width: itemWidth,
-        key: `slider-button-${id}`
-      }, text);
-    });
-  }, [currentPopupId, handleClick, itemWidth, items, shownItemsCount]);
+    return items.map(({
+      id,
+      text
+    }) => /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+      $isSecondary: isSecondary,
+      $width: itemWidth,
+      key: `slider-button-${id}`
+    }, text));
+  }, [currentPopupId, handleClick, isSecondary, itemWidth, items, shownItemsCount]);
   const pseudoButtons = useMemo(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
-      const elements = newItems.map((_ref7, index) => {
-        let {
-          id,
-          text
-        } = _ref7;
-        return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
-          $width: itemWidth,
-          key: `pseudo-slider-button-${id}`,
-          onClick: () => handleClick(id, index)
-        }, text);
-      });
+      const elements = newItems.map(({
+        id,
+        text
+      }, index) => /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
+        $width: itemWidth,
+        key: `pseudo-slider-button-${id}`,
+        onClick: () => handleClick(id, index)
+      }, text));
       const id = 'more';
       elements.push(/*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
         $width: itemWidth,
         key: `pseudo-slider-button-${id}`,
         onClick: () => handleClick(id, newItems.length)
@@ -199,18 +212,16 @@ const SliderButton = _ref => {
       })));
       return elements;
     }
-    return items.map((_ref8, index) => {
-      let {
-        id,
-        text
-      } = _ref8;
-      return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
-        $width: itemWidth,
-        key: `pseudo-slider-button-${id}`,
-        onClick: () => handleClick(id, index)
-      }, text);
-    });
-  }, [handleClick, itemWidth, items, shownItemsCount]);
+    return items.map(({
+      id,
+      text
+    }, index) => /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+      $isSecondary: isSecondary,
+      $width: itemWidth,
+      key: `pseudo-slider-button-${id}`,
+      onClick: () => handleClick(id, index)
+    }, text));
+  }, [handleClick, isSecondary, itemWidth, items, shownItemsCount]);
 
   /**
    * Creates an array with the snap points relative to the width of the items
@@ -299,12 +310,18 @@ const SliderButton = _ref => {
     $width: itemWidth,
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart,
-    onClick: () => handleClick(currentId, currentIndex)
+    onClick: () => handleClick(currentId, currentIndex),
+    style: {
+      backgroundColor: thumbBackgroundColor
+    }
   }), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
     $isDisabled: isDisabled,
     $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
-    ref: sliderButtonWrapperRef
-  }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, currentId, currentIndex, dragRange, handleClick, handleDragEnd, handleDragStart, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
+    ref: sliderButtonWrapperRef,
+    style: {
+      backgroundColor
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, null, buttons)))), [backgroundColor, buttons, currentId, currentIndex, dragRange, handleClick, handleDragEnd, handleDragStart, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope, thumbBackgroundColor]);
 };
 SliderButton.displayName = 'SliderButton';
 export default SliderButton;

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","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","sliderButtonRef","sliderButtonWrapperRef","popupRef","scope","animate","initialItemWidth","elementSize","setPopupId","selectedId","ids","slice","map","_ref2","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","_ref3","handleClick","show","hide","buttons","newItems","otherItems","elements","_ref4","text","createElement","$width","key","onClick","popupContent","_ref5","$isSelected","push","ref","content","icons","color","_ref6","pseudoButtons","_ref7","_ref8","snapPoints","points","i","handleDragStart","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","$isDisabled","$isInvisible","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","displayName"],"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    const [currentId, setCurrentId] = useState('');\n    const [currentPopupId, setCurrentPopupId] = useState('');\n    const [currentIndex, setCurrentIndex] = useState(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 setPopupId = useCallback(\n        (selectedId: string) => {\n            const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n            const newId = ids.find((id) => id === selectedId);\n\n            if (newId) {\n                setCurrentId('more');\n                setCurrentPopupId(newId);\n\n                return;\n            }\n\n            setCurrentId(selectedId);\n        },\n        [items, shownItemsCount],\n    );\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const maxShownItemsCount = useMemo(() => {\n        let totalWidth = 0;\n        let count = 0;\n\n        while (count < items.length) {\n            const visibleItems = items.slice(0, count + 1);\n            const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n            if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n            totalWidth += currentMaxWidth;\n            count++;\n        }\n\n        return count;\n    }, [items, sliderSize.width]);\n\n    const itemWidth = useMemo(() => {\n        const sliderWidth = sliderSize?.width || 0;\n        const itemCount = items.length || 1;\n\n        setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n        return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n    }, [isSliderBigger, items.length, maxShownItemsCount, 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            setCurrentIndex(index);\n\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            setCurrentId(selectedButtonId);\n\n            setPopupId(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        setPopupId,\n        shownItemsCount,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setPopupId(id);\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, setPopupId],\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                    $isSelected={id === currentPopupId}\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    }, [currentPopupId, 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 handleDragStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n    }, []);\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                    onDragStart={handleDragStart}\n                    onClick={() => handleClick(currentId, currentIndex)}\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            currentId,\n            currentIndex,\n            dragRange,\n            handleClick,\n            handleDragEnd,\n            handleDragStart,\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":[]}
+{"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","useTheme","SliderButton","isDisabled","isSecondary","items","onChange","selectedButtonId","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","sliderButtonRef","sliderButtonWrapperRef","popupRef","scope","animate","theme","initialItemWidth","elementSize","setPopupId","selectedId","ids","slice","map","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","handleClick","show","hide","backgroundColor","color","buttonBackgroundColor","buttonDesign","thumbBackgroundColor","buttons","newItems","otherItems","elements","text","createElement","$isSecondary","$width","key","onClick","popupContent","$isSelected","push","ref","content","icons","pseudoButtons","snapPoints","points","i","handleDragStart","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","$isDisabled","$isInvisible","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","style","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'motion/react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/element';\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';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled and cannot be clicked anymore.\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style.\n     */\n    isSecondary?: boolean;\n    /**\n     * The items that should be displayed in the slider button.\n     */\n    items: SliderButtonItem[];\n    /**\n     * Function to be executed when a button is selected. The id of the selected button is passed as an argument.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The id of the button that should be selected.\n     */\n    selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({\n    isDisabled,\n    isSecondary,\n    items,\n    onChange,\n    selectedButtonId,\n}) => {\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n    const [shownItemsCount, setShownItemsCount] = useState(items.length);\n    const [sliderSize, setSliderSize] = useState({ width: 0 });\n    const [currentId, setCurrentId] = useState('');\n    const [currentPopupId, setCurrentPopupId] = useState('');\n    const [currentIndex, setCurrentIndex] = useState(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 theme = useTheme() as Theme;\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 setPopupId = useCallback(\n        (selectedId: string) => {\n            const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n            const newId = ids.find((id) => id === selectedId);\n\n            if (newId) {\n                setCurrentId('more');\n                setCurrentPopupId(newId);\n\n                return;\n            }\n\n            setCurrentId(selectedId);\n        },\n        [items, shownItemsCount],\n    );\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const maxShownItemsCount = useMemo(() => {\n        let totalWidth = 0;\n        let count = 0;\n\n        while (count < items.length) {\n            const visibleItems = items.slice(0, count + 1);\n            const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n            if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n            totalWidth += currentMaxWidth;\n            count++;\n        }\n\n        return count;\n    }, [items, sliderSize.width]);\n\n    const itemWidth = useMemo(() => {\n        const sliderWidth = sliderSize?.width || 0;\n        const itemCount = items.length || 1;\n\n        setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n        return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n    }, [isSliderBigger, items.length, maxShownItemsCount, 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            setCurrentIndex(index);\n\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            setCurrentId(selectedButtonId);\n\n            setPopupId(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        setPopupId,\n        shownItemsCount,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setPopupId(id);\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, setPopupId],\n    );\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (theme.buttonDesign === '2') {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, theme]);\n\n    const thumbBackgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary) {\n            color = theme['207'];\n        } else {\n            color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;\n        }\n\n        if (theme.buttonDesign === '2') {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, theme]);\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                    $isSecondary={isSecondary}\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                    $isSelected={id === currentPopupId}\n                >\n                    {text}\n                </StyledSliderButtonPopupContentItem>\n            ));\n\n            const id = 'more';\n\n            elements.push(\n                <StyledSliderButtonItem\n                    $isSecondary={isSecondary}\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                >\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\n                $isSecondary={isSecondary}\n                $width={itemWidth}\n                key={`slider-button-${id}`}\n            >\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [currentPopupId, handleClick, isSecondary, 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                    $isSecondary={isSecondary}\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                    $isSecondary={isSecondary}\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                $isSecondary={isSecondary}\n                $width={itemWidth}\n                key={`pseudo-slider-button-${id}`}\n                onClick={() => handleClick(id, index)}\n            >\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [handleClick, isSecondary, 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 handleDragStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n    }, []);\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                    onDragStart={handleDragStart}\n                    onClick={() => handleClick(currentId, currentIndex)}\n                    style={{ backgroundColor: thumbBackgroundColor }}\n                />\n                <StyledSliderButtonWrapper\n                    $isDisabled={isDisabled}\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                    style={{ backgroundColor }}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            backgroundColor,\n            buttons,\n            currentId,\n            currentIndex,\n            dragRange,\n            handleClick,\n            handleDragEnd,\n            handleDragStart,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            pseudoButtons,\n            scope,\n            thumbBackgroundColor,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}