@hh.ru/magritte-ui-checkbox-radio 3.0.3 → 3.0.5

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 (20) hide show
  1. package/Checkbox.d.ts +1 -1
  2. package/Checkbox.js +11 -4
  3. package/Checkbox.js.map +1 -1
  4. package/CheckboxSkeleton-tSHLWMZM.js +19 -0
  5. package/{CheckboxSkeleton-8949f700.js.map → CheckboxSkeleton-tSHLWMZM.js.map} +1 -1
  6. package/CheckboxSkeleton.d.ts +1 -1
  7. package/CheckboxSkeleton.js +1 -1
  8. package/Radio.d.ts +1 -1
  9. package/Radio.js +3 -3
  10. package/Radio.js.map +1 -1
  11. package/RadioSkeleton-B7-fonV9.js +19 -0
  12. package/{RadioSkeleton-6e5e6e82.js.map → RadioSkeleton-B7-fonV9.js.map} +1 -1
  13. package/RadioSkeleton.d.ts +1 -1
  14. package/RadioSkeleton.js +1 -1
  15. package/index.css +284 -260
  16. package/index.d.ts +3 -3
  17. package/index.js +2 -2
  18. package/package.json +13 -12
  19. package/CheckboxSkeleton-8949f700.js +0 -19
  20. package/RadioSkeleton-6e5e6e82.js +0 -19
