@chayns-components/core 5.0.0-beta.8 → 5.0.0-beta.800

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useUuid } from '../../hooks/uuid';
+import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
+const ProgressBar = _ref => {
+  let {
+    percentage,
+    label,
+    shouldHideProgress = false
+  } = _ref;
+  const [internalPercentage, setInternalPercentage] = useState(0);
+  const uuid = useUuid();
+  useEffect(() => {
+    if (typeof percentage !== 'number') {
+      return;
+    }
+    if (percentage >= 0 && percentage <= 100) {
+      setInternalPercentage(percentage);
+    }
+  }, [percentage]);
+  const progressBar = useMemo(() => {
+    if (shouldHideProgress) {
+      return null;
+    }
+    if (typeof percentage !== 'number') {
+      return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+        key: `progress-bar-loop__${uuid}`,
+        initial: {
+          width: '200px',
+          left: '-200px'
+        },
+        animate: {
+          width: '200px',
+          left: '100%'
+        },
+        exit: {
+          width: '200px',
+          left: '100%'
+        },
+        transition: {
+          type: 'tween',
+          repeat: Infinity,
+          repeatDelay: 0,
+          duration: 1
+        }
+      }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
+    }
+    return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+      key: `progress-bar__${uuid}`,
+      initial: {
+        width: '0%'
+      },
+      animate: {
+        width: `${internalPercentage}%`
+      },
+      exit: {
+        width: '0%'
+      },
+      transition: {
+        type: 'tween'
+      }
+    }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
+  }, [internalPercentage, percentage, shouldHideProgress, uuid]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, null, label)), [progressBar, label]);
+};
+ProgressBar.displayName = 'ProgressBar';
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","ProgressBar","_ref","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: number;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({ percentage, label, shouldHideProgress = false }) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (typeof percentage !== 'number') {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (typeof percentage !== 'number') {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper>\n                <StyledMotionProgressBarProgress\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                <StyledProgressBarBackground />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [internalPercentage, percentage, shouldHideProgress, uuid]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && <StyledProgressBarLabel>{label}</StyledProgressBarLabel>}\n            </StyledProgressBar>\n        ),\n        [progressBar, label],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SACIC,+BAA+B,EAC/BC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,EACtBC,gCAAgC,QAC7B,sBAAsB;AAiB7B,MAAMC,WAAiC,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,UAAU;IAAEC,KAAK;IAAEC,kBAAkB,GAAG;EAAM,CAAC,GAAAH,IAAA;EACxF,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGb,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAMc,IAAI,GAAGb,OAAO,CAAC,CAAC;EAEtBH,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOW,UAAU,KAAK,QAAQ,EAAE;MAChC;IACJ;IAEA,IAAIA,UAAU,IAAI,CAAC,IAAIA,UAAU,IAAI,GAAG,EAAE;MACtCI,qBAAqB,CAACJ,UAAU,CAAC;IACrC;EACJ,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMM,WAAW,GAAGhB,OAAO,CAAC,MAAM;IAC9B,IAAIY,kBAAkB,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAI,OAAOF,UAAU,KAAK,QAAQ,EAAE;MAChC,oBACIZ,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;QAC5Be,GAAG,EAAE,sBAAsBH,IAAI,EAAG;QAClCI,OAAO,EAAE;UAAEC,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAS,CAAE;QAC5CC,OAAO,EAAE;UAAEF,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QAC1CE,IAAI,EAAE;UAAEH,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QACvCG,UAAU,EAAE;UACRC,IAAI,EAAE,OAAO;UACbC,MAAM,EAAEC,QAAQ;UAChBC,WAAW,EAAE,CAAC;UACdC,QAAQ,EAAE;QACd;MAAE,CACL,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;IAE3C;IAEA,oBACIP,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;MAC5Be,GAAG,EAAE,iBAAiBH,IAAI,EAAG;MAC7BI,OAAO,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAE;MACzBE,OAAO,EAAE;QAAEF,KAAK,EAAE,GAAGP,kBAAkB;MAAI,CAAE;MAC7CU,IAAI,EAAE;QAAEH,KAAK,EAAE;MAAK,CAAE;MACtBI,UAAU,EAAE;QAAEC,IAAI,EAAE;MAAQ;IAAE,CACjC,CAAC,eACF3B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;EAE3C,CAAC,EAAE,CAACQ,kBAAkB,EAAEH,UAAU,EAAEE,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE9D,OAAOf,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACb,iBAAiB,QACbY,WAAW,EACXL,KAAK,iBAAIb,KAAA,CAAAmB,aAAA,CAACX,sBAAsB,QAAEK,KAA8B,CAClD,CACtB,EACD,CAACK,WAAW,EAAEL,KAAK,CACvB,CAAC;AACL,CAAC;AAEDH,WAAW,CAACsB,WAAW,GAAG,aAAa;AAEvC,eAAetB,WAAW","ignoreList":[]}

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

