@hh.ru/magritte-ui-checkbox-radio 3.0.7 → 3.0.8

package/Checkbox.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
-import { C as CheckboxSkeleton, s as styles } from './CheckboxSkeleton-BPVQ9rmZ.js';
+import { C as CheckboxSkeleton, s as styles } from './CheckboxSkeleton-DhFelJLk.js';
 import { CheckboxLineSize24, CheckboxCheckSize24 } from '@hh.ru/magritte-ui-icon/variants/private';
 import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
 import '@hh.ru/magritte-common-use-loading-state';
@@ -22,7 +22,9 @@ const CheckboxComponent = ({ checked, disabled, invalid, indeterminate = false,
                 // из-за чего браузер не перерисовывает чекбокс при изменении пропа checked,
                 // поэтому в controlled чекбоксах полагаемся на CSS-класс, а не на селектор :checked
                 className: classnames(styles.checkboxInput, {
-                    [styles.checkboxInputChecked]: Object.is(checked, true),
+                    [styles.checkboxInputChecked]: checked,
+                    // нужно отличать false от undefined, потому что в случае uncontrolled чекбокса
+                    // checked равен undefined и значение задается через проп defaultChecked
                     [styles.checkboxInputUnchecked]: Object.is(checked, false),
                 }), ref: checkboxRef, readOnly: readOnly, type: "checkbox", "aria-label": ariaLabel, disabled: forceDisabled || !!disabled, onChange: onChange }), jsx("span", { className: classnames(styles.checkbox, {
                     [styles.invalid]: invalid,

package/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/Checkbox.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { FcWithFlag } from '@hh.ru/magritte-types';\nimport { CheckboxSkeleton } from '@hh.ru/magritte-ui-checkbox-radio/CheckboxSkeleton';\nimport { CheckboxProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { CheckboxCheckSize24, CheckboxLineSize24 } from '@hh.ru/magritte-ui-icon/variants/private';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './checkbox.less';\n\nconst CheckboxComponent: FcWithFlag<CheckboxProps, 'isCheckbox'> = ({\n    checked,\n    disabled,\n    invalid,\n    indeterminate = false,\n    onChange,\n    readOnly,\n    'aria-label': ariaLabel,\n    'data-qa': dataQaInput,\n    dataQaContainer = 'checkbox-container',\n    dataQaCheckbox = 'checkbox',\n    ...props\n}) => {\n    const forceDisabled = useDisabled();\n    const checkboxRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (!checkboxRef.current) {\n            return;\n        }\n        checkboxRef.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    return (\n        <span className={styles.checkboxContainer} data-qa={dataQaContainer}>\n            <input\n                {...props}\n                checked={checked}\n                data-qa={dataQaInput}\n                // Checkable Card вызывает event.preventDefault(),\n                // из-за чего браузер не перерисовывает чекбокс при изменении пропа checked,\n                // поэтому в controlled чекбоксах полагаемся на CSS-класс, а не на селектор :checked\n                className={classnames(styles.checkboxInput, {\n                    [styles.checkboxInputChecked]: Object.is(checked, true),\n                    [styles.checkboxInputUnchecked]: Object.is(checked, false),\n                })}\n                ref={checkboxRef}\n                readOnly={readOnly}\n                type=\"checkbox\"\n                aria-label={ariaLabel}\n                disabled={forceDisabled || !!disabled}\n                onChange={onChange}\n            />\n            <span\n                className={classnames(styles.checkbox, {\n                    [styles.invalid]: invalid,\n                })}\n                data-qa={dataQaCheckbox}\n            />\n            <span className={styles.iconWrapper}>\n                <span\n                    className={classnames(styles.icon, {\n                        [styles.iconHidden]: !indeterminate,\n                    })}\n                >\n                    <CheckboxLineSize24 />\n                </span>\n                <span\n                    className={classnames(styles.icon, {\n                        [styles.iconHidden]: indeterminate,\n                    })}\n                >\n                    <CheckboxCheckSize24 />\n                </span>\n            </span>\n        </span>\n    );\n};\n\nCheckboxComponent.isCheckbox = true;\n\nexport const Checkbox = enrichWithSkeleton(CheckboxComponent, CheckboxSkeleton);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB,GAA4C,CAAC,EAChE,OAAO,EACP,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,WAAW,EACtB,eAAe,GAAG,oBAAoB,EACtC,cAAc,GAAG,UAAU,EAC3B,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACtB,OAAO;AACV,SAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;AACtD,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpB,IAAA,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,SAAA,EAAW,eAAe,EAAA,QAAA,EAAA,CAC/DC,kBACQ,KAAK,EACT,OAAO,EAAE,OAAO,aACP,WAAW;;;;AAIpB,gBAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE;AACxC,oBAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;AACvD,oBAAA,CAAC,MAAM,CAAC,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;AAC7D,iBAAA,CAAC,EACF,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EAAA,YAAA,EACH,SAAS,EACrB,QAAQ,EAAE,aAAa,IAAI,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,QAAQ,EACpB,CAAA,EACFA,GACI,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE;AACnC,oBAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AAC5B,iBAAA,CAAC,aACO,cAAc,EAAA,CACzB,EACFD,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAC/B,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,4BAAA,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,aAAa;AACtC,yBAAA,CAAC,EAEF,QAAA,EAAAA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,GACnB,EACPA,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,4BAAA,CAAC,MAAM,CAAC,UAAU,GAAG,aAAa;yBACrC,CAAC,EAAA,QAAA,EAEFA,IAAC,mBAAmB,EAAA,EAAA,CAAG,GACpB,CACJ,EAAA,CAAA,CAAA,EAAA,CACJ,EACT;AACN,CAAC,CAAC;AAEF,iBAAiB,CAAC,UAAU,GAAG,IAAI,CAAC;AAEvB,MAAA,QAAQ,GAAG,kBAAkB,CAAC,iBAAiB,EAAE,gBAAgB;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../src/Checkbox.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { FcWithFlag } from '@hh.ru/magritte-types';\nimport { CheckboxSkeleton } from '@hh.ru/magritte-ui-checkbox-radio/CheckboxSkeleton';\nimport { CheckboxProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { CheckboxCheckSize24, CheckboxLineSize24 } from '@hh.ru/magritte-ui-icon/variants/private';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './checkbox.less';\n\nconst CheckboxComponent: FcWithFlag<CheckboxProps, 'isCheckbox'> = ({\n    checked,\n    disabled,\n    invalid,\n    indeterminate = false,\n    onChange,\n    readOnly,\n    'aria-label': ariaLabel,\n    'data-qa': dataQaInput,\n    dataQaContainer = 'checkbox-container',\n    dataQaCheckbox = 'checkbox',\n    ...props\n}) => {\n    const forceDisabled = useDisabled();\n    const checkboxRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (!checkboxRef.current) {\n            return;\n        }\n        checkboxRef.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    return (\n        <span className={styles.checkboxContainer} data-qa={dataQaContainer}>\n            <input\n                {...props}\n                checked={checked}\n                data-qa={dataQaInput}\n                // Checkable Card вызывает event.preventDefault(),\n                // из-за чего браузер не перерисовывает чекбокс при изменении пропа checked,\n                // поэтому в controlled чекбоксах полагаемся на CSS-класс, а не на селектор :checked\n                className={classnames(styles.checkboxInput, {\n                    [styles.checkboxInputChecked]: checked,\n                    // нужно отличать false от undefined, потому что в случае uncontrolled чекбокса\n                    // checked равен undefined и значение задается через проп defaultChecked\n                    [styles.checkboxInputUnchecked]: Object.is(checked, false),\n                })}\n                ref={checkboxRef}\n                readOnly={readOnly}\n                type=\"checkbox\"\n                aria-label={ariaLabel}\n                disabled={forceDisabled || !!disabled}\n                onChange={onChange}\n            />\n            <span\n                className={classnames(styles.checkbox, {\n                    [styles.invalid]: invalid,\n                })}\n                data-qa={dataQaCheckbox}\n            />\n            <span className={styles.iconWrapper}>\n                <span\n                    className={classnames(styles.icon, {\n                        [styles.iconHidden]: !indeterminate,\n                    })}\n                >\n                    <CheckboxLineSize24 />\n                </span>\n                <span\n                    className={classnames(styles.icon, {\n                        [styles.iconHidden]: indeterminate,\n                    })}\n                >\n                    <CheckboxCheckSize24 />\n                </span>\n            </span>\n        </span>\n    );\n};\n\nCheckboxComponent.isCheckbox = true;\n\nexport const Checkbox = enrichWithSkeleton(CheckboxComponent, CheckboxSkeleton);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB,GAA4C,CAAC,EAChE,OAAO,EACP,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,WAAW,EACtB,eAAe,GAAG,oBAAoB,EACtC,cAAc,GAAG,UAAU,EAC3B,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACtB,OAAO;AACV,SAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;AACtD,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpB,IAAA,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,SAAA,EAAW,eAAe,EAAA,QAAA,EAAA,CAC/DC,kBACQ,KAAK,EACT,OAAO,EAAE,OAAO,aACP,WAAW;;;;AAIpB,gBAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE;AACxC,oBAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,OAAO;;;AAGtC,oBAAA,CAAC,MAAM,CAAC,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;AAC7D,iBAAA,CAAC,EACF,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EAAA,YAAA,EACH,SAAS,EACrB,QAAQ,EAAE,aAAa,IAAI,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,QAAQ,EACpB,CAAA,EACFA,GACI,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE;AACnC,oBAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AAC5B,iBAAA,CAAC,aACO,cAAc,EAAA,CACzB,EACFD,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAC/B,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,4BAAA,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,aAAa;AACtC,yBAAA,CAAC,EAEF,QAAA,EAAAA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,GACnB,EACPA,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,4BAAA,CAAC,MAAM,CAAC,UAAU,GAAG,aAAa;yBACrC,CAAC,EAAA,QAAA,EAEFA,IAAC,mBAAmB,EAAA,EAAA,CAAG,GACpB,CACJ,EAAA,CAAA,CAAA,EAAA,CACJ,EACT;AACN,CAAC,CAAC;AAEF,iBAAiB,CAAC,UAAU,GAAG,IAAI,CAAC;AAEvB,MAAA,QAAQ,GAAG,kBAAkB,CAAC,iBAAiB,EAAE,gBAAgB;;;;"}

package/CheckboxSkeleton-DhFelJLk.js

@@ -0,0 +1,19 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
+import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
+
+var styles = {"checkbox-container":"magritte-checkbox-container___3QIIQ_3-0-8","checkboxContainer":"magritte-checkbox-container___3QIIQ_3-0-8","checkbox-input":"magritte-checkbox-input___Y41Ta_3-0-8","checkboxInput":"magritte-checkbox-input___Y41Ta_3-0-8","checkbox":"magritte-checkbox___xQHy4_3-0-8","icon-wrapper":"magritte-icon-wrapper___li18-_3-0-8","iconWrapper":"magritte-icon-wrapper___li18-_3-0-8","checkbox-input-unchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-8","checkboxInputUnchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-8","checkbox-input-checked":"magritte-checkbox-input-checked___8CrvA_3-0-8","checkboxInputChecked":"magritte-checkbox-input-checked___8CrvA_3-0-8","invalid":"magritte-invalid___6k7qT_3-0-8","checkbox-skeleton-container":"magritte-checkbox-skeleton-container___4uNYP_3-0-8","checkboxSkeletonContainer":"magritte-checkbox-skeleton-container___4uNYP_3-0-8","checkbox-skeleton":"magritte-checkbox-skeleton___uo6u7_3-0-8","checkboxSkeleton":"magritte-checkbox-skeleton___uo6u7_3-0-8","icon":"magritte-icon___q1TLo_3-0-8","iconHidden":"magritte-iconHidden___Sb3FQ_3-0-8"};
+
+const CheckboxSkeleton = ({ Component: Checkbox, 
+// skeleton props
+width, height, borderRadius, inline, additionalClass, loading, ...checkboxProps }) => {
+    const isLoading = useLoadingState() || loading;
+    if (isLoading) {
+        return (jsx("div", { className: styles.checkboxSkeletonContainer, children: jsx(Skeleton, { loading: true, additionalClass: styles.checkboxSkeleton }) }));
+    }
+    return jsx(Checkbox, { ...checkboxProps });
+};
+
+export { CheckboxSkeleton as C, styles as s };
+//# sourceMappingURL=CheckboxSkeleton-DhFelJLk.js.map

package/{CheckboxSkeleton-BPVQ9rmZ.js.map → CheckboxSkeleton-DhFelJLk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CheckboxSkeleton-BPVQ9rmZ.js","sources":["../src/CheckboxSkeleton.tsx"],"sourcesContent":["import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';\nimport { CheckboxProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './checkbox.less';\n\nexport const CheckboxSkeleton: IncompleteSkeletonComponent<CheckboxProps> = ({\n    Component: Checkbox,\n\n    // skeleton props\n    width,\n    height,\n    borderRadius,\n    inline,\n    additionalClass,\n    loading,\n\n    ...checkboxProps\n}) => {\n    const isLoading = useLoadingState() || loading;\n\n    if (isLoading) {\n        return (\n            <div className={styles.checkboxSkeletonContainer}>\n                <Skeleton loading additionalClass={styles.checkboxSkeleton} />\n            </div>\n        );\n    }\n    return <Checkbox {...checkboxProps} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAMa,gBAAgB,GAA+C,CAAC,EACzE,SAAS,EAAE,QAAQ;AAEnB;AACA,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,aAAa,EACnB,KAAI;AACD,IAAA,MAAM,SAAS,GAAG,eAAe,EAAE,IAAI,OAAO,CAAC;AAE/C,IAAA,IAAI,SAAS,EAAE;QACX,QACIA,aAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,YAC5CA,GAAC,CAAA,QAAQ,IAAC,OAAO,EAAA,IAAA,EAAC,eAAe,EAAE,MAAM,CAAC,gBAAgB,EAAA,CAAI,EAC5D,CAAA,EACR;AACL,KAAA;AACD,IAAA,OAAOA,GAAC,CAAA,QAAQ,EAAK,EAAA,GAAA,aAAa,GAAI,CAAC;AAC3C;;;;"}
+{"version":3,"file":"CheckboxSkeleton-DhFelJLk.js","sources":["../src/CheckboxSkeleton.tsx"],"sourcesContent":["import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';\nimport { CheckboxProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './checkbox.less';\n\nexport const CheckboxSkeleton: IncompleteSkeletonComponent<CheckboxProps> = ({\n    Component: Checkbox,\n\n    // skeleton props\n    width,\n    height,\n    borderRadius,\n    inline,\n    additionalClass,\n    loading,\n\n    ...checkboxProps\n}) => {\n    const isLoading = useLoadingState() || loading;\n\n    if (isLoading) {\n        return (\n            <div className={styles.checkboxSkeletonContainer}>\n                <Skeleton loading additionalClass={styles.checkboxSkeleton} />\n            </div>\n        );\n    }\n    return <Checkbox {...checkboxProps} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAMa,gBAAgB,GAA+C,CAAC,EACzE,SAAS,EAAE,QAAQ;AAEnB;AACA,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,aAAa,EACnB,KAAI;AACD,IAAA,MAAM,SAAS,GAAG,eAAe,EAAE,IAAI,OAAO,CAAC;AAE/C,IAAA,IAAI,SAAS,EAAE;QACX,QACIA,aAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,YAC5CA,GAAC,CAAA,QAAQ,IAAC,OAAO,EAAA,IAAA,EAAC,eAAe,EAAE,MAAM,CAAC,gBAAgB,EAAA,CAAI,EAC5D,CAAA,EACR;AACL,KAAA;AACD,IAAA,OAAOA,GAAC,CAAA,QAAQ,EAAK,EAAA,GAAA,aAAa,GAAI,CAAC;AAC3C;;;;"}

package/CheckboxSkeleton.js

@@ -2,5 +2,5 @@ import './index.css';
 import 'react/jsx-runtime';
 import '@hh.ru/magritte-common-use-loading-state';
 import '@hh.ru/magritte-ui-skeleton';
-export { C as CheckboxSkeleton } from './CheckboxSkeleton-BPVQ9rmZ.js';
+export { C as CheckboxSkeleton } from './CheckboxSkeleton-DhFelJLk.js';
 //# sourceMappingURL=CheckboxSkeleton.js.map

package/Radio.js

@@ -2,14 +2,23 @@ import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
-import { R as RadioSkeleton, s as styles } from './RadioSkeleton-DkOr88d9.js';
+import { R as RadioSkeleton, s as styles } from './RadioSkeleton-BIoVE-zE.js';
 import { RadioCircleSize24 } from '@hh.ru/magritte-ui-icon/variants/private';
 import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
 import '@hh.ru/magritte-common-use-loading-state';
 
-const RadioComponent = ({ disabled, invalid, onChange, readOnly, 'aria-label': ariaLabel, 'data-qa': dataQaInput, dataQaContainer = 'radio-container', dataQaRadio = 'radio', ...props }) => {
+const RadioComponent = ({ checked, disabled, invalid, onChange, readOnly, 'aria-label': ariaLabel, 'data-qa': dataQaInput, dataQaContainer = 'radio-container', dataQaRadio = 'radio', ...props }) => {
     const forceDisabled = useDisabled();
-    return (jsxs("span", { className: styles.radioContainer, "data-qa": dataQaContainer, children: [jsx("input", { ...props, "data-qa": dataQaInput, className: styles.radioInput, type: "radio", readOnly: readOnly, "aria-label": ariaLabel, disabled: forceDisabled || !!disabled, onChange: onChange }), jsx("span", { className: classnames(styles.radio, {
+    return (jsxs("span", { className: styles.radioContainer, "data-qa": dataQaContainer, children: [jsx("input", { ...props, checked: checked, "data-qa": dataQaInput, 
+                // Checkable Card вызывает event.preventDefault(),
+                // из-за чего браузер не перерисовывает радиокнопку при изменении пропа checked,
+                // поэтому в controlled радиокнопках полагаемся на CSS-класс, а не на селектор :checked
+                className: classnames(styles.radioInput, {
+                    [styles.radioInputChecked]: checked,
+                    // нужно отличать false от undefined, потому что в случае uncontrolled радиокнопки
+                    // checked равен undefined и значение задается через проп defaultChecked
+                    [styles.radioInputUnchecked]: Object.is(checked, false),
+                }), type: "radio", readOnly: readOnly, "aria-label": ariaLabel, disabled: forceDisabled || !!disabled, onChange: onChange }), jsx("span", { className: classnames(styles.radio, {
                     [styles.invalid]: invalid,
                 }), "data-qa": dataQaRadio }), jsx("span", { className: styles.iconWrapper, children: jsx(RadioCircleSize24, {}) })] }));
 };

package/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { FcWithFlag } from '@hh.ru/magritte-types';\nimport { RadioSkeleton } from '@hh.ru/magritte-ui-checkbox-radio/RadioSkeleton';\nimport { RadioProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { RadioCircleSize24 } from '@hh.ru/magritte-ui-icon/variants/private';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './radio.less';\n\nconst RadioComponent: FcWithFlag<RadioProps, 'isRadio'> = ({\n    disabled,\n    invalid,\n    onChange,\n    readOnly,\n    'aria-label': ariaLabel,\n    'data-qa': dataQaInput,\n    dataQaContainer = 'radio-container',\n    dataQaRadio = 'radio',\n    ...props\n}) => {\n    const forceDisabled = useDisabled();\n\n    return (\n        <span className={styles.radioContainer} data-qa={dataQaContainer}>\n            <input\n                {...props}\n                data-qa={dataQaInput}\n                className={styles.radioInput}\n                type=\"radio\"\n                readOnly={readOnly}\n                aria-label={ariaLabel}\n                disabled={forceDisabled || !!disabled}\n                onChange={onChange}\n            />\n            <span\n                className={classnames(styles.radio, {\n                    [styles.invalid]: invalid,\n                })}\n                data-qa={dataQaRadio}\n            />\n            <span className={styles.iconWrapper}>\n                <RadioCircleSize24 />\n            </span>\n        </span>\n    );\n};\n\nRadioComponent.isRadio = true;\n\nexport const Radio = enrichWithSkeleton(RadioComponent, RadioSkeleton);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAWA,MAAM,cAAc,GAAsC,CAAC,EACvD,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,WAAW,EACtB,eAAe,GAAG,iBAAiB,EACnC,WAAW,GAAG,OAAO,EACrB,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;IAEpC,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,SAAA,EAAW,eAAe,EAAA,QAAA,EAAA,CAC5DC,GACQ,CAAA,OAAA,EAAA,EAAA,GAAA,KAAK,aACA,WAAW,EACpB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EACrB,QAAQ,EAAE,aAAa,IAAI,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,QAAQ,EAAA,CACpB,EACFA,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,oBAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AAC5B,iBAAA,CAAC,aACO,WAAW,EAAA,CACtB,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAC/BA,GAAC,CAAA,iBAAiB,KAAG,EAClB,CAAA,CAAA,EAAA,CACJ,EACT;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;AAEjB,MAAA,KAAK,GAAG,kBAAkB,CAAC,cAAc,EAAE,aAAa;;;;"}
+{"version":3,"file":"Radio.js","sources":["../src/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { FcWithFlag } from '@hh.ru/magritte-types';\nimport { RadioSkeleton } from '@hh.ru/magritte-ui-checkbox-radio/RadioSkeleton';\nimport { RadioProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { RadioCircleSize24 } from '@hh.ru/magritte-ui-icon/variants/private';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './radio.less';\n\nconst RadioComponent: FcWithFlag<RadioProps, 'isRadio'> = ({\n    checked,\n    disabled,\n    invalid,\n    onChange,\n    readOnly,\n    'aria-label': ariaLabel,\n    'data-qa': dataQaInput,\n    dataQaContainer = 'radio-container',\n    dataQaRadio = 'radio',\n    ...props\n}) => {\n    const forceDisabled = useDisabled();\n\n    return (\n        <span className={styles.radioContainer} data-qa={dataQaContainer}>\n            <input\n                {...props}\n                checked={checked}\n                data-qa={dataQaInput}\n                // Checkable Card вызывает event.preventDefault(),\n                // из-за чего браузер не перерисовывает радиокнопку при изменении пропа checked,\n                // поэтому в controlled радиокнопках полагаемся на CSS-класс, а не на селектор :checked\n                className={classnames(styles.radioInput, {\n                    [styles.radioInputChecked]: checked,\n                    // нужно отличать false от undefined, потому что в случае uncontrolled радиокнопки\n                    // checked равен undefined и значение задается через проп defaultChecked\n                    [styles.radioInputUnchecked]: Object.is(checked, false),\n                })}\n                type=\"radio\"\n                readOnly={readOnly}\n                aria-label={ariaLabel}\n                disabled={forceDisabled || !!disabled}\n                onChange={onChange}\n            />\n            <span\n                className={classnames(styles.radio, {\n                    [styles.invalid]: invalid,\n                })}\n                data-qa={dataQaRadio}\n            />\n            <span className={styles.iconWrapper}>\n                <RadioCircleSize24 />\n            </span>\n        </span>\n    );\n};\n\nRadioComponent.isRadio = true;\n\nexport const Radio = enrichWithSkeleton(RadioComponent, RadioSkeleton);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAWA,MAAM,cAAc,GAAsC,CAAC,EACvD,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,WAAW,EACtB,eAAe,GAAG,iBAAiB,EACnC,WAAW,GAAG,OAAO,EACrB,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AAEpC,IAAA,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,SAAA,EAAW,eAAe,EAAA,QAAA,EAAA,CAC5DC,kBACQ,KAAK,EACT,OAAO,EAAE,OAAO,aACP,WAAW;;;;AAIpB,gBAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE;AACrC,oBAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,OAAO;;;AAGnC,oBAAA,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1D,iBAAA,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EACrB,QAAQ,EAAE,aAAa,IAAI,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,QAAQ,GACpB,EACFA,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,oBAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AAC5B,iBAAA,CAAC,aACO,WAAW,EAAA,CACtB,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAC/BA,GAAC,CAAA,iBAAiB,KAAG,EAClB,CAAA,CAAA,EAAA,CACJ,EACT;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;AAEjB,MAAA,KAAK,GAAG,kBAAkB,CAAC,cAAc,EAAE,aAAa;;;;"}

package/{RadioSkeleton-DkOr88d9.js → RadioSkeleton-BIoVE-zE.js}

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
 import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
 
-var styles = {"radio-container":"magritte-radio-container___4uMia_3-0-7","radioContainer":"magritte-radio-container___4uMia_3-0-7","radio-input":"magritte-radio-input___-IM3Y_3-0-7","radioInput":"magritte-radio-input___-IM3Y_3-0-7","radio":"magritte-radio___diMe7_3-0-7","icon-wrapper":"magritte-icon-wrapper___ASC7R_3-0-7","iconWrapper":"magritte-icon-wrapper___ASC7R_3-0-7","radio-input-unchecked":"magritte-radio-input-unchecked___J-rPE_3-0-7","radioInputUnchecked":"magritte-radio-input-unchecked___J-rPE_3-0-7","radio-input-checked":"magritte-radio-input-checked___eYMcP_3-0-7","radioInputChecked":"magritte-radio-input-checked___eYMcP_3-0-7","invalid":"magritte-invalid___1vONj_3-0-7","radio-skeleton-container":"magritte-radio-skeleton-container___GjZez_3-0-7","radioSkeletonContainer":"magritte-radio-skeleton-container___GjZez_3-0-7","radio-skeleton":"magritte-radio-skeleton___9TSLy_3-0-7","radioSkeleton":"magritte-radio-skeleton___9TSLy_3-0-7"};
+var styles = {"radio-container":"magritte-radio-container___4uMia_3-0-8","radioContainer":"magritte-radio-container___4uMia_3-0-8","radio-input":"magritte-radio-input___-IM3Y_3-0-8","radioInput":"magritte-radio-input___-IM3Y_3-0-8","radio":"magritte-radio___diMe7_3-0-8","icon-wrapper":"magritte-icon-wrapper___ASC7R_3-0-8","iconWrapper":"magritte-icon-wrapper___ASC7R_3-0-8","radio-input-unchecked":"magritte-radio-input-unchecked___J-rPE_3-0-8","radioInputUnchecked":"magritte-radio-input-unchecked___J-rPE_3-0-8","radio-input-checked":"magritte-radio-input-checked___eYMcP_3-0-8","radioInputChecked":"magritte-radio-input-checked___eYMcP_3-0-8","invalid":"magritte-invalid___1vONj_3-0-8","radio-skeleton-container":"magritte-radio-skeleton-container___GjZez_3-0-8","radioSkeletonContainer":"magritte-radio-skeleton-container___GjZez_3-0-8","radio-skeleton":"magritte-radio-skeleton___9TSLy_3-0-8","radioSkeleton":"magritte-radio-skeleton___9TSLy_3-0-8"};
 
 const RadioSkeleton = ({ Component: Radio, 
 // skeleton props
@@ -16,4 +16,4 @@ width, height, borderRadius, inline, additionalClass, loading, ...radioProps })
 };
 
 export { RadioSkeleton as R, styles as s };
-//# sourceMappingURL=RadioSkeleton-DkOr88d9.js.map
+//# sourceMappingURL=RadioSkeleton-BIoVE-zE.js.map

package/{RadioSkeleton-DkOr88d9.js.map → RadioSkeleton-BIoVE-zE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioSkeleton-DkOr88d9.js","sources":["../src/RadioSkeleton.tsx"],"sourcesContent":["import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';\nimport { RadioProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './radio.less';\n\nexport const RadioSkeleton: IncompleteSkeletonComponent<RadioProps> = ({\n    Component: Radio,\n\n    // skeleton props\n    width,\n    height,\n    borderRadius,\n    inline,\n    additionalClass,\n    loading,\n\n    ...radioProps\n}) => {\n    const isLoading = useLoadingState() || loading;\n\n    if (isLoading) {\n        return (\n            <div className={styles.radioSkeletonContainer}>\n                <Skeleton additionalClass={styles.radioSkeleton} loading={isLoading} />\n            </div>\n        );\n    }\n\n    return <Radio {...radioProps} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAMa,aAAa,GAA4C,CAAC,EACnE,SAAS,EAAE,KAAK;AAEhB;AACA,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,UAAU,EAChB,KAAI;AACD,IAAA,MAAM,SAAS,GAAG,eAAe,EAAE,IAAI,OAAO,CAAC;AAE/C,IAAA,IAAI,SAAS,EAAE;QACX,QACIA,aAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,EACzC,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,eAAe,EAAE,MAAM,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAA,CAAI,EACrE,CAAA,EACR;AACL,KAAA;AAED,IAAA,OAAOA,GAAC,CAAA,KAAK,EAAK,EAAA,GAAA,UAAU,GAAI,CAAC;AACrC;;;;"}
+{"version":3,"file":"RadioSkeleton-BIoVE-zE.js","sources":["../src/RadioSkeleton.tsx"],"sourcesContent":["import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';\nimport { RadioProps } from '@hh.ru/magritte-ui-checkbox-radio/types';\nimport { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './radio.less';\n\nexport const RadioSkeleton: IncompleteSkeletonComponent<RadioProps> = ({\n    Component: Radio,\n\n    // skeleton props\n    width,\n    height,\n    borderRadius,\n    inline,\n    additionalClass,\n    loading,\n\n    ...radioProps\n}) => {\n    const isLoading = useLoadingState() || loading;\n\n    if (isLoading) {\n        return (\n            <div className={styles.radioSkeletonContainer}>\n                <Skeleton additionalClass={styles.radioSkeleton} loading={isLoading} />\n            </div>\n        );\n    }\n\n    return <Radio {...radioProps} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAMa,aAAa,GAA4C,CAAC,EACnE,SAAS,EAAE,KAAK;AAEhB;AACA,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,UAAU,EAChB,KAAI;AACD,IAAA,MAAM,SAAS,GAAG,eAAe,EAAE,IAAI,OAAO,CAAC;AAE/C,IAAA,IAAI,SAAS,EAAE;QACX,QACIA,aAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,EACzC,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,eAAe,EAAE,MAAM,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAA,CAAI,EACrE,CAAA,EACR;AACL,KAAA;AAED,IAAA,OAAOA,GAAC,CAAA,KAAK,EAAK,EAAA,GAAA,UAAU,GAAI,CAAC;AACrC;;;;"}

package/RadioSkeleton.js

@@ -2,5 +2,5 @@ import './index.css';
 import 'react/jsx-runtime';
 import '@hh.ru/magritte-common-use-loading-state';
 import '@hh.ru/magritte-ui-skeleton';
-export { R as RadioSkeleton } from './RadioSkeleton-DkOr88d9.js';
+export { R as RadioSkeleton } from './RadioSkeleton-BIoVE-zE.js';
 //# sourceMappingURL=RadioSkeleton.js.map

package/index.css

@@ -45,7 +45,7 @@
   --magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0:#ffffff;
   --magritte-color-component-checkable-icon-state-checked-disabled-v18-3-0:#919191;
 }
-.magritte-checkbox-container___3QIIQ_3-0-7{
+.magritte-checkbox-container___3QIIQ_3-0-8{
   position:relative;
   display:inline-flex;
   align-items:center;
@@ -56,7 +56,7 @@
   user-select:none;
   -webkit-user-select:none;
 }
-.magritte-checkbox-input___Y41Ta_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8{
   cursor:inherit;
   position:absolute;
   opacity:0;
@@ -68,10 +68,10 @@
   padding:0;
   z-index:1;
 }
-.magritte-checkbox-input___Y41Ta_3-0-7.focus-visible:not([data-focus-visible-skip]) + .magritte-checkbox___xQHy4_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8.focus-visible:not([data-focus-visible-skip]) + .magritte-checkbox___xQHy4_3-0-8{
   outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-3-0);
 }
-.magritte-checkbox___xQHy4_3-0-7{
+.magritte-checkbox___xQHy4_3-0-8{
   width:20px;
   height:20px;
   background-color:var(--magritte-color-component-checkable-background-unchecked-v18-3-0);
@@ -85,7 +85,7 @@
   transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-3-0);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-3-0);
 }
-.magritte-icon-wrapper___li18-_3-0-7{
+.magritte-icon-wrapper___li18-_3-0-8{
   position:absolute;
   display:flex;
   width:24px;
@@ -98,156 +98,156 @@
   opacity:0;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) + .magritte-checkbox___xQHy4_3-0-7,
-.magritte-checkbox-input-checked___8CrvA_3-0-7 + .magritte-checkbox___xQHy4_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) + .magritte-checkbox___xQHy4_3-0-8,
+.magritte-checkbox-input-checked___8CrvA_3-0-8 + .magritte-checkbox___xQHy4_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-checked-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-checked-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) ~ .magritte-icon-wrapper___li18-_3-0-7,
-.magritte-checkbox-input-checked___8CrvA_3-0-7 ~ .magritte-icon-wrapper___li18-_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) ~ .magritte-icon-wrapper___li18-_3-0-8,
+.magritte-checkbox-input-checked___8CrvA_3-0-8 ~ .magritte-icon-wrapper___li18-_3-0-8{
   opacity:1;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7 + .magritte-invalid___6k7qT_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8 + .magritte-invalid___6k7qT_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-unchecked-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___6k7qT_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___6k7qT_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-unchecked-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
   outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:disabled{
+.magritte-checkbox-input___Y41Ta_3-0-8:disabled{
   cursor:not-allowed;
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:disabled + .magritte-checkbox___xQHy4_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:disabled + .magritte-checkbox___xQHy4_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:disabled ~ .magritte-icon-wrapper___li18-_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:disabled ~ .magritte-icon-wrapper___li18-_3-0-8{
   opacity:0;
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) + .magritte-checkbox___xQHy4_3-0-7,
-.magritte-checkbox-input-checked___8CrvA_3-0-7:disabled + .magritte-checkbox___xQHy4_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) + .magritte-checkbox___xQHy4_3-0-8,
+.magritte-checkbox-input-checked___8CrvA_3-0-8:disabled + .magritte-checkbox___xQHy4_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) ~ .magritte-icon-wrapper___li18-_3-0-7,
-.magritte-checkbox-input-checked___8CrvA_3-0-7:disabled ~ .magritte-icon-wrapper___li18-_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) ~ .magritte-icon-wrapper___li18-_3-0-8,
+.magritte-checkbox-input-checked___8CrvA_3-0-8:disabled ~ .magritte-icon-wrapper___li18-_3-0-8{
   opacity:1;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-3-0);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) + .magritte-checkbox___xQHy4_3-0-7,
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-7 + .magritte-checkbox___xQHy4_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) + .magritte-checkbox___xQHy4_3-0-8,
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-8 + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) ~ .magritte-icon-wrapper___li18-_3-0-7,
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-7 ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) ~ .magritte-icon-wrapper___li18-_3-0-8,
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-8 ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-8{
     border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-7 + .magritte-checkbox___xQHy4_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-8 + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-7 ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-8 ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) + .magritte-checkbox___xQHy4_3-0-7,
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-7 + .magritte-checkbox___xQHy4_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) + .magritte-checkbox___xQHy4_3-0-8,
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-8 + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-7) ~ .magritte-icon-wrapper___li18-_3-0-7,
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-7 ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-8) ~ .magritte-icon-wrapper___li18-_3-0-8,
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-8 ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-8{
     border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-7 + .magritte-checkbox___xQHy4_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-8 + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-7 ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-8 ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:indeterminate + .magritte-checkbox___xQHy4_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:indeterminate + .magritte-checkbox___xQHy4_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-checked-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-checked-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-8{
   opacity:1;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:disabled:indeterminate + .magritte-checkbox___xQHy4_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:disabled:indeterminate + .magritte-checkbox___xQHy4_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-3-0);
 }
-.magritte-checkbox-input___Y41Ta_3-0-7:disabled:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-7{
+.magritte-checkbox-input___Y41Ta_3-0-8:disabled:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-8{
   opacity:1;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-3-0);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body.magritte-old-layout  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-7:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-checkbox-input___Y41Ta_3-0-8:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0);
   }
 }
-.magritte-checkbox-skeleton-container___4uNYP_3-0-7{
+.magritte-checkbox-skeleton-container___4uNYP_3-0-8{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:24px;
   height:24px;
 }
-.magritte-checkbox-skeleton___uo6u7_3-0-7{
+.magritte-checkbox-skeleton___uo6u7_3-0-8{
   width:20px;
   height:20px;
   border-radius:var(--magritte-core-border-radius-1-x-v18-3-0);
 }
-.magritte-icon___q1TLo_3-0-7{
+.magritte-icon___q1TLo_3-0-8{
   opacity:1;
   position:absolute;
   line-height:0;
@@ -255,7 +255,7 @@
   transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-3-0);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-3-0);
 }
-.magritte-icon___q1TLo_3-0-7.magritte-iconHidden___Sb3FQ_3-0-7{
+.magritte-icon___q1TLo_3-0-8.magritte-iconHidden___Sb3FQ_3-0-8{
   opacity:0;
 }
 
@@ -306,7 +306,7 @@
   --magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0:#ffffff;
   --magritte-color-component-checkable-icon-state-checked-disabled-v18-3-0:#919191;
 }
-.magritte-radio-container___4uMia_3-0-7{
+.magritte-radio-container___4uMia_3-0-8{
   position:relative;
   display:inline-flex;
   align-items:center;
@@ -317,7 +317,7 @@
   user-select:none;
   -webkit-user-select:none;
 }
-.magritte-radio-input___-IM3Y_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8{
   cursor:inherit;
   position:absolute;
   opacity:0;
@@ -329,10 +329,10 @@
   padding:0;
   z-index:1;
 }
-.magritte-radio-input___-IM3Y_3-0-7.focus-visible:not([data-focus-visible-skip]) + .magritte-radio___diMe7_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8.focus-visible:not([data-focus-visible-skip]) + .magritte-radio___diMe7_3-0-8{
   outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-3-0);
 }
-.magritte-radio___diMe7_3-0-7{
+.magritte-radio___diMe7_3-0-8{
   width:20px;
   height:20px;
   background-color:var(--magritte-color-component-checkable-background-unchecked-v18-3-0);
@@ -346,7 +346,7 @@
   transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-3-0);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-3-0);
 }
-.magritte-icon-wrapper___ASC7R_3-0-7{
+.magritte-icon-wrapper___ASC7R_3-0-8{
   position:absolute;
   display:flex;
   width:24px;
@@ -359,118 +359,118 @@
   opacity:0;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
 }
-.magritte-radio-input___-IM3Y_3-0-7:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) + .magritte-radio___diMe7_3-0-7,
-.magritte-radio-input-checked___eYMcP_3-0-7 + .magritte-radio___diMe7_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) + .magritte-radio___diMe7_3-0-8,
+.magritte-radio-input-checked___eYMcP_3-0-8 + .magritte-radio___diMe7_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-checked-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-checked-v18-3-0);
 }
-.magritte-radio-input___-IM3Y_3-0-7:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) ~ .magritte-icon-wrapper___ASC7R_3-0-7,
-.magritte-radio-input-checked___eYMcP_3-0-7 ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) ~ .magritte-icon-wrapper___ASC7R_3-0-8,
+.magritte-radio-input-checked___eYMcP_3-0-8 ~ .magritte-icon-wrapper___ASC7R_3-0-8{
   opacity:1;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-3-0);
 }
-.magritte-radio-input___-IM3Y_3-0-7 + .magritte-invalid___1vONj_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8 + .magritte-invalid___1vONj_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-unchecked-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
 }
-.magritte-radio-input___-IM3Y_3-0-7.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___1vONj_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___1vONj_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-unchecked-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
   outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-3-0);
 }
