@chayns-components/core 5.0.25 → 5.0.26

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.js","names":["getDevice","useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","StyledPopupContentWrapperContent","PopupContentWrapper","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","browser","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","$browser","name","$maxHeight","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { getDevice, useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n    StyledMotionPopupContentWrapper,\n    StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\nimport { BrowserName } from '../../../types/chayns';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n    maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n            maxHeight,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const { browser } = getDevice();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween', duration: 0.15 }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentWrapperContent\n                    $browser={browser?.name as BrowserName}\n                    $maxHeight={maxHeight}\n                >\n                    {children}\n                </StyledPopupContentWrapperContent>\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,YAAY;AAC/C,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SACIC,+BAA+B,EAC/BC,gCAAgC,QAC7B,8BAA8B;AAerC,MAAMC,mBAAmB,gBAAGJ,KAAK,CAACK,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAGjB,OAAO,CAAC,CAAC;EAE/B,MAAM;IAAEkB;EAAQ,CAAC,GAAGnB,SAAS,CAAC,CAAC;EAE/B,MAAMoB,qBAAqB,GAAGZ,SAAS,KAAKL,cAAc,CAACkB,UAAU;EACrE,MAAMC,kBAAkB,GAAGd,SAAS,KAAKL,cAAc,CAACoB,OAAO;EAC/D,MAAMC,mBAAmB,GAAGhB,SAAS,KAAKL,cAAc,CAACsB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACItB,KAAA,CAAA6B,aAAA,CAAC3B,+BAA+B;IAC5B4B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEjB,SAAU;IACtBkB,OAAO,EAAEzB,MAAO;IAChB0B,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,EAAE/B,SAAU;IACrBgC,wBAAwB,EAAE1B,uBAAwB;IAClDG,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBF,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3B4B,KAAK,EAAE;MAAEC,IAAI,EAAEhC,WAAW,CAACiC,CAAC;MAAEC,GAAG,EAAElC,WAAW,CAACwB,CAAC;MAAEtB;IAAM,CAAE;IAC1DiC,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAE;IAAK,CAAE;IAC9CC,iBAAiB,EAAEA,CAAC;MAAEd,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCR,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCK,CAAC;AAClC;EAAkB,gBAEFhC,KAAA,CAAA6B,aAAA,CAAC1B,gCAAgC;IAC7B4C,QAAQ,EAAE9B,OAAO,EAAE+B,IAAoB;IACvCC,UAAU,EAAEnC;EAAU,GAErBP,QAC6B,CACL,CAAC;AAE1C,CACJ,CAAC;AAEDH,mBAAmB,CAAC8C,WAAW,GAAG,cAAc;AAEhD,eAAe9C,mBAAmB","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","StyledPopupContentWrapperContent","PopupContentWrapper","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","className","$maxHeight","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n    StyledMotionPopupContentWrapper,\n    StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n    maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n            maxHeight,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween', duration: 0.15 }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentWrapperContent\n                    className=\"chayns-scrollbar\"\n                    $maxHeight={maxHeight}\n                >\n                    {children}\n                </StyledPopupContentWrapperContent>\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SACIC,+BAA+B,EAC/BC,gCAAgC,QAC7B,8BAA8B;AAcrC,MAAMC,mBAAmB,gBAAGJ,KAAK,CAACK,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAGjB,OAAO,CAAC,CAAC;EAE/B,MAAMkB,qBAAqB,GAAGX,SAAS,KAAKL,cAAc,CAACiB,UAAU;EACrE,MAAMC,kBAAkB,GAAGb,SAAS,KAAKL,cAAc,CAACmB,OAAO;EAC/D,MAAMC,mBAAmB,GAAGf,SAAS,KAAKL,cAAc,CAACqB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIrB,KAAA,CAAA4B,aAAA,CAAC1B,+BAA+B;IAC5B2B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,OAAO,EAAExB,MAAO;IAChByB,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,EAAE9B,SAAU;IACrB+B,wBAAwB,EAAEzB,uBAAwB;IAClDG,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBF,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3B2B,KAAK,EAAE;MAAEC,IAAI,EAAE/B,WAAW,CAACgC,CAAC;MAAEC,GAAG,EAAEjC,WAAW,CAACuB,CAAC;MAAErB;IAAM,CAAE;IAC1DgC,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAE;IAAK,CAAE;IAC9CC,iBAAiB,EAAEA,CAAC;MAAEd,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCR,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCK,CAAC;AAClC;EAAkB,gBAEF/B,KAAA,CAAA4B,aAAA,CAACzB,gCAAgC;IAC7B2C,SAAS,EAAC,kBAAkB;IAC5BC,UAAU,EAAEjC;EAAU,GAErBP,QAC6B,CACL,CAAC;AAE1C,CACJ,CAAC;AAEDH,mBAAmB,CAAC4C,WAAW,GAAG,cAAc;AAEhD,eAAe5C,mBAAmB","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -85,39 +85,5 @@ export const StyledPopupContentWrapperContent = styled.div`
             overflow-y: auto;
             overflow-x: hidden;
         `}
-
-    ${({
-  $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=PopupContentWrapper.styles.js.map

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","theme","text","$shouldScrollWithContent","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight","$browser"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { BrowserName } from '../../../types/chayns';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n    $browser: BrowserName;\n    $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n    height: 100%;\n    width: 100%;\n\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n\n    ${({ $browser, theme }: StyledPopupContentWrapperContentProps) =>\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,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAWrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKN,cAAc,CAACQ,OAAO;MACvB,OAAOT,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACS,UAAU;MAC1B,OAAOV,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACU,QAAQ;MACxB,OAAOX,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL,KAAKP,cAAc,CAACW,WAAW;MAC3B,OAAOZ,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;EAAEY;AAAW,CAAC,KACbA,UAAU,IACVf,GAAG;AACX,0BAA0Be,UAAU;AACpC;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEZ;AAA6C,CAAC,KACzDY,QAAQ,KAAK,SAAS,GAChBhB,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;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","theme","text","$shouldScrollWithContent","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n    $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n    height: 100%;\n    width: 100%;\n\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAUrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKN,cAAc,CAACQ,OAAO;MACvB,OAAOT,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACS,UAAU;MAC1B,OAAOV,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACU,QAAQ;MACxB,OAAOX,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL,KAAKP,cAAc,CAACW,WAAW;MAC3B,OAAOZ,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;EAAEY;AAAW,CAAC,KACbA,UAAU,IACVf,GAAG;AACX,0BAA0Be,UAAU;AACpC;AACA;AACA,SAAS;AACT,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;

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["getDevice","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","TextArea","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","ref","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name as BrowserName}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","TextArea","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","ref","isOverflowing","setIsOverflowing","areaProvider","textareaRef","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","className","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                className=\"chayns-scrollbar\"\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"AAAA,OAAOA,KAAK,IAIRC,UAAU,EAGVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,WAAW,QAAQ,sCAAsC;AAClE,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SACIC,cAAc,EACdC,qBAAqB,EACrBC,4BAA4B,EAC5BC,mBAAmB,EACnBC,mBAAmB,EACnBC,0BAA0B,QACvB,mBAAmB;AAC1B,SAASC,gBAAgB,QAAQ,oBAAoB;AAiDrD,MAAMC,QAAQ,gBAAGjB,UAAU,CACvB,CACI;EACIkB,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,YAAY;EACZC,MAAM;EACNC,SAAS,GAAG,OAAO;EACnBC,SAAS,GAAG;AAChB,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAAC,KAAK,CAAC;EAEzD,MAAMyB,YAAY,GAAG9B,UAAU,CAACM,WAAW,CAAC;EAE5C,MAAMyB,WAAW,GAAG3B,MAAM,CAAsB,IAAI,CAAC;EAErDU,gBAAgB,CAACiB,WAAW,CAAC;;EAE7B;EACA,MAAMC,gBAAgB,GAAGT,YAAY,EAAEU,KAAK,EAAEC,KAAK,EAAEC,eAAe,KAAKC,SAAS;EAElF,MAAMC,iBAAiB,GAAGlC,OAAO,CAC7B,MAAM2B,YAAY,CAACO,iBAAiB,IAAI,KAAK,EAC7C,CAACP,YAAY,CAACO,iBAAiB,CACnC,CAAC;EAED,MAAMC,oBAAoB,GAAGvC,WAAW,CAAC,MAAM;IAC3C,IAAIgC,WAAW,CAACQ,OAAO,EAAE;MACrBR,WAAW,CAACQ,OAAO,CAACL,KAAK,CAACM,MAAM,GAAG,MAAM;MACzCT,WAAW,CAACQ,OAAO,CAACL,KAAK,CAACM,MAAM,GAAG,GAAGT,WAAW,CAACQ,OAAO,CAACE,YAAY,IAAI;MAE1EZ,gBAAgB,CACZE,WAAW,CAACQ,OAAO,CAACE,YAAY,GAAGC,QAAQ,CAACjB,SAAS,CAACkB,QAAQ,CAAC,CAAC,EAAE,EAAE,CACxE,CAAC;IACL;EACJ,CAAC,EAAE,CAAClB,SAAS,CAAC,CAAC;EAEfvB,mBAAmB,CAACyB,GAAG,EAAE,MAAMI,WAAW,CAACQ,OAA8B,CAAC;;EAE1E;AACR;AACA;AACA;EACQtC,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOkB,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACyB,MAAM,GAAG,CAAC,CAAC,EAAE;MAChDN,oBAAoB,CAAC,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,oBAAoB,EAAEnB,KAAK,CAAC,CAAC;EAEjC,OAAOhB,OAAO,CACV,mBACIN,KAAA,CAAAgD,aAAA,CAACrC,cAAc;IAACsC,WAAW,EAAE9B;EAAW,gBACpCnB,KAAA,CAAAgD,aAAA,CAACnC,4BAA4B;IACzBqC,UAAU,EAAE9B,SAAU;IACtB+B,kBAAkB,EAAEX;EAAkB,gBAEtCxC,KAAA,CAAAgD,aAAA,CAACpC,qBAAqB,qBAClBZ,KAAA,CAAAgD,aAAA,CAAClC,mBAAmB;IAChBsC,SAAS,EAAC,kBAAkB;IAC5BC,QAAQ,EAAElC,UAAW;IACrB+B,UAAU,EAAE9B,SAAU;IACtBU,GAAG,EAAEI,WAAY;IACjBZ,KAAK,EAAEA,KAAM;IACbK,MAAM,EAAEA,MAAO;IACfJ,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrB6B,UAAU,EAAE1B,SAAU;IACtB2B,UAAU,EAAE1B,SAAU;IACtB2B,cAAc,EAAEzB,aAAc;IAC9B0B,IAAI,EAAE;EAAE,CACX,CAAC,EACD,CAACnC,KAAK,iBACHtB,KAAA,CAAAgD,aAAA,CAAChC,0BAA0B,qBACvBhB,KAAA,CAAAgD,aAAA,CAACjC,mBAAmB;IAACmC,UAAU,EAAE9B;EAAU,GACtCC,WACgB,CACG,CAEb,CAAC,EACvBK,YAAY,IAAIS,gBAAgB,IAAIT,YACX,CAAC,EAC9BA,YAAY,IAAI,CAACS,gBAAgB,iBAC9BnC,KAAA,CAAAgD,aAAA,CAACtC,uBAAuB,QAAEgB,YAAsC,CAExD,CACnB,EACD,CACIP,UAAU,EACVC,SAAS,EACTW,aAAa,EACbH,SAAS,EACTC,SAAS,EACTF,MAAM,EACNJ,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTJ,WAAW,EACXK,YAAY,EACZc,iBAAiB,EACjBL,gBAAgB,EAChBb,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDJ,QAAQ,CAACwC,WAAW,GAAG,UAAU;AAEjC,eAAexC,QAAQ","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 export const StyledTextArea = styled.div`
     display: flex;
     flex: 1 1 auto;