@@ -0,0 +1,46 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledProgressBar = styled.div`
+    position: relative;
+`;
+export const StyledProgressBarBackground = styled.div`
+    height: 10px;
+    width: 100%;
+    border-radius: 2px;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['104'];
+}};
+`;
+export const StyledProgressBarProgressWrapper = styled.div`
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 10px;
+    border-radius: 2px;
+`;
+export const StyledMotionProgressBarProgress = styled(motion.div)`
+    height: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.headline;
+}};
+`;
+export const StyledProgressBarLabel = styled.div`
+    font-size: 85%;
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.headline;
+}};
+`;
+//# sourceMappingURL=ProgressBar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","StyledProgressBar","div","StyledProgressBarBackground","_ref","theme","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","_ref2","headline","StyledProgressBarLabel","_ref3"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<unknown>;\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 10px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ theme }: StyledProgressBarBackgroundProps) => theme['104']};\n`;\n\nexport const StyledProgressBarProgressWrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 10px;\n    border-radius: 2px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<unknown>;\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 10px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ theme }: StyledProgressBarProgressProps) => theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<unknown>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme }: StyledProgressBarLabelProps) => theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAG;AAC3C;AACA,CAAC;AAGD,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAqC;AACvF;AACA;AACA;AACA,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAwC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACrF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGN,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMK,+BAA+B,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA,wBAAwBM,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,QAAQ;AAAA;AACrF,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAgC;AAC7E;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACI,QAAQ;AAAA;AACvE,CAAC","ignoreList":[]}

package/lib/esm/components/radio-button/RadioButton.js

@@ -0,0 +1,90 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';
+import { StyledMotionRadioButtonChildren, StyledRadioButton, StyledRadioButtonCheckBox, StyledRadioButtonCheckBoxMark, StyledRadioButtonLabel, StyledRadioButtonPseudoCheckBox, StyledRadioButtonWrapper } from './RadioButton.styles';
+const RadioButton = _ref => {
+  let {
+    children,
+    label,
+    id,
+    isDisabled = false
+  } = _ref;
+  const {
+    selectedRadioButtonId,
+    updateSelectedRadioButtonId,
+    radioButtonsCanBeUnchecked
+  } = useContext(RadioButtonGroupContext);
+  const [internalIsChecked, setInternalIsChecked] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const isInGroup = typeof updateSelectedRadioButtonId === 'function';
+  const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
+  const uncheckable = radioButtonsCanBeUnchecked;
+  useEffect(() => {
+    if (selectedRadioButtonId === id) {
+      if (typeof updateSelectedRadioButtonId === 'function') {
+        updateSelectedRadioButtonId(id);
+      }
+    }
+  }, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    if (uncheckable) {
+      if (updateSelectedRadioButtonId) {
+        updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);
+      }
+      setInternalIsChecked(prev => !prev);
+      return;
+    }
+    if (typeof updateSelectedRadioButtonId === 'function') {
+      updateSelectedRadioButtonId(id);
+    }
+    setInternalIsChecked(true);
+  }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);
+  const handleMouseEnter = useCallback(() => {
+    if (!isDisabled) {
+      setIsHovered(true);
+    }
+  }, [isDisabled]);
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledRadioButton, {
+    $isDisabled: isDisabled,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, {
+    $isDisabled: isDisabled,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
+    $isDisabled: isDisabled,
+    $isChecked: isMarked
+  }, /*#__PURE__*/React.createElement(StyledRadioButtonCheckBoxMark, {
+    $isHovered: isHovered,
+    $isSelected: isMarked,
+    $isDisabled: isDisabled
+  })), /*#__PURE__*/React.createElement(StyledRadioButtonCheckBox, {
+    disabled: isDisabled,
+    $isDisabled: isDisabled,
+    type: "radio",
+    checked: isMarked,
+    onChange: () => {}
+  }), label && /*#__PURE__*/React.createElement(StyledRadioButtonLabel, null, label)), children && /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionRadioButtonChildren, {
+    animate: isMarked ? {
+      opacity: 1,
+      height: 'auto'
+    } : {
+      opacity: 0,
+      height: 0
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label]);
+};
+RadioButton.displayName = 'RadioButton';
+export default RadioButton;
+//# sourceMappingURL=RadioButton.js.map