package/Checkbox.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { CheckboxProps } from './types';
1
+ import { CheckboxProps } from '@hh.ru/magritte-ui-checkbox-radio/types';
2
2
  export declare const Checkbox: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<CheckboxProps>;
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-8949f700.js';
6
+ import { C as CheckboxSkeleton, s as styles } from './CheckboxSkeleton-tSHLWMZM.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-tSHLWMZM.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-5","checkboxContainer":"magritte-checkbox-container___3QIIQ_3-0-5","checkbox-input":"magritte-checkbox-input___Y41Ta_3-0-5","checkboxInput":"magritte-checkbox-input___Y41Ta_3-0-5","checkbox":"magritte-checkbox___xQHy4_3-0-5","icon-wrapper":"magritte-icon-wrapper___li18-_3-0-5","iconWrapper":"magritte-icon-wrapper___li18-_3-0-5","checkbox-input-unchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-5","checkboxInputUnchecked":"magritte-checkbox-input-unchecked___Mupry_3-0-5","checkbox-input-checked":"magritte-checkbox-input-checked___8CrvA_3-0-5","checkboxInputChecked":"magritte-checkbox-input-checked___8CrvA_3-0-5","invalid":"magritte-invalid___6k7qT_3-0-5","checkbox-skeleton-container":"magritte-checkbox-skeleton-container___4uNYP_3-0-5","checkboxSkeletonContainer":"magritte-checkbox-skeleton-container___4uNYP_3-0-5","checkbox-skeleton":"magritte-checkbox-skeleton___uo6u7_3-0-5","checkboxSkeleton":"magritte-checkbox-skeleton___uo6u7_3-0-5","icon":"magritte-icon___q1TLo_3-0-5","iconHidden":"magritte-iconHidden___Sb3FQ_3-0-5"};
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-tSHLWMZM.js.map
package/{CheckboxSkeleton-8949f700.js.map → CheckboxSkeleton-tSHLWMZM.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxSkeleton-8949f700.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-tSHLWMZM.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 CHANGED
@@ -1,3 +1,3 @@
1
- import { CheckboxProps } from './types';
1
+ import { CheckboxProps } from '@hh.ru/magritte-ui-checkbox-radio/types';
2
2
  import { IncompleteSkeletonComponent } from '@hh.ru/magritte-ui-skeleton';
3
3
  export declare const CheckboxSkeleton: IncompleteSkeletonComponent<CheckboxProps>;
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-8949f700.js';
5
+ export { C as CheckboxSkeleton } from './CheckboxSkeleton-tSHLWMZM.js';
6
6
  //# sourceMappingURL=CheckboxSkeleton.js.map
package/Radio.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { RadioProps } from './types';
1
+ import { RadioProps } from '@hh.ru/magritte-ui-checkbox-radio/types';
2
2
  export declare const Radio: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<RadioProps>;
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-6e5e6e82.js';
5
+ import { R as RadioSkeleton, s as styles } from './RadioSkeleton-B7-fonV9.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-B7-fonV9.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-5","radioContainer":"magritte-radio-container___4uMia_3-0-5","radio-input":"magritte-radio-input___-IM3Y_3-0-5","radioInput":"magritte-radio-input___-IM3Y_3-0-5","radio":"magritte-radio___diMe7_3-0-5","icon-wrapper":"magritte-icon-wrapper___ASC7R_3-0-5","iconWrapper":"magritte-icon-wrapper___ASC7R_3-0-5","radio-input-unchecked":"magritte-radio-input-unchecked___J-rPE_3-0-5","radioInputUnchecked":"magritte-radio-input-unchecked___J-rPE_3-0-5","radio-input-checked":"magritte-radio-input-checked___eYMcP_3-0-5","radioInputChecked":"magritte-radio-input-checked___eYMcP_3-0-5","invalid":"magritte-invalid___1vONj_3-0-5","radio-skeleton-container":"magritte-radio-skeleton-container___GjZez_3-0-5","radioSkeletonContainer":"magritte-radio-skeleton-container___GjZez_3-0-5","radio-skeleton":"magritte-radio-skeleton___9TSLy_3-0-5","radioSkeleton":"magritte-radio-skeleton___9TSLy_3-0-5"};
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-B7-fonV9.js.map
package/{RadioSkeleton-6e5e6e82.js.map → RadioSkeleton-B7-fonV9.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioSkeleton-6e5e6e82.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-B7-fonV9.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 CHANGED
@@ -1,3 +1,3 @@
1
- import { RadioProps } from './types';
1
+ import { RadioProps } from '@hh.ru/magritte-ui-checkbox-radio/types';
2
2
  import { IncompleteSkeletonComponent } from '@hh.ru/magritte-ui-skeleton';
3
3
  export declare const RadioSkeleton: IncompleteSkeletonComponent<RadioProps>;
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-6e5e6e82.js';
5
+ export { R as RadioSkeleton } from './RadioSkeleton-B7-fonV9.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-1:#ffffff;
3
+ --magritte-color-component-checkable-background-checked-v18-2-1:#0070ff;
4
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1:#ffffff;
5
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-1:#ffffff;
6
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-1:#2b7fff;
7
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-1:#CCD5DF;
8
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-1:#DCE3EB;
9
+ --magritte-color-component-checkable-stroke-checked-v18-2-1:#0070ff;
10
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1:#CCD5DF;
11
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1:#2b7fff;
12
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-1:#EEF1F7;
13
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-1:#CCD5DF;
14
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-1:#ff4d3a;
15
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-1:#ff4d3a7a;
16
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-1:#0070ff7a;
17
+ --magritte-color-component-checkable-icon-checked-v18-2-1:#ffffff;
18
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-1:#EEF1F7;
19
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-1:#ffffff;
20
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-1:#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-1:cubic-bezier(0.25, 0.1, 0.25, 1);
24
+ --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-1:200ms;
25
+ --magritte-core-border-radius-1-x-v18-2-1: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-3{
28
+ --magritte-color-component-checkable-background-unchecked-v18-2-1:#1B1B1B;
29
+ --magritte-color-component-checkable-background-checked-v18-2-1:#2b7fff;
30
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1:#262626;
31
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-1:#1B1B1B;
32
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-1:#468ffd;
33
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-1:#303030;
34
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-1:#303030;
35
+ --magritte-color-component-checkable-stroke-checked-v18-2-1:#2b7fff;
36
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1:#3B3B3B;
37
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1:#468ffd;
38
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-1:#303030;
39
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-1:#303030;
40
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-1:#ff4d3a;
41
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-1:#ff4d3a7a;
42
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-1:#0070ff7a;
43
+ --magritte-color-component-checkable-icon-checked-v18-2-1:#ffffff;
44
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-1:#303030;
45
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-1:#ffffff;
46
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-1:#919191;
47
+ }
48
+ .magritte-checkbox-container___3QIIQ_3-0-5{
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-3{
59
+ .magritte-checkbox-input___Y41Ta_3-0-5{
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-3.focus-visible:not([data-focus-visible-skip]) + .magritte-checkbox___xQHy4_3-0-3{
72
- outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2);
71
+ .magritte-checkbox-input___Y41Ta_3-0-5.focus-visible:not([data-focus-visible-skip]) + .magritte-checkbox___xQHy4_3-0-5{
72
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-1);
73
73
  }
74
- .magritte-checkbox___xQHy4_3-0-3{
74
+ .magritte-checkbox___xQHy4_3-0-5{
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-1);
78
+ border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-2-1);
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-1);
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-1);
86
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-1);
87
87
  }