-.magritte-radio-input___-IM3Y_3-0-7:disabled{
+.magritte-radio-input___-IM3Y_3-0-8:disabled{
   cursor:not-allowed;
 }
-.magritte-radio-input___-IM3Y_3-0-7:disabled + .magritte-radio___diMe7_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8:disabled + .magritte-radio___diMe7_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-3-0);
 }
-.magritte-radio-input___-IM3Y_3-0-7:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-8{
   opacity:0;
 }
-.magritte-radio-input___-IM3Y_3-0-7:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) + .magritte-radio___diMe7_3-0-7,
-.magritte-radio-input-checked___eYMcP_3-0-7:disabled + .magritte-radio___diMe7_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) + .magritte-radio___diMe7_3-0-8,
+.magritte-radio-input-checked___eYMcP_3-0-8:disabled + .magritte-radio___diMe7_3-0-8{
   background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-3-0);
   border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-3-0);
 }
-.magritte-radio-input___-IM3Y_3-0-7:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) ~ .magritte-icon-wrapper___ASC7R_3-0-7,
-.magritte-radio-input-checked___eYMcP_3-0-7:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+.magritte-radio-input___-IM3Y_3-0-8:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) ~ .magritte-icon-wrapper___ASC7R_3-0-8,
+.magritte-radio-input-checked___eYMcP_3-0-8:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-8{
   opacity:1;
   --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-3-0);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-radio___diMe7_3-0-7{
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-radio___diMe7_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) + .magritte-radio___diMe7_3-0-7,
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-7 + .magritte-radio___diMe7_3-0-7{
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) + .magritte-radio___diMe7_3-0-8,
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-8 + .magritte-radio___diMe7_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) ~ .magritte-icon-wrapper___ASC7R_3-0-7,
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-7 ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) ~ .magritte-icon-wrapper___ASC7R_3-0-8,
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-8 ~ .magritte-icon-wrapper___ASC7R_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-7{
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-8{
     border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-7 + .magritte-radio___diMe7_3-0-7{
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-8 + .magritte-radio___diMe7_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-7 ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+  body.magritte-old-layout  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-8 ~ .magritte-icon-wrapper___ASC7R_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-radio___diMe7_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-radio___diMe7_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) + .magritte-radio___diMe7_3-0-7,
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-7 + .magritte-radio___diMe7_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) + .magritte-radio___diMe7_3-0-8,
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-8 + .magritte-radio___diMe7_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-7) ~ .magritte-icon-wrapper___ASC7R_3-0-7,
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-7 ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-8) ~ .magritte-icon-wrapper___ASC7R_3-0-8,
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-8 ~ .magritte-icon-wrapper___ASC7R_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-8{
     border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-7 + .magritte-radio___diMe7_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-8 + .magritte-radio___diMe7_3-0-8{
     background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-3-0);
     border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-3-0);
   }
