npm - @chayns-components/core - Versions diffs - 5.0.0-beta.607 → 5.0.0-beta.609 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/lib/esm/components/input/Input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$shouldShowOnlyBottomBorder","_ref6","$shouldRoundRightCorners","StyledInputContent","_ref7","StyledInputField","input","_ref8","text","_ref9","$placeholderWidth","_ref10","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledInputLabel","_ref11","undefined","StyledMotionInputClearIcon","_ref12","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: 42px;\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,GAAsB;AACxD,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA;AACA,CAAC;AASD,OAAO,MAAMC,yBAAyB,GAAGN,MAAM,CAACG,GAAoC;AACpF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAmD,CAAC,GAAAF,KAAA;EAAA,OAC9EC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC1F;AACA,UAAUG,KAAA;EAAA,IAAC;IAAEH,KAAK;IAAEI;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpDC,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,0BAA0B;AAAA,CAAC;AAClE,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzE;AACA;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,KAAA;EAAA,OAC9B,CAACC,2BAA2B,IAC5Bf,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMgB,KAAA,IAAsE;EAAA,IAArE;IAAEC,wBAAwB;IAAEF,2BAA2B;IAAER;EAAM,CAAC,GAAAS,KAAA;EAC/D,IAAID,2BAA2B,EAAE;IAC7B,OAAOf,GAAI;AACvB;AACA;AACA;AACA;AACA,gCAAgCO,KAAK,CAAC,KAAK,CAAE;AAC7C,aAAa;EACL;EAEA,IAAIU,wBAAwB,EAAE;IAC1B,OAAOjB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,OAAOA,GAAI;AACnB;AACA;AACA;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAID,OAAO,MAAMkB,kBAAkB,GAAGnB,MAAM,CAACG,GAA6B;AACtE;AACA;AACA;AACA,cAAciB,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OACtC,CAACJ,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAAA,CAAC;AAC5D;AACA,CAAC;AAQD,OAAO,MAAMK,gBAAgB,GAAGrB,MAAM,CAACsB,KAA6B;AACpE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEf,KAAK;IAAEI;EAAkC,CAAC,GAAAW,KAAA;EAAA,OAClDX,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACgB,IAAI;AAAA,CAAC;AAC9C;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OAAM,eAAcC,iBAAkB,KAAI;AAAA,CAAC;AAC9E;AACA;AACA,MAAMC,MAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,MAAA;EAAA,OAC7BC,0BAA0B,IAC1B3B,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAM4B,6BAA6B,GAAG7B,MAAM,CAACD,MAAM,CAAC+B,KAAK,CAAE;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;~~AAID~~,OAAO,MAAMC,~~gBAAgB~~,GAAG/B,MAAM,CAAC8B,KAA6B;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,~~aAAaE~~,MAAA;EAAA,IAAC;~~IAAExB~~,KAAK;IAAEI;EAAkC,CAAC,~~GAAAoB~~,MAAA;EAAA,~~OAClDpB~~,UAAU,GAAGJ,KAAK,CAACK,KAAK,~~GAAGoB~~,SAAS;AAAA,CAAC;AAC7C,CAAC;AAID,OAAO,MAAMC,0BAA0B,~~GAAGlC~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAmC;AAC9F;AACA,~~mBAAmBgC~~,MAAA;EAAA,IAAC;~~IAAEnB~~;EAA4B,CAAC,~~GAAAmB~~,MAAA;EAAA,~~OAC3CnB~~,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMoB~~,sBAAsB,~~GAAGpC~~,MAAM,CAACG,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMkC~~,uBAAuB,~~GAAGrC~~,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$shouldShowOnlyBottomBorder","_ref6","$shouldRoundRightCorners","StyledInputContent","_ref7","StyledInputField","input","_ref8","text","_ref9","$placeholderWidth","_ref10","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref11","undefined","StyledMotionInputClearIcon","_ref12","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: 42px;\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)``;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import { setRefreshScrollEnabled } from 'chayns-api';
 import { AnimatePresence, useAnimate } from 'framer-motion';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/useElementSize';
 import { calculateBiggestWidth } from '../../utils/calculate';
 import { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';
@@ -24,6 +25,7 @@ const SliderButton = _ref => {
   const [scope, animate] = useAnimate();
   const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
   const sliderSize = useElementSize(sliderButtonRef);
+  const theme = useTheme();
   const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
   useEffect(() => {
     if (sliderSize) {
@@ -255,8 +257,15 @@ const SliderButton = _ref => {
     },
     $width: itemWidth,
     onDrag: handleWhileDrag,
-    onDragEnd: handleDragEnd
+    onDragEnd: handleDragEnd,
+    whileTap: isDisabled ? {} : {
+      backgroundColor: theme['407']
+    },
+    whileHover: isDisabled ? {} : {
+      backgroundColor: theme['409']
+    }
   }, thumbText), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
+    $isDisabled: isDisabled,
     $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
     ref: sliderButtonWrapperRef,
     onScroll: handleScroll

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

	@@ -1 +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","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":[]}
1	+ {"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","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","theme","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","whileTap","backgroundColor","whileHover","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 { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonButtonsWrapper,\n StyledSliderButtonItem,\n StyledSliderButtonWrapper,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n /*\n Whether the button is disabled.\n /\n isDisabled?: boolean;\n /\n Function to be executed when a button is selected.\n * @param id\n /\n onChange?: (id: string) => void;\n /\n The buttons that are slidable.\n /\n items: SliderButtonItem[];\n /\n The id of a button that should be selected.\n /\n selectedButtonId?: string;\n};\n\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 theme: Theme = useTheme();\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 whileTap={isDisabled ? {} : { backgroundColor: theme['407'] }}\n whileHover={isDisabled ? {} : { backgroundColor: theme['409'] }}\n >\n {thumbText}\n </StyledMotionSliderButtonThumb>\n <StyledSliderButtonWrapper\n $isDisabled={isDisabled}\n $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n ref={sliderButtonWrapperRef}\n onScroll={handleScroll}\n >\n <AnimatePresence>\n <StyledSliderButtonButtonsWrapper>\n {buttons}\n </StyledSliderButtonButtonsWrapper>\n </AnimatePresence>\n </StyledSliderButtonWrapper>\n </StyledSliderButton>\n ),\n [\n buttons,\n dragRange,\n handleDragEnd,\n handleScroll,\n handleWhileDrag,\n isDisabled,\n isSliderBigger,\n itemWidth,\n scope,\n thumbText,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AACpD,SAASC,eAAe,EAAEC,UAAU,QAAQ,eAAe;AAC3D,OAAOC,KAAK,IAAiBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC7F,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,4BAA4B;AAE3D,SAASC,qBAAqB,QAAQ,uBAAuB;AAC7D,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,0BAA0B;AAE5E,SACIC,6BAA6B,EAC7BC,kBAAkB,EAClBC,gCAAgC,EAChCC,sBAAsB,EACtBC,yBAAyB,QACtB,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,GAAGlB,QAAQ,CAAqBmB,SAAS,CAAC;EACnF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGrB,QAAQ,CAAC;IAAEsB,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAE,CAAC,CAAC;EAEjE,MAAMC,eAAe,GAAGzB,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAM0B,sBAAsB,GAAG1B,MAAM,CAAiB,IAAI,CAAC;EAC3D,MAAM2B,OAAO,GAAG3B,MAAM,CAAS,CAAC;EAChC,MAAM4B,mBAAmB,GAAG5B,MAAM,CAAC,KAAK,CAAC;EAEzC,MAAM,CAAC6B,KAAK,EAAEC,OAAO,CAAC,GAAGnC,UAAU,CAAC,CAAC;EAErC,MAAMoC,SAAS,GAAGhC,OAAO,CAAC,MAAMK,qBAAqB,CAACY,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEtE,MAAMgB,UAAU,GAAG7B,cAAc,CAACsB,eAAe,CAAC;EAElD,MAAMQ,KAAY,GAAG/B,QAAQ,CAAC,CAAC;EAE/B,MAAMgC,cAAc,GAAGnC,OAAO,CAC1B,MAAMiC,UAAU,IAAIG,IAAI,CAACC,KAAK,CAACJ,UAAU,CAACK,KAAK,GAAGN,SAAS,CAAC,GAAGf,KAAK,CAACsB,MAAM,EAC3E,CAACP,SAAS,EAAEf,KAAK,CAACsB,MAAM,EAAEN,UAAU,CACxC,CAAC;EAEDlC,SAAS,CAAC,MAAM;IACZ,IAAIkC,UAAU,EAAE;MACZ,MAAMO,WAAW,GAAGR,SAAS,IAAIf,KAAK,CAACsB,MAAM,GAAG,CAAC,CAAC;MAElD,MAAME,KAAK,GAAGL,IAAI,CAACC,KAAK,CAACJ,UAAU,CAACK,KAAK,GAAGN,SAAS,CAAC;MAEtDT,YAAY,CAAC;QAAEC,IAAI,EAAE,CAAC;QAAEC,KAAK,EAAEU,cAAc,GAAGH,SAAS,GAAGS,KAAK,GAAGD;MAAY,CAAC,CAAC;IACtF;EACJ,CAAC,EAAE,CAACL,cAAc,EAAEH,SAAS,EAAEf,KAAK,CAACsB,MAAM,EAAEN,UAAU,CAAC,CAAC;EAEzD,MAAMS,SAAS,GAAG5C,WAAW,CACzB,MAAO6C,CAAS,IAAK;IACjB,MAAMZ,OAAO,CACTD,KAAK,CAACc,OAAO,EACb;MAAED;IAAE,CAAC,EACL;MACIE,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE;IACd,CACJ,CAAC;EACL,CAAC,EACD,CAACf,OAAO,EAAED,KAAK,CACnB,CAAC;EAED,MAAMiB,eAAe,GAAGjD,WAAW,CAC9BkD,KAAa,IAAK;IACf,IAAI,CAACb,cAAc,EAAE;MACjB,KAAKO,SAAS,CAACV,SAAS,GAAGgB,KAAK,CAAC;MAEjC;IACJ;IAEA,MAAMP,KAAK,GAAGnB,SAAS,CAACG,KAAK,GAAGO,SAAS;IAEzC,IAAIf,KAAK,CAACsB,MAAM,GAAGE,KAAK,IAAIO,KAAK,EAAE;MAC/B,KAAKN,SAAS,CAAC,CAAC,CAAC;IACrB,CAAC,MAAM;MACH,KAAKA,SAAS,CAACV,SAAS,IAAIS,KAAK,IAAIxB,KAAK,CAACsB,MAAM,GAAGS,KAAK,CAAC,CAAC,CAAC;IAChE;IAEA,IAAIrB,sBAAsB,CAACiB,OAAO,EAAE;MAChCjB,sBAAsB,CAACiB,OAAO,CAACK,UAAU,GAAGjB,SAAS,GAAGgB,KAAK;IACjE;EACJ,CAAC,EACD,CAACN,SAAS,EAAEpB,SAAS,CAACG,KAAK,EAAEU,cAAc,EAAEH,SAAS,EAAEf,KAAK,CAACsB,MAAM,CACxE,CAAC;EAEDxC,SAAS,CAAC,MAAM;IACZ,IAAIgB,gBAAgB,EAAE;MAClBK,iBAAiB,CAACL,gBAAgB,CAAC;MAEnC,MAAMiC,KAAK,GAAG/B,KAAK,CAACiC,SAAS,CAACC,KAAA;QAAA,IAAC;UAAEC;QAAG,CAAC,GAAAD,KAAA;QAAA,OAAKC,EAAE,KAAKrC,gBAAgB;MAAA,EAAC;MAElE,IAAIiC,KAAK,IAAI,CAAC,EAAE;QACZD,eAAe,CAACC,KAAK,CAAC;MAC1B;IACJ,CAAC,MAAM;MACH5B,iBAAiB,CAACH,KAAK,CAAC,CAAC,CAAC,EAAEmC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,CACCV,SAAS,EACTpB,SAAS,CAACG,KAAK,EACfU,cAAc,EACdH,SAAS,EACTf,KAAK,EACLF,gBAAgB,EAChBgC,eAAe,CAClB,CAAC;EAEF,MAAMM,WAAW,GAAGvD,WAAW,CAC3B,CAACsD,EAAU,EAAEJ,KAAa,KAAK;IAC3B,IAAIhC,UAAU,EAAE;MACZ;IACJ;IAEAI,iBAAiB,CAACgC,EAAE,CAAC;IAErB,IAAI,OAAOlC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACkC,EAAE,CAAC;IAChB;IAEAL,eAAe,CAACC,KAAK,CAAC;EAC1B,CAAC,EACD,CAAChC,UAAU,EAAEE,QAAQ,EAAE6B,eAAe,CAC1C,CAAC;EAED,MAAMO,OAAO,GAAGtD,OAAO,CACnB,MACIiB,KAAK,CAACsC,GAAG,CAAC,CAAAC,KAAA,EAAeR,KAAK;IAAA,IAAnB;MAAEI,EAAE;MAAEK;IAAK,CAAC,GAAAD,KAAA;IAAA,oBACnB3D,KAAA,CAAA6D,aAAA,CAAC/C,sBAAsB;MACnBgD,MAAM,EAAE3B,SAAU;MAClB4B,GAAG,EAAG,iBAAgBR,EAAG,EAAE;MAC3BS,OAAO,EAAEA,CAAA,KAAMR,WAAW,CAACD,EAAE,EAAEJ,KAAK,CAAE;MACtCc,WAAW,EAAEV,EAAE,KAAKjC;IAAe,GAElCsC,IACmB,CAAC;EAAA,CAC5B,CAAC,EACN,CAACJ,WAAW,EAAErB,SAAS,EAAEf,KAAK,EAAEE,cAAc,CAClD,CAAC;EAED,MAAM4C,SAAS,GAAG/D,OAAO,CAAC,MAAM;IAC5B,MAAMgE,YAAY,GAAG/C,KAAK,CAACgD,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEd;MAAG,CAAC,GAAAc,KAAA;MAAA,OAAKd,EAAE,KAAKjC,cAAc;IAAA,EAAC;IAElE,OAAO6C,YAAY,GAAGA,YAAY,CAACP,IAAI,GAAGxC,KAAK,CAAC,CAAC,CAAC,EAAEwC,IAAI;EAC5D,CAAC,EAAE,CAACxC,KAAK,EAAEE,cAAc,CAAC,CAAC;;EAE3B;AACJ;AACA;EACI,MAAMgD,UAAU,GAAGnE,OAAO,CAAC,MAAM;IAC7B,MAAMoE,MAAM,GAAG,CAAC,CAAC,CAAC;IAElB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGpD,KAAK,CAACsB,MAAM,EAAE8B,CAAC,EAAE,EAAE;MACnCD,MAAM,CAACE,IAAI,CAACtC,SAAS,GAAGqC,CAAC,CAAC;IAC9B;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAACpC,SAAS,EAAEf,KAAK,CAACsB,MAAM,CAAC,CAAC;EAE7B,MAAMgC,aAAa,GAAGzE,WAAW,CAAC,MAAM;IACpC,KAAKJ,uBAAuB,CAAC,IAAI,CAAC;IAElC,MAAM8E,QAAQ,GAAGjE,gBAAgB,CAAC;MAAEuB,KAAK;MAAEE;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACwC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEC,MAAM;MAAEjD;IAAK,CAAC,GAAGgD,QAAQ;IAEjC,IAAIvB,UAAU,GAAG,CAAC;IAElB,IAAItB,sBAAsB,CAACiB,OAAO,EAAE;MAChCK,UAAU,GAAGtB,sBAAsB,CAACiB,OAAO,CAACK,UAAU;MAEtDtB,sBAAsB,CAACiB,OAAO,CAACK,UAAU,GAAG3C,eAAe,CAAC;QACxD6D,UAAU;QACVK,QAAQ,EAAEC,MAAM;QAChBxB,UAAU,EAAEA,UAAU,GAAGzB;MAC7B,CAAC,CAAC,CAACkD,YAAY;IACnB;IAEA,MAAM;MAAEC;IAAa,CAAC,GAAGrE,eAAe,CAAC;MACrC6D,UAAU;MACVK,QAAQ,EAAEC,MAAM;MAChBxB;IACJ,CAAC,CAAC;IAEF,MAAM;MAAEyB;IAAa,CAAC,GAAGpE,eAAe,CAAC;MACrC6D,UAAU;MACVK,QAAQ,EAAEC,MAAM;MAChBxB,UAAU,EAAE;IAChB,CAAC,CAAC;IAEF,IAAIyB,YAAY,IAAI,CAAC,IAAIC,YAAY,IAAI,CAAC,EAAE;MACxC,KAAKjC,SAAS,CAACgC,YAAY,CAAC;MAE5B,MAAMtB,EAAE,GAAGnC,KAAK,CAAC0D,YAAY,CAAC,EAAEvB,EAAE;MAElChC,iBAAiB,CAACgC,EAAE,CAAC;MAErB,IAAI,OAAOlC,QAAQ,KAAK,UAAU,IAAIkC,EAAE,EAAE;QACtClC,QAAQ,CAACkC,EAAE,CAAC;MAChB;IACJ;IAEAvB,mBAAmB,CAACe,OAAO,GAAG,KAAK;EACvC,CAAC,EAAE,CAACF,SAAS,EAAEV,SAAS,EAAEf,KAAK,EAAEC,QAAQ,EAAEY,KAAK,EAAEqC,UAAU,CAAC,CAAC;EAE9D,MAAMS,eAAe,GAAG9E,WAAW,CAAC,MAAM;IACtC+B,mBAAmB,CAACe,OAAO,GAAG,IAAI;IAClC,KAAKlD,uBAAuB,CAAC,KAAK,CAAC;IAEnC,MAAM8E,QAAQ,GAAGjE,gBAAgB,CAAC;MAAEuB,KAAK;MAAEE;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACwC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAE/C,KAAK;MAAED,IAAI;MAAEiD;IAAO,CAAC,GAAGD,QAAQ;IAExC,IAAIvB,UAAU,GAAG,CAAC;IAElB,MAAM4B,WAAW,GAAG,CAAC;IAErB,IAAIlD,sBAAsB,CAACiB,OAAO,EAAE;MAChC,IAAInB,KAAK,IAAIH,SAAS,CAACG,KAAK,EAAE;QAC1BE,sBAAsB,CAACiB,OAAO,CAACK,UAAU,IAAI4B,WAAW;MAC5D;MAEA,IAAIrD,IAAI,IAAIF,SAAS,CAACE,IAAI,EAAE;QACxBG,sBAAsB,CAACiB,OAAO,CAACK,UAAU,IAAI4B,WAAW;MAC5D;MAEA5B,UAAU,GAAGtB,sBAAsB,CAACiB,OAAO,CAACK,UAAU;IAC1D;IAEA,MAAM;MAAE0B;IAAa,CAAC,GAAGrE,eAAe,CAAC;MAAE6D,UAAU;MAAEK,QAAQ,EAAEC,MAAM;MAAExB;IAAW,CAAC,CAAC;IAEtF,IAAI0B,YAAY,IAAI,CAAC,EAAE;MACnBvD,iBAAiB,CAACH,KAAK,CAAC0D,YAAY,CAAC,EAAEvB,EAAE,CAAC;IAC9C;EACJ,CAAC,EAAE,CAAC9B,SAAS,EAAEU,SAAS,EAAEf,KAAK,EAAEa,KAAK,EAAEqC,UAAU,CAAC,CAAC;;EAEpD;EACApE,SAAS,CAAC,MAAM;IACZ,KAAK2C,SAAS,CAAC,CAAC,CAAC;IACjB,KAAKA,SAAS,CAAC,CAAC,CAAC;EACrB,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAMoC,YAAY,GAAGhF,WAAW,CAC3BiF,KAA2B,IAAK;IAC7B,IAAIlD,mBAAmB,CAACe,OAAO,EAAE;MAC7B;IACJ;IAEA,KAAKlD,uBAAuB,CAAC,KAAK,CAAC;IAEnC,MAAM8E,QAAQ,GAAGjE,gBAAgB,CAAC;MAAEuB,KAAK;MAAEE;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACwC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEC;IAAO,CAAC,GAAGD,QAAQ;IAE3B,MAAM;MAAEvB;IAAW,CAAC,GAAG8B,KAAK,CAACC,MAAwB;IAErD,MAAM;MAAEL;IAAa,CAAC,GAAGrE,eAAe,CAAC;MAAE6D,UAAU;MAAEK,QAAQ,EAAEC,MAAM;MAAExB;IAAW,CAAC,CAAC;IAEtF,IAAI0B,YAAY,IAAI,CAAC,EAAE;MACnBvD,iBAAiB,CAACH,KAAK,CAAC0D,YAAY,CAAC,EAAEvB,EAAE,CAAC;IAC9C;IAEA,IAAIxB,OAAO,CAACgB,OAAO,EAAE;MACjBqC,YAAY,CAACrD,OAAO,CAACgB,OAAO,CAAC;IACjC;IAEAhB,OAAO,CAACgB,OAAO,GAAGsC,MAAM,CAACC,UAAU,CAAC,MAAM;MACtCZ,aAAa,CAAC,CAAC;IACnB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EACD,CAACA,aAAa,EAAEvC,SAAS,EAAEf,KAAK,EAAEa,KAAK,EAAEqC,UAAU,CACvD,CAAC;EAED,OAAOnE,OAAO,CACV,mBACIH,KAAA,CAAA6D,aAAA,CAACjD,kBAAkB;IAAC2E,WAAW,EAAEpE,UAAW;IAACqE,GAAG,EAAE3D;EAAgB,gBAC9D7B,KAAA,CAAA6D,aAAA,CAAClD,6BAA6B;IAC1B6E,GAAG,EAAEvD,KAAM;IACXwD,IAAI,EAAEtE,UAAU,GAAG,KAAK,GAAG,GAAI;IAC/BuE,WAAW,EAAE,CAAE;IACfC,eAAe,EACXrD,cAAc,GACR;MAAE,GAAGb,SAAS;MAAEG,KAAK,EAAEH,SAAS,CAACG,KAAK,GAAGO;IAAU,CAAC,GACpD;MAAE,GAAGV;IAAU,CACxB;IACDqC,MAAM,EAAE3B,SAAU;IAClByD,MAAM,EAAEb,eAAgB;IACxBc,SAAS,EAAEnB,aAAc;IACzBoB,QAAQ,EAAE3E,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE4E,eAAe,EAAE1D,KAAK,CAAC,KAAK;IAAE,CAAE;IAC9D2D,UAAU,EAAE7E,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE4E,eAAe,EAAE1D,KAAK,CAAC,KAAK;IAAE;EAAE,GAE/D6B,SAC0B,CAAC,eAChClE,KAAA,CAAA6D,aAAA,CAAC9C,yBAAyB;IACtBwE,WAAW,EAAEpE,UAAW;IACxB2C,MAAM,EAAE,CAACxB,cAAc,GAAGb,SAAS,CAACG,KAAK,GAAGO,SAAS,GAAGV,SAAS,CAACG,KAAM;IACxE4D,GAAG,EAAE1D,sBAAuB;IAC5BmE,QAAQ,EAAEhB;EAAa,gBAEvBjF,KAAA,CAAA6D,aAAA,CAAC/D,eAAe,qBACZE,KAAA,CAAA6D,aAAA,CAAChD,gCAAgC,QAC5B4C,OAC6B,CACrB,CACM,CACX,CACvB,EACD,CACIA,OAAO,EACPhC,SAAS,EACTiD,aAAa,EACbO,YAAY,EACZF,eAAe,EACf5D,UAAU,EACVmB,cAAc,EACdH,SAAS,EACTF,KAAK,EACLiC,SAAS,CAEjB,CAAC;AACL,CAAC;AAEDlD,YAAY,CAACkF,WAAW,GAAG,cAAc;AAEzC,eAAelF,YAAY","ignoreList":[]}

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

@@ -38,7 +38,12 @@ export const StyledSliderButtonWrapper = styled.div`
 }}px;
     max-width: 100%;
-    overflow-x: scroll;
+    overflow-x: ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? 'hidden' : 'scroll';
+}};
     // Chrome
     &::-webkit-scrollbar {
@@ -55,16 +60,16 @@ export const StyledSliderButtonItem = styled.div`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
     padding: 7px 12px;
-    min-width: ${_ref4 => {
+    min-width: ${_ref5 => {
   let {
     $width
-  } = _ref4;
+  } = _ref5;
   return $width;
 }}px;
-    max-width: ${_ref5 => {
+    max-width: ${_ref6 => {
   let {
     $width
-  } = _ref5;
+  } = _ref6;
   return $width;
 }}px;
     display: flex;
@@ -79,16 +84,16 @@ export const StyledSliderButtonButtonsWrapper = styled.div`
 export const StyledMotionSliderButtonThumb = styled(motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
-    background-color: ${_ref6 => {
+    background-color: ${_ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme['408'];
 }};
-    width: ${_ref7 => {
+    width: ${_ref8 => {
   let {
     $width
-  } = _ref7;
+  } = _ref8;
   return $width;
 }}px;
     position: absolute;

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

	@@ -1 +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 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":[]}
1	+ {"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","$isDisabled","StyledSliderButtonWrapper","_ref2","theme","_ref3","$width","_ref4","StyledSliderButtonItem","_ref5","_ref6","StyledSliderButtonButtonsWrapper","StyledMotionSliderButtonThumb","_ref7","_ref8"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n width: 100%;\n touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n align-items: center;\n background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\n border-radius: 3px;\n border: none;\n color: white;\n cursor: pointer;\n display: inline-flex;\n line-height: 1.15;\n height: 32px;\n position: relative;\n user-select: none;\n transition: opacity 0.3s ease;\n z-index: 1;\n\n width: ${({ $width }) => $width}px;\n\n max-width: 100%;\n overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n\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,kBAAkBC,KAAA;EAAA,IAAC;IAAEN;EAAY,CAAC,GAAAM,KAAA;EAAA,OAAMN,WAAW,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,sBAAsB,GAAGX,MAAM,CAACE,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiBU,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA,CAAC;AACxC,iBAAiBI,KAAA;EAAA,IAAC;IAAEJ;EAAO,CAAC,GAAAI,KAAA;EAAA,OAAKJ,MAAM;AAAA,CAAC;AACxC;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,gCAAgC,GAAGd,MAAM,CAACE,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMa,6BAA6B,GAAGf,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwBc,KAAA;EAAA,IAAC;IAAET;EAA0C,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACxF,aAAaU,KAAA;EAAA,IAAC;IAAER;EAAO,CAAC,GAAAQ,KAAA;EAAA,OAAKR,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/types/components/amount-control/AmountControl.styles.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ type StyledAmountControlInputProps = WithTheme<{
 export declare const StyledAmountControlInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledAmountControlInputProps>> & string;
 type StyledAmountControlButtonProps = WithTheme<{
     $isDisabled: boolean;
+    $color?: string;
 }>;
 export declare const StyledMotionAmountControlButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     form?: string | undefined;

package/lib/types/components/input/Input.styles.d.ts CHANGED Viewed

@@ -287,6 +287,269 @@ export declare const StyledMotionInputLabelWrapper: import("styled-components/di
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & {
     ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
 }, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMotionInputElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    id?: string | undefined;
+    color?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 type StyledInputLabelProps = WithTheme<{
     $isInvalid?: boolean;
 }>;

package/lib/types/components/slider-button/SliderButton.styles.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ type StyledSliderButtonProps = WithTheme<{
 export declare const StyledSliderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderButtonProps>> & string;
 type StyledSliderButtonWrapperProps = WithTheme<{
     $width: number;
+    $isDisabled?: boolean;
 }>;
 export declare const StyledSliderButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderButtonWrapperProps>> & string;
 type StyledSliderButtonItemProps = WithTheme<{

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.607",
+    "version": "5.0.0-beta.609",
     "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": "dfe932f9f2cf91b1bdec6bb31ca808be0221af4a"
+    "gitHead": "06683bfffc93701eba4fa1cedd105ad1aef585b6"
 }