88
- .magritte-icon_wrapper___k96d9_3-0-3{
88
+ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
97
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-1);
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-1);
100
100
  }
101
- .magritte-checkbox_input___tguDn_3-0-3:checked + .magritte-checkbox___xQHy4_3-0-3{
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-5:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) + .magritte-checkbox___xQHy4_3-0-5,
102
+ .magritte-checkbox-input-checked___8CrvA_3-0-5 + .magritte-checkbox___xQHy4_3-0-5{
103
+ background-color:var(--magritte-color-component-checkable-background-checked-v18-2-1);
104
+ border-color:var(--magritte-color-component-checkable-stroke-checked-v18-2-1);
104
105
  }
105
- .magritte-checkbox_input___tguDn_3-0-3:checked ~ .magritte-icon_wrapper___k96d9_3-0-3{
106
+ .magritte-checkbox-input___Y41Ta_3-0-5:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) ~ .magritte-icon-wrapper___li18-_3-0-5,
107
+ .magritte-checkbox-input-checked___8CrvA_3-0-5 ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
108
110
  }
109
- .magritte-checkbox_input___tguDn_3-0-3 + .magritte-invalid___6k7qT_3-0-3{
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-5 + .magritte-invalid___6k7qT_3-0-5{
112
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-1);
113
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
112
114
  }
113
- .magritte-checkbox_input___tguDn_3-0-3.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___6k7qT_3-0-3{
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-5.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___6k7qT_3-0-5{
116
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-1);
117
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
118
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-1);
117
119
  }
118
- .magritte-checkbox_input___tguDn_3-0-3:disabled:checked + .magritte-checkbox___xQHy4_3-0-3{
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-3:disabled:checked ~ .magritte-icon_wrapper___k96d9_3-0-3{
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-3:disabled{
120
+ .magritte-checkbox-input___Y41Ta_3-0-5:disabled{
127
121
  cursor:not-allowed;
128
122
  }
129
- .magritte-checkbox_input___tguDn_3-0-3:disabled + .magritte-checkbox___xQHy4_3-0-3{
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-5:disabled + .magritte-checkbox___xQHy4_3-0-5{
124
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-1);
125
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-1);
132
126
  }
133
- .magritte-checkbox_input___tguDn_3-0-3:disabled ~ .magritte-icon_wrapper___k96d9_3-0-3{
127
+ .magritte-checkbox-input___Y41Ta_3-0-5:disabled ~ .magritte-icon-wrapper___li18-_3-0-5{
134
128
  opacity:0;
135
129
  }
130
+ .magritte-checkbox-input___Y41Ta_3-0-5:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) + .magritte-checkbox___xQHy4_3-0-5,
131
+ .magritte-checkbox-input-checked___8CrvA_3-0-5:disabled + .magritte-checkbox___xQHy4_3-0-5{
132
+ background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-2-1);
133
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-1);
134
+ }
135
+ .magritte-checkbox-input___Y41Ta_3-0-5:disabled:checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) ~ .magritte-icon-wrapper___li18-_3-0-5,
136
+ .magritte-checkbox-input-checked___8CrvA_3-0-5:disabled ~ .magritte-icon-wrapper___li18-_3-0-5{
137
+ opacity:1;
138
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-2-1);
139
+ }
136
140
  @media (min-width: 1020px){
137
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-3:checked:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-3{
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-5:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-5{
142
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
143
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
140
144
  }
141
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-3:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-3{
145
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
144
148
  }
145
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-3:indeterminate:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-3{
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-5:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) + .magritte-checkbox___xQHy4_3-0-5,
150
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-5 + .magritte-checkbox___xQHy4_3-0-5{
151
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-1);
152
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1);
148
153
  }