-  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-7:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-7 ~ .magritte-icon-wrapper___ASC7R_3-0-7{
+  body:not(.magritte-old-layout)  .magritte-radio-input___-IM3Y_3-0-8:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-8 ~ .magritte-icon-wrapper___ASC7R_3-0-8{
     opacity:1;
     --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-3-0);
   }
 }
-.magritte-radio___diMe7_3-0-7{
+.magritte-radio___diMe7_3-0-8{
   border-radius:50%;
 }
-.magritte-radio-skeleton-container___GjZez_3-0-7{
+.magritte-radio-skeleton-container___GjZez_3-0-8{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:24px;
   height:24px;
 }
-.magritte-radio-skeleton___9TSLy_3-0-7{
+.magritte-radio-skeleton___9TSLy_3-0-8{
   width:20px;
   height:20px;
   border-radius:50%;

package/index.js

@@ -7,9 +7,9 @@ import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '@hh.ru/magritte-common-use-disabled';
-import './CheckboxSkeleton-BPVQ9rmZ.js';
+import './CheckboxSkeleton-DhFelJLk.js';
 import '@hh.ru/magritte-common-use-loading-state';
 import '@hh.ru/magritte-ui-skeleton';
 import '@hh.ru/magritte-ui-icon/variants/private';
-import './RadioSkeleton-DkOr88d9.js';
+import './RadioSkeleton-BIoVE-zE.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-checkbox-radio",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "23a49dd5966b82e16231d34828bf2852ca211dcb"
+  "gitHead": "ce69298f960f4f2aab389ffe5f7fb01fb0cc8f4f"
 }

package/CheckboxSkeleton-BPVQ9rmZ.js

@@ -1,19 +0,0 @@
-import './index.css';
-import { jsx } from 'react/jsx-runtime';
-import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
-import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
-
-var styles = {"checkbox-container":"magritte-checkbox-container___3QIIQ_3-0-7","checkboxContainer":"magritte-checkbox-container___3QIIQ_3-0-7","checkbox-input":"magritte-checkbox-input___Y41Ta_3-0-7","checkboxInput":"magritte-checkbox-input___Y41Ta_3-0-7","checkbox":"magritte-checkbox___xQHy4_3-0-7","icon-wrapper":"magritte-icon-wrapper___li18-_3-0-7","iconWrapper":"magritte-icon-wrapper___li18-_3-0-7","checkbox-input-unchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-7","checkboxInputUnchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-7","checkbox-input-checked":"magritte-checkbox-input-checked___8CrvA_3-0-7","checkboxInputChecked":"magritte-checkbox-input-checked___8CrvA_3-0-7","invalid":"magritte-invalid___6k7qT_3-0-7","checkbox-skeleton-container":"magritte-checkbox-skeleton-container___4uNYP_3-0-7","checkboxSkeletonContainer":"magritte-checkbox-skeleton-container___4uNYP_3-0-7","checkbox-skeleton":"magritte-checkbox-skeleton___uo6u7_3-0-7","checkboxSkeleton":"magritte-checkbox-skeleton___uo6u7_3-0-7","icon":"magritte-icon___q1TLo_3-0-7","iconHidden":"magritte-iconHidden___Sb3FQ_3-0-7"};
-
-const CheckboxSkeleton = ({ Component: Checkbox, 
-// skeleton props
-width, height, borderRadius, inline, additionalClass, loading, ...checkboxProps }) => {
-    const isLoading = useLoadingState() || loading;
-    if (isLoading) {
-        return (jsx("div", { className: styles.checkboxSkeletonContainer, children: jsx(Skeleton, { loading: true, additionalClass: styles.checkboxSkeleton }) }));
-    }
-    return jsx(Checkbox, { ...checkboxProps });
-};
-
-export { CheckboxSkeleton as C, styles as s };
-//# sourceMappingURL=CheckboxSkeleton-BPVQ9rmZ.js.map