package/lib/esm/components/radio-button/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","label","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","onMouseEnter","onMouseLeave","onClick","$isChecked","$isHovered","$isSelected","disabled","type","checked","onChange","initial","animate","opacity","height","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n    StyledMotionRadioButtonChildren,\n    StyledRadioButton,\n    StyledRadioButtonCheckBox,\n    StyledRadioButtonCheckBoxMark,\n    StyledRadioButtonLabel,\n    StyledRadioButtonPseudoCheckBox,\n    StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n    /**\n     * The children that should be displayed after the RadioButton is checked.\n     */\n    children?: ReactNode;\n    /**\n     * whether the RadioButton should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * The id of the radio button.\n     */\n    id: string;\n    /**\n     * The label that should be displayed next to the radio button.\n     */\n    label?: string;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({ children, label, id, isDisabled = false }) => {\n    const { selectedRadioButtonId, updateSelectedRadioButtonId, radioButtonsCanBeUnchecked } =\n        useContext(RadioButtonGroupContext);\n\n    const [internalIsChecked, setInternalIsChecked] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n\n    const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n    const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n    const uncheckable = radioButtonsCanBeUnchecked;\n\n    useEffect(() => {\n        if (selectedRadioButtonId === id) {\n            if (typeof updateSelectedRadioButtonId === 'function') {\n                updateSelectedRadioButtonId(id);\n            }\n        }\n    }, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n        if (uncheckable) {\n            if (updateSelectedRadioButtonId) {\n                updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n            }\n            setInternalIsChecked((prev) => !prev);\n            return;\n        }\n        if (typeof updateSelectedRadioButtonId === 'function') {\n            updateSelectedRadioButtonId(id);\n        }\n        setInternalIsChecked(true);\n    }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n    const handleMouseEnter = useCallback(() => {\n        if (!isDisabled) {\n            setIsHovered(true);\n        }\n    }, [isDisabled]);\n\n    const handleMouseLeave = () => {\n        setIsHovered(false);\n    };\n\n    return useMemo(\n        () => (\n            <StyledRadioButton\n                $isDisabled={isDisabled}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n            >\n                <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n                    <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n                        <StyledRadioButtonCheckBoxMark\n                            $isHovered={isHovered}\n                            $isSelected={isMarked}\n                            $isDisabled={isDisabled}\n                        />\n                    </StyledRadioButtonPseudoCheckBox>\n                    <StyledRadioButtonCheckBox\n                        disabled={isDisabled}\n                        $isDisabled={isDisabled}\n                        type=\"radio\"\n                        checked={isMarked}\n                        onChange={() => {}}\n                    />\n                    {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n                </StyledRadioButtonWrapper>\n                {children && (\n                    <AnimatePresence initial={false}>\n                        <StyledMotionRadioButtonChildren\n                            animate={\n                                isMarked\n                                    ? { opacity: 1, height: 'auto' }\n                                    : { opacity: 0, height: 0 }\n                            }\n                            transition={{ duration: 0.2 }}\n                        >\n                            {children}\n                        </StyledMotionRadioButtonChildren>\n                    </AnimatePresence>\n                )}\n            </StyledRadioButton>\n        ),\n        [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n    );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/radio-button/RadioButton.styles.js

@@ -0,0 +1,130 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledRadioButton = styled.span`
+    display: flex;
+    flex-direction: column;
+
+    position: relative;
+
+    opacity: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 0.5 : 1;
+}};
+`;
+export const StyledRadioButtonWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    position: relative;
+    gap: 5px;
+    user-select: none;
+
+    cursor: ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+`;
+export const StyledRadioButtonCheckBox = styled.input`
+    opacity: 0;
+    height: 15px;
+    width: 15px;
+    cursor: ${_ref3 => {
+  let {
+    $isDisabled
+  } = _ref3;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+`;
+export const StyledRadioButtonPseudoCheckBox = styled.div`
+    background-color: ${_ref4 => {
+  let {
+    theme,
+    $isChecked
+  } = _ref4;
+  return $isChecked ? theme['secondary-408'] : theme['secondary-403'];
+}};
+    opacity: 1;
+    border: 1px solid
+        rgba(${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['409-rgb'];
+}}, 0.5);
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    border-radius: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: ${_ref6 => {
+  let {
+    $isDisabled
+  } = _ref6;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+`;
+export const StyledRadioButtonCheckBoxMark = styled.span`
+    background-color: transparent;
+    position: absolute;
+    top: 1px;
+    left: 3.925px;
+    display: inline-block;
+    transform: rotate(35deg);
+    height: 9px;
+    width: 5px;
+    border-bottom: 2px solid white;
+    border-right: 2px solid white;
+    border-top: transparent;
+    border-left: transparent;
+    z-index: 2;
+    cursor: ${_ref7 => {
+  let {
+    $isDisabled
+  } = _ref7;
+  return $isDisabled ? 'default !important' : 'pointer !important';
+}};
+
+    ${_ref8 => {
+  let {
+    $isHovered,
+    $isSelected
+  } = _ref8;
+  if ($isSelected) {
+    return css`
+                opacity: 1;
+            `;
+  }
+  if ($isHovered) {
+    return css`
+                opacity: 0.5;
+            `;
+  }
+  return css`
+            opacity: 0;
+        `;
+}}
+`;
+export const StyledRadioButtonLabel = styled.p`
+    color: ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.text;
+}};
+`;
+export const StyledMotionRadioButtonChildren = styled(motion.div)`
+    margin-left: 18px;
+    cursor: text;
+    overflow: hidden;
+    color: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.text;
+}};
+`;
+//# sourceMappingURL=RadioButton.styles.js.map

package/lib/esm/components/radio-button/RadioButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","StyledRadioButtonWrapper","div","_ref2","StyledRadioButtonCheckBox","input","_ref3","StyledRadioButtonPseudoCheckBox","_ref4","theme","$isChecked","_ref5","_ref6","StyledRadioButtonCheckBoxMark","_ref7","_ref8","$isHovered","$isSelected","StyledRadioButtonLabel","p","_ref9","text","StyledMotionRadioButtonChildren","_ref10"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledRadioButtonWrapperProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonWrapper = styled.div<StyledRadioButtonWrapperProps>`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\n\n    cursor: ${({ $isDisabled }: StyledRadioButtonWrapperProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n    $isChecked: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 18px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACnF,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,GAAkC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEH;EAA2C,CAAC,GAAAG,KAAA;EAAA,OACrDH,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE,CAAC;AAID,OAAO,MAAMI,yBAAyB,GAAGT,MAAM,CAACU,KAAqC;AACrF;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEN;EAA4C,CAAC,GAAAM,KAAA;EAAA,OACtDN,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE,CAAC;AAOD,OAAO,MAAMO,+BAA+B,GAAGZ,MAAM,CAACO,GAAyC;AAC/F,wBAAwBM,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,KAAA;EAAA,OAC5EE,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AAAA;AACpE;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEF;EAA4C,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAAC,SAAS,CAAC;AAAA;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,cAAcG,KAAA;EAAA,IAAC;IAAEZ;EAAkD,CAAC,GAAAY,KAAA;EAAA,OAC5DZ,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE,CAAC;AAQD,OAAO,MAAMa,6BAA6B,GAAGlB,MAAM,CAACG,IAAwC;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcgB,KAAA;EAAA,IAAC;IAAEd;EAAgD,CAAC,GAAAc,KAAA;EAAA,OAC1Dd,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE;AACA,MAAMe,KAAA,IAAiC;EAAA,IAAhC;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAAF,KAAA;EAC1B,IAAIE,WAAW,EAAE;IACb,OAAOrB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIoB,UAAU,EAAE;IACZ,OAAOpB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,MAAMsB,sBAAsB,GAAGvB,MAAM,CAACwB,CAA8B;AAC3E,aAAaC,KAAA;EAAA,IAAC;IAAEX;EAAmC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAACY,IAAI;AAAA;AACnE,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAG3B,MAAM,CACjDD,MAAM,CAACQ,GACX,CAAuC;AACvC;AACA;AACA;AACA,aAAaqB,MAAA;EAAA,IAAC;IAAEd;EAA4C,CAAC,GAAAc,MAAA;EAAA,OAAKd,KAAK,CAACY,IAAI;AAAA;AAC5E,CAAC","ignoreList":[]}

package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js

@@ -0,0 +1,45 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+export const RadioButtonGroupContext = /*#__PURE__*/React.createContext({
+  selectedRadioButtonId: undefined,
+  updateSelectedRadioButtonId: undefined,
+  radioButtonsCanBeUnchecked: false
+});
+RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
+const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    canUncheckRadioButtons,
+    selectedId,
+    onSelect
+  } = _ref;
+  const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
+  const isInitialRenderRef = useRef(true);
+  useEffect(() => {
+    setSelectedRadioButtonId(selectedId);
+  }, [selectedId]);
+  const updateSelectedRadioButtonId = useCallback(id => {
+    if (typeof onSelect === 'function') {
+      onSelect(id);
+    }
+    setSelectedRadioButtonId(id);
+  }, [onSelect]);
+  useImperativeHandle(ref, () => ({
+    updateSelectedRadioButtonId
+  }), [updateSelectedRadioButtonId]);
+  useEffect(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    }
+  }, [selectedRadioButtonId]);
+  const providerValue = useMemo(() => ({
+    selectedRadioButtonId,
+    updateSelectedRadioButtonId,
+    canUncheckRadioButtons
+  }), [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId]);
+  return /*#__PURE__*/React.createElement(RadioButtonGroupContext.Provider, {
+    value: providerValue
+  }, children);
+});
+RadioButtonGroup.displayName = 'RadioButtonGroup';
+export default RadioButtonGroup;
+//# sourceMappingURL=RadioButtonGroup.js.map