149
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-3:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-3{
154
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) ~ .magritte-icon-wrapper___li18-_3-0-5,
155
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-5 ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
152
158
  }
153
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-3:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-5{
160
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
156
161
  }
157
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-3:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-5 + .magritte-checkbox___xQHy4_3-0-5{
163
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
164
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
160
165
  }
161
- body.magritte-old-layout .magritte-checkbox_input___tguDn_3-0-3:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-3{
166
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-5 ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
164
169
  }
165
170
  }
166
171
  @media (min-width: 1024px){
167
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-3:checked:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-3{
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-5:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-5{
173
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
174
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
170
175
  }
171
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-3:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-3{
176
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled) ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
174
179
  }
175
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-3:indeterminate:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-3{
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-5:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) + .magritte-checkbox___xQHy4_3-0-5,
181
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-5 + .magritte-checkbox___xQHy4_3-0-5{
182
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-1);
183
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1);
178
184
  }
179
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-3:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-3{
185
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled):checked:not(.magritte-checkbox-input-unchecked___Mupry_3-0-5) ~ .magritte-icon-wrapper___li18-_3-0-5,
186
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled).magritte-checkbox-input-checked___8CrvA_3-0-5 ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
182
189
  }
183
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-3:hover:not(:disabled) + .magritte-checkbox___xQHy4_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-5{
191
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
186
192
  }
187
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-3:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-5 + .magritte-checkbox___xQHy4_3-0-5{
194
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
195
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
190
196
  }
191
- body:not(.magritte-old-layout) .magritte-checkbox_input___tguDn_3-0-3:hover:not(:disabled) ~ .magritte-icon_wrapper___k96d9_3-0-3{
197
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled) + .magritte-invalid___6k7qT_3-0-5 ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
194
200
  }
195
201
  }
196
- .magritte-checkbox_input___tguDn_3-0-3:indeterminate + .magritte-checkbox___xQHy4_3-0-3{
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-5:indeterminate + .magritte-checkbox___xQHy4_3-0-5{
203
+ background-color:var(--magritte-color-component-checkable-background-checked-v18-2-1);
204
+ border-color:var(--magritte-color-component-checkable-stroke-checked-v18-2-1);
199
205
  }
200
- .magritte-checkbox_input___tguDn_3-0-3:indeterminate ~ .magritte-icon_wrapper___k96d9_3-0-3{
206
+ .magritte-checkbox-input___Y41Ta_3-0-5:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
203
209
  }
204
- .magritte-checkbox_input___tguDn_3-0-3:indeterminate:hover + .magritte-checkbox___xQHy4_3-0-3{
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-5:disabled:indeterminate + .magritte-checkbox___xQHy4_3-0-5{
211
+ background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-2-1);
212
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-1);
207
213
  }
208
- .magritte-checkbox_input___tguDn_3-0-3:indeterminate:hover ~ .magritte-icon_wrapper___k96d9_3-0-3{
214
+ .magritte-checkbox-input___Y41Ta_3-0-5:disabled:indeterminate ~ .magritte-icon-wrapper___li18-_3-0-5{
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-1);
211
217
  }
212
- .magritte-checkbox_input___tguDn_3-0-3:disabled:indeterminate + .magritte-checkbox___xQHy4_3-0-3{
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-5:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-5{
220
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-1);
221
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1);
222
+ }
223
+ body.magritte-old-layout .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-5{
224
+ opacity:1;
225
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-1);
226
+ }
215
227
  }
216
- .magritte-checkbox_input___tguDn_3-0-3:disabled:indeterminate ~ .magritte-icon_wrapper___k96d9_3-0-3{
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-5:hover:not(:disabled):indeterminate + .magritte-checkbox___xQHy4_3-0-5{
230
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-1);
231
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1);
232
+ }
233
+ body:not(.magritte-old-layout) .magritte-checkbox-input___Y41Ta_3-0-5:hover:not(:disabled):indeterminate ~ .magritte-icon-wrapper___li18-_3-0-5{
234
+ opacity:1;
235
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-hovered-v18-2-1);
236
+ }
219
237
  }
