@hh.ru/magritte-ui-checkbox-radio 3.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/Checkbox.js +11 -4
  2. package/Checkbox.js.map +1 -1
  3. package/CheckboxSkeleton-1b2f34cd.js +19 -0
  4. package/{CheckboxSkeleton-7c421f59.js.map → CheckboxSkeleton-1b2f34cd.js.map} +1 -1
  5. package/CheckboxSkeleton.js +1 -1
  6. package/Radio.js +3 -3
  7. package/Radio.js.map +1 -1
  8. package/RadioSkeleton-be7acc01.js +19 -0
  9. package/{RadioSkeleton-d94476ac.js.map → RadioSkeleton-be7acc01.js.map} +1 -1
  10. package/RadioSkeleton.js +1 -1
  11. package/index.css +284 -260
  12. package/index.js +2 -2
  13. package/package.json +7 -7
  14. package/CheckboxSkeleton-7c421f59.js +0 -19
  15. package/RadioSkeleton-d94476ac.js +0 -19
package/Checkbox.js CHANGED
@@ -3,12 +3,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { useRef, useEffect } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
6
- import { C as CheckboxSkeleton, s as styles } from './CheckboxSkeleton-7c421f59.js';
6
+ import { C as CheckboxSkeleton, s as styles } from './CheckboxSkeleton-1b2f34cd.js';
7
7
  import { CheckboxLineSize24, CheckboxCheckSize24 } from '@hh.ru/magritte-ui-icon/variants/private';
8
8
  import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
9
9
  import '@hh.ru/magritte-common-use-loading-state';
10
10
 