package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","_ref","ref","children","canUncheckRadioButtons","selectedId","onSelect","setSelectedRadioButtonId","isInitialRenderRef","id","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ninterface IRadioButtonGroupContext {\n    selectedRadioButtonId: string | undefined;\n    updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n    radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n    selectedRadioButtonId: undefined,\n    updateSelectedRadioButtonId: undefined,\n    radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n    updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n    /**\n     * Whether the RadioButtons can be unchecked.\n     */\n    canUncheckRadioButtons?: boolean;\n    /**\n     * The RadioButtons that should be grouped. Radio buttons with the same group are\n     * automatically unchecked when an `RadioButton` of the group is checked.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when an id is selected.\n     */\n    onSelect?: (id?: string) => void;\n    /**\n     * The id of the current selected RadioButton.\n     */\n    selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n    ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n        const [selectedRadioButtonId, setSelectedRadioButtonId] =\n            useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n        const isInitialRenderRef = useRef(true);\n\n        useEffect(() => {\n            setSelectedRadioButtonId(selectedId);\n        }, [selectedId]);\n\n        const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n            (id) => {\n                if (typeof onSelect === 'function') {\n                    onSelect(id);\n                }\n\n                setSelectedRadioButtonId(id);\n            },\n            [onSelect],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                updateSelectedRadioButtonId,\n            }),\n            [updateSelectedRadioButtonId],\n        );\n\n        useEffect(() => {\n            if (isInitialRenderRef.current) {\n                isInitialRenderRef.current = false;\n            }\n        }, [selectedRadioButtonId]);\n\n        const providerValue = useMemo<IRadioButtonGroupContext>(\n            () => ({\n                selectedRadioButtonId,\n                updateSelectedRadioButtonId,\n                canUncheckRadioButtons,\n            }),\n            [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId],\n        );\n\n        return (\n            <RadioButtonGroupContext.Provider value={providerValue}>\n                {children}\n            </RadioButtonGroupContext.Provider>\n        );\n    },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EAEVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AAUd,OAAO,MAAMC,uBAAuB,gBAAGR,KAAK,CAACS,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE;AAChC,CAAC,CAAC;AAEFL,uBAAuB,CAACM,WAAW,GAAG,yBAAyB;AA0B/D,MAAMC,gBAAgB,gBAAGd,UAAU,CAC/B,CAAAe,IAAA,EAA6DC,GAAG,KAAK;EAAA,IAApE;IAAEC,QAAQ;IAAEC,sBAAsB;IAAEC,UAAU;IAAEC;EAAS,CAAC,GAAAL,IAAA;EACvD,MAAM,CAACN,qBAAqB,EAAEY,wBAAwB,CAAC,GACnDf,QAAQ,CAAoDI,SAAS,CAAC;EAE1E,MAAMY,kBAAkB,GAAGjB,MAAM,CAAC,IAAI,CAAC;EAEvCH,SAAS,CAAC,MAAM;IACZmB,wBAAwB,CAACF,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMR,2BAA2B,GAAGV,WAAW,CAC1CsB,EAAE,IAAK;IACJ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACG,EAAE,CAAC;IAChB;IAEAF,wBAAwB,CAACE,EAAE,CAAC;EAChC,CAAC,EACD,CAACH,QAAQ,CACb,CAAC;EAEDjB,mBAAmB,CACfa,GAAG,EACH,OAAO;IACHL;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAEDT,SAAS,CAAC,MAAM;IACZ,IAAIoB,kBAAkB,CAACE,OAAO,EAAE;MAC5BF,kBAAkB,CAACE,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAACf,qBAAqB,CAAC,CAAC;EAE3B,MAAMgB,aAAa,GAAGrB,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,2BAA2B;IAC3BO;EACJ,CAAC,CAAC,EACF,CAACA,sBAAsB,EAAET,qBAAqB,EAAEE,2BAA2B,CAC/E,CAAC;EAED,oBACIZ,KAAA,CAAA2B,aAAA,CAACnB,uBAAuB,CAACoB,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDR,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}

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