220
- .magritte-checkbox-skeleton-container___4uNYP_3-0-3{
238
+ .magritte-checkbox-skeleton-container___4uNYP_3-0-5{
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-3{
245
+ .magritte-checkbox-skeleton___uo6u7_3-0-5{
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-1);
231
249
  }
232
- .magritte-icon___q1TLo_3-0-3{
250
+ .magritte-icon___q1TLo_3-0-5{
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-1);
256
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-1);
239
257
  }
240
- .magritte-icon___q1TLo_3-0-3.magritte-iconHidden___Sb3FQ_3-0-3{
258
+ .magritte-icon___q1TLo_3-0-5.magritte-iconHidden___Sb3FQ_3-0-5{
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-1:#ffffff;
264
+ --magritte-color-component-checkable-background-checked-v18-2-1:#0070ff;
265
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1:#ffffff;
266
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-1:#ffffff;
267
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-1:#2b7fff;
268
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-1:#CCD5DF;
269
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-1:#DCE3EB;
270
+ --magritte-color-component-checkable-stroke-checked-v18-2-1:#0070ff;
271
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1:#CCD5DF;
272
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1:#2b7fff;
273
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-1:#EEF1F7;
274
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-1:#CCD5DF;
275
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-1:#ff4d3a;
276
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-1:#ff4d3a7a;
277
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-1:#0070ff7a;
278
+ --magritte-color-component-checkable-icon-checked-v18-2-1:#ffffff;
279
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-1:#EEF1F7;
280
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-1:#ffffff;
281
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-1:#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-1:cubic-bezier(0.25, 0.1, 0.25, 1);
285
+ --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-2-1:200ms;
286
+ --magritte-core-border-radius-1-x-v18-2-1: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-3{
289
+ --magritte-color-component-checkable-background-unchecked-v18-2-1:#1B1B1B;
290
+ --magritte-color-component-checkable-background-checked-v18-2-1:#2b7fff;
291
+ --magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1:#262626;
292
+ --magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-1:#1B1B1B;
293
+ --magritte-color-component-checkable-background-state-checked-hovered-v18-2-1:#468ffd;
294
+ --magritte-color-component-checkable-background-state-checked-disabled-v18-2-1:#303030;
295
+ --magritte-color-component-checkable-stroke-unchecked-v18-2-1:#303030;
296
+ --magritte-color-component-checkable-stroke-checked-v18-2-1:#2b7fff;
297
+ --magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1:#3B3B3B;
298
+ --magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1:#468ffd;
299
+ --magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-1:#303030;
300
+ --magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-1:#303030;
301
+ --magritte-color-component-checkable-stroke-state-invalid-v18-2-1:#ff4d3a;
302
+ --magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-1:#ff4d3a7a;
303
+ --magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-1:#0070ff7a;
304
+ --magritte-color-component-checkable-icon-checked-v18-2-1:#ffffff;
305
+ --magritte-color-component-checkable-icon-state-unchecked-hovered-v18-2-1:#303030;
306
+ --magritte-color-component-checkable-icon-state-checked-hovered-v18-2-1:#ffffff;
307
+ --magritte-color-component-checkable-icon-state-checked-disabled-v18-2-1:#919191;
308
+ }
309
+ .magritte-radio-container___4uMia_3-0-5{
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-3{
320
+ .magritte-radio-input___-IM3Y_3-0-5{
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-3.focus-visible:not([data-focus-visible-skip]) + .magritte-radio___diMe7_3-0-3{
315
- outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-1-2);
332
+ .magritte-radio-input___-IM3Y_3-0-5.focus-visible:not([data-focus-visible-skip]) + .magritte-radio___diMe7_3-0-5{
333
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-accent-focused-accessible-v18-2-1);
316
334
  }
317
- .magritte-radio___diMe7_3-0-3{
335
+ .magritte-radio___diMe7_3-0-5{
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-1);
339
+ border:1.5px solid var(--magritte-color-component-checkable-stroke-unchecked-v18-2-1);
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-1);
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-1);
347
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-1);
330
348
  }
331
- .magritte-icon_wrapper___qj1JL_3-0-3{
349
+ .magritte-icon-wrapper___ASC7R_3-0-5{
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-1);
358
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-2-1);
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-1);
343
361
  }