@@ -47,35 +47,6 @@ export const StyledTextAreaInput = styled.textarea`
     width: 100%;
     padding: 8px 10px;
     cursor: text;
-
-    // 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;
-                  }
-
-                  &::-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;
-                      background-clip: padding-box;
-                      border: solid 3px transparent;
-                  }
-              `}
 `;
 export const StyledTextAreaLabelWrapper = styled.label`
     left: 10px;

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.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';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n    background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    width: 100%;\n    display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n    $browser: BrowserName;\n    $isInvalid: TextAreaProps['isInvalid'];\n    $isOverflowing: boolean;\n    $maxHeight: CSSProperties['maxHeight'];\n    $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    background: none;\n    border: none;\n    resize: none;\n    overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n    max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n        typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n    min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n        typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n    width: 100%;\n    padding: 8px 10px;\n    cursor: text;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledTextAreaInputProps) =>\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                  }\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                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n              `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n    left: 10px;\n    top: 12px;\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    width: calc(100% - 20px);\n    cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n    line-height: 1.3;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: text;\n    text-overflow: ellipsis;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAOD,OAAO,MAAMC,4BAA4B,GAAGL,MAAM,CAACG,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAsD,CAAC,KACjFD,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEG;AAA8C,CAAC,KACvDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,0BAA0B;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGX,MAAM,CAACG,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMS,mBAAmB,GAAGZ,MAAM,CAACa,QAAkC;AAC5E,aAAa,CAAC;EAAEP,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACQ,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEZ;AAAgC,CAAC,KAC5CY,QAAQ,KAAK,SAAS,GAChBjB,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMa,0BAA0B,GAAGnB,MAAM,CAACoB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGrB,MAAM,CAACoB,KAA+B;AACzE,aAAa,CAAC;EAAEd,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,QAAQJ,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TextArea.styles.js","names":["styled","StyledTextArea","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n    background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    width: 100%;\n    display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $isOverflowing: boolean;\n    $maxHeight: CSSProperties['maxHeight'];\n    $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    background: none;\n    border: none;\n    resize: none;\n    overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n    max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n        typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n    min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n        typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n    width: 100%;\n    padding: 8px 10px;\n    cursor: text;\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n    left: 10px;\n    top: 12px;\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    width: calc(100% - 20px);\n    cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n    line-height: 1.3;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: text;\n    text-overflow: ellipsis;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAMtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAOD,OAAO,MAAMC,4BAA4B,GAAGJ,MAAM,CAACE,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAsD,CAAC,KACjFD,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEG;AAA8C,CAAC,KACvDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,0BAA0B;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGV,MAAM,CAACE,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMS,mBAAmB,GAAGX,MAAM,CAACY,QAAkC;AAC5E,aAAa,CAAC;EAAEP,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACQ,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGjB,MAAM,CAACkB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGnB,MAAM,CAACkB,KAA+B;AACzE,aAAa,CAAC;EAAEb,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,QAAQJ,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}