11
- const CheckboxComponent = ({ disabled, invalid, indeterminate = false, onChange, readOnly, 'aria-label': ariaLabel, 'data-qa': dataQaInput, dataQaContainer = 'checkbox-container', dataQaCheckbox = 'checkbox', ...props }) => {
11
+ const CheckboxComponent = ({ checked, disabled, invalid, indeterminate = false, onChange, readOnly, 'aria-label': ariaLabel, 'data-qa': dataQaInput, dataQaContainer = 'checkbox-container', dataQaCheckbox = 'checkbox', ...props }) => {
12
12
  const forceDisabled = useDisabled();
13
13
  const checkboxRef = useRef(null);
14
14
  useEffect(() => {
@@ -17,9 +17,16 @@ const CheckboxComponent = ({ disabled, invalid, indeterminate = false, onChange,
17
17
  }
18
18
  checkboxRef.current.indeterminate = indeterminate;
19
19
  }, [indeterminate]);
20
- return (jsxs("span", { className: styles.checkbox_container, "data-qa": dataQaContainer, children: [jsx("input", { ...props, "data-qa": dataQaInput, className: styles.checkbox_input, ref: checkboxRef, readOnly: readOnly, type: "checkbox", "aria-label": ariaLabel, disabled: forceDisabled || !!disabled, onChange: onChange }), jsx("span", { className: classnames(styles.checkbox, {
20
+ return (jsxs("span", { className: styles.checkboxContainer, "data-qa": dataQaContainer, children: [jsx("input", { ...props, checked: checked, "data-qa": dataQaInput,
21
+ // Checkable Card вызывает event.preventDefault(),
22
+ // из-за чего браузер не перерисовывает чекбокс при изменении пропа checked,
23
+ // поэтому в controlled чекбоксах полагаемся на CSS-класс, а не на селектор :checked
24
+ className: classnames(styles.checkboxInput, {
25
+ [styles.checkboxInputChecked]: Object.is(checked, true),
26
+ [styles.checkboxInputUnchecked]: Object.is(checked, false),
27
+ }), ref: checkboxRef, readOnly: readOnly, type: "checkbox", "aria-label": ariaLabel, disabled: forceDisabled || !!disabled, onChange: onChange }), jsx("span", { className: classnames(styles.checkbox, {
21
28
  [styles.invalid]: invalid,
22
- }), "data-qa": dataQaCheckbox }), jsxs("span", { className: styles.icon_wrapper, children: [jsx("span", { className: classnames(styles.icon, {
29
+ }), "data-qa": dataQaCheckbox }), jsxs("span", { className: styles.iconWrapper, children: [jsx("span", { className: classnames(styles.icon, {
23
30
  [styles.iconHidden]: !indeterminate,
24
31
  }), children: jsx(CheckboxLineSize24, {}) }), jsx("span", { className: classnames(styles.icon, {
25
32
  [styles.iconHidden]: indeterminate,
package/Checkbox.js.map CHANGED
@@ -1 +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 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 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 data-qa={dataQaInput}\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 <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,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;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,EAAW,SAAA,EAAA,eAAe,EAChE,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EAAA,GACQ,KAAK,EAAA,SAAA,EACA,WAAW,EACpB,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,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,CACnB,EACRD,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAChC,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;;;;"}
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;;;;"}
package/CheckboxSkeleton-1b2f34cd.js ADDED
@@ -0,0 +1,19 @@
1
+ import './index.css';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
4
+ import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
5
+
6
+ var styles = {"checkbox-container":"magritte-checkbox-container___3QIIQ_3-0-4","checkboxContainer":"magritte-checkbox-container___3QIIQ_3-0-4","checkbox-input":"magritte-checkbox-input___Y41Ta_3-0-4","checkboxInput":"magritte-checkbox-input___Y41Ta_3-0-4","checkbox":"magritte-checkbox___xQHy4_3-0-4","icon-wrapper":"magritte-icon-wrapper___li18-_3-0-4","iconWrapper":"magritte-icon-wrapper___li18-_3-0-4","checkbox-input-unchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-4","checkboxInputUnchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-4","checkbox-input-checked":"magritte-checkbox-input-checked___8CrvA_3-0-4","checkboxInputChecked":"magritte-checkbox-input-checked___8CrvA_3-0-4","invalid":"magritte-invalid___6k7qT_3-0-4","checkbox-skeleton-container":"magritte-checkbox-skeleton-container___4uNYP_3-0-4","checkboxSkeletonContainer":"magritte-checkbox-skeleton-container___4uNYP_3-0-4","checkbox-skeleton":"magritte-checkbox-skeleton___uo6u7_3-0-4","checkboxSkeleton":"magritte-checkbox-skeleton___uo6u7_3-0-4","icon":"magritte-icon___q1TLo_3-0-4","iconHidden":"magritte-iconHidden___Sb3FQ_3-0-4"};
7
+
8
+ const CheckboxSkeleton = ({ Component: Checkbox,
9
+ // skeleton props
10
+ width, height, borderRadius, inline, additionalClass, loading, ...checkboxProps }) => {
11
+ const isLoading = useLoadingState() || loading;
12
+ if (isLoading) {
13
+ return (jsx("div", { className: styles.checkboxSkeletonContainer, children: jsx(Skeleton, { loading: true, additionalClass: styles.checkboxSkeleton }) }));
14
+ }
15
+ return jsx(Checkbox, { ...checkboxProps });
16
+ };
17
+
18
+ export { CheckboxSkeleton as C, styles as s };
19
+ //# sourceMappingURL=CheckboxSkeleton-1b2f34cd.js.map
package/{CheckboxSkeleton-7c421f59.js.map → CheckboxSkeleton-1b2f34cd.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxSkeleton-7c421f59.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;;;;"}
1
+ {"version":3,"file":"CheckboxSkeleton-1b2f34cd.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 CHANGED
@@ -2,5 +2,5 @@ import './index.css';
2
2
  import 'react/jsx-runtime';
3
3
  import '@hh.ru/magritte-common-use-loading-state';
4
4
  import '@hh.ru/magritte-ui-skeleton';
5
- export { C as CheckboxSkeleton } from './CheckboxSkeleton-7c421f59.js';
5
+ export { C as CheckboxSkeleton } from './CheckboxSkeleton-1b2f34cd.js';
6
6
  //# sourceMappingURL=CheckboxSkeleton.js.map
package/Radio.js CHANGED
@@ -2,16 +2,16 @@ import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import classnames from 'classnames';
4
4
  import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
5
- import { R as RadioSkeleton, s as styles } from './RadioSkeleton-d94476ac.js';
5
+ import { R as RadioSkeleton, s as styles } from './RadioSkeleton-be7acc01.js';
6
6
  import { RadioCircleSize24 } from '@hh.ru/magritte-ui-icon/variants/private';
7
7
  import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
8
8
  import '@hh.ru/magritte-common-use-loading-state';
9
9
 
10
10
  const RadioComponent = ({ disabled, invalid, onChange, readOnly, 'aria-label': ariaLabel, 'data-qa': dataQaInput, dataQaContainer = 'radio-container', dataQaRadio = 'radio', ...props }) => {
11
11
  const forceDisabled = useDisabled();
12
- return (jsxs("span", { className: styles.radio_container, "data-qa": dataQaContainer, children: [jsx("input", { ...props, "data-qa": dataQaInput, className: styles.radio_input, type: "radio", readOnly: readOnly, "aria-label": ariaLabel, disabled: forceDisabled || !!disabled, onChange: onChange }), jsx("span", { className: classnames(styles.radio, {
12
+ 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, {
13
13
  [styles.invalid]: invalid,
14
- }), "data-qa": dataQaRadio }), jsx("span", { className: styles.icon_wrapper, children: jsx(RadioCircleSize24, {}) })] }));
14
+ }), "data-qa": dataQaRadio }), jsx("span", { className: styles.iconWrapper, children: jsx(RadioCircleSize24, {}) })] }));
15
15
  };
16
16
  RadioComponent.isRadio = true;
17
17
  const Radio = enrichWithSkeleton(RadioComponent, RadioSkeleton);
package/Radio.js.map CHANGED
@@ -1 +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.radio_container} data-qa={dataQaContainer}>\n <input\n {...props}\n data-qa={dataQaInput}\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,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,eAAe,EAAA,SAAA,EAAW,eAAe,EAAA,QAAA,EAAA,CAC7DC,GACQ,CAAA,OAAA,EAAA,EAAA,GAAA,KAAK,aACA,WAAW,EACpB,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,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,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;;;;"}
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;;;;"}
package/RadioSkeleton-be7acc01.js ADDED
@@ -0,0 +1,19 @@
1
+ import './index.css';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
4
+ import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
5
+
6
+ var styles = {"radio-container":"magritte-radio-container___4uMia_3-0-4","radioContainer":"magritte-radio-container___4uMia_3-0-4","radio-input":"magritte-radio-input___-IM3Y_3-0-4","radioInput":"magritte-radio-input___-IM3Y_3-0-4","radio":"magritte-radio___diMe7_3-0-4","icon-wrapper":"magritte-icon-wrapper___ASC7R_3-0-4","iconWrapper":"magritte-icon-wrapper___ASC7R_3-0-4","radio-input-unchecked":"magritte-radio-input-unchecked___J-rPE_3-0-4","radioInputUnchecked":"magritte-radio-input-unchecked___J-rPE_3-0-4","radio-input-checked":"magritte-radio-input-checked___eYMcP_3-0-4","radioInputChecked":"magritte-radio-input-checked___eYMcP_3-0-4","invalid":"magritte-invalid___1vONj_3-0-4","radio-skeleton-container":"magritte-radio-skeleton-container___GjZez_3-0-4","radioSkeletonContainer":"magritte-radio-skeleton-container___GjZez_3-0-4","radio-skeleton":"magritte-radio-skeleton___9TSLy_3-0-4","radioSkeleton":"magritte-radio-skeleton___9TSLy_3-0-4"};
7
+
8
+ const RadioSkeleton = ({ Component: Radio,
9
+ // skeleton props
10
+ width, height, borderRadius, inline, additionalClass, loading, ...radioProps }) => {
11
+ const isLoading = useLoadingState() || loading;
12
+ if (isLoading) {
13
+ return (jsx("div", { className: styles.radioSkeletonContainer, children: jsx(Skeleton, { additionalClass: styles.radioSkeleton, loading: isLoading }) }));
14
+ }
15
+ return jsx(Radio, { ...radioProps });
16
+ };
17
+
18
+ export { RadioSkeleton as R, styles as s };
19
+ //# sourceMappingURL=RadioSkeleton-be7acc01.js.map
package/{RadioSkeleton-d94476ac.js.map → RadioSkeleton-be7acc01.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioSkeleton-d94476ac.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;;;;"}
1
+ {"version":3,"file":"RadioSkeleton-be7acc01.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 CHANGED
@@ -2,5 +2,5 @@ import './index.css';
2
2
  import 'react/jsx-runtime';
3
3
  import '@hh.ru/magritte-common-use-loading-state';
4
4
  import '@hh.ru/magritte-ui-skeleton';
5
- export { R as RadioSkeleton } from './RadioSkeleton-d94476ac.js';
5
+ export { R as RadioSkeleton } from './RadioSkeleton-be7acc01.js';
6
6
  //# sourceMappingURL=RadioSkeleton.js.map
package/index.css CHANGED
@@ -1,51 +1,51 @@
1
1
  :root{
2
- --magritte-color-component-checkable-background-unchecked-v18-1-2:#ffffff;
3
- --magritte-color-component-checkable-background-checked-v18-1-2:#0070ff;
4
- --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2:#ffffff;
5
- --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-2:#ffffff;
6
- --magritte-color-component-checkable-background-state-checked-hovered-v18-1-2:#2b7fff;
7
- --magritte-color-component-checkable-background-state-checked-disabled-v18-1-2:#CCD5DF;
8
- --magritte-color-component-checkable-stroke-unchecked-v18-1-2:#DCE3EB;
9
- --magritte-color-component-checkable-stroke-checked-v18-1-2:#0070ff;
10
- --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2:#CCD5DF;
11
- --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2:#2b7fff;
12
- --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-2:#EEF1F7;
13
- --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-2:#CCD5DF;
14
- --magritte-color-component-checkable-stroke-state-invalid-v18-1-2:#ff4d3a;
15
- --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
16
- --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
17
- --magritte-color-component-checkable-icon-checked-v18-1-2:#ffffff;
18
- --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2:#EEF1F7;
19
- --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2:#ffffff;
20
- --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-2:#ffffff;
2
+ --magritte-color-component-checkable-background-unchecked-v18-2-0:#ffffff;
3
+ --magritte-color-component-checkable-background-checked-v18-2-0:#0070ff;
4
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0:#ffffff;
5
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-0:#ffffff;
6
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-0:#2b7fff;
7
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-0:#CCD5DF;
8
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-0:#DCE3EB;
9
+ --magritte-color-component-checkable-stroke-checked-v18-2-0:#0070ff;
10
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0:#CCD5DF;
11
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0:#2b7fff;
12
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-0:#EEF1F7;
13
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-0:#CCD5DF;
14
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-0:#ff4d3a;
15
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-0:#ff4d3a7a;
16
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-0:#0070ff7a;
17
+ --magritte-color-component-checkable-icon-checked-v18-2-0:#ffffff;
18
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0:#EEF1F7;
19
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0:#ffffff;
20
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-0:#ffffff;
21
21
  }
22
22
  :root{
23
- --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-2:cubic-bezier(0.25, 0.1, 0.25, 1);
24
- --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-2:200ms;
25
- --magritte-core-border-radius-1-x-v18-1-2:4px;
23
+ --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
24
+ --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-0:200ms;
25
+ --magritte-core-border-radius-1-x-v18-2-0:4px;
26
26
  }
27
27
  .magritte-night-theme{
28
- --magritte-color-component-checkable-background-unchecked-v18-1-2:#1B1B1B;
29
- --magritte-color-component-checkable-background-checked-v18-1-2:#2b7fff;
30
- --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2:#262626;
31
- --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-2:#1B1B1B;
32
- --magritte-color-component-checkable-background-state-checked-hovered-v18-1-2:#468ffd;
33
- --magritte-color-component-checkable-background-state-checked-disabled-v18-1-2:#303030;
34
- --magritte-color-component-checkable-stroke-unchecked-v18-1-2:#303030;
35
- --magritte-color-component-checkable-stroke-checked-v18-1-2:#2b7fff;
36
- --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2:#3B3B3B;
37
- --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2:#468ffd;
38
- --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-2:#303030;
39
- --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-2:#303030;
40
- --magritte-color-component-checkable-stroke-state-invalid-v18-1-2:#ff4d3a;
41
- --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
42
- --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
43
- --magritte-color-component-checkable-icon-checked-v18-1-2:#ffffff;
44
- --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2:#303030;
45
- --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2:#ffffff;
46
- --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-2:#919191;
47
- }
48
- .magritte-checkbox_container___J-wPy_3-0-2{
28
+ --magritte-color-component-checkable-background-unchecked-v18-2-0:#1B1B1B;
29
+ --magritte-color-component-checkable-background-checked-v18-2-0:#2b7fff;
30
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0:#262626;
31
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-0:#1B1B1B;
32
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-0:#468ffd;
33
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-0:#303030;
34
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-0:#303030;
35
+ --magritte-color-component-checkable-stroke-checked-v18-2-0:#2b7fff;
36
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0:#3B3B3B;
37
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0:#468ffd;
38
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-0:#303030;
39
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-0:#303030;
40
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-0:#ff4d3a;
41
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-0:#ff4d3a7a;
42
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-0:#0070ff7a;
43
+ --magritte-color-component-checkable-icon-checked-v18-2-0:#ffffff;
44
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0:#303030;
45
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0:#ffffff;
46
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-0:#919191;
47
+ }
48
+ .magritte-checkbox-container___3QIIQ_3-0-4{
49
49
  position:relative;
50
50
  display:inline-flex;
51
51
  align-items:center;
@@ -56,7 +56,7 @@
56
56
  user-select:none;
57
57
  -webkit-user-select:none;
58
58
  }
59
- .magritte-checkbox_input___tguDn_3-0-2{
59
+ .magritte-checkbox-input___Y41Ta_3-0-4{
60
60
  cursor:inherit;
61
61
  position:absolute;
62
62
  opacity:0;
@@ -68,24 +68,24 @@
68
68
  padding:0;
69
69
  z-index:1;
70
70
  }
71
- .magritte-checkbox_input___tguDn_3-0-2.focus-visible:not([data-focus-visible-skip]) + .magritte-checkbox___xQHy4_3-0-2{
72
- outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2);
71
+ .magritte-checkbox-input___Y41Ta_3-0-4.focus-visible:not([data-focus-visible-skip]) + .magritte-checkbox___xQHy4_3-0-4{
72
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-0);
73
73
  }
74
- .magritte-checkbox___xQHy4_3-0-2{
74
+ .magritte-checkbox___xQHy4_3-0-4{
75
75
  width:20px;
76
76
  height:20px;
77
- background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-2);
78
- border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-1-2);
77
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-0);
78
+ border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-2-0);
79
79
  box-sizing:border-box;
80
- border-radius:var(--magritte-core-border-radius-1-x-v18-1-2);
80
+ border-radius:var(--magritte-core-border-radius-1-x-v18-2-0);
81
81
  display:flex;
82
82
  align-items:center;
83
83
  justify-content:center;
84
84
  transition-property:background-color, border-color;
85
- transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-2);
86
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-2);
85
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-0);
86
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-0);
87
87
  }
88
- .magritte-icon_wrapper___k96d9_3-0-2{
88
+ .magritte-icon-wrapper___li18-_3-0-4{
89
89
  position:absolute;
90
90
  display:flex;
91
91
  width:24px;
@@ -93,202 +93,220 @@
93
93
  justify-content:center;
94
94
  align-content:center;
95
95
  transition-property:opacity;
96
- transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-2);
97
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-2);
96
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-0);
97
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-0);
98
98
  opacity:0;
99
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2);
99
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
100
100
  }
101
- .magritte-checkbox_input___tguDn_3-0-2:checked + .magritte-checkbox___xQHy4_3-0-2{
102
- background-color:var(--magritte-color-component-checkable-background-checked-v18-1-2);
103
- border-color:var(--magritte-color-component-checkable-stroke-checked-v18-1-2);
101
+ .magritte-checkbox-input___Y41Ta_3-0-4:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) + .magritte-checkbox___xQHy4_3-0-4,
102
+ .magritte-checkbox-input-checked___8CrvA_3-0-4 + .magritte-checkbox___xQHy4_3-0-4{
103
+ background-color:var(--magritte-color-component-checkable-background-checked-v18-2-0);
104
+ border-color:var(--magritte-color-component-checkable-stroke-checked-v18-2-0);
104
105
  }
105
- .magritte-checkbox_input___tguDn_3-0-2:checked ~ .magritte-icon_wrapper___k96d9_3-0-2{
106
+ .magritte-checkbox-input___Y41Ta_3-0-4:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) ~ .magritte-icon-wrapper___li18-_3-0-4,
107
+ .magritte-checkbox-input-checked___8CrvA_3-0-4 ~ .magritte-icon-wrapper___li18-_3-0-4{
106
108
  opacity:1;
107
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-1-2);
109
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-2-0);
108
110
  }
109
- .magritte-checkbox_input___tguDn_3-0-2 + .magritte-invalid___6k7qT_3-0-2{
110
- background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-2);
111
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
111
+ .magritte-checkbox-input___Y41Ta_3-0-4 + .magritte-invalid___6k7qT_3-0-4{
112
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-0);
113
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
112
114
  }
113
- .magritte-checkbox_input___tguDn_3-0-2.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___6k7qT_3-0-2{
114
- background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-2);
115
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
116
- outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-2);
115
+ .magritte-checkbox-input___Y41Ta_3-0-4.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___6k7qT_3-0-4{
116
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-0);
117
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
118
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-0);
117
119
  }
118
- .magritte-checkbox_input___tguDn_3-0-2:disabled:checked + .magritte-checkbox___xQHy4_3-0-2{
119
- background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-1-2);
120
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-2);
121
- }
122
- .magritte-checkbox_input___tguDn_3-0-2:disabled:checked ~ .magritte-icon_wrapper___k96d9_3-0-2{
123
- opacity:1;
124
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-1-2);
125
- }
126
- .magritte-checkbox_input___tguDn_3-0-2:disabled{
120
+ .magritte-checkbox-input___Y41Ta_3-0-4:disabled{
127
121
  cursor:not-allowed;
128
122
  }
129
- .magritte-checkbox_input___tguDn_3-0-2:disabled + .magritte-checkbox___xQHy4_3-0-2{
130
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-2);
131
- border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-2);
123
+ .magritte-checkbox-input___Y41Ta_3-0-4:disabled + .magritte-checkbox___xQHy4_3-0-4{
124
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-0);
125
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-0);
132
126
  }
