@hh.ru/magritte-ui-checkbox-radio 2.1.4

package/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from './types';
+export declare const Checkbox: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<CheckboxProps>;

package/Checkbox.js

@@ -0,0 +1,28 @@
+import './index.css';
+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-933b6df6.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';
+
+const CheckboxComponent = ({ disabled, invalid, indeterminate = false, onChange, readOnly, ariaLabel, dataQaContainer = 'checkbox-container', dataQaCheckbox = 'checkbox', ...props }) => {
+    const forceDisabled = useDisabled();
+    const checkboxRef = useRef(null);
+    useEffect(() => {
+        if (!checkboxRef.current) {
+            return;
+        }
+        checkboxRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (jsxs("span", { className: styles.checkbox_container, "data-qa": dataQaContainer, children: [jsx("input", { ...props, className: styles.checkbox_input, ref: checkboxRef, readOnly: readOnly, type: "checkbox", "aria-label": ariaLabel, disabled: forceDisabled || !!disabled, onChange: onChange }), jsx("span", { className: classnames(styles.checkbox, {
+                    [styles.invalid]: invalid,
+                }), "data-qa": dataQaCheckbox }), jsx("span", { className: styles.icon_wrapper, children: indeterminate ? jsx(CheckboxLineSize24, {}) : jsx(CheckboxCheckSize24, {}) })] }));
+};
+CheckboxComponent.isCheckbox = true;
+const Checkbox = enrichWithSkeleton(CheckboxComponent, CheckboxSkeleton);
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/Checkbox.js.map

@@ -0,0 +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    disabled,\n    invalid,\n    indeterminate = false,\n    onChange,\n    readOnly,\n    ariaLabel,\n    dataQaContainer = 'checkbox-container',\n    dataQaCheckbox = 'checkbox',\n    ...props\n}) => {\n    const forceDisabled = useDisabled();\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    useEffect(() => {\n        if (!checkboxRef.current) {\n            return;\n        }\n        checkboxRef.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    return (\n        <span className={styles.checkbox_container} data-qa={dataQaContainer}>\n            <input\n                {...props}\n                className={styles.checkbox_input}\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            ></span>\n            <span className={styles.icon_wrapper}>\n                {indeterminate ? <CheckboxLineSize24 /> : <CheckboxCheckSize24 />}\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,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,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;IACnD,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;IAEpB,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAA,SAAA,EAAW,eAAe,EAAA,QAAA,EAAA,CAChEC,GACQ,CAAA,OAAA,EAAA,EAAA,GAAA,KAAK,EACT,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACH,YAAA,EAAA,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;iBAC5B,CAAC,EAAA,SAAA,EACO,cAAc,EAAA,CACnB,EACRA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAC/B,aAAa,GAAGA,GAAC,CAAA,kBAAkB,EAAG,EAAA,CAAA,GAAGA,GAAC,CAAA,mBAAmB,EAAG,EAAA,CAAA,EAAA,CAC9D,CACJ,EAAA,CAAA,EACT;AACN,CAAC,CAAC;AAEF,iBAAiB,CAAC,UAAU,GAAG,IAAI,CAAC;AAEvB,MAAA,QAAQ,GAAG,kBAAkB,CAAC,iBAAiB,EAAE,gBAAgB;;;;"}

package/CheckboxSkeleton-933b6df6.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___J-wPy_2-1-4","checkboxContainer":"magritte-checkbox_container___J-wPy_2-1-4","checkbox_input":"magritte-checkbox_input___tguDn_2-1-4","checkboxInput":"magritte-checkbox_input___tguDn_2-1-4","checkbox":"magritte-checkbox___xQHy4_2-1-4","icon_wrapper":"magritte-icon_wrapper___k96d9_2-1-4","iconWrapper":"magritte-icon_wrapper___k96d9_2-1-4","invalid":"magritte-invalid___6k7qT_2-1-4","checkbox-skeleton-container":"magritte-checkbox-skeleton-container___4uNYP_2-1-4","checkboxSkeletonContainer":"magritte-checkbox-skeleton-container___4uNYP_2-1-4","checkbox-skeleton":"magritte-checkbox-skeleton___uo6u7_2-1-4","checkboxSkeleton":"magritte-checkbox-skeleton___uo6u7_2-1-4"};
+
+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-933b6df6.js.map

package/CheckboxSkeleton-933b6df6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSkeleton-933b6df6.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.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from './types';
+import { IncompleteSkeletonComponent } from '@hh.ru/magritte-ui-skeleton';
+export declare const CheckboxSkeleton: IncompleteSkeletonComponent<CheckboxProps>;

package/CheckboxSkeleton.js

@@ -0,0 +1,6 @@
+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-933b6df6.js';
+//# sourceMappingURL=CheckboxSkeleton.js.map

package/CheckboxSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSkeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/Radio.d.ts

@@ -0,0 +1,2 @@
+import { RadioProps } from './types';
+export declare const Radio: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<RadioProps>;

package/Radio.js

@@ -0,0 +1,20 @@
+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-c82f74e6.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, ariaLabel, dataQaContainer = 'radio-container', dataQaRadio = 'radio', ...props }) => {
+    const forceDisabled = useDisabled();
+    return (jsxs("span", { className: styles.radio_container, "data-qa": dataQaContainer, children: [jsx("input", { ...props, className: styles.radio_input, 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.icon_wrapper, children: jsx(RadioCircleSize24, {}) })] }));
+};
+RadioComponent.isRadio = true;
+const Radio = enrichWithSkeleton(RadioComponent, RadioSkeleton);
+
+export { Radio };
+//# sourceMappingURL=Radio.js.map

package/Radio.js.map

@@ -0,0 +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    ariaLabel,\n    dataQaContainer = 'radio-container',\n    dataQaRadio = 'radio',\n    ...props\n}) => {\n    const forceDisabled = useDisabled();\n\n    return (\n        <span className={styles.radio_container} data-qa={dataQaContainer}>\n            <input\n                {...props}\n                className={styles.radio_input}\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.icon_wrapper}>\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,SAAS,EACT,eAAe,GAAG,iBAAiB,EACnC,WAAW,GAAG,OAAO,EACrB,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;IAEpC,QACIA,eAAM,SAAS,EAAE,MAAM,CAAC,eAAe,EAAW,SAAA,EAAA,eAAe,EAC7D,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EAAA,GACQ,KAAK,EACT,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,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,YAAY,YAChCA,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-c82f74e6.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 = {"radio_container":"magritte-radio_container___FI0P7_2-1-4","radioContainer":"magritte-radio_container___FI0P7_2-1-4","radio_input":"magritte-radio_input___-puK7_2-1-4","radioInput":"magritte-radio_input___-puK7_2-1-4","radio":"magritte-radio___diMe7_2-1-4","icon_wrapper":"magritte-icon_wrapper___qj1JL_2-1-4","iconWrapper":"magritte-icon_wrapper___qj1JL_2-1-4","invalid":"magritte-invalid___1vONj_2-1-4","radio-skeleton-container":"magritte-radio-skeleton-container___GjZez_2-1-4","radioSkeletonContainer":"magritte-radio-skeleton-container___GjZez_2-1-4","radio-skeleton":"magritte-radio-skeleton___9TSLy_2-1-4","radioSkeleton":"magritte-radio-skeleton___9TSLy_2-1-4"};
+
+const RadioSkeleton = ({ Component: Radio, 
+// skeleton props
+width, height, borderRadius, inline, additionalClass, loading, ...radioProps }) => {
+    const isLoading = useLoadingState() || loading;
+    if (isLoading) {
+        return (jsx("div", { className: styles.radioSkeletonContainer, children: jsx(Skeleton, { additionalClass: styles.radioSkeleton, loading: isLoading }) }));
+    }
+    return jsx(Radio, { ...radioProps });
+};
+
+export { RadioSkeleton as R, styles as s };
+//# sourceMappingURL=RadioSkeleton-c82f74e6.js.map

package/RadioSkeleton-c82f74e6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioSkeleton-c82f74e6.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.d.ts

@@ -0,0 +1,3 @@
+import { RadioProps } from './types';
+import { IncompleteSkeletonComponent } from '@hh.ru/magritte-ui-skeleton';
+export declare const RadioSkeleton: IncompleteSkeletonComponent<RadioProps>;

package/RadioSkeleton.js

@@ -0,0 +1,6 @@
+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-c82f74e6.js';
+//# sourceMappingURL=RadioSkeleton.js.map

package/RadioSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioSkeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/index.css

@@ -0,0 +1,406 @@
+:root{
+  --magritte-color-component-checkable-background-unchecked-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-background-checked-v18-1-1:#0070ff;
+  --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-background-state-checked-hovered-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-background-state-checked-disabled-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-stroke-unchecked-v18-1-1:#DCE3EB;
+  --magritte-color-component-checkable-stroke-checked-v18-1-1:#0070ff;
+  --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-1:#DCE3EB;
+  --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-stroke-state-invalid-v18-1-1:#ff4d3a;
+  --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-1:#ff4d3a7a;
+  --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
+  --magritte-color-component-checkable-icon-checked-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1:#EEF1F7;
+  --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-1:#ffffff;
+}
+:root{
+  --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1:200ms;
+  --magritte-core-border-radius-1-x-v18-1-1:4px;
+}
+.magritte-night-theme{
+  --magritte-color-component-checkable-background-unchecked-v18-1-1:#1B1B1B;
+  --magritte-color-component-checkable-background-checked-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1:#262626;
+  --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-1:#1B1B1B;
+  --magritte-color-component-checkable-background-state-checked-hovered-v18-1-1:#468ffd;
+  --magritte-color-component-checkable-background-state-checked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-unchecked-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-checked-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1:#3B3B3B;
+  --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1:#468ffd;
+  --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-state-invalid-v18-1-1:#ff4d3a;
+  --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-1:#ff4d3a7a;
+  --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
+  --magritte-color-component-checkable-icon-checked-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1:#303030;
+  --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-1:#919191;
+}
+.magritte-checkbox_container___J-wPy_2-1-4{
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  cursor:pointer;
+  width:24px;
+  height:24px;
+  user-select:none;
+  -webkit-user-select:none;
+}
+.magritte-checkbox_input___tguDn_2-1-4{
+  cursor:inherit;
+  position:absolute;
+  opacity:0;
+  width:100%;
+  height:100%;
+  top:0;
+  left:0;
+  margin:0;
+  padding:0;
+  z-index:1;
+}
+.magritte-checkbox_input___tguDn_2-1-4.focus-visible:not([data-focus-visible-skip]) + .magritte-checkbox___xQHy4_2-1-4{
+  outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-1);
+}
+.magritte-checkbox___xQHy4_2-1-4{
+  width:20px;
+  height:20px;
+  background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-1);
+  border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-1-1);
+  box-sizing:border-box;
+  border-radius:var(--magritte-core-border-radius-1-x-v18-1-1);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  transition-property:background-color, border-color;
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1);
+}
+.magritte-icon_wrapper___k96d9_2-1-4{
+  position:absolute;
+  display:flex;
+  justify-content:center;
+  align-content:center;
+  transition-property:opacity;
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1);
+  opacity:0;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:checked + .magritte-checkbox___xQHy4_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-checked-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-checked-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:checked ~ .magritte-icon_wrapper___k96d9_2-1-4{
+  opacity:1;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4 + .magritte-invalid___6k7qT_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___6k7qT_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+  outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:disabled:checked + .magritte-checkbox___xQHy4_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:disabled:checked ~ .magritte-icon_wrapper___k96d9_2-1-4{
+  opacity:1;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:disabled{
+  cursor:not-allowed;
+}
+.magritte-checkbox_input___tguDn_2-1-4:disabled + .magritte-checkbox___xQHy4_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:disabled ~ .magritte-icon_wrapper___k96d9_2-1-4{
+  opacity:0;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout  .magritte-checkbox_input___tguDn_2-1-4:checked:hover:not(:disabled) + .magritte-checkbox___xQHy4_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-checkbox_input___tguDn_2-1-4:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-checkbox_input___tguDn_2-1-4:hover:not(:disabled) + .magritte-checkbox___xQHy4_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-checkbox_input___tguDn_2-1-4:hover:not(:disabled) + .magritte-invalid___6k7qT_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-checkbox_input___tguDn_2-1-4:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout)  .magritte-checkbox_input___tguDn_2-1-4:checked:hover:not(:disabled) + .magritte-checkbox___xQHy4_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-checkbox_input___tguDn_2-1-4:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-checkbox_input___tguDn_2-1-4:hover:not(:disabled) + .magritte-checkbox___xQHy4_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-checkbox_input___tguDn_2-1-4:hover:not(:disabled) + .magritte-invalid___6k7qT_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-checkbox_input___tguDn_2-1-4:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1);
+  }
+}
+.magritte-checkbox_input___tguDn_2-1-4:indeterminate + .magritte-checkbox___xQHy4_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-checked-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-checked-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:indeterminate ~ .magritte-icon_wrapper___k96d9_2-1-4{
+  opacity:1;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:indeterminate:hover + .magritte-checkbox___xQHy4_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:indeterminate:hover ~ .magritte-icon_wrapper___k96d9_2-1-4{
+  opacity:1;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:disabled:indeterminate + .magritte-checkbox___xQHy4_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-1);
+}
+.magritte-checkbox_input___tguDn_2-1-4:disabled:indeterminate ~ .magritte-icon_wrapper___k96d9_2-1-4{
+  opacity:1;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-1-1);
+}
+.magritte-checkbox-skeleton-container___4uNYP_2-1-4{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:24px;
+  height:24px;
+}
+.magritte-checkbox-skeleton___uo6u7_2-1-4{
+  width:20px;
+  height:20px;
+  border-radius:var(--magritte-core-border-radius-1-x-v18-1-1);
+}
+
+:root{
+  --magritte-color-component-checkable-background-unchecked-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-background-checked-v18-1-1:#0070ff;
+  --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-background-state-checked-hovered-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-background-state-checked-disabled-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-stroke-unchecked-v18-1-1:#DCE3EB;
+  --magritte-color-component-checkable-stroke-checked-v18-1-1:#0070ff;
+  --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-1:#DCE3EB;
+  --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-stroke-state-invalid-v18-1-1:#ff4d3a;
+  --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-1:#ff4d3a7a;
+  --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
+  --magritte-color-component-checkable-icon-checked-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1:#EEF1F7;
+  --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-1:#ffffff;
+}
+:root{
+  --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1:200ms;
+  --magritte-core-border-radius-1-x-v18-1-1:4px;
+}
+.magritte-night-theme{
+  --magritte-color-component-checkable-background-unchecked-v18-1-1:#1B1B1B;
+  --magritte-color-component-checkable-background-checked-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1:#262626;
+  --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-1:#1B1B1B;
+  --magritte-color-component-checkable-background-state-checked-hovered-v18-1-1:#468ffd;
+  --magritte-color-component-checkable-background-state-checked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-unchecked-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-checked-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1:#3B3B3B;
+  --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1:#468ffd;
+  --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-stroke-state-invalid-v18-1-1:#ff4d3a;
+  --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-1:#ff4d3a7a;
+  --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
+  --magritte-color-component-checkable-icon-checked-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1:#303030;
+  --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-1:#919191;
+}
+.magritte-radio_container___FI0P7_2-1-4{
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  cursor:pointer;
+  width:24px;
+  height:24px;
+  user-select:none;
+  -webkit-user-select:none;
+}
+.magritte-radio_input___-puK7_2-1-4{
+  cursor:inherit;
+  position:absolute;
+  opacity:0;
+  width:100%;
+  height:100%;
+  top:0;
+  left:0;
+  margin:0;
+  padding:0;
+  z-index:1;
+}
+.magritte-radio_input___-puK7_2-1-4.focus-visible:not([data-focus-visible-skip]) + .magritte-radio___diMe7_2-1-4{
+  outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-1);
+}
+.magritte-radio___diMe7_2-1-4{
+  width:20px;
+  height:20px;
+  background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-1);
+  border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-1-1);
+  box-sizing:border-box;
+  border-radius:var(--magritte-core-border-radius-1-x-v18-1-1);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  transition-property:background-color, border-color;
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1);
+}
+.magritte-icon_wrapper___qj1JL_2-1-4{
+  position:absolute;
+  display:flex;
+  justify-content:center;
+  align-content:center;
+  transition-property:opacity;
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1);
+  opacity:0;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4:checked + .magritte-radio___diMe7_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-checked-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-checked-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4:checked ~ .magritte-icon_wrapper___qj1JL_2-1-4{
+  opacity:1;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4 + .magritte-invalid___1vONj_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___1vONj_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+  outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4:disabled:checked + .magritte-radio___diMe7_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4:disabled:checked ~ .magritte-icon_wrapper___qj1JL_2-1-4{
+  opacity:1;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4:disabled{
+  cursor:not-allowed;
+}
+.magritte-radio_input___-puK7_2-1-4:disabled + .magritte-radio___diMe7_2-1-4{
+  background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-1);
+  border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-1);
+}
+.magritte-radio_input___-puK7_2-1-4:disabled ~ .magritte-icon_wrapper___qj1JL_2-1-4{
+  opacity:0;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout  .magritte-radio_input___-puK7_2-1-4:checked:hover:not(:disabled) + .magritte-radio___diMe7_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-radio_input___-puK7_2-1-4:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-radio_input___-puK7_2-1-4:hover:not(:disabled) + .magritte-radio___diMe7_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-radio_input___-puK7_2-1-4:hover:not(:disabled) + .magritte-invalid___1vONj_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+  }
+  body.magritte-old-layout  .magritte-radio_input___-puK7_2-1-4:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout)  .magritte-radio_input___-puK7_2-1-4:checked:hover:not(:disabled) + .magritte-radio___diMe7_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-radio_input___-puK7_2-1-4:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-radio_input___-puK7_2-1-4:hover:not(:disabled) + .magritte-radio___diMe7_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-radio_input___-puK7_2-1-4:hover:not(:disabled) + .magritte-invalid___1vONj_2-1-4{
+    background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-1);
+    border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-1);
+  }
+  body:not(.magritte-old-layout)  .magritte-radio_input___-puK7_2-1-4:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_2-1-4{
+    opacity:1;
+    --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-1);
+  }
+}
+.magritte-radio___diMe7_2-1-4{
+  border-radius:50%;
+}
+.magritte-radio-skeleton-container___GjZez_2-1-4{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:24px;
+  height:24px;
+}
+.magritte-radio-skeleton___9TSLy_2-1-4{
+  width:20px;
+  height:20px;
+  border-radius:50%;
+}

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Checkbox';
+export * from './Radio';
+export * from './types';
+export * from '@hh.ru/magritte-ui-theme-provider';