344
- .magritte-radio_input___-puK7_3-0-3:checked + .magritte-radio___diMe7_3-0-3{
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-5:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) + .magritte-radio___diMe7_3-0-5,
363
+ .magritte-radio-input-checked___eYMcP_3-0-5 + .magritte-radio___diMe7_3-0-5{
364
+ background-color:var(--magritte-color-component-checkable-background-checked-v18-2-1);
365
+ border-color:var(--magritte-color-component-checkable-stroke-checked-v18-2-1);
347
366
  }
348
- .magritte-radio_input___-puK7_3-0-3:checked ~ .magritte-icon_wrapper___qj1JL_3-0-3{
367
+ .magritte-radio-input___-IM3Y_3-0-5:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) ~ .magritte-icon-wrapper___ASC7R_3-0-5,
368
+ .magritte-radio-input-checked___eYMcP_3-0-5 ~ .magritte-icon-wrapper___ASC7R_3-0-5{
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-3 + .magritte-invalid___1vONj_3-0-3{
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-1);
355
371
  }
356
- .magritte-radio_input___-puK7_3-0-3.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___1vONj_3-0-3{
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-5 + .magritte-invalid___1vONj_3-0-5{
373
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-1);
374
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
360
375
  }
361
- .magritte-radio_input___-puK7_3-0-3:disabled:checked + .magritte-radio___diMe7_3-0-3{
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-5.focus-visible:not([data-focus-visible-skip]) + .magritte-invalid___1vONj_3-0-5{
377
+ background-color:var(--magritte-color-component-checkable-background-unchecked-v18-2-1);
378
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
379
+ outline:4px solid var(--magritte-color-component-checkable-stroke-state-negative-focused-accessible-v18-2-1);
364
380
  }
365
- .magritte-radio_input___-puK7_3-0-3:disabled:checked ~ .magritte-icon_wrapper___qj1JL_3-0-3{
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-3:disabled{
381
+ .magritte-radio-input___-IM3Y_3-0-5:disabled{
370
382
  cursor:not-allowed;
371
383
  }
372
- .magritte-radio_input___-puK7_3-0-3:disabled + .magritte-radio___diMe7_3-0-3{
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-5:disabled + .magritte-radio___diMe7_3-0-5{
385
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-disabled-v18-2-1);
386
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-disabled-v18-2-1);
375
387
  }
376
- .magritte-radio_input___-puK7_3-0-3:disabled ~ .magritte-icon_wrapper___qj1JL_3-0-3{
388
+ .magritte-radio-input___-IM3Y_3-0-5:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-5{
377
389
  opacity:0;
378
390
  }
391
+ .magritte-radio-input___-IM3Y_3-0-5:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) + .magritte-radio___diMe7_3-0-5,
392
+ .magritte-radio-input-checked___eYMcP_3-0-5:disabled + .magritte-radio___diMe7_3-0-5{
393
+ background-color:var(--magritte-color-component-checkable-background-state-checked-disabled-v18-2-1);
394
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-disabled-v18-2-1);
395
+ }
396
+ .magritte-radio-input___-IM3Y_3-0-5:disabled:checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) ~ .magritte-icon-wrapper___ASC7R_3-0-5,
397
+ .magritte-radio-input-checked___eYMcP_3-0-5:disabled ~ .magritte-icon-wrapper___ASC7R_3-0-5{
398
+ opacity:1;
399
+ --magritte-ui-icon-color-override:var(--magritte-color-component-checkable-icon-state-checked-disabled-v18-2-1);
400
+ }
379
401
  @media (min-width: 1020px){
380
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-3:checked:hover:not(:disabled) + .magritte-radio___diMe7_3-0-3{
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-5:hover:not(:disabled) + .magritte-radio___diMe7_3-0-5{
403
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
404
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
383
405
  }
384
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-3:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-3{
406
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-5{
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-1);
387
409
  }
388
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-3:indeterminate:hover:not(:disabled) + .magritte-radio___diMe7_3-0-3{
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-5:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) + .magritte-radio___diMe7_3-0-5,
411
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-5 + .magritte-radio___diMe7_3-0-5{
412
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-1);
413
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1);
391
414
  }