133
- .magritte-checkbox_input___tguDn_3-0-2:disabled ~ .magritte-icon_wrapper___k96d9_3-0-2{
127
+ .magritte-checkbox-input___Y41Ta_3-0-4:disabled ~ .magritte-icon-wrapper___li18-_3-0-4{
134
128
  opacity:0;
135
129
  }
130
+ .magritte-checkbox-input___Y41Ta_3-0-4:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) + .magritte-checkbox___xQHy4_3-0-4,
131
+ .magritte-checkbox-input-checked___8CrvA_3-0-4:disabled + .magritte-checkbox___xQHy4_3-0-4{
132
+ background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-2-0);
133
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-0);
134
+ }
135
+ .magritte-checkbox-input___Y41Ta_3-0-4:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) ~ .magritte-icon-wrapper___li18-_3-0-4,
136
+ .magritte-checkbox-input-checked___8CrvA_3-0-4:disabled ~ .magritte-icon-wrapper___li18-_3-0-4{
137
+ opacity:1;
138
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-2-0);
139
+ }
136
140
  @media (min-width: 1020px){
137
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-2:checked:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-2{
138
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
139
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
141
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-4{
142
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
143
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
140
144
  }
141
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-2:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-2{
145
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-4{
142
146
  opacity:1;
143
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
147
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
144
148
  }
145
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-2:indeterminate:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-2{
146
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
147
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
149
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) + .magritte-checkbox___xQHy4_3-0-4,
150
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-4 + .magritte-checkbox___xQHy4_3-0-4{
151
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-0);
152
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0);
148
153
  }
149
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-2:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-2{
154
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) ~ .magritte-icon-wrapper___li18-_3-0-4,
155
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-4 ~ .magritte-icon-wrapper___li18-_3-0-4{
150
156
  opacity:1;
151
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
157
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0);
152
158
  }