package/index.js

@@ -0,0 +1,15 @@
+import './index.css';
+export { Checkbox } from './Checkbox.js';
+export { Radio } from './Radio.js';
+export { isCheckboxComponent, isRadioComponent } from './types.js';
+export * from '@hh.ru/magritte-ui-theme-provider';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-use-disabled';
+import './CheckboxSkeleton-933b6df6.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-c82f74e6.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@hh.ru/magritte-ui-checkbox-radio",
+  "version": "2.1.4",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-use-disabled": "1.0.8",
+    "@hh.ru/magritte-common-use-loading-state": "1.0.4",
+    "@hh.ru/magritte-design-tokens": "18.1.1",
+    "@hh.ru/magritte-types": "4.0.1",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-icon": "7.1.3",
+    "@hh.ru/magritte-ui-skeleton": "2.1.2",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.21"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/types.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ChangeEventHandler } from 'react';
+interface CheckboxRadioProps {
+    /** флаг состояния по умолчанию - включен - true, выключен/отсутствует - false */
+    checked?: boolean;
+    /** компонент отключен для взаимодействия */
+    disabled?: boolean;
+    /** ошибка валидации */
+    invalid?: boolean;
+    /** функция действия на изменение состояния */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** атрибут aria-label */
+    ariaLabel?: string;
+    /** атрибут data-qa для контейнера */
+    dataQaContainer?: string;
+}
+export interface RadioBaseProps extends CheckboxRadioProps {
+    /** атрибут data-qa для визуального элемента выполняющего роль радио */
+    dataQaRadio?: string;
+}
+export type RadioProps = RadioBaseProps & JSX.IntrinsicElements['input'];
+export type CheckboxProps = CheckboxRadioProps & {
+    /** визуальное состояние неопределено */
+    indeterminate?: boolean;
+    /** атрибут data-qa для визуального элемента выполняющего роль чекбокса */
+    dataQaCheckbox?: string;
+} & JSX.IntrinsicElements['input'];
+export declare const isCheckboxComponent: (component: ReactElement) => component is ReactElement<CheckboxProps, string | import("react").JSXElementConstructor<any>>;
+export declare const isRadioComponent: (component: ReactElement) => component is ReactElement<RadioProps, string | import("react").JSXElementConstructor<any>>;
+export {};

