@chayns-components/core 5.0.25 → 5.0.27

package/lib/esm/components/progress-bar/ProgressBar.js

@@ -8,7 +8,7 @@ import Popup from '../popup/Popup';
 const ProgressBar = t0 => {
   "use memo";
 
-  const $ = _c(29);
+  const $ = _c(30);
   const {
     percentage,
     label,
@@ -17,7 +17,8 @@ const ProgressBar = t0 => {
     steps,
     colors,
     thumbLabel,
-    showShine: t3
+    showShine: t3,
+    height
   } = t0;
   const shouldHideProgress = t1 === undefined ? false : t1;
   const shouldShowLabelInline = t2 === undefined ? false : t2;
@@ -61,7 +62,7 @@ const ProgressBar = t0 => {
   }
   const shineEffect = t4;
   let t5;
-  if ($[6] !== colors?.backgroundColor || $[7] !== colors?.primaryTextColor || $[8] !== colors?.progressColor || $[9] !== colors?.secondaryTextColor || $[10] !== colors?.stepColor || $[11] !== label || $[12] !== percentage || $[13] !== shineEffect || $[14] !== shouldHideProgress || $[15] !== shouldShowLabelInline || $[16] !== showShine || $[17] !== steps || $[18] !== theme || $[19] !== thumbLabel || $[20] !== uuid) {
+  if ($[6] !== colors?.backgroundColor || $[7] !== colors?.primaryTextColor || $[8] !== colors?.progressColor || $[9] !== colors?.secondaryTextColor || $[10] !== colors?.stepColor || $[11] !== height || $[12] !== label || $[13] !== percentage || $[14] !== shineEffect || $[15] !== shouldHideProgress || $[16] !== shouldShowLabelInline || $[17] !== showShine || $[18] !== steps || $[19] !== theme || $[20] !== thumbLabel || $[21] !== uuid) {
     colors?.backgroundColor;
     colors?.primaryTextColor;
     colors?.progressColor;
@@ -98,7 +99,8 @@ const ProgressBar = t0 => {
         }));
       }
       return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
-        $isBig: shouldShowLabelInline
+        $isBig: shouldShowLabelInline,
+        $height: height
       }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
         $position: step,
         key: `progress-step-${step}`,
@@ -146,42 +148,43 @@ const ProgressBar = t0 => {
     $[8] = colors?.progressColor;
     $[9] = colors?.secondaryTextColor;
     $[10] = colors?.stepColor;
-    $[11] = label;
-    $[12] = percentage;
-    $[13] = shineEffect;
-    $[14] = shouldHideProgress;
-    $[15] = shouldShowLabelInline;
-    $[16] = showShine;
-    $[17] = steps;
-    $[18] = theme;
-    $[19] = thumbLabel;
-    $[20] = uuid;
-    $[21] = t5;
+    $[11] = height;
+    $[12] = label;
+    $[13] = percentage;
+    $[14] = shineEffect;
+    $[15] = shouldHideProgress;
+    $[16] = shouldShowLabelInline;
+    $[17] = showShine;
+    $[18] = steps;
+    $[19] = theme;
+    $[20] = thumbLabel;
+    $[21] = uuid;
+    $[22] = t5;
   } else {
-    t5 = $[21];
+    t5 = $[22];
   }
   const progressBar = t5;
   colors?.primaryTextColor;
   let t6;
-  if ($[22] !== colors?.primaryTextColor || $[23] !== label || $[24] !== shouldShowLabelInline) {
+  if ($[23] !== colors?.primaryTextColor || $[24] !== label || $[25] !== shouldShowLabelInline) {
     t6 = label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
       $primaryColor: colors?.primaryTextColor
     }, label);
-    $[22] = colors?.primaryTextColor;
-    $[23] = label;
-    $[24] = shouldShowLabelInline;
-    $[25] = t6;
+    $[23] = colors?.primaryTextColor;
+    $[24] = label;
+    $[25] = shouldShowLabelInline;
+    $[26] = t6;
   } else {
-    t6 = $[25];
+    t6 = $[26];
   }
   let t7;
-  if ($[26] !== progressBar || $[27] !== t6) {
+  if ($[27] !== progressBar || $[28] !== t6) {
     t7 = /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, t6);
-    $[26] = progressBar;
-    $[27] = t6;
-    $[28] = t7;
+    $[27] = progressBar;
+    $[28] = t6;
+    $[29] = t7;
   } else {
-    t7 = $[28];
+    t7 = $[29];
   }
   return t7;
 };