153
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-2:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-2{
154
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
155
- border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2);
159
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-4{
160
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
156
161
  }
157
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-2:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-2{
158
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
159
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
162
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-4 + .magritte-checkbox___xQHy4_3-0-4{
163
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
164
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
160
165
  }
161
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-2:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-2{
166
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-4 ~ .magritte-icon-wrapper___li18-_3-0-4{
162
167
  opacity:1;
163
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2);
168
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
164
169
  }
165
170
  }
166
171
  @media (min-width: 1024px){
167
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-2:checked:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-2{
168
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
169
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
172
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-4{
173
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
174
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
170
175
  }
171
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-2:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-2{
176
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-4{
172
177
  opacity:1;
173
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
178
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
174
179
  }
175
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-2:indeterminate:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-2{
176
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
177
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
180
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) + .magritte-checkbox___xQHy4_3-0-4,
181
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-4 + .magritte-checkbox___xQHy4_3-0-4{
182
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-0);
183
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0);
178
184
  }
179
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-2:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-2{
185
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-4) ~ .magritte-icon-wrapper___li18-_3-0-4,
186
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-4 ~ .magritte-icon-wrapper___li18-_3-0-4{
180
187
  opacity:1;
181
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
188
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0);
182
189
  }
183
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-2:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-2{
184
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
185
- border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2);
190
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-4{
191
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
186
192
  }