package/types.js

@@ -0,0 +1,12 @@
+import './index.css';
+import { isValidElement } from 'react';
+
+const isCheckboxComponent = (component) => {
+    return isValidElement(component) && typeof component.type !== 'string' && 'isCheckbox' in component.type;
+};
+const isRadioComponent = (component) => {
+    return isValidElement(component) && typeof component.type !== 'string' && 'isRadio' in component.type;
+};
+
+export { isCheckboxComponent, isRadioComponent };
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["import { isValidElement, ReactElement, ChangeEventHandler } from 'react';\n\ninterface CheckboxRadioProps {\n    /** флаг состояния по умолчанию - включен - true, выключен/отсутствует - false */\n    checked?: boolean;\n    /** компонент отключен для взаимодействия */\n    disabled?: boolean;\n    /** ошибка валидации */\n    invalid?: boolean;\n    /** функция действия на изменение состояния */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /** атрибут aria-label */\n    ariaLabel?: string;\n    /** атрибут data-qa для контейнера */\n    dataQaContainer?: string;\n}\n\nexport interface RadioBaseProps extends CheckboxRadioProps {\n    /** атрибут data-qa для визуального элемента выполняющего роль радио */\n    dataQaRadio?: string;\n}\n\nexport type RadioProps = RadioBaseProps & JSX.IntrinsicElements['input'];\n\nexport type CheckboxProps = CheckboxRadioProps & {\n    /** визуальное состояние неопределено */\n    indeterminate?: boolean;\n    /** атрибут data-qa для визуального элемента выполняющего роль чекбокса */\n    dataQaCheckbox?: string;\n} & JSX.IntrinsicElements['input'];\n\nexport const isCheckboxComponent = (component: ReactElement): component is ReactElement<CheckboxProps> => {\n    return isValidElement(component) && typeof component.type !== 'string' && 'isCheckbox' in component.type;\n};\n\nexport const isRadioComponent = (component: ReactElement): component is ReactElement<RadioProps> => {\n    return isValidElement(component) && typeof component.type !== 'string' && 'isRadio' in component.type;\n};\n"],"names":[],"mappings":";;AA+Ba,MAAA,mBAAmB,GAAG,CAAC,SAAuB,KAA8C;AACrG,IAAA,OAAO,cAAc,CAAC,SAAS,CAAC,IAAI,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAY,IAAI,SAAS,CAAC,IAAI,CAAC;AAC7G,EAAE;AAEW,MAAA,gBAAgB,GAAG,CAAC,SAAuB,KAA2C;AAC/F,IAAA,OAAO,cAAc,CAAC,SAAS,CAAC,IAAI,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAI,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC;AAC1G;;;;"}