@chayns-components/core 5.0.0-beta.1187 → 5.0.0-beta.1189

package/lib/cjs/components/checkbox/Checkbox.js

@@ -20,6 +20,9 @@ const Checkbox = ({
   shouldChangeOnLabelClick = true
 }) => {
   const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
+  const [checkboxTop, setCheckboxTop] = (0, _react.useState)(undefined);
+  const checkboxBoxRef = (0, _react.useRef)(null);
+  const checkboxRootRef = (0, _react.useRef)(null);
   const handleChange = (0, _react.useCallback)(event => {
     setIsActive(event.target.checked);
     if (typeof onChange === 'function') {
@@ -27,23 +30,40 @@ const Checkbox = ({
     }
   }, [onChange]);
   const uuid = (0, _uuid.useUuid)();
-  const lineHeight = (0, _react.useMemo)(() => !children || shouldShowCentered ? undefined : (0, _calculate.getHeightOfSingleTextLine)(), [children, shouldShowCentered]);
-  return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
+  (0, _react.useEffect)(() => {
+    if (checkboxRootRef.current && !shouldShowCentered) {
+      var _checkboxBoxRef$curre;
+      const singleLineHeight = (0, _calculate.getHeightOfSingleTextLine)({
+        container: checkboxRootRef.current
+      });
+      const boxHeight = ((_checkboxBoxRef$curre = checkboxBoxRef.current) === null || _checkboxBoxRef$curre === void 0 ? void 0 : _checkboxBoxRef$curre.getBoundingClientRect().height) ?? 0;
+      setCheckboxTop((singleLineHeight - boxHeight) / 2);
+    }
+  }, [shouldShowCentered]);
+  return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, {
+    ref: checkboxRootRef
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
     checked: isChecked,
     disabled: isDisabled,
     id: uuid,
     onChange: handleChange,
     type: "checkbox"
-  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxBox, {
+  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxBoxWrapper, {
+    style: {
+      top: shouldShowCentered ? '50%' : checkboxTop,
+      transform: shouldShowCentered ? 'translateY(-50%)' : undefined
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxBox, {
     htmlFor: uuid,
+    ref: checkboxBoxRef,
     $isChecked: isChecked ?? isActive,
     $isDisabled: isDisabled,
-    $shouldShowAsSwitch: shouldShowAsSwitch,
-    $lineHeight: lineHeight
-  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+    $shouldShowAsSwitch: shouldShowAsSwitch
+  })), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
     className: labelClassName,
     $isDisabled: isDisabled,
     $shouldChangeOnLabelClick: shouldChangeOnLabelClick,
+    $shouldShowAsSwitch: shouldShowAsSwitch,
     htmlFor: shouldChangeOnLabelClick ? uuid : undefined
   }, children));
 };

package/lib/cjs/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","createElement","StyledCheckbox","ref","StyledCheckboxInput","disabled","id","type","StyledCheckboxBoxWrapper","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBoxWrapper\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/checkbox/Checkbox.styles.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
+exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBoxWrapper = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _checkBox = require("../../utils/checkBox");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
     align-items: center;
@@ -17,6 +16,12 @@ const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
 const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
     display: none;
 `;
+const StyledCheckboxBoxWrapper = exports.StyledCheckboxBoxWrapper = _styledComponents.default.div`
+    display: flex;
+    flex-shrink: 0;
+    height: 16px;
+    position: absolute;
+`;
 const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.label`
     color: ${({
   theme
@@ -27,9 +32,7 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
     opacity: ${({
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
-    padding-left: ${({
-  $shouldShowAsSwitch
-}) => $shouldShowAsSwitch ? '48px' : '20px'};
+    position: relative;
     transition: opacity 0.2s ease;
     user-select: none;
     height: 16px;
@@ -37,16 +40,14 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
     &:after {
         ${({
   $isChecked,
-  $shouldShowAsSwitch,
-  $lineHeight,
-  theme
+  $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? (0, _styledComponents.css)`
                       background-color: white;
                       border-radius: 50%;
                       box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                       height: 16px;
                       left: 7px;
-                      top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
+                      top: 50%;
                       transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                       transition: transform 0.2s ease;
                       width: 16px;
@@ -56,10 +57,10 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
                       height: 10px;
                       left: 2px;
                       opacity: ${$isChecked ? 1 : 0};
-                      top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
+                      top: calc(50% - 2px);
                       transform: rotateZ(37deg) translateY(-50%);
                       transition: opacity 0.2s ease;
-                      width: 5.5px;
+                      width: 5px;
                   `}
 
         content: ' ';
@@ -96,20 +97,12 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
   $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? '10px' : 0};
         position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
         transition: background-color 0.2s ease;
         width: ${({
   $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? '28px' : '15px'};
-        ${({
-  $lineHeight,
-  theme,
-  $shouldShowAsSwitch
-}) => $lineHeight ? (0, _styledComponents.css)`
-                      top: ${(0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
-                  ` : (0, _styledComponents.css)`
-                      top: 50%;
-                      transform: translateY(-50%);
-                  `}
     }
 }
 `;
@@ -123,6 +116,9 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
     opacity: ${({
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
+    padding-left: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '48px' : '20px'};
     transition: opacity 0.2s ease;
     user-select: none;
 `;

package/lib/cjs/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBox","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$shouldShowAsSwitch","css","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/utils/calculate.js

@@ -88,12 +88,19 @@ const calculateContentHeight = elements => {
   return heights.reduce((partialSum, a) => partialSum + a, 0);
 };
 exports.calculateContentHeight = calculateContentHeight;
-const getHeightOfSingleTextLine = () => {
-  const span = document.createElement('span');
-  span.innerText = 'A';
-  document.body.appendChild(span);
-  const height = span.offsetHeight;
-  document.body.removeChild(span);
+const getHeightOfSingleTextLine = ({
+  container
+}) => {
+  const div = document.createElement('div');
+  div.style.visibility = 'hidden';
+  div.style.position = 'absolute';
+  div.style.whiteSpace = 'nowrap';
+  div.innerText = 'Single text line';
+  container.appendChild(div);
+  const {
+    height
+  } = div.getBoundingClientRect();
+  container.removeChild(div);
   return height;
 };
 exports.getHeightOfSingleTextLine = getHeightOfSingleTextLine;

package/lib/cjs/utils/calculate.js.map

@@ -1 +1 @@
-{"version":3,"file":"calculate.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_server","_ColorSchemeProvider","e","__esModule","default","calculateContentWidth","list","functions","values","length","forEach","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","renderToString","ChaynsProvider","data","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","exports","calculateBiggestWidth","elements","container","padding","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","span","height","getMaxHeightInPixels","maxHeight","rootElement","tempElement","getBoundingClientRect"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider, ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (\n    list: IComboBoxItem[],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                <ChaynsProvider data={values} functions={functions} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\nexport const getHeightOfSingleTextLine = () => {\n    const span = document.createElement('span');\n\n    span.innerText = 'A';\n\n    document.body.appendChild(span);\n\n    const height = span.offsetHeight;\n\n    document.body.removeChild(span);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: Element,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA0F,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAInF,MAAMG,qBAAqB,GAAGA,CACjCC,IAAqB,EACrBC,SAA+B,EAC/BC,MAAyB,KACxB;EACD,MAAMC,MAAgB,GAAG,EAAE;EAE3BH,IAAI,CAACI,OAAO,CAAC,CAAC;IAAEC,aAAa;IAAEC,IAAI;IAAEC;EAAW,CAAC,KAAK;IAClD,MAAMC,OAAO,GAAG,CAAAD,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEC,OAAO,KAAI,KAAK;IAC5C,MAAMC,MAAM,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,MAAM;IAEjC,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAACJ,OAAO,CAAC;IAE3C,IAAIC,MAAM,EAAE;MACRI,MAAM,CAACC,MAAM,CAACJ,GAAG,CAACK,KAAK,EAAEN,MAAM,CAAC;IACpC;IAEAC,GAAG,CAACK,KAAK,CAACC,OAAO,GAAG,MAAM;IAC1BN,GAAG,CAACK,KAAK,CAACE,GAAG,GAAG,MAAM;IACtBP,GAAG,CAACK,KAAK,CAACG,QAAQ,GAAG,UAAU;IAC/BR,GAAG,CAACK,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BT,GAAG,CAACK,KAAK,CAACK,UAAU,GAAG,QAAQ;IAC/BV,GAAG,CAACK,KAAK,CAACM,KAAK,GAAG,MAAM;IAExBV,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,GAAG,CAAC;IAE9BA,GAAG,CAACc,SAAS,GAAGlB,IAAI;IAEpB,IAAID,aAAa,EAAE;MACf;MACA;MACAK,GAAG,CAACe,SAAS,IAAI,IAAAC,sBAAc,eAC3BlC,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACtB,UAAA,CAAAqC,cAAc;QAACC,IAAI,EAAE1B,MAAO;QAACD,SAAS,EAAEA,SAAU;QAAC4B,QAAQ;MAAA,gBACxDrC,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACjB,oBAAA,CAAAG,OAAmB;QAACgC,KAAK,EAAC,SAAS;QAACC,SAAS,EAAE;MAAE,GAC7C1B,aACgB,CACT,CACpB,CAAC;IACL;IAEAF,MAAM,CAAC6B,IAAI,CAACtB,GAAG,CAACuB,WAAW,CAAC;IAE5BtB,QAAQ,CAACW,IAAI,CAACY,WAAW,CAACxB,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOyB,IAAI,CAACC,GAAG,CAACC,KAAK,CAAC,IAAI,EAAElC,MAAM,CAAC;AACvC,CAAC;AAACmC,OAAA,CAAAvC,qBAAA,GAAAA,qBAAA;AAEK,MAAMwC,qBAAqB,GAAIC,QAA4B,IAAK;EACnE,MAAMC,SAAS,GAAG9B,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE/C6B,SAAS,CAAC1B,KAAK,CAACI,UAAU,GAAG,QAAQ;EACrCsB,SAAS,CAAC1B,KAAK,CAACG,QAAQ,GAAG,UAAU;EACrCuB,SAAS,CAAC1B,KAAK,CAACM,KAAK,GAAG,MAAM;EAC9BoB,SAAS,CAAC1B,KAAK,CAACK,UAAU,GAAG,QAAQ;EACrCqB,SAAS,CAAC1B,KAAK,CAAC2B,OAAO,GAAG,UAAU;EACpCD,SAAS,CAAC1B,KAAK,CAACC,OAAO,GAAG,OAAO;EAEjCwB,QAAQ,CAACpC,OAAO,CAAC,CAAC;IAAEE,IAAI;IAAEqC;EAAG,CAAC,KAAK;IAC/B,MAAMC,OAAO,GAAGjC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAE7CgC,OAAO,CAACC,SAAS,GAAG,yBAAyBF,EAAE,EAAE;IACjDC,OAAO,CAACpB,SAAS,GAAGlB,IAAI;IAExBmC,SAAS,CAAClB,WAAW,CAACqB,OAAO,CAAC;EAClC,CAAC,CAAC;EAEFjC,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACkB,SAAS,CAAC;EAEpC,MAAMpB,KAAK,GAAGoB,SAAS,CAACR,WAAW;EAEnCtB,QAAQ,CAACW,IAAI,CAACY,WAAW,CAACO,SAAS,CAAC;EAEpC,OAAOpB,KAAK;AAChB,CAAC;AAACiB,OAAA,CAAAC,qBAAA,GAAAA,qBAAA;AAEK,MAAMO,sBAAsB,GAAIN,QAAkB,IAAK;EAC1D,MAAMO,OAAiB,GAAG,EAAE;EAE5BP,QAAQ,CAACpC,OAAO,CAAEwC,OAAe,IAAK;IAClC,MAAMlC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAEzCF,GAAG,CAACK,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BT,GAAG,CAACK,KAAK,CAACG,QAAQ,GAAG,UAAU;IAC/BR,GAAG,CAACK,KAAK,CAACM,KAAK,GAAG,MAAM;IACxBX,GAAG,CAACK,KAAK,CAAC2B,OAAO,GAAG,UAAU;IAC9BhC,GAAG,CAACK,KAAK,CAACK,UAAU,GAAG,QAAQ;IAE/BT,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,GAAG,CAAC;IAE9BA,GAAG,CAACc,SAAS,GAAGoB,OAAO;IAEvBG,OAAO,CAACf,IAAI,CAACtB,GAAG,CAACsC,YAAY,CAAC;IAE9BrC,QAAQ,CAACW,IAAI,CAACY,WAAW,CAACxB,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOqC,OAAO,CAACE,MAAM,CAAC,CAACC,UAAU,EAAEC,CAAC,KAAKD,UAAU,GAAGC,CAAC,EAAE,CAAC,CAAC;AAC/D,CAAC;AAACb,OAAA,CAAAQ,sBAAA,GAAAA,sBAAA;AAEK,MAAMM,yBAAyB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,IAAI,GAAG1C,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;EAE3CyC,IAAI,CAAC7B,SAAS,GAAG,GAAG;EAEpBb,QAAQ,CAACW,IAAI,CAACC,WAAW,CAAC8B,IAAI,CAAC;EAE/B,MAAMC,MAAM,GAAGD,IAAI,CAACL,YAAY;EAEhCrC,QAAQ,CAACW,IAAI,CAACY,WAAW,CAACmB,IAAI,CAAC;EAE/B,OAAOC,MAAM;AACjB,CAAC;AAAChB,OAAA,CAAAc,yBAAA,GAAAA,yBAAA;AAEK,MAAMG,oBAAoB,GAAGA,CAChCC,SAAqC,EACrCC,WAAoB,KACX;EACT,MAAMC,WAAW,GAAG/C,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEjD8C,WAAW,CAAC3C,KAAK,CAACG,QAAQ,GAAG,UAAU;EACvCwC,WAAW,CAAC3C,KAAK,CAACI,UAAU,GAAG,QAAQ;EACvCuC,WAAW,CAAC3C,KAAK,CAACuC,MAAM,GAAG,OAAO;EAClCI,WAAW,CAAC3C,KAAK,CAACyC,SAAS,GAAGA,SAAmB;EAEjDC,WAAW,CAAClC,WAAW,CAACmC,WAAW,CAAC;EAEpC,MAAM;IAAEJ;EAAO,CAAC,GAAGI,WAAW,CAACC,qBAAqB,CAAC,CAAC;EAEtDF,WAAW,CAACvB,WAAW,CAACwB,WAAW,CAAC;EAEpC,OAAOJ,MAAM;AACjB,CAAC;AAAChB,OAAA,CAAAiB,oBAAA,GAAAA,oBAAA","ignoreList":[]}
+{"version":3,"file":"calculate.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_server","_ColorSchemeProvider","e","__esModule","default","calculateContentWidth","list","functions","values","length","forEach","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","renderToString","ChaynsProvider","data","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","exports","calculateBiggestWidth","elements","container","padding","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","height","getBoundingClientRect","getMaxHeightInPixels","maxHeight","rootElement","tempElement"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider, ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (\n    list: IComboBoxItem[],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                <ChaynsProvider data={values} functions={functions} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\ninterface GetHeightOfSingleTextLineOptions {\n    container: Element;\n}\n\nexport const getHeightOfSingleTextLine = ({ container }: GetHeightOfSingleTextLineOptions) => {\n    const div = document.createElement('div');\n\n    div.style.visibility = 'hidden';\n    div.style.position = 'absolute';\n    div.style.whiteSpace = 'nowrap';\n\n    div.innerText = 'Single text line';\n\n    container.appendChild(div);\n\n    const { height } = div.getBoundingClientRect();\n\n    container.removeChild(div);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: Element,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.js

@@ -1,7 +1,7 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useUuid } from '../../hooks/uuid';
 import { getHeightOfSingleTextLine } from '../../utils/calculate';
-import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
+import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxBoxWrapper, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
 const Checkbox = ({
   children,
   isChecked,
@@ -13,6 +13,9 @@ const Checkbox = ({
   shouldChangeOnLabelClick = true
 }) => {
   const [isActive, setIsActive] = useState(isChecked ?? false);
+  const [checkboxTop, setCheckboxTop] = useState(undefined);
+  const checkboxBoxRef = useRef(null);
+  const checkboxRootRef = useRef(null);
   const handleChange = useCallback(event => {
     setIsActive(event.target.checked);
     if (typeof onChange === 'function') {
@@ -20,23 +23,39 @@ const Checkbox = ({
     }
   }, [onChange]);
   const uuid = useUuid();
-  const lineHeight = useMemo(() => !children || shouldShowCentered ? undefined : getHeightOfSingleTextLine(), [children, shouldShowCentered]);
-  return /*#__PURE__*/React.createElement(StyledCheckbox, null, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
+  useEffect(() => {
+    if (checkboxRootRef.current && !shouldShowCentered) {
+      const singleLineHeight = getHeightOfSingleTextLine({
+        container: checkboxRootRef.current
+      });
+      const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;
+      setCheckboxTop((singleLineHeight - boxHeight) / 2);
+    }
+  }, [shouldShowCentered]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, {
+    ref: checkboxRootRef
+  }, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
     checked: isChecked,
     disabled: isDisabled,
     id: uuid,
     onChange: handleChange,
     type: "checkbox"
-  }), /*#__PURE__*/React.createElement(StyledCheckboxBox, {
+  }), /*#__PURE__*/React.createElement(StyledCheckboxBoxWrapper, {
+    style: {
+      top: shouldShowCentered ? '50%' : checkboxTop,
+      transform: shouldShowCentered ? 'translateY(-50%)' : undefined
+    }
+  }, /*#__PURE__*/React.createElement(StyledCheckboxBox, {
     htmlFor: uuid,
+    ref: checkboxBoxRef,
     $isChecked: isChecked ?? isActive,
     $isDisabled: isDisabled,
-    $shouldShowAsSwitch: shouldShowAsSwitch,
-    $lineHeight: lineHeight
-  }), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
+    $shouldShowAsSwitch: shouldShowAsSwitch
+  })), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
     className: labelClassName,
     $isDisabled: isDisabled,
     $shouldChangeOnLabelClick: shouldChangeOnLabelClick,
+    $shouldShowAsSwitch: shouldShowAsSwitch,
     htmlFor: shouldChangeOnLabelClick ? uuid : undefined
   }, children));
 };

package/lib/esm/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SACIC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;AAqC1B,MAAMC,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,kBAAkB;EAClBC,kBAAkB,GAAG,KAAK;EAC1BC,wBAAwB,GAAG;AAC/B,CAAC,KAAK;EACF,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGjB,QAAQ,CAACS,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMS,YAAY,GAAGpB,WAAW,CAC3BqB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACO,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,QAAQ,CACb,CAAC;EAED,MAAMU,IAAI,GAAGrB,OAAO,CAAC,CAAC;EAEtB,MAAMsB,UAAU,GAAGxB,OAAO,CACtB,MAAO,CAACS,QAAQ,IAAIM,kBAAkB,GAAGU,SAAS,GAAGtB,yBAAyB,CAAC,CAAE,EACjF,CAACM,QAAQ,EAAEM,kBAAkB,CACjC,CAAC;EAED,oBACIjB,KAAA,CAAA4B,aAAA,CAACtB,cAAc,qBACXN,KAAA,CAAA4B,aAAA,CAACpB,mBAAmB;IAChBgB,OAAO,EAAEZ,SAAU;IACnBiB,QAAQ,EAAEhB,UAAW;IACrBiB,EAAE,EAAEL,IAAK;IACTV,QAAQ,EAAEM,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACF/B,KAAA,CAAA4B,aAAA,CAACrB,iBAAiB;IACdyB,OAAO,EAAEP,IAAK;IACdQ,UAAU,EAAErB,SAAS,IAAIO,QAAS;IAClCe,WAAW,EAAErB,UAAW;IACxBsB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,WAAW,EAAEV;EAAW,CAC3B,CAAC,eACF1B,KAAA,CAAA4B,aAAA,CAACnB,mBAAmB;IAChB4B,SAAS,EAAEvB,cAAe;IAC1BoB,WAAW,EAAErB,UAAW;IACxByB,yBAAyB,EAAEpB,wBAAyB;IACpDc,OAAO,EAAEd,wBAAwB,GAAGO,IAAI,GAAGE;EAAU,GAEpDhB,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDD,QAAQ,CAAC6B,WAAW,GAAG,UAAU;AAEjC,eAAe7B,QAAQ","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","createElement","ref","disabled","id","type","style","top","transform","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBoxWrapper\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.styles.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { getCheckBoxPosition } from '../../utils/checkBox';
 export const StyledCheckbox = styled.div`
     align-items: center;
     display: flex;
@@ -10,6 +9,12 @@ export const StyledCheckbox = styled.div`
 export const StyledCheckboxInput = styled.input`
     display: none;
 `;
+export const StyledCheckboxBoxWrapper = styled.div`
+    display: flex;
+    flex-shrink: 0;
+    height: 16px;
+    position: absolute;
+`;
 export const StyledCheckboxBox = styled.label`
     color: ${({
   theme
@@ -20,9 +25,7 @@ export const StyledCheckboxBox = styled.label`
     opacity: ${({
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
-    padding-left: ${({
-  $shouldShowAsSwitch
-}) => $shouldShowAsSwitch ? '48px' : '20px'};
+    position: relative;
     transition: opacity 0.2s ease;
     user-select: none;
     height: 16px;
@@ -30,16 +33,14 @@ export const StyledCheckboxBox = styled.label`
     &:after {
         ${({
   $isChecked,
-  $shouldShowAsSwitch,
-  $lineHeight,
-  theme
+  $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? css`
                       background-color: white;
                       border-radius: 50%;
                       box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                       height: 16px;
                       left: 7px;
-                      top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
+                      top: 50%;
                       transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                       transition: transform 0.2s ease;
                       width: 16px;
@@ -49,10 +50,10 @@ export const StyledCheckboxBox = styled.label`
                       height: 10px;
                       left: 2px;
                       opacity: ${$isChecked ? 1 : 0};
-                      top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
+                      top: calc(50% - 2px);
                       transform: rotateZ(37deg) translateY(-50%);
                       transition: opacity 0.2s ease;
-                      width: 5.5px;
+                      width: 5px;
                   `}
 
         content: ' ';
@@ -89,20 +90,12 @@ export const StyledCheckboxBox = styled.label`
   $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? '10px' : 0};
         position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
         transition: background-color 0.2s ease;
         width: ${({
   $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? '28px' : '15px'};
-        ${({
-  $lineHeight,
-  theme,
-  $shouldShowAsSwitch
-}) => $lineHeight ? css`
-                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
-                  ` : css`
-                      top: 50%;
-                      transform: translateY(-50%);
-                  `}
     }
 }
 `;
@@ -116,6 +109,9 @@ export const StyledCheckboxLabel = styled.label`
     opacity: ${({
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
+    padding-left: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '48px' : '20px'};
     transition: opacity 0.2s ease;
     user-select: none;
 `;

package/lib/esm/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBox","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","Number","fontSize","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,sBAAsB;AAI1D,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGL,MAAM,CAACM,KAAK;AAC/C;AACA,CAAC;AASD,OAAO,MAAMC,iBAAiB,GAAGP,MAAM,CAACQ,KAA6B;AACrE,aAAa,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC9D,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,oBAAoB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACxF;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,UAAU;EAAED,mBAAmB;EAAEE,WAAW;EAAEL;AAA8B,CAAC,KAC9EG,mBAAmB,GACbX,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA,6BAA6Ba,WAAW,GACZ,GAAG,CAACZ,mBAAmB,CAACa,MAAM,CAACN,KAAK,CAACO,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAC7D,KAAK;AACjC,8CAA8CH,UAAU,GAAG,MAAM,GAAG,CAAC;AACrE;AACA;AACA,mBAAmB,GACDZ,GAAG;AACrB;AACA;AACA;AACA;AACA,iCAAiCY,UAAU,GAAG,CAAC,GAAG,CAAC;AACnD,6BAA6BC,WAAW,GACZ,GAAG,CAACZ,mBAAmB,CAACa,MAAM,CAACN,KAAK,CAACO,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAC7D,iBAAiB;AAC7C;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EACjBH,UAAU;EACVD,mBAAmB;EACnBH;AACoB,CAAC,KAAK;EAC1B,IAAIG,mBAAmB,EAAE;IACrB,OAAOC,UAAU,GAAGJ,KAAK,CAACQ,KAAK,GAAGR,KAAK,CAACS,GAAG;EAC/C;EAEA,OAAOL,UAAU,GAAGJ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AACT;AACA,UAAU,CAAC;EAAEG,mBAAmB;EAAEH;AAAM,CAAC,KAC7B,CAACG,mBAAmB,IACpBX,GAAG;AACf,yCAAyCQ,KAAK,CAAC,SAAS,CAAC;AACzD,aAAa;AACb;AACA,yBAAyB,CAAC;EAAEG;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,OAAO,GAAG,CAAE;AACzF;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACtF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAE;AAC/E;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACrF,UAAU,CAAC;EAAEE,WAAW;EAAEL,KAAK;EAAEG;AAA4C,CAAC,KAClEE,WAAW,GACLb,GAAG;AACrB,6BAA6BC,mBAAmB,CAACa,MAAM,CAACN,KAAK,CAACO,QAAQ,CAAC,CAAC,IAClD,CAAC,IAAIJ,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAC;AACvD,mBAAmB,GACDX,GAAG;AACrB;AACA;AACA,mBAAmB;AACnB;AACA;AACA,CAAC;AAOD,OAAO,MAAMkB,mBAAmB,GAAGnB,MAAM,CAACQ,KAA+B;AACzE,aAAa,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChE,cAAc,CAAC;EAAEU;AAA0B,CAAC,KACpC,CAACA,yBAAyB,GAAG,SAAS,GAAG,SAAS;AAC1D,eAAe,CAAC;EAAET;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$shouldShowAsSwitch","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,KAAK;AAC/C;AACA,CAAC;AAMD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACG,GAAkC;AACjF;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMI,iBAAiB,GAAGP,MAAM,CAACQ,KAA6B;AACrE,aAAa,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC9D,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,UAAU;EAAEC;AAA4C,CAAC,KAC1DA,mBAAmB,GACbZ,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CW,UAAU,GAAG,MAAM,GAAG,CAAC;AACrE;AACA;AACA,mBAAmB,GACDX,GAAG;AACrB;AACA;AACA;AACA;AACA,iCAAiCW,UAAU,GAAG,CAAC,GAAG,CAAC;AACnD;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EACjBA,UAAU;EACVC,mBAAmB;EACnBJ;AACoB,CAAC,KAAK;EAC1B,IAAII,mBAAmB,EAAE;IACrB,OAAOD,UAAU,GAAGH,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACM,GAAG;EAC/C;EAEA,OAAOH,UAAU,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AACT;AACA,UAAU,CAAC;EAAEI,mBAAmB;EAAEJ;AAAM,CAAC,KAC7B,CAACI,mBAAmB,IACpBZ,GAAG;AACf,yCAAyCQ,KAAK,CAAC,SAAS,CAAC;AACzD,aAAa;AACb;AACA,yBAAyB,CAAC;EAAEI;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,OAAO,GAAG,CAAE;AACzF;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACtF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAE;AAC/E;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACrF;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,mBAAmB,GAAGhB,MAAM,CAACQ,KAA+B;AACzE,aAAa,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChE,cAAc,CAAC;EAAEO;AAA0B,CAAC,KACpC,CAACA,yBAAyB,GAAG,SAAS,GAAG,SAAS;AAC1D,eAAe,CAAC;EAAEN;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,oBAAoB,CAAC;EAAEE;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACxF;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/utils/calculate.js

@@ -78,12 +78,19 @@ export const calculateContentHeight = elements => {
   });
   return heights.reduce((partialSum, a) => partialSum + a, 0);
 };
-export const getHeightOfSingleTextLine = () => {
-  const span = document.createElement('span');
-  span.innerText = 'A';
-  document.body.appendChild(span);
-  const height = span.offsetHeight;
-  document.body.removeChild(span);
+export const getHeightOfSingleTextLine = ({
+  container
+}) => {
+  const div = document.createElement('div');
+  div.style.visibility = 'hidden';
+  div.style.position = 'absolute';
+  div.style.whiteSpace = 'nowrap';
+  div.innerText = 'Single text line';
+  container.appendChild(div);
+  const {
+    height
+  } = div.getBoundingClientRect();
+  container.removeChild(div);
   return height;
 };
 export const getMaxHeightInPixels = (maxHeight, rootElement) => {

package/lib/esm/utils/calculate.js.map

@@ -1 +1 @@
-{"version":3,"file":"calculate.js","names":["ChaynsProvider","React","renderToString","ColorSchemeProvider","calculateContentWidth","list","functions","values","length","forEach","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","data","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","calculateBiggestWidth","elements","container","padding","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","span","height","getMaxHeightInPixels","maxHeight","rootElement","tempElement","getBoundingClientRect"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider, ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (\n    list: IComboBoxItem[],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                <ChaynsProvider data={values} functions={functions} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\nexport const getHeightOfSingleTextLine = () => {\n    const span = document.createElement('span');\n\n    span.innerText = 'A';\n\n    document.body.appendChild(span);\n\n    const height = span.offsetHeight;\n\n    document.body.removeChild(span);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: Element,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"calculate.js","names":["ChaynsProvider","React","renderToString","ColorSchemeProvider","calculateContentWidth","list","functions","values","length","forEach","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","data","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","calculateBiggestWidth","elements","container","padding","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","height","getBoundingClientRect","getMaxHeightInPixels","maxHeight","rootElement","tempElement"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider, ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (\n    list: IComboBoxItem[],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                <ChaynsProvider data={values} functions={functions} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\ninterface GetHeightOfSingleTextLineOptions {\n    container: Element;\n}\n\nexport const getHeightOfSingleTextLine = ({ container }: GetHeightOfSingleTextLineOptions) => {\n    const div = document.createElement('div');\n\n    div.style.visibility = 'hidden';\n    div.style.position = 'absolute';\n    div.style.whiteSpace = 'nowrap';\n\n    div.innerText = 'Single text line';\n\n    container.appendChild(div);\n\n    const { height } = div.getBoundingClientRect();\n\n    container.removeChild(div);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: Element,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/checkbox/Checkbox.styles.d.ts

@@ -2,16 +2,20 @@ import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { CheckboxProps } from './Checkbox';
 export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+type StyledCheckboxBoxWrapperProps = WithTheme<{
+    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
+}>;
+export declare const StyledCheckboxBoxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCheckboxBoxWrapperProps>> & string;
 type StyledCheckboxBoxProps = WithTheme<{
     $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
     $isDisabled?: CheckboxProps['isDisabled'];
     $isChecked?: CheckboxProps['isChecked'];
-    $lineHeight?: number;
 }>;
 export declare const StyledCheckboxBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxBoxProps>> & string;
 type StyledCheckboxLabelProps = WithTheme<{
     $isDisabled?: CheckboxProps['isDisabled'];
     $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];
+    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
 }>;
 export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>> & string;
 export {};

package/lib/types/utils/calculate.d.ts

@@ -5,5 +5,9 @@ import type { SliderButtonItem } from '../types/slider-button';
 export declare const calculateContentWidth: (list: IComboBoxItem[], functions: ChaynsReactFunctions, values: ChaynsReactValues) => number;
 export declare const calculateBiggestWidth: (elements: SliderButtonItem[]) => number;
 export declare const calculateContentHeight: (elements: string[]) => number;
-export declare const getHeightOfSingleTextLine: () => number;
+interface GetHeightOfSingleTextLineOptions {
+    container: Element;
+}
+export declare const getHeightOfSingleTextLine: ({ container }: GetHeightOfSingleTextLineOptions) => number;
 export declare const getMaxHeightInPixels: (maxHeight: CSSProperties["maxHeight"], rootElement: Element) => number;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1187",
+    "version": "5.0.0-beta.1189",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a7ec3e938412bcb824fe1259ea53ee6dd96bfe2f"
+    "gitHead": "4ad280bc3a76abba115c89e9d37dd71c6a484e3a"
 }

package/lib/cjs/utils/checkBox.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getCheckBoxPosition = void 0;
-const getCheckBoxPosition = fontSize => {
-  const position = {
-    30: 17,
-    25.5: 14,
-    24: 12,
-    20: 8,
-    19: 8,
-    18: 6,
-    17: 7,
-    16: 5,
-    15: 4,
-    14: 4,
-    13: 3,
-    12: 1,
-    11: 1,
-    10: 0,
-    9: -1,
-    8: -1
-  };
-  return position[fontSize];
-};
-exports.getCheckBoxPosition = getCheckBoxPosition;
-//# sourceMappingURL=checkBox.js.map

package/lib/cjs/utils/checkBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkBox.js","names":["getCheckBoxPosition","fontSize","position","exports"],"sources":["../../../src/utils/checkBox.ts"],"sourcesContent":["export const getCheckBoxPosition = (fontSize: number) => {\n    const position: { [key: number]: number } = {\n        30: 17,\n        25.5: 14,\n        24: 12,\n        20: 8,\n        19: 8,\n        18: 6,\n        17: 7,\n        16: 5,\n        15: 4,\n        14: 4,\n        13: 3,\n        12: 1,\n        11: 1,\n        10: 0,\n        9: -1,\n        8: -1,\n    };\n\n    return position[fontSize];\n};\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAIC,QAAgB,IAAK;EACrD,MAAMC,QAAmC,GAAG;IACxC,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC,CAAC;IACL,CAAC,EAAE,CAAC;EACR,CAAC;EAED,OAAOA,QAAQ,CAACD,QAAQ,CAAC;AAC7B,CAAC;AAACE,OAAA,CAAAH,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/lib/esm/utils/checkBox.js

@@ -1,22 +0,0 @@
-export const getCheckBoxPosition = fontSize => {
-  const position = {
-    30: 17,
-    25.5: 14,
-    24: 12,
-    20: 8,
-    19: 8,
-    18: 6,
-    17: 7,
-    16: 5,
-    15: 4,
-    14: 4,
-    13: 3,
-    12: 1,
-    11: 1,
-    10: 0,
-    9: -1,
-    8: -1
-  };
-  return position[fontSize];
-};
-//# sourceMappingURL=checkBox.js.map

package/lib/esm/utils/checkBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkBox.js","names":["getCheckBoxPosition","fontSize","position"],"sources":["../../../src/utils/checkBox.ts"],"sourcesContent":["export const getCheckBoxPosition = (fontSize: number) => {\n    const position: { [key: number]: number } = {\n        30: 17,\n        25.5: 14,\n        24: 12,\n        20: 8,\n        19: 8,\n        18: 6,\n        17: 7,\n        16: 5,\n        15: 4,\n        14: 4,\n        13: 3,\n        12: 1,\n        11: 1,\n        10: 0,\n        9: -1,\n        8: -1,\n    };\n\n    return position[fontSize];\n};\n"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,GAAIC,QAAgB,IAAK;EACrD,MAAMC,QAAmC,GAAG;IACxC,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC,CAAC;IACL,CAAC,EAAE,CAAC;EACR,CAAC;EAED,OAAOA,QAAQ,CAACD,QAAQ,CAAC;AAC7B,CAAC","ignoreList":[]}

package/lib/types/utils/checkBox.d.ts

@@ -1 +0,0 @@
-export declare const getCheckBoxPosition: (fontSize: number) => number | undefined;