187
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-2:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-2{
188
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
189
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
193
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-4 + .magritte-checkbox___xQHy4_3-0-4{
194
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
195
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
190
196
  }
191
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-2:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-2{
197
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-4 ~ .magritte-icon-wrapper___li18-_3-0-4{
192
198
  opacity:1;
193
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2);
199
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
194
200
  }
195
201
  }
196
- .magritte-checkbox_input___tguDn_3-0-2:indeterminate + .magritte-checkbox___xQHy4_3-0-2{
197
- background-color:var(--magritte-color-component-checkable-background-checked-v18-1-2);
198
- border-color:var(--magritte-color-component-checkable-stroke-checked-v18-1-2);
202
+ .magritte-checkbox-input___Y41Ta_3-0-4:indeterminate + .magritte-checkbox___xQHy4_3-0-4{
203
+ background-color:var(--magritte-color-component-checkable-background-checked-v18-2-0);
204
+ border-color:var(--magritte-color-component-checkable-stroke-checked-v18-2-0);
199
205
  }
200
- .magritte-checkbox_input___tguDn_3-0-2:indeterminate ~ .magritte-icon_wrapper___k96d9_3-0-2{
206
+ .magritte-checkbox-input___Y41Ta_3-0-4:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-4{
201
207
  opacity:1;
202
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-1-2);
208
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-2-0);
203
209
  }
204
- .magritte-checkbox_input___tguDn_3-0-2:indeterminate:hover + .magritte-checkbox___xQHy4_3-0-2{
205
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
206
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
210
+ .magritte-checkbox-input___Y41Ta_3-0-4:disabled:indeterminate + .magritte-checkbox___xQHy4_3-0-4{
211
+ background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-2-0);
212
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-0);
207
213
  }
208
- .magritte-checkbox_input___tguDn_3-0-2:indeterminate:hover ~ .magritte-icon_wrapper___k96d9_3-0-2{
214
+ .magritte-checkbox-input___Y41Ta_3-0-4:disabled:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-4{
209
215
  opacity:1;
210
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
216
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-2-0);
211
217
  }
212
- .magritte-checkbox_input___tguDn_3-0-2:disabled:indeterminate + .magritte-checkbox___xQHy4_3-0-2{
213
- background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-1-2);
214
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-2);
218
+ @media (min-width: 1020px){
219
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-4{
220
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-0);
221
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0);
222
+ }
223
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-4{
224
+ opacity:1;
225
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0);
226
+ }
215
227
  }
216
- .magritte-checkbox_input___tguDn_3-0-2:disabled:indeterminate ~ .magritte-icon_wrapper___k96d9_3-0-2{
217
- opacity:1;
218
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-1-2);
228
+ @media (min-width: 1024px){
229
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-4{
230
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-0);
231
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0);
232
+ }
233
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-4:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-4{
234
+ opacity:1;
235
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0);
236
+ }
219
237
  }
220
- .magritte-checkbox-skeleton-container___4uNYP_3-0-2{
238
+ .magritte-checkbox-skeleton-container___4uNYP_3-0-4{
221
239
  display:inline-flex;
222
240
  align-items:center;
223
241
  justify-content:center;
224
242
  width:24px;
225
243
  height:24px;
226
244
  }
227
- .magritte-checkbox-skeleton___uo6u7_3-0-2{
245
+ .magritte-checkbox-skeleton___uo6u7_3-0-4{
228
246
  width:20px;
229
247
  height:20px;
230
- border-radius:var(--magritte-core-border-radius-1-x-v18-1-2);
248
+ border-radius:var(--magritte-core-border-radius-1-x-v18-2-0);
231
249
  }
232
- .magritte-icon___q1TLo_3-0-2{
250
+ .magritte-icon___q1TLo_3-0-4{
233
251
  opacity:1;
234
252
  position:absolute;
235
253
  line-height:0;
236
254
  transition-property:opacity;
237
- transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-2);
238
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-2);
255
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-0);
256
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-0);
239
257
  }