package/lib/esm/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["React","useContext","useMemo","useRef","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","popupRef","theme","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","step","onUpdate","current","show","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","$primaryColor","$secondaryColor","progressBar","t7","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarShine,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n    StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n    /**\n     * The label that should be displayed on the thumb of the progress bar.\n     */\n    thumbLabel?: React.ReactNode;\n    /**\n     * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n     */\n    showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n    thumbLabel,\n    showShine = false,\n}) => {\n    'use memo';\n\n    const uuid = useUuid();\n    const popupRef = useRef<PopupRef | null>(null);\n\n    const theme = useContext(ThemeContext) as Theme | undefined;\n\n    const shineEffect = useMemo(() => {\n        if (!showShine || percentage === undefined) return null;\n        const FULL_ANIMATION_LENGTH = 5;\n        const MAX_SHINE_COUNT = 6;\n\n        const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n        const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n        return Array.from({ length: shineCount }).map((_, index) => (\n            <StyledProgressBarShine\n                /* eslint-disable-next-line react/no-array-index-key */\n                key={`progress-bar-shine__${shineCount}__${index}`}\n                $speed={speed}\n                $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n            />\n        ));\n    }, [percentage, showShine]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (percentage === undefined) {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${percentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                    onUpdate={() => popupRef.current?.show()}\n                    onAnimationComplete={() => popupRef.current?.show()}\n                >\n                    {showShine && shineEffect}\n                    {thumbLabel && (\n                        <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n                            <ThemeProvider\n                                theme={{\n                                    '000': colors?.backgroundColor ?? theme?.['104'],\n                                    text: colors?.secondaryTextColor ?? theme?.['300'],\n                                }}\n                            >\n                                <Popup\n                                    ref={popupRef}\n                                    content={thumbLabel}\n                                    alignment={PopupAlignment.TopCenter}\n                                    onHide={() => popupRef.current?.show()}\n                                >\n                                    {}\n                                </Popup>\n                            </ThemeProvider>\n                        </StyledProgressBarThumbLabel>\n                    )}\n                </StyledMotionProgressBarProgress>\n\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={percentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors?.backgroundColor,\n        colors?.primaryTextColor,\n        colors?.progressColor,\n        colors?.secondaryTextColor,\n        colors?.stepColor,\n        label,\n        percentage,\n        shineEffect,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        showShine,\n        steps,\n        theme,\n        thumbLabel,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ProgressBar.js","names":["React","useContext","useMemo","useRef","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","popupRef","theme","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","step","onUpdate","current","show","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","$primaryColor","$secondaryColor","progressBar","t7","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarShine,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n    StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n    /**\n     * The label that should be displayed on the thumb of the progress bar.\n     */\n    thumbLabel?: React.ReactNode;\n    /**\n     * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n     */\n    showShine?: boolean;\n    /**\n     * The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n     */\n    height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n    thumbLabel,\n    showShine = false,\n    height,\n}) => {\n    'use memo';\n\n    const uuid = useUuid();\n    const popupRef = useRef<PopupRef | null>(null);\n\n    const theme = useContext(ThemeContext) as Theme | undefined;\n\n    const shineEffect = useMemo(() => {\n        if (!showShine || percentage === undefined) return null;\n        const FULL_ANIMATION_LENGTH = 5;\n        const MAX_SHINE_COUNT = 6;\n\n        const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n        const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n        return Array.from({ length: shineCount }).map((_, index) => (\n            <StyledProgressBarShine\n                /* eslint-disable-next-line react/no-array-index-key */\n                key={`progress-bar-shine__${shineCount}__${index}`}\n                $speed={speed}\n                $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n            />\n        ));\n    }, [percentage, showShine]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (percentage === undefined) {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${percentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                    onUpdate={() => popupRef.current?.show()}\n                    onAnimationComplete={() => popupRef.current?.show()}\n                >\n                    {showShine && shineEffect}\n                    {thumbLabel && (\n                        <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n                            <ThemeProvider\n                                theme={{\n                                    '000': colors?.backgroundColor ?? theme?.['104'],\n                                    text: colors?.secondaryTextColor ?? theme?.['300'],\n                                }}\n                            >\n                                <Popup\n                                    ref={popupRef}\n                                    content={thumbLabel}\n                                    alignment={PopupAlignment.TopCenter}\n                                    onHide={() => popupRef.current?.show()}\n                                >\n                                    {}\n                                </Popup>\n                            </ThemeProvider>\n                        </StyledProgressBarThumbLabel>\n                    )}\n                </StyledMotionProgressBarProgress>\n\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={percentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors?.backgroundColor,\n        colors?.primaryTextColor,\n        colors?.progressColor,\n        colors?.secondaryTextColor,\n        colors?.stepColor,\n        height,\n        label,\n        percentage,\n        shineEffect,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        showShine,\n        steps,\n        theme,\n        thumbLabel,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.styles.js

@@ -16,11 +16,13 @@ export const StyledProgressBarProgressWrapper = styled.div`
     position: relative;
     width: 100%;
     height: ${({
+  $height,
   $isBig
-}) => $isBig ? 20 : 10}px;
+}) => $height || ($isBig ? 20 : 10)}px;
     border-radius: ${({
+  $height,
   $isBig
-}) => $isBig ? 20 : 2}px;
+}) => $isBig ? $height ?? 20 : ($height ?? 10) / 5}px;
 `;
 const shineMove = keyframes`
     from {

package/lib/esm/components/progress-bar/ProgressBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n    from {\n        transform: translateX(-150%);\n    }\n    to {\n        transform: translateX(150%);\n    }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n    ({ $delay }) => ({\n        style: { animationDelay: `${$delay ?? 0}s` },\n    }),\n)`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 33%,\n        rgba(255, 255, 255, 0.5) 50%,\n        rgba(255, 255, 255, 0) 66%\n    );\n    transform: translateX(-150%);\n    animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n    opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n    position: absolute;\n    right: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,MAAMC,SAAS,GAAGR,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,sBAAsB,GAAGX,MAAM,CAACI,GAAG,CAACQ,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACY,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGnB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEc;AAAoD,CAAC,KACpEA,sBAAsB,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACY,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEjB;AAAM,CAAC,KAC7De,mBAAmB,IACnBpB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBqB,aAAa,IAAIhB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGxB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMqB,qBAAqB,GAAGzB,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEoB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAG3B,MAAM,CAACI,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n    $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $height, $isBig }) => $height || ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $height, $isBig }) => ($isBig ? ($height ?? 20) : ($height ?? 10) / 5)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n    from {\n        transform: translateX(-150%);\n    }\n    to {\n        transform: translateX(150%);\n    }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n    ({ $delay }) => ({\n        style: { animationDelay: `${$delay ?? 0}s` },\n    }),\n)`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 33%,\n        rgba(255, 255, 255, 0.5) 50%,\n        rgba(255, 255, 255, 0) 66%\n    );\n    transform: translateX(-150%);\n    animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n    opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n    position: absolute;\n    right: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK,OAAO;EAAEC;AAAO,CAAC,KAAKD,OAAO,KAAKC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,qBAAqB,CAAC;EAAED,OAAO;EAAEC;AAAO,CAAC,KAAMA,MAAM,GAAID,OAAO,IAAI,EAAE,GAAI,CAACA,OAAO,IAAI,EAAE,IAAI,CAAE;AAC9F,CAAC;AAID,MAAME,SAAS,GAAGT,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,sBAAsB,GAAGZ,MAAM,CAACI,GAAG,CAACS,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGlB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACa,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGpB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEe;AAAoD,CAAC,KACpEA,sBAAsB,GAAGf,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACa,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAElB;AAAM,CAAC,KAC7DgB,mBAAmB,IACnBrB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBsB,aAAa,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIlB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGzB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMsB,qBAAqB,GAAG1B,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEqB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAG5B,MAAM,CAACI,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/scroll-view/ScrollView.js

@@ -1,4 +1,3 @@
-import { getDevice } from 'chayns-api';
 import React, { forwardRef, useMemo } from 'react';
 import { StyledScrollView } from './ScrollView.styles';
 const ScrollView = /*#__PURE__*/forwardRef(({
@@ -9,21 +8,16 @@ const ScrollView = /*#__PURE__*/forwardRef(({
   children,
   overflowX = 'auto',
   overflowY = 'auto'
-}, ref) => {
-  const {
-    browser
-  } = getDevice();
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledScrollView, {
-    $browser: browser?.name,
-    $maxHeight: maxHeight,
-    $height: height,
-    $maxWidth: maxWidth,
-    $width: width,
-    $overflowX: overflowX,
-    $overflowY: overflowY,
-    ref: ref
-  }, children), [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width]);
-});
+}, ref) => useMemo(() => /*#__PURE__*/React.createElement(StyledScrollView, {
+  className: "chayns-scrollbar",
+  $maxHeight: maxHeight,
+  $height: height,
+  $maxWidth: maxWidth,
+  $width: width,
+  $overflowX: overflowX,
+  $overflowY: overflowY,
+  ref: ref
+}, children), [children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width]));
 ScrollView.displayName = 'ScrollView';
 export default ScrollView;
 //# sourceMappingURL=ScrollView.js.map

package/lib/esm/components/scroll-view/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["getDevice","React","forwardRef","useMemo","StyledScrollView","ScrollView","maxHeight","height","maxWidth","width","children","overflowX","overflowY","ref","browser","createElement","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight?: CSSProperties['height'] | null;\n    /**\n     * The height of the scroll view.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * The maximum width of the scroll view.\n     */\n    maxWidth?: CSSProperties['width'];\n    /**\n     * The width of the scroll view.\n     */\n    width?: CSSProperties['width'];\n    /**\n     * The overflow-x style of the scroll view.\n     */\n    overflowX?: 'scroll' | 'auto';\n    /**\n     * The overflow-y style of the scroll view.\n     */\n    overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n    (\n        {\n            maxHeight = 300,\n            height,\n            maxWidth,\n            width,\n            children,\n            overflowX = 'auto',\n            overflowY = 'auto',\n        },\n        ref,\n    ) => {\n        const { browser } = getDevice();\n\n        return useMemo(\n            () => (\n                <StyledScrollView\n                    $browser={browser?.name as BrowserName}\n                    $maxHeight={maxHeight}\n                    $height={height}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $overflowX={overflowX}\n                    $overflowY={overflowY}\n                    ref={ref}\n                >\n                    {children}\n                </StyledScrollView>\n            ),\n            [\n                browser?.name,\n                children,\n                height,\n                maxHeight,\n                maxWidth,\n                overflowX,\n                overflowY,\n                ref,\n                width,\n            ],\n        );\n    },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAmBC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAE5E,SAASC,gBAAgB,QAAQ,qBAAqB;AAiCtD,MAAMC,UAAU,gBAAGH,UAAU,CACzB,CACI;EACII,SAAS,GAAG,GAAG;EACfC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,SAAS,GAAG,MAAM;EAClBC,SAAS,GAAG;AAChB,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAQ,CAAC,GAAGd,SAAS,CAAC,CAAC;EAE/B,OAAOG,OAAO,CACV,mBACIF,KAAA,CAAAc,aAAA,CAACX,gBAAgB;IACbY,QAAQ,EAAEF,OAAO,EAAEG,IAAoB;IACvCC,UAAU,EAAEZ,SAAU;IACtBa,OAAO,EAAEZ,MAAO;IAChBa,SAAS,EAAEZ,QAAS;IACpBa,MAAM,EAAEZ,KAAM;IACda,UAAU,EAAEX,SAAU;IACtBY,UAAU,EAAEX,SAAU;IACtBC,GAAG,EAAEA;EAAI,GAERH,QACa,CACrB,EACD,CACII,OAAO,EAAEG,IAAI,EACbP,QAAQ,EACRH,MAAM,EACND,SAAS,EACTE,QAAQ,EACRG,SAAS,EACTC,SAAS,EACTC,GAAG,EACHJ,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDJ,UAAU,CAACmB,WAAW,GAAG,YAAY;AAErC,eAAenB,UAAU","ignoreList":[]}
+{"version":3,"file":"ScrollView.js","names":["React","forwardRef","useMemo","StyledScrollView","ScrollView","maxHeight","height","maxWidth","width","children","overflowX","overflowY","ref","createElement","className","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight?: CSSProperties['height'] | null;\n    /**\n     * The height of the scroll view.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * The maximum width of the scroll view.\n     */\n    maxWidth?: CSSProperties['width'];\n    /**\n     * The width of the scroll view.\n     */\n    width?: CSSProperties['width'];\n    /**\n     * The overflow-x style of the scroll view.\n     */\n    overflowX?: 'scroll' | 'auto';\n    /**\n     * The overflow-y style of the scroll view.\n     */\n    overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n    (\n        {\n            maxHeight = 300,\n            height,\n            maxWidth,\n            width,\n            children,\n            overflowX = 'auto',\n            overflowY = 'auto',\n        },\n        ref,\n    ) =>\n        useMemo(\n            () => (\n                <StyledScrollView\n                    className=\"chayns-scrollbar\"\n                    $maxHeight={maxHeight}\n                    $height={height}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $overflowX={overflowX}\n                    $overflowY={overflowY}\n                    ref={ref}\n                >\n                    {children}\n                </StyledScrollView>\n            ),\n            [children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width],\n        ),\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AAiCtD,MAAMC,UAAU,gBAAGH,UAAU,CACzB,CACI;EACII,SAAS,GAAG,GAAG;EACfC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,SAAS,GAAG,MAAM;EAClBC,SAAS,GAAG;AAChB,CAAC,EACDC,GAAG,KAEHV,OAAO,CACH,mBACIF,KAAA,CAAAa,aAAA,CAACV,gBAAgB;EACbW,SAAS,EAAC,kBAAkB;EAC5BC,UAAU,EAAEV,SAAU;EACtBW,OAAO,EAAEV,MAAO;EAChBW,SAAS,EAAEV,QAAS;EACpBW,MAAM,EAAEV,KAAM;EACdW,UAAU,EAAET,SAAU;EACtBU,UAAU,EAAET,SAAU;EACtBC,GAAG,EAAEA;AAAI,GAERH,QACa,CACrB,EACD,CAACA,QAAQ,EAAEH,MAAM,EAAED,SAAS,EAAEE,QAAQ,EAAEG,SAAS,EAAEC,SAAS,EAAEC,GAAG,EAAEJ,KAAK,CAC5E,CACR,CAAC;AAEDJ,UAAU,CAACiB,WAAW,GAAG,YAAY;AAErC,eAAejB,UAAU","ignoreList":[]}

package/lib/esm/components/scroll-view/ScrollView.styles.js

@@ -9,17 +9,17 @@ export const StyledScrollView = styled.div`
   $height
 }) => $height && css`
             height: ${typeof $height === 'number' ? `${$height}px` : $height};
-        `} 
+        `}
     ${({
   $maxWidth
 }) => $maxWidth && css`
             max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