@@ -0,0 +1,19 @@
+import { getDevice } from 'chayns-api';
+import React, { useMemo } from 'react';
+import { StyledScrollView } from './ScrollView.styles';
+const ScrollView = _ref => {
+  let {
+    maxHeight = '300px',
+    children
+  } = _ref;
+  const {
+    browser
+  } = getDevice();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledScrollView, {
+    $browser: browser?.name,
+    $maxHeight: maxHeight
+  }, children), [browser?.name, children, maxHeight]);
+};
+ScrollView.displayName = 'ScrollView';
+export default ScrollView;
+//# sourceMappingURL=ScrollView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.js","names":["getDevice","React","useMemo","StyledScrollView","ScrollView","_ref","maxHeight","children","browser","createElement","$browser","name","$maxHeight","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, FC, 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'];\n};\n\nconst ScrollView: FC<ScrollViewProps> = ({ maxHeight = '300px', children }) => {\n    const { browser } = getDevice();\n\n    return useMemo(\n        () => (\n            <StyledScrollView $browser={browser?.name} $maxHeight={maxHeight}>\n                {children}\n            </StyledScrollView>\n        ),\n        [browser?.name, children, maxHeight],\n    );\n};\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAkCC,OAAO,QAAQ,OAAO;AACpE,SAASC,gBAAgB,QAAQ,qBAAqB;AAatD,MAAMC,UAA+B,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,SAAS,GAAG,OAAO;IAAEC;EAAS,CAAC,GAAAF,IAAA;EACtE,MAAM;IAAEG;EAAQ,CAAC,GAAGR,SAAS,CAAC,CAAC;EAE/B,OAAOE,OAAO,CACV,mBACID,KAAA,CAAAQ,aAAA,CAACN,gBAAgB;IAACO,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IAACC,UAAU,EAAEN;EAAU,GAC5DC,QACa,CACrB,EACD,CAACC,OAAO,EAAEG,IAAI,EAAEJ,QAAQ,EAAED,SAAS,CACvC,CAAC;AACL,CAAC;AAEDF,UAAU,CAACS,WAAW,GAAG,YAAY;AAErC,eAAeT,UAAU","ignoreList":[]}

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

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components';
+export const StyledScrollView = styled.div`
+    max-height: ${_ref => {
+  let {
+    $maxHeight
+  } = _ref;
+  return $maxHeight;
+}};
+    overflow-y: scroll;
+
+    // Styles for custom scrollbar
+    ${_ref2 => {
+  let {
+    $browser,
+    theme
+  } = _ref2;
+  return $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;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=ScrollView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport 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'];\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: scroll;\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                  }\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"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAKC,UAAU;AAAA;AAChD;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBN,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;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}