240
- .magritte-icon___q1TLo_3-0-2.magritte-iconHidden___Sb3FQ_3-0-2{
258
+ .magritte-icon___q1TLo_3-0-4.magritte-iconHidden___Sb3FQ_3-0-4{
241
259
  opacity:0;
242
260
  }
243
261
 
244
262
  :root{
245
- --magritte-color-component-checkable-background-unchecked-v18-1-2:#ffffff;
246
- --magritte-color-component-checkable-background-checked-v18-1-2:#0070ff;
247
- --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2:#ffffff;
248
- --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-2:#ffffff;
249
- --magritte-color-component-checkable-background-state-checked-hovered-v18-1-2:#2b7fff;
250
- --magritte-color-component-checkable-background-state-checked-disabled-v18-1-2:#CCD5DF;
251
- --magritte-color-component-checkable-stroke-unchecked-v18-1-2:#DCE3EB;
252
- --magritte-color-component-checkable-stroke-checked-v18-1-2:#0070ff;
253
- --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2:#CCD5DF;
254
- --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2:#2b7fff;
255
- --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-2:#EEF1F7;
256
- --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-2:#CCD5DF;
257
- --magritte-color-component-checkable-stroke-state-invalid-v18-1-2:#ff4d3a;
258
- --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
259
- --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
260
- --magritte-color-component-checkable-icon-checked-v18-1-2:#ffffff;
261
- --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2:#EEF1F7;
262
- --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2:#ffffff;
263
- --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-2:#ffffff;
263
+ --magritte-color-component-checkable-background-unchecked-v18-2-0:#ffffff;
264
+ --magritte-color-component-checkable-background-checked-v18-2-0:#0070ff;
265
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0:#ffffff;
266
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-0:#ffffff;
267
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-0:#2b7fff;
268
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-0:#CCD5DF;
269
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-0:#DCE3EB;
270
+ --magritte-color-component-checkable-stroke-checked-v18-2-0:#0070ff;
271
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0:#CCD5DF;
272
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0:#2b7fff;
273
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-0:#EEF1F7;
274
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-0:#CCD5DF;
275
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-0:#ff4d3a;
276
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-0:#ff4d3a7a;
277
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-0:#0070ff7a;
278
+ --magritte-color-component-checkable-icon-checked-v18-2-0:#ffffff;
279
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0:#EEF1F7;
280
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0:#ffffff;
281
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-0:#ffffff;
264
282
  }
265
283
  :root{
266
- --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-2:cubic-bezier(0.25, 0.1, 0.25, 1);
267
- --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-2:200ms;
268
- --magritte-core-border-radius-1-x-v18-1-2:4px;
284
+ --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
285
+ --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-0:200ms;
286
+ --magritte-core-border-radius-1-x-v18-2-0:4px;
269
287
  }
270
288
  .magritte-night-theme{
271
- --magritte-color-component-checkable-background-unchecked-v18-1-2:#1B1B1B;
272
- --magritte-color-component-checkable-background-checked-v18-1-2:#2b7fff;
273
- --magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2:#262626;
274
- --magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-2:#1B1B1B;
275
- --magritte-color-component-checkable-background-state-checked-hovered-v18-1-2:#468ffd;
276
- --magritte-color-component-checkable-background-state-checked-disabled-v18-1-2:#303030;
277
- --magritte-color-component-checkable-stroke-unchecked-v18-1-2:#303030;
278
- --magritte-color-component-checkable-stroke-checked-v18-1-2:#2b7fff;
279
- --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2:#3B3B3B;
280
- --magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2:#468ffd;
281
- --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-2:#303030;
282
- --magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-2:#303030;
283
- --magritte-color-component-checkable-stroke-state-invalid-v18-1-2:#ff4d3a;
284
- --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
285
- --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
286
- --magritte-color-component-checkable-icon-checked-v18-1-2:#ffffff;
287
- --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2:#303030;
288
- --magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2:#ffffff;
289
- --magritte-color-component-checkable-icon-state-checked-disabled-v18-1-2:#919191;
290
- }
291
- .magritte-radio_container___FI0P7_3-0-2{
289
+ --magritte-color-component-checkable-background-unchecked-v18-2-0:#1B1B1B;
290
+ --magritte-color-component-checkable-background-checked-v18-2-0:#2b7fff;
291
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0:#262626;
292
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-0:#1B1B1B;
293
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-0:#468ffd;
294
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-0:#303030;
295
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-0:#303030;
296
+ --magritte-color-component-checkable-stroke-checked-v18-2-0:#2b7fff;
297
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0:#3B3B3B;
298
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0:#468ffd;
299
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-0:#303030;
300
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-0:#303030;
301
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-0:#ff4d3a;
302
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-0:#ff4d3a7a;
303
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-0:#0070ff7a;
304
+ --magritte-color-component-checkable-icon-checked-v18-2-0:#ffffff;
305
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0:#303030;
306
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0:#ffffff;
307
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-0:#919191;
308
+ }
309
+ .magritte-radio-container___4uMia_3-0-4{
292
310
  position:relative;
293
311
  display:inline-flex;
294
312
  align-items:center;
@@ -299,7 +317,7 @@
299
317
  user-select:none;
300
318
  -webkit-user-select:none;
301
319
  }
302
- .magritte-radio_input___-puK7_3-0-2{
320
+ .magritte-radio-input___-IM3Y_3-0-4{
303
321
  cursor:inherit;
304
322
  position:absolute;
305
323
  opacity:0;
@@ -311,24 +329,24 @@
311
329
  padding:0;
312
330
  z-index:1;
313
331
  }
314
- .magritte-radio_input___-puK7_3-0-2.focus-visible:not([data-focus-visible-skip]) + .magritte-radio___diMe7_3-0-2{
315
- outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2);
332
+ .magritte-radio-input___-IM3Y_3-0-4.focus-visible:not([data-focus-visible-skip]) + .magritte-radio___diMe7_3-0-4{
333
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-0);
316
334
  }
317
- .magritte-radio___diMe7_3-0-2{
335
+ .magritte-radio___diMe7_3-0-4{
318
336
  width:20px;
319
337
  height:20px;
320
- background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-2);
321
- border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-1-2);
338
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-0);
339
+ border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-2-0);
322
340
  box-sizing:border-box;
323
- border-radius:var(--magritte-core-border-radius-1-x-v18-1-2);
341
+ border-radius:var(--magritte-core-border-radius-1-x-v18-2-0);
324
342
  display:flex;
325
343
  align-items:center;
326
344
  justify-content:center;
327
345
  transition-property:background-color, border-color;
328
- transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-2);
329
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-2);
346
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-0);
347
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-0);
330
348
  }
331
- .magritte-icon_wrapper___qj1JL_3-0-2{
349
+ .magritte-icon-wrapper___ASC7R_3-0-4{
332
350
  position:absolute;
333
351
  display:flex;
334
352
  width:24px;
@@ -336,117 +354,123 @@
336
354
  justify-content:center;
337
355
  align-content:center;
338
356
  transition-property:opacity;
339
- transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-2);
340
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-2);
357
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-0);
358
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-0);
341
359
  opacity:0;
342
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2);
360
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
343
361
  }
344
- .magritte-radio_input___-puK7_3-0-2:checked + .magritte-radio___diMe7_3-0-2{
345
- background-color:var(--magritte-color-component-checkable-background-checked-v18-1-2);
346
- border-color:var(--magritte-color-component-checkable-stroke-checked-v18-1-2);
362
+ .magritte-radio-input___-IM3Y_3-0-4:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) + .magritte-radio___diMe7_3-0-4,
363
+ .magritte-radio-input-checked___eYMcP_3-0-4 + .magritte-radio___diMe7_3-0-4{
364
+ background-color:var(--magritte-color-component-checkable-background-checked-v18-2-0);
365
+ border-color:var(--magritte-color-component-checkable-stroke-checked-v18-2-0);
347
366
  }