392
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-3:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-3{
415
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) ~ .magritte-icon-wrapper___ASC7R_3-0-5,
416
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-5 ~ .magritte-icon-wrapper___ASC7R_3-0-5{
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-1);
395
419
  }
396
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-3:hover:not(:disabled) + .magritte-radio___diMe7_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-5{
421
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
399
422
  }
400
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-3:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-5 + .magritte-radio___diMe7_3-0-5{
424
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
425
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
403
426
  }
404
- body.magritte-old-layout .magritte-radio_input___-puK7_3-0-3:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-3{
427
+ body.magritte-old-layout .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-5 ~ .magritte-icon-wrapper___ASC7R_3-0-5{
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-1);
407
430
  }
408
431
  }
409
432
  @media (min-width: 1024px){
410
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-3:checked:hover:not(:disabled) + .magritte-radio___diMe7_3-0-3{
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-5:hover:not(:disabled) + .magritte-radio___diMe7_3-0-5{
434
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
435
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
413
436
  }
414
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-3:checked:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-3{
437
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled) ~ .magritte-icon-wrapper___ASC7R_3-0-5{
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-1);
417
440
  }
418
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-3:indeterminate:hover:not(:disabled) + .magritte-radio___diMe7_3-0-3{
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-5:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) + .magritte-radio___diMe7_3-0-5,
442
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-5 + .magritte-radio___diMe7_3-0-5{
443
+ background-color:var(--magritte-color-component-checkable-background-state-checked-hovered-v18-2-1);
444
+ border-color:var(--magritte-color-component-checkable-stroke-state-checked-hovered-v18-2-1);
421
445
  }
422
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-3:indeterminate:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-3{
446
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled):checked:not(.magritte-radio-input-unchecked___J-rPE_3-0-5) ~ .magritte-icon-wrapper___ASC7R_3-0-5,
447
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled).magritte-radio-input-checked___eYMcP_3-0-5 ~ .magritte-icon-wrapper___ASC7R_3-0-5{
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-1);
425
450
  }
426
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-3:hover:not(:disabled) + .magritte-radio___diMe7_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-5{
452
+ border-color:var(--magritte-color-component-checkable-stroke-state-invalid-v18-2-1);
429
453
  }
430
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-3:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-3{
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-5:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-5 + .magritte-radio___diMe7_3-0-5{
455
+ background-color:var(--magritte-color-component-checkable-background-state-unchecked-hovered-v18-2-1);
456
+ border-color:var(--magritte-color-component-checkable-stroke-state-unchecked-hovered-v18-2-1);
433
457
  }
434
- body:not(.magritte-old-layout) .magritte-radio_input___-puK7_3-0-3:hover:not(:disabled) ~ .magritte-icon_wrapper___qj1JL_3-0-3{
458
+ body:not(.magritte-old-layout) .magritte-radio-input___-IM3Y_3-0-5:hover:not(:disabled) + .magritte-invalid___1vONj_3-0-5 ~ .magritte-icon-wrapper___ASC7R_3-0-5{
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-1);
437
461
  }
438
462
  }