-        `} 
+        `}
     ${({
   $width
 }) => $width && css`
             width: ${typeof $width === 'number' ? `${$width}px` : $width};
-        `} 
+        `}
     ${({
   $overflowX
 }) => css`
@@ -30,40 +30,5 @@ export const StyledScrollView = styled.div`
 }) => css`
         overflow-y: ${$overflowY};
     `}
-
-    // Styles for custom scrollbar
-    ${({
-  $browser,
-  theme
-}) => $browser === 'firefox' ? css`
-                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
-                  scrollbar-width: thin;
-              ` : css`
-                  &::-webkit-scrollbar {
-                      width: 10px;
-                      height: 10px;
-                  }
-
-                  &::-webkit-scrollbar-track {
-                      background-color: transparent;
-                  }
-
-                  &::-webkit-scrollbar-button {
-                      background-color: transparent;
-                      height: 5px;
-                      width: 5px;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                      background-color: rgba(${theme['text-rgb']}, 0.15);
-                      border-radius: 20px;
-                      background-clip: padding-box;
-                      border: solid 3px transparent;
-                  }
-
-                  &::-webkit-scrollbar-corner {
-                      background-color: transparent;
-                  }
-              `}
 `;
 //# sourceMappingURL=ScrollView.styles.js.map

package/lib/esm/components/scroll-view/ScrollView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'] | null;\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: BrowserName;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `} \n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `} \n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `} \n    ${({ $overflowX }) => css`\n        overflow-x: ${$overflowX};\n    `}\n    ${({ $overflowY }) => css`\n        overflow-y: ${$overflowY};\n    `}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAM,CAAC;EAAEC;AAAW,CAAC,KACbA,UAAU,IACVH,GAAG;AACX,0BAA0B,OAAOG,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AACT,MAAM,CAAC;EAAEC;AAAQ,CAAC,KACVA,OAAO,IACPJ,GAAG;AACX,sBAAsB,OAAOI,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AACT,MAAM,CAAC;EAAEC;AAAU,CAAC,KACZA,SAAS,IACTL,GAAG;AACX,yBAAyB,OAAOK,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AACT,MAAM,CAAC;EAAEC;AAAO,CAAC,KACTA,MAAM,IACNN,GAAG;AACX,qBAAqB,OAAOM,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AACT,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAKP,GAAG;AAC7B,sBAAsBO,UAAU;AAChC,KAAK;AACL,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAKR,GAAG;AAC7B,sBAAsBQ,UAAU;AAChC,KAAK;AACL;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAA6B,CAAC,KACzCD,QAAQ,KAAK,SAAS,GAChBT,GAAG;AACjB,0CAA0CU,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDV,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CU,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'] | null;\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `}\n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `}\n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `}\n    ${({ $overflowX }) => css`\n        overflow-x: ${$overflowX};\n    `}\n    ${({ $overflowY }) => css`\n        overflow-y: ${$overflowY};\n    `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAY/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAM,CAAC;EAAEC;AAAW,CAAC,KACbA,UAAU,IACVH,GAAG;AACX,0BAA0B,OAAOG,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AACT,MAAM,CAAC;EAAEC;AAAQ,CAAC,KACVA,OAAO,IACPJ,GAAG;AACX,sBAAsB,OAAOI,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AACT,MAAM,CAAC;EAAEC;AAAU,CAAC,KACZA,SAAS,IACTL,GAAG;AACX,yBAAyB,OAAOK,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AACT,MAAM,CAAC;EAAEC;AAAO,CAAC,KACTA,MAAM,IACNN,GAAG;AACX,qBAAqB,OAAOM,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AACT,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAKP,GAAG;AAC7B,sBAAsBO,UAAU;AAChC,KAAK;AACL,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAKR,GAAG;AAC7B,sBAAsBQ,UAAU;AAChC,KAAK;AACL,CAAC","ignoreList":[]}

package/lib/esm/components/search-box/SearchBox.styles.js

@@ -1,5 +1,5 @@
 import { motion } from 'motion/react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 export const StyledSearchBox = styled.div``;
 export const StyledMotionSearchBoxBody = styled(motion.div)`
     background: ${({
@@ -25,33 +25,6 @@ export const StyledMotionSearchBoxBody = styled(motion.div)`
         rgba(${({
   theme
 }) => theme['009-rgb']}, 0.08) inset;
-
-    // Styles for custom scrollbar
-    ${({
-  $browser,
-  theme
-}) => $browser === 'firefox' ? css`
-                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
-                  scrollbar-width: thin;
-              ` : css`
-                  &::-webkit-scrollbar {
-                      width: 5px;
-                  }
-
-                  &::-webkit-scrollbar-track {
-                      background-color: transparent;
-                  }
-
-                  &::-webkit-scrollbar-button {
-                      background-color: transparent;
-                      height: 5px;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                      background-color: rgba(${theme['text-rgb']}, 0.15);
-                      border-radius: 20px;
-                  }
-              `}
 `;
 export const StyledSearchBoxIcon = styled.div`
     cursor: pointer;

package/lib/esm/components/search-box/SearchBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","theme","$width","$height","$browser","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper","StyledSearchBoxHintText"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    $height: number;\n    $width: number;\n    $browser: BrowserName;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['000']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    width: ${({ $width }) => $width}px;\n    max-height: 300px;\n    overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\nexport const StyledSearchBoxIcon = styled.div`\n    cursor: pointer;\n    padding: 0 10px;\n`;\n\nexport const StyledSearchBoxLeftWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n`;\n\nexport const StyledSearchBoxHintText = styled.div`\n    text-align: center;\n    opacity: 0.8;\n    padding: 6px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAQ3C,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkB,CAAC;EAAEE;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA,kBAAkB,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AACvE;AACA,eAAe,CAAC;EAAEF;AAAsC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC9E;AACA;AACA,MAAM,CAAC;EAAEG,QAAQ;EAAEH;AAAsC,CAAC,KAClDG,QAAQ,KAAK,SAAS,GAChBP,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMI,mBAAmB,GAAGT,MAAM,CAACG,GAAG;AAC7C;AACA;AACA,CAAC;AAED,OAAO,MAAMO,0BAA0B,GAAGV,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMQ,uBAAuB,GAAGX,MAAM,CAACG,GAAG;AACjD;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","StyledSearchBox","div","StyledMotionSearchBoxBody","theme","$width","$height","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper","StyledSearchBoxHintText"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    $height: number;\n    $width: number;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['000']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    width: ${({ $width }) => $width}px;\n    max-height: 300px;\n    overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n`;\n\nexport const StyledSearchBoxIcon = styled.div`\n    cursor: pointer;\n    padding: 0 10px;\n`;\n\nexport const StyledSearchBoxLeftWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n`;\n\nexport const StyledSearchBoxHintText = styled.div`\n    text-align: center;\n    opacity: 0.8;\n    padding: 6px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAG,EAAE;AAO3C,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACD,MAAM,CAACG,GAAG,CAAiC;AAC3F,kBAAkB,CAAC;EAAEE;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA,kBAAkB,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AACvE;AACA,eAAe,CAAC;EAAEF;AAAsC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC9E,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAGP,MAAM,CAACE,GAAG;AAC7C;AACA;AACA,CAAC;AAED,OAAO,MAAMM,0BAA0B,GAAGR,MAAM,CAACE,GAAG;AACpD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMO,uBAAuB,GAAGT,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.js

@@ -4,7 +4,6 @@ import { useUuid } from '../../../hooks/uuid';
 import { getCurrentGroupName } from '../../../utils/searchBox';
 import FilterButtons from '../../filter-buttons/FilterButtons';
 import { StyledSearchBoxBody, StyledSearchBoxBodyContent, StyledSearchBoxBodyHead, StyledSearchBoxBodyHeadGroupName } from './SearchBoxBody.styles';
-import { useDevice } from 'chayns-api';
 const SearchBoxBody = /*#__PURE__*/forwardRef(({
   filterButtons,
   selectedGroups,
@@ -17,9 +16,6 @@ const SearchBoxBody = /*#__PURE__*/forwardRef(({
   const [hasScrolled, setHasScrolled] = useState(false);
   const [currentGroupName, setCurrentGroupName] = useState('');
   const headRef = useRef(null);
-  const {
-    browser
-  } = useDevice();
   const headSize = useElementSize(headRef);
   const uuid = useUuid();
   const headHeight = useMemo(() => headSize?.height ? headSize.height + 15 : 0, [headSize?.height]);
@@ -62,10 +58,10 @@ const SearchBoxBody = /*#__PURE__*/forwardRef(({
     $headHeight: headHeight,
     key: "content",
     id: `searchBoxContent__${uuid}`,
-    $browser: browser?.name,
+    className: "chayns-scrollbar",
     tabIndex: 0,
     onScroll: handleScroll
-  }, children)), [browser, children, currentGroupName, filterButtons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, shouldHideFilterButtons, shouldShow, uuid]);
+  }, children)), [children, currentGroupName, filterButtons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, shouldHideFilterButtons, shouldShow, uuid]);
 });
 SearchBoxBody.displayName = 'SearchBoxBody';
 export default SearchBoxBody;

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useUuid","getCurrentGroupName","FilterButtons","StyledSearchBoxBody","StyledSearchBoxBodyContent","StyledSearchBoxBodyHead","StyledSearchBoxBodyHeadGroupName","useDevice","SearchBoxBody","filterButtons","selectedGroups","height","children","shouldShow","onGroupSelect","shouldHideFilterButtons","ref","hasScrolled","setHasScrolled","currentGroupName","setCurrentGroupName","headRef","browser","headSize","uuid","headHeight","element","document","getElementById","length","handlePreventDefault","event","preventDefault","stopPropagation","handleScroll","scrollTop","target","createElement","onClick","inert","undefined","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","replace","$height","$headHeight","key","id","$browser","name","tabIndex","onScroll","displayName"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    MouseEvent,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/element';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\nimport { useDevice } from 'chayns-api';\nimport { BrowserName } from '../../../types/chayns';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterButtons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    onGroupSelect?: (keys: string[]) => void;\n    shouldHideFilterButtons?: boolean;\n    shouldShow: boolean;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    (\n        {\n            filterButtons,\n            selectedGroups,\n            height,\n            children,\n            shouldShow,\n            onGroupSelect,\n            shouldHideFilterButtons,\n        },\n        ref,\n    ) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const { browser } = useDevice();\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchBoxContent__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handlePreventDefault = (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledSearchBoxBody\n                    onClick={handlePreventDefault}\n                    ref={ref}\n                    inert={!shouldShow ? 'true' : undefined}\n                >\n                    {filterButtons && filterButtons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            {!shouldHideFilterButtons && (\n                                <FilterButtons\n                                    items={filterButtons}\n                                    size={0}\n                                    onSelect={onGroupSelect}\n                                    selectedItemIds={selectedGroups}\n                                />\n                            )}\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName.replace('_', '')}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchBoxContent__${uuid}`}\n                        $browser={(browser as { name: BrowserName })?.name}\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledSearchBoxBody>\n            ),\n            [\n                browser,\n                children,\n                currentGroupName,\n                filterButtons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                shouldHideFilterButtons,\n                shouldShow,\n                uuid,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useUuid","getCurrentGroupName","FilterButtons","StyledSearchBoxBody","StyledSearchBoxBodyContent","StyledSearchBoxBodyHead","StyledSearchBoxBodyHeadGroupName","SearchBoxBody","filterButtons","selectedGroups","height","children","shouldShow","onGroupSelect","shouldHideFilterButtons","ref","hasScrolled","setHasScrolled","currentGroupName","setCurrentGroupName","headRef","headSize","uuid","headHeight","element","document","getElementById","length","handlePreventDefault","event","preventDefault","stopPropagation","handleScroll","scrollTop","target","createElement","onClick","inert","undefined","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","replace","$height","$headHeight","key","id","className","tabIndex","onScroll","displayName"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    MouseEvent,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/element';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterButtons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    onGroupSelect?: (keys: string[]) => void;\n    shouldHideFilterButtons?: boolean;\n    shouldShow: boolean;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    (\n        {\n            filterButtons,\n            selectedGroups,\n            height,\n            children,\n            shouldShow,\n            onGroupSelect,\n            shouldHideFilterButtons,\n        },\n        ref,\n    ) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchBoxContent__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handlePreventDefault = (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledSearchBoxBody\n                    onClick={handlePreventDefault}\n                    ref={ref}\n                    inert={!shouldShow ? 'true' : undefined}\n                >\n                    {filterButtons && filterButtons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            {!shouldHideFilterButtons && (\n                                <FilterButtons\n                                    items={filterButtons}\n                                    size={0}\n                                    onSelect={onGroupSelect}\n                                    selectedItemIds={selectedGroups}\n                                />\n                            )}\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName.replace('_', '')}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchBoxContent__${uuid}`}\n                        className=\"chayns-scrollbar\"\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledSearchBoxBody>\n            ),\n            [\n                children,\n                currentGroupName,\n                filterButtons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                shouldHideFilterButtons,\n                shouldShow,\n                uuid,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js

@@ -38,32 +38,5 @@ export const StyledSearchBoxBodyContent = styled.div`
   $height,
   $headHeight
 }) => $height + $headHeight <= 300 ? 'hidden' : 'auto'};
-
-    // Styles for custom scrollbar
-    ${({
-  $browser,
-  theme
-}) => $browser === 'firefox' ? css`
-                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
-                  scrollbar-width: thin;
-              ` : css`
-                  &::-webkit-scrollbar {
-                      width: 5px;
-                  }
-
-                  &::-webkit-scrollbar-track {
-                      background-color: transparent;
-                  }
-
-                  &::-webkit-scrollbar-button {
-                      background-color: transparent;
-                      height: 5px;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                      background-color: rgba(${theme['text-rgb']}, 0.15);
-                      border-radius: 20px;
-                  }
-              `}
 `;
 //# sourceMappingURL=SearchBoxBody.styles.js.map

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.styles.js","names":["styled","css","StyledSearchBoxBody","div","StyledSearchBoxBodyHead","$hasGroupName","$hasScrolled","StyledSearchBoxBodyHeadGroupName","theme","text","StyledSearchBoxBodyContent","$headHeight","$height","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBoxBody = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n    color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n    $browser: BrowserName;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledSearchBoxBodyContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAAG;AAC7C;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACG,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAc,CAAC,KAChBA,aAAa,IACbJ,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAa,CAAC,KACfA,YAAY,IACZL,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMM,gCAAgC,GAAGP,MAAM,CAACG,GAA8C;AACrG,aAAa,CAAC;EAAEK;AAAiD,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGV,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEQ;AAAY,CAAC,KAAK,GAAG,GAAGA,WAAW;AACxD,kBAAkB,CAAC;EAAEC,OAAO;EAAED;AAAY,CAAC,KAAMC,OAAO,GAAGD,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AAClG;AACA;AACA,MAAM,CAAC;EAAEE,QAAQ;EAAEL;AAAuC,CAAC,KACnDK,QAAQ,KAAK,SAAS,GAChBZ,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.styles.js","names":["styled","css","StyledSearchBoxBody","div","StyledSearchBoxBodyHead","$hasGroupName","$hasScrolled","StyledSearchBoxBodyHeadGroupName","theme","text","StyledSearchBoxBodyContent","$headHeight","$height"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBoxBody = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n    color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAAG;AAC7C;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACG,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAc,CAAC,KAChBA,aAAa,IACbJ,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAa,CAAC,KACfA,YAAY,IACZL,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMM,gCAAgC,GAAGP,MAAM,CAACG,GAA8C;AACrG,aAAa,CAAC;EAAEK;AAAiD,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA,CAAC;AAOD,OAAO,MAAMC,0BAA0B,GAAGV,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEQ;AAAY,CAAC,KAAK,GAAG,GAAGA,WAAW;AACxD,kBAAkB,CAAC;EAAEC,OAAO;EAAED;AAAY,CAAC,KAAMC,OAAO,GAAGD,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AAClG,CAAC","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.js

@@ -1,4 +1,3 @@
-import { getDevice } from 'chayns-api';
 import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { StyledInputRightElement } from '../input/Input.styles';
@@ -20,9 +19,6 @@ const TextArea = /*#__PURE__*/forwardRef(({
   const [isOverflowing, setIsOverflowing] = useState(false);
   const areaProvider = useContext(AreaContext);
   const textareaRef = useRef(null);
-  const {
-    browser
-  } = getDevice();
   useCursorRepaint(textareaRef);
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -52,7 +48,7 @@ const TextArea = /*#__PURE__*/forwardRef(({
     $isInvalid: isInvalid,
     $shouldChangeColor: shouldChangeColor
   }, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
-    $browser: browser?.name,
+    className: "chayns-scrollbar",
     disabled: isDisabled,
     $isInvalid: isInvalid,
     ref: textareaRef,
@@ -67,7 +63,7 @@ const TextArea = /*#__PURE__*/forwardRef(({
     rows: 1
   }), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
     $isInvalid: isInvalid
-  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
+  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
 });
 TextArea.displayName = 'TextArea';
 export default TextArea;