348
- .magritte-radio_input___-puK7_3-0-2:checked ~ .magritte-icon_wrapper___qj1JL_3-0-2{
367
+ .magritte-radio-input___-IM3Y_3-0-4:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) ~ .magritte-icon-wrapper___ASC7R_3-0-4,
368
+ .magritte-radio-input-checked___eYMcP_3-0-4 ~ .magritte-icon-wrapper___ASC7R_3-0-4{
349
369
  opacity:1;
350
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-1-2);
351
- }
352
- .magritte-radio_input___-puK7_3-0-2 + .magritte-invalid___1vONj_3-0-2{
353
- background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-2);
354
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
370
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-checked-v18-2-0);
355
371
  }
356
- .magritte-radio_input___-puK7_3-0-2.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___1vONj_3-0-2{
357
- background-color:var(--magritte-color-component-checkable-background-unchecked-v18-1-2);
358
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
359
- outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-1-2);
372
+ .magritte-radio-input___-IM3Y_3-0-4 + .magritte-invalid___1vONj_3-0-4{
373
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-0);
374
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
360
375
  }
361
- .magritte-radio_input___-puK7_3-0-2:disabled:checked + .magritte-radio___diMe7_3-0-2{
362
- background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-1-2);
363
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-1-2);
376
+ .magritte-radio-input___-IM3Y_3-0-4.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___1vONj_3-0-4{
377
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-0);
378
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
379
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-0);
364
380
  }
365
- .magritte-radio_input___-puK7_3-0-2:disabled:checked ~ .magritte-icon_wrapper___qj1JL_3-0-2{
366
- opacity:1;
367
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-1-2);
368
- }
369
- .magritte-radio_input___-puK7_3-0-2:disabled{
381
+ .magritte-radio-input___-IM3Y_3-0-4:disabled{
370
382
  cursor:not-allowed;
371
383
  }
372
- .magritte-radio_input___-puK7_3-0-2:disabled + .magritte-radio___diMe7_3-0-2{
373
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-1-2);
374
- border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-1-2);
384
+ .magritte-radio-input___-IM3Y_3-0-4:disabled + .magritte-radio___diMe7_3-0-4{
385
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-0);
386
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-0);
375
387
  }
376
- .magritte-radio_input___-puK7_3-0-2:disabled ~ .magritte-icon_wrapper___qj1JL_3-0-2{
388
+ .magritte-radio-input___-IM3Y_3-0-4:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-4{
377
389
  opacity:0;
378
390
  }
391
+ .magritte-radio-input___-IM3Y_3-0-4:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) + .magritte-radio___diMe7_3-0-4,
392
+ .magritte-radio-input-checked___eYMcP_3-0-4:disabled + .magritte-radio___diMe7_3-0-4{
393
+ background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-2-0);
394
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-0);
395
+ }
396
+ .magritte-radio-input___-IM3Y_3-0-4:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) ~ .magritte-icon-wrapper___ASC7R_3-0-4,
397
+ .magritte-radio-input-checked___eYMcP_3-0-4:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-4{
398
+ opacity:1;
399
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-2-0);
400
+ }
379
401
  @media (min-width: 1020px){
380
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-2:checked:hover:not(:disabled) + .magritte-radio___diMe7_3-0-2{
381
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
382
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
402
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-radio___diMe7_3-0-4{
403
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
404
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
383
405
  }
384
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-2:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-2{
406
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-4{
385
407
  opacity:1;
386
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
408
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
387
409
  }
388
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-2:indeterminate:hover:not(:disabled) + .magritte-radio___diMe7_3-0-2{
389
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
390
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
410
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) + .magritte-radio___diMe7_3-0-4,
411
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-4 + .magritte-radio___diMe7_3-0-4{
412
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-0);
413
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0);
391
414
  }
392
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-2:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-2{
415
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) ~ .magritte-icon-wrapper___ASC7R_3-0-4,
416
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-4 ~ .magritte-icon-wrapper___ASC7R_3-0-4{
393
417
  opacity:1;
394
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
418
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0);
395
419
  }
396
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-2:hover:not(:disabled) + .magritte-radio___diMe7_3-0-2{
397
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
398
- border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2);
420
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-4{
421
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
399
422
  }
400
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-2:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-2{
401
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
402
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
423
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-4 + .magritte-radio___diMe7_3-0-4{
424
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
425
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
403
426
  }
404
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-2:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-2{
427
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-4 ~ .magritte-icon-wrapper___ASC7R_3-0-4{
405
428
  opacity:1;
406
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2);
429
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
407
430
  }
408
431
  }
409
432
  @media (min-width: 1024px){
410
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-2:checked:hover:not(:disabled) + .magritte-radio___diMe7_3-0-2{
411
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
412
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
433
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-radio___diMe7_3-0-4{
434
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
435
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
413
436
  }
414
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-2:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-2{
437
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-4{
415
438
  opacity:1;
416
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
439
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
417
440
  }
418
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-2:indeterminate:hover:not(:disabled) + .magritte-radio___diMe7_3-0-2{
419
- background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-1-2);
420
- border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-1-2);
441
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) + .magritte-radio___diMe7_3-0-4,
442
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-4 + .magritte-radio___diMe7_3-0-4{
443
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-0);
444
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-0);
421
445
  }
422
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-2:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-2{
446
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-4) ~ .magritte-icon-wrapper___ASC7R_3-0-4,
447
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-4 ~ .magritte-icon-wrapper___ASC7R_3-0-4{
423
448
  opacity:1;
424
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-1-2);
449
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-0);
425
450
  }
426
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-2:hover:not(:disabled) + .magritte-radio___diMe7_3-0-2{
427
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
428
- border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-1-2);
451
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-4{
452
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-0);
429
453
  }
430
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-2:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-2{
431
- background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-1-2);
432
- border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-1-2);
454
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-4 + .magritte-radio___diMe7_3-0-4{
455
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-0);
456
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-0);
433
457
  }
434
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-2:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-2{
458
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-4:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-4 ~ .magritte-icon-wrapper___ASC7R_3-0-4{
435
459
  opacity:1;
436
- --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-1-2);
460
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-0);
437
461
  }
438
462
  }