439
- .magritte-radio___diMe7_3-0-3{
463
+ .magritte-radio___diMe7_3-0-5{
440
464
  border-radius:50%;
441
465
  }
442
- .magritte-radio-skeleton-container___GjZez_3-0-3{
466
+ .magritte-radio-skeleton-container___GjZez_3-0-5{
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-3{
473
+ .magritte-radio-skeleton___9TSLy_3-0-5{
450
474
  width:20px;
451
475
  height:20px;
452
476
  border-radius:50%;
package/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from './Checkbox';
2
- export * from './Radio';
3
- export * from './types';
1
+ export * from '@hh.ru/magritte-ui-checkbox-radio/Checkbox';
2
+ export * from '@hh.ru/magritte-ui-checkbox-radio/Radio';
3
+ export * from '@hh.ru/magritte-ui-checkbox-radio/types';
4
4
  export * from '@hh.ru/magritte-ui-theme-provider';
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-8949f700.js';
10
+ import './CheckboxSkeleton-tSHLWMZM.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-6e5e6e82.js';
14
+ import './RadioSkeleton-B7-fonV9.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.3",
3
+ "version": "3.0.5",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -16,17 +16,18 @@
16
16
  "eslint-test": "yarn root:eslint-test $(pwd)",
17
17
  "ts-config": "yarn root:ts-config $(pwd)",
18
18
  "ts-check": "yarn root:ts-check $(pwd)",
19
- "test": "yarn root:test $(pwd)"
19
+ "test": "yarn root:test $(pwd)",
20
+ "watch": "yarn root:watch $(pwd)"
20
21
  },
21
22
  "dependencies": {
22
- "@hh.ru/magritte-common-use-disabled": "1.0.8",
23
- "@hh.ru/magritte-common-use-loading-state": "1.0.4",
24
- "@hh.ru/magritte-design-tokens": "18.1.2",
25
- "@hh.ru/magritte-types": "4.0.1",
26
- "@hh.ru/magritte-ui-breakpoint": "4.0.2",
27
- "@hh.ru/magritte-ui-icon": "7.1.7",
28
- "@hh.ru/magritte-ui-skeleton": "2.1.5",
29
- "@hh.ru/magritte-ui-theme-provider": "1.1.23"
23
+ "@hh.ru/magritte-common-use-disabled": "1.0.9",
24
+ "@hh.ru/magritte-common-use-loading-state": "1.0.5",
25
+ "@hh.ru/magritte-design-tokens": "18.2.1",
26
+ "@hh.ru/magritte-types": "4.0.2",
27
+ "@hh.ru/magritte-ui-breakpoint": "4.0.3",
28
+ "@hh.ru/magritte-ui-icon": "7.1.9",
29
+ "@hh.ru/magritte-ui-skeleton": "2.1.7",
30
+ "@hh.ru/magritte-ui-theme-provider": "1.1.25"
30
31
  },
31
32
  "peerDependencies": {
32
33
  "classnames": ">=2.3.2",
@@ -35,5 +36,5 @@
35
36
  "publishConfig": {
36
37
  "access": "public"
37
38
  },
38
- "gitHead": "a72846c6f393720276c3a8abcbd754142906f5d1"
39
- }
39
+ "gitHead": "bdbcf07ae5f66002ea09633961d0c9c008c70cd6"
40
+ }
package/CheckboxSkeleton-8949f700.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-3","checkboxContainer":"magritte-checkbox_container___J-wPy_3-0-3","checkbox_input":"magritte-checkbox_input___tguDn_3-0-3","checkboxInput":"magritte-checkbox_input___tguDn_3-0-3","checkbox":"magritte-checkbox___xQHy4_3-0-3","icon_wrapper":"magritte-icon_wrapper___k96d9_3-0-3","iconWrapper":"magritte-icon_wrapper___k96d9_3-0-3","invalid":"magritte-invalid___6k7qT_3-0-3","checkbox-skeleton-container":"magritte-checkbox-skeleton-container___4uNYP_3-0-3","checkboxSkeletonContainer":"magritte-checkbox-skeleton-container___4uNYP_3-0-3","checkbox-skeleton":"magritte-checkbox-skeleton___uo6u7_3-0-3","checkboxSkeleton":"magritte-checkbox-skeleton___uo6u7_3-0-3","icon":"magritte-icon___q1TLo_3-0-3","iconHidden":"magritte-iconHidden___Sb3FQ_3-0-3"};
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-8949f700.js.map
package/RadioSkeleton-6e5e6e82.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-3","radioContainer":"magritte-radio_container___FI0P7_3-0-3","radio_input":"magritte-radio_input___-puK7_3-0-3","radioInput":"magritte-radio_input___-puK7_3-0-3","radio":"magritte-radio___diMe7_3-0-3","icon_wrapper":"magritte-icon_wrapper___qj1JL_3-0-3","iconWrapper":"magritte-icon_wrapper___qj1JL_3-0-3","invalid":"magritte-invalid___1vONj_3-0-3","radio-skeleton-container":"magritte-radio-skeleton-container___GjZez_3-0-3","radioSkeletonContainer":"magritte-radio-skeleton-container___GjZez_3-0-3","radio-skeleton":"magritte-radio-skeleton___9TSLy_3-0-3","radioSkeleton":"magritte-radio-skeleton___9TSLy_3-0-3"};
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-6e5e6e82.js.map