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

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

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 export const StyledRadioButton = styled.span`
     display: flex;
@@ -6,17 +6,13 @@ export const StyledRadioButton = styled.span`
 
     position: relative;
 
-    opacity: ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return $isDisabled ? 0.5 : 1;
-}};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
 
-    ${_ref2 => {
-  let {
-    $radioButtonRightElementMargin
-  } = _ref2;
+    ${({
+  $radioButtonRightElementMargin
+}) => {
   switch ($radioButtonRightElementMargin) {
     case 'BOTH':
       return css`
@@ -49,41 +45,27 @@ export const StyledRadioButtonCheckBox = styled.input`
     opacity: 0;
     height: 15px;
     width: 15px;
-    cursor: ${_ref3 => {
-  let {
-    $isDisabled
-  } = _ref3;
-  return $isDisabled ? 'default !important' : 'pointer !important';
-}};
+    cursor: ${({
+  $isDisabled
+}) => $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'];
-}};
+    background-color: ${({
+  theme,
+  $isChecked
+}) => $isChecked ? theme['secondary-408'] : theme['secondary-403']};
     opacity: 1;
     border: 1px solid
-        rgba(${_ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme['409-rgb'];
-}}, 0.5);
+        rgba(${({
+  theme
+}) => 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';
-}};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default !important' : 'pointer !important'};
 `;
 export const StyledRadioButtonCheckBoxMark = styled.span`
     background-color: transparent;
@@ -99,18 +81,14 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
     border-top: transparent;
     border-left: transparent;
     z-index: 2;
-    cursor: ${_ref7 => {
-  let {
-    $isDisabled
-  } = _ref7;
-  return $isDisabled ? 'default !important' : 'pointer !important';
-}};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default !important' : 'pointer !important'};
 
-    ${_ref8 => {
-  let {
-    $isHovered,
-    $isSelected
-  } = _ref8;
+    ${({
+  $isHovered,
+  $isSelected
+}) => {
   if ($isSelected) {
     return css`
                 opacity: 1;
@@ -127,19 +105,13 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
 }}
 `;
 export const StyledRadioButtonLabel = styled.p`
-    color: ${_ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
     margin: 0;
-    cursor: ${_ref10 => {
-  let {
-    $isDisabled
-  } = _ref10;
-  return $isDisabled ? 'default !important' : 'pointer !important';
-}};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default !important' : 'pointer !important'};
 `;
 export const StyledLabelWrapper = styled.div`
     display: flex;
@@ -149,14 +121,11 @@ export const StyledLabelWrapper = styled.div`
     gap: 12px;
 `;
 export const StyledMotionRadioButtonChildren = styled(motion.div)`
-    margin-left: 18px;
+    margin-left: 20px;
     cursor: text;
     overflow: hidden;
-    color: ${_ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
 `;
 //# sourceMappingURL=RadioButton.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","_ref2","$radioButtonRightElementMargin","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","_ref3","StyledRadioButtonPseudoCheckBox","_ref4","theme","$isChecked","_ref5","_ref6","StyledRadioButtonCheckBoxMark","_ref7","_ref8","$isHovered","$isSelected","StyledRadioButtonLabel","p","_ref9","text","_ref10","StyledLabelWrapper","StyledMotionRadioButtonChildren","_ref11"],"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';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\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    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\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<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\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":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","p","text","StyledLabelWrapper","StyledMotionRadioButtonChildren"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\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    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\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    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<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 20px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAoC,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AACnF;AACA,MAAM,CAAC;EAAEC;AAAuD,CAAC,KAAK;EAC9D,QAAQA,8BAA8B;IAClC,KAAK,MAAM;MACP,OAAOJ,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,KAAK;MACN,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,QAAQ;MACT,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,MAAM;IACX;MACI,OAAOA,GAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAED,OAAO,MAAMK,wBAAwB,GAAGN,MAAM,CAACO,GAAG;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGR,MAAM,CAACS,KAAqC;AACrF;AACA;AACA;AACA,cAAc,CAAC;EAAEL;AAA4C,CAAC,KACtDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAOD,OAAO,MAAMM,+BAA+B,GAAGV,MAAM,CAACO,GAAyC;AAC/F,wBAAwB,CAAC;EAAEI,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AACpE;AACA;AACA,eAAe,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACpF;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEP;AAAkD,CAAC,KAC5DA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAQD,OAAO,MAAMS,6BAA6B,GAAGb,MAAM,CAACG,IAAwC;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAgD,CAAC,KAC1DA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE;AACA,MAAM,CAAC;EAAEU,UAAU;EAAEC;AAAY,CAAC,KAAK;EAC/B,IAAIA,WAAW,EAAE;IACb,OAAOd,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIa,UAAU,EAAE;IACZ,OAAOb,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,MAAMe,sBAAsB,GAAGhB,MAAM,CAACiB,CAA8B;AAC3E,aAAa,CAAC;EAAEN;AAAmC,CAAC,KAAKA,KAAK,CAACO,IAAI;AACnE;AACA,cAAc,CAAC;EAAEd;AAAyC,CAAC,KACnDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAED,OAAO,MAAMe,kBAAkB,GAAGnB,MAAM,CAACO,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMa,+BAA+B,GAAGpB,MAAM,CACjDD,MAAM,CAACQ,GACX,CAAuC;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAA4C,CAAC,KAAKA,KAAK,CAACO,IAAI;AAC5E,CAAC","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { getRadioButtonOrder } from '../../../utils/radioButton';
 export const RadioButtonGroupContext = /*#__PURE__*/React.createContext({
   selectedRadioButtonId: undefined,
@@ -8,16 +8,15 @@ export const RadioButtonGroupContext = /*#__PURE__*/React.createContext({
   updateHasRightElement: undefined
 });
 RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
-const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    canUncheckRadioButtons,
-    selectedId,
-    onSelect
-  } = _ref;
+const RadioButtonGroup = /*#__PURE__*/forwardRef(({
+  children,
+  canUncheckRadioButtons,
+  selectedId,
+  onSelect
+}, ref) => {
   const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
   const [radioButtonRightElements, setRadioButtonRightElements] = useState([]);
-  const isInitialRenderRef = useRef(true);
+  const isControlled = typeof selectedId === 'string';
   useEffect(() => {
     setSelectedRadioButtonId(selectedId);
   }, [selectedId]);
@@ -25,8 +24,10 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (typeof onSelect === 'function') {
       onSelect(id);
     }
-    setSelectedRadioButtonId(id);
-  }, [onSelect]);
+    if (!isControlled) {
+      setSelectedRadioButtonId(id);
+    }
+  }, [isControlled, onSelect]);
   const updateHasRightElement = useCallback((id, hasRightElement) => {
     setRadioButtonRightElements(prevState => prevState.map(prev => id === prev.id ? {
       id,
@@ -44,11 +45,6 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   useImperativeHandle(ref, () => ({
     updateSelectedRadioButtonId
   }), [updateSelectedRadioButtonId]);
-  useEffect(() => {
-    if (isInitialRenderRef.current) {
-      isInitialRenderRef.current = false;
-    }
-  }, [selectedRadioButtonId]);
   const providerValue = useMemo(() => ({
     selectedRadioButtonId,
     updateSelectedRadioButtonId,

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","getRadioButtonOrder","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","displayName","RadioButtonGroup","_ref","ref","children","canUncheckRadioButtons","selectedId","onSelect","setSelectedRadioButtonId","setRadioButtonRightElements","isInitialRenderRef","id","hasRightElement","prevState","map","prev","ids","rightElements","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';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ntype IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n    selectedRadioButtonId: string | undefined;\n    updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n    radioButtonRightElements: IRadioButtonRightElements;\n    updateHasRightElement?: IUpdateHasRightElement;\n    radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n    selectedRadioButtonId: undefined,\n    updateSelectedRadioButtonId: undefined,\n    radioButtonsCanBeUnchecked: false,\n    radioButtonRightElements: [],\n    updateHasRightElement: undefined,\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        const [radioButtonRightElements, setRadioButtonRightElements] =\n            useState<IRadioButtonRightElements>([]);\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        const updateHasRightElement = useCallback<IUpdateHasRightElement>((id, hasRightElement) => {\n            setRadioButtonRightElements((prevState) =>\n                prevState.map((prev) => (id === prev.id ? { id, hasRightElement } : prev)),\n            );\n        }, []);\n\n        useEffect(() => {\n            const ids = getRadioButtonOrder(children);\n\n            const rightElements = ids.map((id) => ({ id, hasRightElement: false }));\n\n            setRadioButtonRightElements(rightElements);\n        }, [children]);\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                radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n                updateHasRightElement,\n                radioButtonRightElements,\n            }),\n            [\n                canUncheckRadioButtons,\n                radioButtonRightElements,\n                selectedRadioButtonId,\n                updateHasRightElement,\n                updateSelectedRadioButtonId,\n            ],\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":"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","ignoreList":[]}
+{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","getRadioButtonOrder","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","displayName","RadioButtonGroup","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","setRadioButtonRightElements","isControlled","id","hasRightElement","prevState","map","prev","ids","rightElements","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    useState,\n} from 'react';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ntype IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n    selectedRadioButtonId: string | undefined;\n    updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n    radioButtonRightElements: IRadioButtonRightElements;\n    updateHasRightElement?: IUpdateHasRightElement;\n    radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n    selectedRadioButtonId: undefined,\n    updateSelectedRadioButtonId: undefined,\n    radioButtonsCanBeUnchecked: false,\n    radioButtonRightElements: [],\n    updateHasRightElement: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport interface 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        const [radioButtonRightElements, setRadioButtonRightElements] =\n            useState<IRadioButtonRightElements>([]);\n\n        const isControlled = typeof selectedId === 'string';\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                if (!isControlled) {\n                    setSelectedRadioButtonId(id);\n                }\n            },\n            [isControlled, onSelect],\n        );\n\n        const updateHasRightElement = useCallback<IUpdateHasRightElement>((id, hasRightElement) => {\n            setRadioButtonRightElements((prevState) =>\n                prevState.map((prev) => (id === prev.id ? { id, hasRightElement } : prev)),\n            );\n        }, []);\n\n        useEffect(() => {\n            const ids = getRadioButtonOrder(children);\n\n            const rightElements = ids.map((id) => ({ id, hasRightElement: false }));\n\n            setRadioButtonRightElements(rightElements);\n        }, [children]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                updateSelectedRadioButtonId,\n            }),\n            [updateSelectedRadioButtonId],\n        );\n\n        const providerValue = useMemo<IRadioButtonGroupContext>(\n            () => ({\n                selectedRadioButtonId,\n                updateSelectedRadioButtonId,\n                radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n                updateHasRightElement,\n                radioButtonRightElements,\n            }),\n            [\n                canUncheckRadioButtons,\n                radioButtonRightElements,\n                selectedRadioButtonId,\n                updateHasRightElement,\n                updateSelectedRadioButtonId,\n            ],\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,QAAQ,QACL,OAAO;AACd,SAASC,mBAAmB,QAAQ,4BAA4B;AAgBhE,OAAO,MAAMC,uBAAuB,gBAAGR,KAAK,CAACS,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE,KAAK;EACjCC,wBAAwB,EAAE,EAAE;EAC5BC,qBAAqB,EAAEJ;AAC3B,CAAC,CAAC;AAEFH,uBAAuB,CAACQ,WAAW,GAAG,yBAAyB;AA0B/D,MAAMC,gBAAgB,gBAAGhB,UAAU,CAC/B,CAAC;EAAEiB,QAAQ;EAAEC,sBAAsB;EAAEC,UAAU;EAAEC;AAAS,CAAC,EAAEC,GAAG,KAAK;EACjE,MAAM,CAACZ,qBAAqB,EAAEa,wBAAwB,CAAC,GACnDjB,QAAQ,CAAoDK,SAAS,CAAC;EAC1E,MAAM,CAACG,wBAAwB,EAAEU,2BAA2B,CAAC,GACzDlB,QAAQ,CAA4B,EAAE,CAAC;EAE3C,MAAMmB,YAAY,GAAG,OAAOL,UAAU,KAAK,QAAQ;EAEnDjB,SAAS,CAAC,MAAM;IACZoB,wBAAwB,CAACH,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMR,2BAA2B,GAAGV,WAAW,CAC1CwB,EAAE,IAAK;IACJ,IAAI,OAAOL,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACK,EAAE,CAAC;IAChB;IAEA,IAAI,CAACD,YAAY,EAAE;MACfF,wBAAwB,CAACG,EAAE,CAAC;IAChC;EACJ,CAAC,EACD,CAACD,YAAY,EAAEJ,QAAQ,CAC3B,CAAC;EAED,MAAMN,qBAAqB,GAAGb,WAAW,CAAyB,CAACwB,EAAE,EAAEC,eAAe,KAAK;IACvFH,2BAA2B,CAAEI,SAAS,IAClCA,SAAS,CAACC,GAAG,CAAEC,IAAI,IAAMJ,EAAE,KAAKI,IAAI,CAACJ,EAAE,GAAG;MAAEA,EAAE;MAAEC;IAAgB,CAAC,GAAGG,IAAK,CAC7E,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN3B,SAAS,CAAC,MAAM;IACZ,MAAM4B,GAAG,GAAGxB,mBAAmB,CAACW,QAAQ,CAAC;IAEzC,MAAMc,aAAa,GAAGD,GAAG,CAACF,GAAG,CAAEH,EAAE,KAAM;MAAEA,EAAE;MAAEC,eAAe,EAAE;IAAM,CAAC,CAAC,CAAC;IAEvEH,2BAA2B,CAACQ,aAAa,CAAC;EAC9C,CAAC,EAAE,CAACd,QAAQ,CAAC,CAAC;EAEdd,mBAAmB,CACfkB,GAAG,EACH,OAAO;IACHV;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAED,MAAMqB,aAAa,GAAG5B,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,2BAA2B;IAC3BC,0BAA0B,EAAEM,sBAAsB;IAClDJ,qBAAqB;IACrBD;EACJ,CAAC,CAAC,EACF,CACIK,sBAAsB,EACtBL,wBAAwB,EACxBJ,qBAAqB,EACrBK,qBAAqB,EACrBH,2BAA2B,CAEnC,CAAC;EAED,oBACIZ,KAAA,CAAAkC,aAAA,CAAC1B,uBAAuB,CAAC2B,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDf,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDD,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}

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

@@ -1,16 +1,15 @@
 import { getDevice } from 'chayns-api';
 import React, { forwardRef, useMemo } from 'react';
 import { StyledScrollView } from './ScrollView.styles';
-const ScrollView = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    maxHeight = 300,
-    height,
-    maxWidth,
-    width,
-    children,
-    overflowX = 'auto',
-    overflowY = 'auto'
-  } = _ref;
+const ScrollView = /*#__PURE__*/forwardRef(({
+  maxHeight = 300,
+  height,
+  maxWidth,
+  width,
+  children,
+  overflowX = 'auto',
+  overflowY = 'auto'
+}, ref) => {
   const {
     browser
   } = getDevice();

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["getDevice","React","forwardRef","useMemo","StyledScrollView","ScrollView","_ref","ref","maxHeight","height","maxWidth","width","children","overflowX","overflowY","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,CAAAI,IAAA,EAUIC,GAAG,KACF;EAAA,IAVD;IACIC,SAAS,GAAG,GAAG;IACfC,MAAM;IACNC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,SAAS,GAAG,MAAM;IAClBC,SAAS,GAAG;EAChB,CAAC,GAAAR,IAAA;EAGD,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,CAAC;EAE/B,OAAOG,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,gBAAgB;IACba,QAAQ,EAAEF,OAAO,EAAEG,IAAoB;IACvCC,UAAU,EAAEX,SAAU;IACtBY,OAAO,EAAEX,MAAO;IAChBY,SAAS,EAAEX,QAAS;IACpBY,MAAM,EAAEX,KAAM;IACdY,UAAU,EAAEV,SAAU;IACtBW,UAAU,EAAEV,SAAU;IACtBP,GAAG,EAAEA;EAAI,GAERK,QACa,CACrB,EACD,CACIG,OAAO,EAAEG,IAAI,EACbN,QAAQ,EACRH,MAAM,EACND,SAAS,EACTE,QAAQ,EACRG,SAAS,EACTC,SAAS,EACTP,GAAG,EACHI,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDN,UAAU,CAACoB,WAAW,GAAG,YAAY;AAErC,eAAepB,UAAU","ignoreList":[]}
+{"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":[]}

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

@@ -1,61 +1,41 @@
 import styled, { css } from 'styled-components';
 export const StyledScrollView = styled.div`
-    ${_ref => {
-  let {
-    $maxHeight
-  } = _ref;
-  return $maxHeight && css`
+    ${({
+  $maxHeight
+}) => $maxHeight && css`
             max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
-        `;
-}}
-    ${_ref2 => {
-  let {
-    $height
-  } = _ref2;
-  return $height && css`
+        `}
+    ${({
+  $height
+}) => $height && css`
             height: ${typeof $height === 'number' ? `${$height}px` : $height};
-        `;
-}} 
-    ${_ref3 => {
-  let {
-    $maxWidth
-  } = _ref3;
-  return $maxWidth && css`
+        `} 
+    ${({
+  $maxWidth
+}) => $maxWidth && css`
             max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
-        `;
-}} 
-    ${_ref4 => {
-  let {
-    $width
-  } = _ref4;
-  return $width && css`
+        `} 
+    ${({
+  $width
+}) => $width && css`
             width: ${typeof $width === 'number' ? `${$width}px` : $width};
-        `;
-}} 
-    ${_ref5 => {
-  let {
-    $overflowX
-  } = _ref5;
-  return css`
+        `} 
+    ${({
+  $overflowX
+}) => css`
         overflow-x: ${$overflowX};
-    `;
-}}
-    ${_ref6 => {
-  let {
-    $overflowY
-  } = _ref6;
-  return css`
+    `}
+    ${({
+  $overflowY
+}) => css`
         overflow-y: ${$overflowY};
-    `;
-}}
+    `}
 
     // Styles for custom scrollbar
-    ${_ref7 => {
-  let {
-    $browser,
-    theme
-  } = _ref7;
-  return $browser === 'firefox' ? css`
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;
               ` : css`
@@ -84,7 +64,6 @@ export const StyledScrollView = styled.div`
                   &::-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","_ref","$maxHeight","_ref2","$height","_ref3","$maxWidth","_ref4","$width","_ref5","$overflowX","_ref6","$overflowY","_ref7","$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,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACbC,UAAU,IACVJ,GAAG;AACX,0BAA0B,OAAOI,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACVC,OAAO,IACPN,GAAG;AACX,sBAAsB,OAAOM,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZC,SAAS,IACTR,GAAG;AACX,yBAAyB,OAAOQ,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OACTC,MAAM,IACNV,GAAG;AACX,qBAAqB,OAAOU,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKX,GAAG;AAC7B,sBAAsBY,UAAU;AAChC,KAAK;AAAA;AACL,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKb,GAAG;AAC7B,sBAAsBc,UAAU;AAChC,KAAK;AAAA;AACL;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CiB,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDjB,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CiB,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
+{"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":[]}