439
- .magritte-radio___diMe7_3-0-2{
463
+ .magritte-radio___diMe7_3-0-4{
440
464
  border-radius:50%;
441
465
  }
442
- .magritte-radio-skeleton-container___GjZez_3-0-2{
466
+ .magritte-radio-skeleton-container___GjZez_3-0-4{
443
467
  display:inline-flex;
444
468
  align-items:center;
445
469
  justify-content:center;
446
470
  width:24px;
447
471
  height:24px;
448
472
  }
449
- .magritte-radio-skeleton___9TSLy_3-0-2{
473
+ .magritte-radio-skeleton___9TSLy_3-0-4{
450
474
  width:20px;
451
475
  height:20px;
452
476
  border-radius:50%;
package/index.js CHANGED
@@ -7,9 +7,9 @@ import 'react/jsx-runtime';
7
7
  import 'react';
8
8
  import 'classnames';
9
9
  import '@hh.ru/magritte-common-use-disabled';
10
- import './CheckboxSkeleton-7c421f59.js';
10
+ import './CheckboxSkeleton-1b2f34cd.js';
11
11
  import '@hh.ru/magritte-common-use-loading-state';
12
12
  import '@hh.ru/magritte-ui-skeleton';
13
13
  import '@hh.ru/magritte-ui-icon/variants/private';
14
- import './RadioSkeleton-d94476ac.js';
14
+ import './RadioSkeleton-be7acc01.js';
15
15
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-checkbox-radio",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -21,12 +21,12 @@
21
21
  "dependencies": {
22
22
  "@hh.ru/magritte-common-use-disabled": "1.0.8",
23
23
  "@hh.ru/magritte-common-use-loading-state": "1.0.4",
24
- "@hh.ru/magritte-design-tokens": "18.1.2",
24
+ "@hh.ru/magritte-design-tokens": "18.2.0",
25
25
  "@hh.ru/magritte-types": "4.0.1",
26
- "@hh.ru/magritte-ui-breakpoint": "4.0.1",
27
- "@hh.ru/magritte-ui-icon": "7.1.6",
28
- "@hh.ru/magritte-ui-skeleton": "2.1.4",
29
- "@hh.ru/magritte-ui-theme-provider": "1.1.22"
26
+ "@hh.ru/magritte-ui-breakpoint": "4.0.2",
27
+ "@hh.ru/magritte-ui-icon": "7.1.8",
28
+ "@hh.ru/magritte-ui-skeleton": "2.1.6",
29
+ "@hh.ru/magritte-ui-theme-provider": "1.1.24"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "classnames": ">=2.3.2",
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "6fd7a0b7f2af780bd38bc43b2066bf6ec986eec3"
38
+ "gitHead": "2096654db9454114e1dbf70e7a7786d7e5b688b8"
39
39
  }
package/CheckboxSkeleton-7c421f59.js DELETED
@@ -1,19 +0,0 @@
1
- import './index.css';
2
- import { jsx } from 'react/jsx-runtime';
3
- import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
4
- import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
5
-
6
- var styles = {"checkbox_container":"magritte-checkbox_container___J-wPy_3-0-2","checkboxContainer":"magritte-checkbox_container___J-wPy_3-0-2","checkbox_input":"magritte-checkbox_input___tguDn_3-0-2","checkboxInput":"magritte-checkbox_input___tguDn_3-0-2","checkbox":"magritte-checkbox___xQHy4_3-0-2","icon_wrapper":"magritte-icon_wrapper___k96d9_3-0-2","iconWrapper":"magritte-icon_wrapper___k96d9_3-0-2","invalid":"magritte-invalid___6k7qT_3-0-2","checkbox-skeleton-container":"magritte-checkbox-skeleton-container___4uNYP_3-0-2","checkboxSkeletonContainer":"magritte-checkbox-skeleton-container___4uNYP_3-0-2","checkbox-skeleton":"magritte-checkbox-skeleton___uo6u7_3-0-2","checkboxSkeleton":"magritte-checkbox-skeleton___uo6u7_3-0-2","icon":"magritte-icon___q1TLo_3-0-2","iconHidden":"magritte-iconHidden___Sb3FQ_3-0-2"};
7
-
8
- const CheckboxSkeleton = ({ Component: Checkbox,
9
- // skeleton props
10
- width, height, borderRadius, inline, additionalClass, loading, ...checkboxProps }) => {
11
- const isLoading = useLoadingState() || loading;
12
- if (isLoading) {
13
- return (jsx("div", { className: styles.checkboxSkeletonContainer, children: jsx(Skeleton, { loading: true, additionalClass: styles.checkboxSkeleton }) }));
14
- }
15
- return jsx(Checkbox, { ...checkboxProps });
16
- };
17
-
18
- export { CheckboxSkeleton as C, styles as s };
19
- //# sourceMappingURL=CheckboxSkeleton-7c421f59.js.map
package/RadioSkeleton-d94476ac.js DELETED
@@ -1,19 +0,0 @@
1
- import './index.css';
2
- import { jsx } from 'react/jsx-runtime';
3
- import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
4
- import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
5
-
6
- var styles = {"radio_container":"magritte-radio_container___FI0P7_3-0-2","radioContainer":"magritte-radio_container___FI0P7_3-0-2","radio_input":"magritte-radio_input___-puK7_3-0-2","radioInput":"magritte-radio_input___-puK7_3-0-2","radio":"magritte-radio___diMe7_3-0-2","icon_wrapper":"magritte-icon_wrapper___qj1JL_3-0-2","iconWrapper":"magritte-icon_wrapper___qj1JL_3-0-2","invalid":"magritte-invalid___1vONj_3-0-2","radio-skeleton-container":"magritte-radio-skeleton-container___GjZez_3-0-2","radioSkeletonContainer":"magritte-radio-skeleton-container___GjZez_3-0-2","radio-skeleton":"magritte-radio-skeleton___9TSLy_3-0-2","radioSkeleton":"magritte-radio-skeleton___9TSLy_3-0-2"};
7
-
8
- const RadioSkeleton = ({ Component: Radio,
9
- // skeleton props
10
- width, height, borderRadius, inline, additionalClass, loading, ...radioProps }) => {
11
- const isLoading = useLoadingState() || loading;
12
- if (isLoading) {
13
- return (jsx("div", { className: styles.radioSkeletonContainer, children: jsx(Skeleton, { additionalClass: styles.radioSkeleton, loading: isLoading }) }));
14
- }
15
- return jsx(Radio, { ...radioProps });
16
- };
17
-
18
- export { RadioSkeleton as R, styles as s };
19
- //# sourceMappingURL=RadioSkeleton-d94476ac.js.map