@hh.ru/magritte-ui-checkable-card 3.0.2

package/CheckableCard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const CheckableCardComponent: import("react").ForwardRefExoticComponent<import("./types").CheckableCardNativeProps & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, keyof import("@hh.ru/magritte-ui-checkable-card/types").CheckableCardBaseProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const CheckableCard: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<import("@hh.ru/magritte-ui-checkable-card/types").CheckableCardNativeProps & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, keyof import("@hh.ru/magritte-ui-checkable-card/types").CheckableCardBaseProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/CheckableCard.js

@@ -0,0 +1,72 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useLayoutEffect } from 'react';
+import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { CheckableCardElement } from './CheckableCardElement.js';
+import { CheckableCardSkeleton } from './Skeleton.js';
+import { useScrollContext } from '@hh.ru/magritte-ui-scrollable-container';
+import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
+import 'classnames';
+import './checkable-card-73f694b1.js';
+import '@hh.ru/magritte-common-use-loading-state';
+
+const CheckableCardComponent = forwardRef(({ children, padding = 0, paddingLeft, paddingRight, paddingTop, paddingBottom, borderRadius = 0, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, toneHover, onFocus, onClick, disabled, type = 'checkbox', flexible, labelDataQa, ...inputProps }, ref) => {
+    const contentRef = useRef(null);
+    const inputRef = useRef(null);
+    const forceDisabled = useDisabled();
+    const { registerItem, removeItem, scrollToItem } = useScrollContext();
+    const stopKeyboardEventPropagation = (event) => {
+        if (event.target === inputRef.current ||
+            !keyboardMatches(event, [keyboardKeys.Space, keyboardKeys.Enter])) {
+            return;
+        }
+        event.stopPropagation();
+        inputRef.current?.dispatchEvent(new KeyboardEvent(event.type, { key: event.key, code: event.code }));
+    };
+    useLayoutEffect(() => {
+        registerItem(contentRef);
+        return () => removeItem(contentRef);
+    }, [registerItem, removeItem]);
+    useLayoutEffect(() => {
+        if ((inputProps.checked || inputProps.defaultChecked) && type === 'radio' && contentRef.current) {
+            scrollToItem(contentRef);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const props = {
+        padding,
+        paddingLeft,
+        paddingRight,
+        paddingTop,
+        paddingBottom,
+        borderRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        disabled,
+        toneHover,
+        flexible,
+        'data-qa': labelDataQa,
+    };
+    return (jsx(CheckableCardElement, { ...props, onClickCapture: (event) => {
+            if (event.target === inputRef.current) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            inputRef.current?.click();
+        }, padding: padding, borderRadius: borderRadius, onKeyDownCapture: stopKeyboardEventPropagation, onKeyPressCapture: stopKeyboardEventPropagation, onKeyUpCapture: stopKeyboardEventPropagation, input: jsx("input", { ...inputProps, ref: inputRef, type: type, disabled: !!disabled || forceDisabled, onFocus: (event) => {
+                onFocus?.(event);
+                scrollToItem(contentRef);
+            }, onClick: (event) => {
+                onClick?.(event);
+                scrollToItem(contentRef);
+            } }), Element: "label", labelRef: ref, contentRef: contentRef, disabled: !!disabled || forceDisabled, children: children }));
+});
+CheckableCardComponent.displayName = 'CheckableCard';
+const CheckableCard = enrichWithSkeleton(CheckableCardComponent, CheckableCardSkeleton);
+
+export { CheckableCard, CheckableCardComponent };
+//# sourceMappingURL=CheckableCard.js.map

package/CheckableCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckableCard.js","sources":["../src/CheckableCard.tsx"],"sourcesContent":["import { KeyboardEventHandler, PropsWithChildren, forwardRef, useLayoutEffect, useRef } from 'react';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { CheckableCardSkeleton } from '@hh.ru/magritte-ui-checkable-card/Skeleton';\nimport { CheckableCardProps } from '@hh.ru/magritte-ui-checkable-card/types';\nimport { useScrollContext } from '@hh.ru/magritte-ui-scrollable-container';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\n\nexport const CheckableCardComponent = forwardRef<HTMLLabelElement, PropsWithChildren<CheckableCardProps>>(\n    (\n        {\n            children,\n            padding = 0,\n            paddingLeft,\n            paddingRight,\n            paddingTop,\n            paddingBottom,\n            borderRadius = 0,\n            borderTopLeftRadius,\n            borderTopRightRadius,\n            borderBottomLeftRadius,\n            borderBottomRightRadius,\n            toneHover,\n            onFocus,\n            onClick,\n            disabled,\n            type = 'checkbox',\n            flexible,\n            labelDataQa,\n            ...inputProps\n        },\n        ref\n    ) => {\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement>(null);\n        const forceDisabled = useDisabled();\n\n        const { registerItem, removeItem, scrollToItem } = useScrollContext();\n\n        const stopKeyboardEventPropagation: KeyboardEventHandler<HTMLLabelElement> = (event) => {\n            if (\n                event.target === inputRef.current ||\n                !keyboardMatches(event as unknown as KeyboardEvent, [keyboardKeys.Space, keyboardKeys.Enter])\n            ) {\n                return;\n            }\n            event.stopPropagation();\n            inputRef.current?.dispatchEvent(new KeyboardEvent(event.type, { key: event.key, code: event.code }));\n        };\n\n        useLayoutEffect(() => {\n            registerItem(contentRef);\n            return () => removeItem(contentRef);\n        }, [registerItem, removeItem]);\n\n        useLayoutEffect(() => {\n            if ((inputProps.checked || inputProps.defaultChecked) && type === 'radio' && contentRef.current) {\n                scrollToItem(contentRef);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n\n        const props = {\n            padding,\n            paddingLeft,\n            paddingRight,\n            paddingTop,\n            paddingBottom,\n            borderRadius,\n            borderTopLeftRadius,\n            borderTopRightRadius,\n            borderBottomLeftRadius,\n            borderBottomRightRadius,\n            disabled,\n            toneHover,\n            flexible,\n            'data-qa': labelDataQa,\n        };\n\n        return (\n            <CheckableCardElement\n                {...props}\n                onClickCapture={(event) => {\n                    if (event.target === inputRef.current) {\n                        return;\n                    }\n                    event.preventDefault();\n                    event.stopPropagation();\n                    inputRef.current?.click();\n                }}\n                padding={padding}\n                borderRadius={borderRadius}\n                onKeyDownCapture={stopKeyboardEventPropagation}\n                onKeyPressCapture={stopKeyboardEventPropagation}\n                onKeyUpCapture={stopKeyboardEventPropagation}\n                input={\n                    <input\n                        {...inputProps}\n                        ref={inputRef}\n                        type={type}\n                        disabled={!!disabled || forceDisabled}\n                        onFocus={(event) => {\n                            onFocus?.(event);\n                            scrollToItem(contentRef);\n                        }}\n                        onClick={(event) => {\n                            onClick?.(event);\n                            scrollToItem(contentRef);\n                        }}\n                    />\n                }\n                Element=\"label\"\n                labelRef={ref}\n                contentRef={contentRef}\n                disabled={!!disabled || forceDisabled}\n            >\n                {children}\n            </CheckableCardElement>\n        );\n    }\n);\n\nCheckableCardComponent.displayName = 'CheckableCard';\n\nexport const CheckableCard = enrichWithSkeleton(CheckableCardComponent, CheckableCardSkeleton);\n"],"names":["_jsx"],"mappings":"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"}

package/CheckableCardContainer.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { ScrollableContainerProps } from '@hh.ru/magritte-ui-scrollable-container';
+export declare const CheckableCardScrollableContainer: FC<PropsWithChildren<ScrollableContainerProps>>;

package/CheckableCardContainer.js

@@ -0,0 +1,12 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { ScrollableContainer } from '@hh.ru/magritte-ui-scrollable-container';
+import { s as styles } from './checkable-card-73f694b1.js';
+
+const CheckableCardScrollableContainer = ({ disableButtons, children, ...containerProps }) => {
+    return (jsx(ScrollableContainer, { "data-qa": "checkable-card-scrollable-container", ...containerProps, disableButtons: disableButtons, children: jsx("div", { className: classnames(styles.scrollContainer, { [styles.scrollContainerMobile]: !!disableButtons }), children: children }) }));
+};
+
+export { CheckableCardScrollableContainer };
+//# sourceMappingURL=CheckableCardContainer.js.map

package/CheckableCardContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckableCardContainer.js","sources":["../src/CheckableCardContainer.tsx"],"sourcesContent":["import { FC, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nimport { ScrollableContainer, ScrollableContainerProps } from '@hh.ru/magritte-ui-scrollable-container';\n\nimport styles from './checkable-card.less';\n\nexport const CheckableCardScrollableContainer: FC<PropsWithChildren<ScrollableContainerProps>> = ({\n    disableButtons,\n    children,\n    ...containerProps\n}) => {\n    return (\n        <ScrollableContainer\n            data-qa=\"checkable-card-scrollable-container\"\n            {...containerProps}\n            disableButtons={disableButtons}\n        >\n            <div className={classnames(styles.scrollContainer, { [styles.scrollContainerMobile]: !!disableButtons })}>\n                {children}\n            </div>\n        </ScrollableContainer>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAOO,MAAM,gCAAgC,GAAoD,CAAC,EAC9F,cAAc,EACd,QAAQ,EACR,GAAG,cAAc,EACpB,KAAI;AACD,IAAA,QACIA,GAAC,CAAA,mBAAmB,EACR,EAAA,SAAA,EAAA,qCAAqC,KACzC,cAAc,EAClB,cAAc,EAAE,cAAc,EAE9B,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC,MAAM,CAAC,qBAAqB,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC,EAAA,QAAA,EACnG,QAAQ,EACP,CAAA,EAAA,CACY,EACxB;AACN;;;;"}

package/CheckableCardElement.d.ts

@@ -0,0 +1,2 @@
+import type { CheckableCardElementProps } from './types';
+export declare const CheckableCardElement: CheckableCardElementProps;

package/CheckableCardElement.js

@@ -0,0 +1,36 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
+import { s as styles } from './checkable-card-73f694b1.js';
+
+const genBorderRadiusClasses = (radiusProps) => Object.entries(radiusProps).reduce((acc, [key, value]) => value !== undefined ? [...acc, styles[`border${key}Radius${value}`]] : acc, []);
+const genPaddingProps = (paddingProps) => Object.entries(paddingProps).reduce((acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc), {});
+const CheckableCardElement = ({ children, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, toneHover, disabled, flexible, Element = 'div', input, labelRef, contentRef, checked = false, focusVisible = false, ...props }) => {
+    const paddingProps = genPaddingProps({
+        Left: paddingLeft,
+        Right: paddingRight,
+        Top: paddingTop,
+        Bottom: paddingBottom,
+    });
+    const forceDisabled = useDisabled();
+    return (jsxs(Element, { ...props, className: classnames(styles.card, styles[`borderRadius${borderRadius}`], genBorderRadiusClasses({
+            TopLeft: borderTopLeftRadius,
+            TopRight: borderTopRightRadius,
+            BottomLeft: borderBottomLeftRadius,
+            BottomRight: borderBottomRightRadius,
+        }), {
+            [styles.cardDisabled]: forceDisabled || !!disabled,
+            [styles.cardChecked]: checked,
+            [styles.cardHugContent]: !flexible,
+            [styles.cardToneHover]: toneHover,
+            'focus-visible': focusVisible,
+        }), "data-interactive": true, ref: (current) => {
+            if (labelRef && 'current' in labelRef) {
+                labelRef.current = current;
+            }
+        }, tabIndex: input || forceDisabled || !!disabled ? -1 : 0, children: [input, jsx("div", { className: styles.content, ref: contentRef, children: jsx("div", { className: styles.contentBorderContainer, style: { padding, ...paddingProps }, children: jsx("div", { className: styles.contentOpacityContainer, children: jsx(DisabledContext.Provider, { value: forceDisabled || !!disabled, children: children }) }) }) })] }));
+};
+
+export { CheckableCardElement };
+//# sourceMappingURL=CheckableCardElement.js.map

package/CheckableCardElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckableCardElement.js","sources":["../src/CheckableCardElement.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport type {\n    CheckableCardElementProps,\n    CheckableCardBorderRadius,\n    CheckableCardPadding,\n} from '@hh.ru/magritte-ui-checkable-card/types';\n\nimport styles from './checkable-card.less';\n\nconst genBorderRadiusClasses = (radiusProps: {\n    TopLeft?: CheckableCardBorderRadius;\n    TopRight?: CheckableCardBorderRadius;\n    BottomLeft?: CheckableCardBorderRadius;\n    BottomRight?: CheckableCardBorderRadius;\n}) =>\n    Object.entries(radiusProps).reduce<string[]>(\n        (acc, [key, value]) =>\n            value !== undefined ? [...acc, styles[`border${key as keyof typeof radiusProps}Radius${value}`]] : acc,\n        []\n    );\n\nconst genPaddingProps = (paddingProps: {\n    Left?: CheckableCardPadding;\n    Right?: CheckableCardPadding;\n    Top?: CheckableCardPadding;\n    Bottom?: CheckableCardPadding;\n}) =>\n    Object.entries(paddingProps).reduce<Record<string, number>>(\n        (acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc),\n        {}\n    );\n\nexport const CheckableCardElement: CheckableCardElementProps = ({\n    children,\n    padding,\n    paddingLeft,\n    paddingRight,\n    paddingTop,\n    paddingBottom,\n    borderRadius,\n    borderTopLeftRadius,\n    borderTopRightRadius,\n    borderBottomLeftRadius,\n    borderBottomRightRadius,\n    toneHover,\n    disabled,\n    flexible,\n    Element = 'div',\n    input,\n    labelRef,\n    contentRef,\n    checked = false,\n    focusVisible = false,\n    ...props\n}) => {\n    const paddingProps = genPaddingProps({\n        Left: paddingLeft,\n        Right: paddingRight,\n        Top: paddingTop,\n        Bottom: paddingBottom,\n    });\n\n    const forceDisabled = useDisabled();\n\n    return (\n        <Element\n            {...props}\n            className={classnames(\n                styles.card,\n                styles[`borderRadius${borderRadius}`],\n                genBorderRadiusClasses({\n                    TopLeft: borderTopLeftRadius,\n                    TopRight: borderTopRightRadius,\n                    BottomLeft: borderBottomLeftRadius,\n                    BottomRight: borderBottomRightRadius,\n                }),\n                {\n                    [styles.cardDisabled]: forceDisabled || !!disabled,\n                    [styles.cardChecked]: checked,\n                    [styles.cardHugContent]: !flexible,\n                    [styles.cardToneHover]: toneHover,\n                    'focus-visible': focusVisible,\n                }\n            )}\n            data-interactive={true}\n            ref={(current: HTMLDivElement | HTMLLabelElement | null) => {\n                if (labelRef && 'current' in labelRef) {\n                    labelRef.current = current;\n                }\n            }}\n            tabIndex={input || forceDisabled || !!disabled ? -1 : 0}\n        >\n            {input}\n            <div className={styles.content} ref={contentRef}>\n                <div className={styles.contentBorderContainer} style={{ padding, ...paddingProps }}>\n                    <div className={styles.contentOpacityContainer}>\n                        <DisabledContext.Provider value={forceDisabled || !!disabled}>\n                            {children}\n                        </DisabledContext.Provider>\n                    </div>\n                </div>\n            </div>\n        </Element>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/Skeleton.d.ts

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

package/Skeleton.js

@@ -0,0 +1,19 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';
+import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
+import { s as styles } from './checkable-card-73f694b1.js';
+
+const CheckableCardSkeleton = ({ Component: CheckableCard, 
+// skeleton props
+width, height, inline, additionalClass, loading, ...cardProps }) => {
+    const isLoading = useLoadingState() || loading;
+    if (isLoading) {
+        return (jsx("div", { className: classnames(styles.cardSkeleton, { [styles.cardHugContent]: !cardProps.flexible }), children: jsx(Skeleton, { width: !cardProps.flexible ? width : `100%`, height: !cardProps.flexible ? height : `100%`, borderRadius: cardProps.borderRadius, borderTopLeftRadius: cardProps.borderTopLeftRadius, borderTopRightRadius: cardProps.borderTopRightRadius, borderBottomLeftRadius: cardProps.borderBottomLeftRadius, borderBottomRightRadius: cardProps.borderBottomRightRadius, loading: loading }) }));
+    }
+    return jsx(CheckableCard, { ...cardProps });
+};
+
+export { CheckableCardSkeleton };
+//# sourceMappingURL=Skeleton.js.map

package/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../src/Skeleton.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { useLoadingState } from '@hh.ru/magritte-common-use-loading-state';\nimport { CheckableCardProps } from '@hh.ru/magritte-ui-checkable-card/types';\nimport { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './checkable-card.less';\n\nexport const CheckableCardSkeleton: IncompleteSkeletonComponent<CheckableCardProps> = ({\n    Component: CheckableCard,\n\n    // skeleton props\n    width,\n    height,\n    inline,\n    additionalClass,\n    loading,\n\n    ...cardProps\n}) => {\n    const isLoading = useLoadingState() || loading;\n\n    if (isLoading) {\n        return (\n            <div className={classnames(styles.cardSkeleton, { [styles.cardHugContent]: !cardProps.flexible })}>\n                <Skeleton\n                    width={!cardProps.flexible ? width : `100%`}\n                    height={!cardProps.flexible ? height : `100%`}\n                    borderRadius={cardProps.borderRadius}\n                    borderTopLeftRadius={cardProps.borderTopLeftRadius}\n                    borderTopRightRadius={cardProps.borderTopRightRadius}\n                    borderBottomLeftRadius={cardProps.borderBottomLeftRadius}\n                    borderBottomRightRadius={cardProps.borderBottomRightRadius}\n                    loading={loading}\n                />\n            </div>\n        );\n    }\n\n    return <CheckableCard {...cardProps} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAQa,qBAAqB,GAAoD,CAAC,EACnF,SAAS,EAAE,aAAa;AAExB;AACA,KAAK,EACL,MAAM,EACN,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,SAAS,GAAG,eAAe,EAAE,IAAI,OAAO,CAAC;AAE/C,IAAA,IAAI,SAAS,EAAE;QACX,QACIA,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,EAC7F,QAAA,EAAAA,GAAA,CAAC,QAAQ,EACL,EAAA,KAAK,EAAE,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,GAAG,MAAM,EAC3C,MAAM,EAAE,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,EAC7C,YAAY,EAAE,SAAS,CAAC,YAAY,EACpC,mBAAmB,EAAE,SAAS,CAAC,mBAAmB,EAClD,oBAAoB,EAAE,SAAS,CAAC,oBAAoB,EACpD,sBAAsB,EAAE,SAAS,CAAC,sBAAsB,EACxD,uBAAuB,EAAE,SAAS,CAAC,uBAAuB,EAC1D,OAAO,EAAE,OAAO,EAAA,CAClB,EACA,CAAA,EACR;AACL,KAAA;AAED,IAAA,OAAOA,GAAC,CAAA,aAAa,EAAK,EAAA,GAAA,SAAS,GAAI,CAAC;AAC5C;;;;"}

package/checkable-card-73f694b1.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"card":"magritte-card___kxw8G_3-0-2","card-skeleton":"magritte-card-skeleton___QeWAi_3-0-2","cardSkeleton":"magritte-card-skeleton___QeWAi_3-0-2","card_disabled":"magritte-card_disabled___VY399_3-0-2","cardDisabled":"magritte-card_disabled___VY399_3-0-2","card_hug-content":"magritte-card_hug-content___5HzPo_3-0-2","cardHugContent":"magritte-card_hug-content___5HzPo_3-0-2","content":"magritte-content___8L-gU_3-0-2","content-border-container":"magritte-content-border-container___nYgS5_3-0-2","contentBorderContainer":"magritte-content-border-container___nYgS5_3-0-2","content-opacity-container":"magritte-content-opacity-container___6F4WI_3-0-2","contentOpacityContainer":"magritte-content-opacity-container___6F4WI_3-0-2","card_checked":"magritte-card_checked___nN6ga_3-0-2","cardChecked":"magritte-card_checked___nN6ga_3-0-2","card_tone-hover":"magritte-card_tone-hover___t2ICs_3-0-2","cardToneHover":"magritte-card_tone-hover___t2ICs_3-0-2","disabled":"magritte-disabled___Ab4OC_3-0-2","border-radius-0":"magritte-border-radius-0___--hCS_3-0-2","borderRadius0":"magritte-border-radius-0___--hCS_3-0-2","border-top-left-radius-0":"magritte-border-top-left-radius-0___IV8UU_3-0-2","borderTopLeftRadius0":"magritte-border-top-left-radius-0___IV8UU_3-0-2","border-top-right-radius-0":"magritte-border-top-right-radius-0___eBVf0_3-0-2","borderTopRightRadius0":"magritte-border-top-right-radius-0___eBVf0_3-0-2","border-bottom-left-radius-0":"magritte-border-bottom-left-radius-0___jmTBk_3-0-2","borderBottomLeftRadius0":"magritte-border-bottom-left-radius-0___jmTBk_3-0-2","border-bottom-right-radius-0":"magritte-border-bottom-right-radius-0___D-Fs-_3-0-2","borderBottomRightRadius0":"magritte-border-bottom-right-radius-0___D-Fs-_3-0-2","border-radius-12":"magritte-border-radius-12___ihVXv_3-0-2","borderRadius12":"magritte-border-radius-12___ihVXv_3-0-2","border-top-left-radius-12":"magritte-border-top-left-radius-12___c-jEA_3-0-2","borderTopLeftRadius12":"magritte-border-top-left-radius-12___c-jEA_3-0-2","border-top-right-radius-12":"magritte-border-top-right-radius-12___UA8OT_3-0-2","borderTopRightRadius12":"magritte-border-top-right-radius-12___UA8OT_3-0-2","border-bottom-left-radius-12":"magritte-border-bottom-left-radius-12___fJtJ7_3-0-2","borderBottomLeftRadius12":"magritte-border-bottom-left-radius-12___fJtJ7_3-0-2","border-bottom-right-radius-12":"magritte-border-bottom-right-radius-12___2FNgs_3-0-2","borderBottomRightRadius12":"magritte-border-bottom-right-radius-12___2FNgs_3-0-2","border-radius-16":"magritte-border-radius-16___6eKmx_3-0-2","borderRadius16":"magritte-border-radius-16___6eKmx_3-0-2","border-top-left-radius-16":"magritte-border-top-left-radius-16___tZAjN_3-0-2","borderTopLeftRadius16":"magritte-border-top-left-radius-16___tZAjN_3-0-2","border-top-right-radius-16":"magritte-border-top-right-radius-16___1S1ct_3-0-2","borderTopRightRadius16":"magritte-border-top-right-radius-16___1S1ct_3-0-2","border-bottom-left-radius-16":"magritte-border-bottom-left-radius-16___i0GAm_3-0-2","borderBottomLeftRadius16":"magritte-border-bottom-left-radius-16___i0GAm_3-0-2","border-bottom-right-radius-16":"magritte-border-bottom-right-radius-16___cGBZM_3-0-2","borderBottomRightRadius16":"magritte-border-bottom-right-radius-16___cGBZM_3-0-2","border-radius-24":"magritte-border-radius-24___ulqxw_3-0-2","borderRadius24":"magritte-border-radius-24___ulqxw_3-0-2","border-top-left-radius-24":"magritte-border-top-left-radius-24___kJKz-_3-0-2","borderTopLeftRadius24":"magritte-border-top-left-radius-24___kJKz-_3-0-2","border-top-right-radius-24":"magritte-border-top-right-radius-24___h4WrI_3-0-2","borderTopRightRadius24":"magritte-border-top-right-radius-24___h4WrI_3-0-2","border-bottom-left-radius-24":"magritte-border-bottom-left-radius-24___CwCs8_3-0-2","borderBottomLeftRadius24":"magritte-border-bottom-left-radius-24___CwCs8_3-0-2","border-bottom-right-radius-24":"magritte-border-bottom-right-radius-24___PIRfH_3-0-2","borderBottomRightRadius24":"magritte-border-bottom-right-radius-24___PIRfH_3-0-2","border-radius-32":"magritte-border-radius-32___Bvm7h_3-0-2","borderRadius32":"magritte-border-radius-32___Bvm7h_3-0-2","border-top-left-radius-32":"magritte-border-top-left-radius-32___QVqKC_3-0-2","borderTopLeftRadius32":"magritte-border-top-left-radius-32___QVqKC_3-0-2","border-top-right-radius-32":"magritte-border-top-right-radius-32___7a2qq_3-0-2","borderTopRightRadius32":"magritte-border-top-right-radius-32___7a2qq_3-0-2","border-bottom-left-radius-32":"magritte-border-bottom-left-radius-32___cmrmL_3-0-2","borderBottomLeftRadius32":"magritte-border-bottom-left-radius-32___cmrmL_3-0-2","border-bottom-right-radius-32":"magritte-border-bottom-right-radius-32___yMDwz_3-0-2","borderBottomRightRadius32":"magritte-border-bottom-right-radius-32___yMDwz_3-0-2","border-radius-40":"magritte-border-radius-40___CSg91_3-0-2","borderRadius40":"magritte-border-radius-40___CSg91_3-0-2","border-top-left-radius-40":"magritte-border-top-left-radius-40___oANEa_3-0-2","borderTopLeftRadius40":"magritte-border-top-left-radius-40___oANEa_3-0-2","border-top-right-radius-40":"magritte-border-top-right-radius-40___TYtjf_3-0-2","borderTopRightRadius40":"magritte-border-top-right-radius-40___TYtjf_3-0-2","border-bottom-left-radius-40":"magritte-border-bottom-left-radius-40___-bPFb_3-0-2","borderBottomLeftRadius40":"magritte-border-bottom-left-radius-40___-bPFb_3-0-2","border-bottom-right-radius-40":"magritte-border-bottom-right-radius-40___ArdFn_3-0-2","borderBottomRightRadius40":"magritte-border-bottom-right-radius-40___ArdFn_3-0-2","scroll-container":"magritte-scroll-container___FuttX_3-0-2","scrollContainer":"magritte-scroll-container___FuttX_3-0-2","scroll-container-mobile":"magritte-scroll-container-mobile___9y-d7_3-0-2","scrollContainerMobile":"magritte-scroll-container-mobile___9y-d7_3-0-2"};
+
+export { styles as s };
+//# sourceMappingURL=checkable-card-73f694b1.js.map

package/checkable-card-73f694b1.js.map

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

package/index.css

@@ -0,0 +1,478 @@
+:root{
+  --magritte-color-component-checkable-card-background-unchecked-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-card-background-state-unchecked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-card-background-state-unchecked-pressed-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-card-background-state-unchecked-tone-hovered-v18-1-1:#F1F4F9;
+  --magritte-color-component-checkable-card-background-state-unchecked-tone-pressed-v18-1-1:#F1F4F9;
+  --magritte-color-component-checkable-card-background-state-unchecked-disabled-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-card-background-state-checked-hovered-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-card-background-state-checked-pressed-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-card-background-state-checked-tone-hovered-v18-1-1:#F1F4F9;
+  --magritte-color-component-checkable-card-background-state-checked-tone-pressed-v18-1-1:#F1F4F9;
+  --magritte-color-component-checkable-card-background-state-checked-disabled-v18-1-1:#ffffff;
+  --magritte-color-component-checkable-card-stroke-unchecked-v18-1-1:#DCE3EB;
+  --magritte-color-component-checkable-card-stroke-checked-v18-1-1:#0070ff;
+  --magritte-color-component-checkable-card-stroke-state-unchecked-hovered-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-card-stroke-state-unchecked-pressed-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-card-stroke-state-checked-hovered-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-card-stroke-state-checked-pressed-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-card-stroke-state-unchecked-disabled-v18-1-1:#DCE3EB;
+  --magritte-color-component-checkable-card-stroke-state-checked-disabled-v18-1-1:#CCD5DF;
+  --magritte-color-component-checkable-card-stroke-state-focused-accessible-v18-1-1:#0070ff7a;
+}
+:root{
+  --magritte-semantic-opacity-disabled-v18-1-1:48%;
+  --magritte-semantic-border-radius-form-v18-1-1:12px;
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v18-1-1:200ms;
+  --magritte-static-border-radius-0-v18-1-1:0px;
+  --magritte-static-border-radius-400-v18-1-1:16px;
+  --magritte-static-border-radius-600-v18-1-1:24px;
+  --magritte-static-border-radius-800-v18-1-1:32px;
+  --magritte-static-border-radius-1000-v18-1-1:40px;
+}
+.magritte-night-theme{
+  --magritte-color-component-checkable-card-background-unchecked-v18-1-1:#1B1B1B;
+  --magritte-color-component-checkable-card-background-state-unchecked-hovered-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-unchecked-pressed-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-unchecked-tone-hovered-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-unchecked-tone-pressed-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-unchecked-disabled-v18-1-1:#1B1B1B;
+  --magritte-color-component-checkable-card-background-state-checked-hovered-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-checked-pressed-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-checked-tone-hovered-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-checked-tone-pressed-v18-1-1:#262626;
+  --magritte-color-component-checkable-card-background-state-checked-disabled-v18-1-1:#1B1B1B;
+  --magritte-color-component-checkable-card-stroke-unchecked-v18-1-1:#303030;
+  --magritte-color-component-checkable-card-stroke-checked-v18-1-1:#2b7fff;
+  --magritte-color-component-checkable-card-stroke-state-unchecked-hovered-v18-1-1:#3B3B3B;
+  --magritte-color-component-checkable-card-stroke-state-unchecked-pressed-v18-1-1:#3B3B3B;
+  --magritte-color-component-checkable-card-stroke-state-checked-hovered-v18-1-1:#468ffd;
+  --magritte-color-component-checkable-card-stroke-state-checked-pressed-v18-1-1:#468ffd;
+  --magritte-color-component-checkable-card-stroke-state-unchecked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-card-stroke-state-checked-disabled-v18-1-1:#303030;
+  --magritte-color-component-checkable-card-stroke-state-focused-accessible-v18-1-1:#0070ff7a;
+}
+.magritte-card___kxw8G_3-0-2{
+  display:inline-flex;
+  flex:1 1 auto;
+  align-items:stretch;
+  justify-items:stretch;
+  cursor:pointer;
+}
+.magritte-card___kxw8G_3-0-2 > input{
+  position:absolute;
+  clip-path:inset(100%);
+  clip:rect(0 0 0 0);
+}
+.magritte-card-skeleton___QeWAi_3-0-2{
+  display:inline-flex;
+  flex:1 1 auto;
+  align-items:stretch;
+  justify-items:stretch;
+}
+.magritte-card_disabled___VY399_3-0-2{
+  cursor:default;
+}
+.magritte-card_hug-content___5HzPo_3-0-2{
+  flex:0 0 auto;
+}
+.magritte-content___8L-gU_3-0-2{
+  display:inline-flex;
+  flex:1 1 auto;
+  align-items:stretch;
+  justify-items:stretch;
+  overflow:hidden;
+}
+.magritte-content-border-container___nYgS5_3-0-2{
+  display:inline-flex;
+  flex:1 1 auto;
+  align-items:stretch;
+  justify-items:stretch;
+  position:relative;
+  transition:background-color var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+  background-color:var(--magritte-color-component-checkable-card-background-unchecked-v18-1-1);
+}
+.magritte-content-border-container___nYgS5_3-0-2::before{
+  content:'';
+  position:absolute;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  z-index:1;
+  pointer-events:none;
+  transition:border-color var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+  border:1px solid var(--magritte-color-component-checkable-card-stroke-unchecked-v18-1-1);
+}
+.magritte-content-opacity-container___6F4WI_3-0-2{
+  display:flex;
+  flex:1 1 auto;
+}
+.magritte-card___kxw8G_3-0-2 > input:checked + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before,
+.magritte-card___kxw8G_3-0-2.magritte-card_checked___nN6ga_3-0-2 .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-color:var(--magritte-color-component-checkable-card-stroke-checked-v18-1-1);
+  border-width:2px;
+}
+.magritte-card___kxw8G_3-0-2 > input.focus-visible + .magritte-content___8L-gU_3-0-2,
+.magritte-card___kxw8G_3-0-2.focus-visible .magritte-content___8L-gU_3-0-2{
+  outline:var(--magritte-color-component-checkable-card-stroke-state-focused-accessible-v18-1-1) solid 4px;
+}
+.magritte-card___kxw8G_3-0-2 > input:disabled + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-card_disabled___VY399_3-0-2 .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2{
+  background-color:var(--magritte-color-component-checkable-card-background-state-unchecked-disabled-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2 > input:disabled + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before,
+.magritte-card___kxw8G_3-0-2.magritte-card_disabled___VY399_3-0-2 .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-color:var(--magritte-color-component-checkable-card-stroke-state-unchecked-disabled-v18-1-1);
+  border-width:1px;
+}
+.magritte-card___kxw8G_3-0-2 > input:checked:disabled + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-card_checked___nN6ga_3-0-2.magritte-card_disabled___VY399_3-0-2 .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2{
+  background-color:var(--magritte-color-component-checkable-card-background-state-checked-disabled-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2 > input:checked:disabled + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before,
+.magritte-card___kxw8G_3-0-2.magritte-card_checked___nN6ga_3-0-2.magritte-card_disabled___VY399_3-0-2 .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-color:var(--magritte-color-component-checkable-card-stroke-state-checked-disabled-v18-1-1);
+  border-width:2px;
+}
+.magritte-card___kxw8G_3-0-2 > input:disabled + .magritte-content___8L-gU_3-0-2 .magritte-content-opacity-container___6F4WI_3-0-2,
+.magritte-card_disabled___VY399_3-0-2 .magritte-content___8L-gU_3-0-2 .magritte-content-opacity-container___6F4WI_3-0-2{
+  opacity:var(--magritte-semantic-opacity-disabled-v18-1-1);
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2 > input:not(:active):not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2:not(:active):not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-unchecked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2 > input:not(:active):not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before,
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2:not(:active):not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before{
+    border-color:var(--magritte-color-component-checkable-card-stroke-state-unchecked-hovered-v18-1-1);
+    border-width:1px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2 > input:not(:active):not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2:not(:active):not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-unchecked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2 > input:not(:active):not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before,
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2:not(:active):not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before{
+    border-color:var(--magritte-color-component-checkable-card-stroke-state-unchecked-hovered-v18-1-1);
+    border-width:1px;
+  }
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2 > input:not(:active):checked:not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2:not(:active).magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-checked-hovered-v18-1-1);
+  }
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2 > input:not(:active):checked:not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before,
+  body.magritte-old-layout .magritte-card___kxw8G_3-0-2:not(:active).magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before{
+    border-color:var(--magritte-color-component-checkable-card-stroke-state-checked-hovered-v18-1-1);
+    border-width:2px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2 > input:not(:active):checked:not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2:not(:active).magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-checked-hovered-v18-1-1);
+  }
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2 > input:not(:active):checked:not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before,
+  body:not(.magritte-old-layout) .magritte-card___kxw8G_3-0-2:not(:active).magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2::before{
+    border-color:var(--magritte-color-component-checkable-card-stroke-state-checked-hovered-v18-1-1);
+    border-width:2px;
+  }
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-card_tone-hover___t2ICs_3-0-2 > input:not(:active):not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body.magritte-old-layout .magritte-card_tone-hover___t2ICs_3-0-2:not(:active):not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-unchecked-tone-hovered-v18-1-1);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-card_tone-hover___t2ICs_3-0-2 > input:not(:active):not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body:not(.magritte-old-layout) .magritte-card_tone-hover___t2ICs_3-0-2:not(:active):not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-unchecked-tone-hovered-v18-1-1);
+  }
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-card_tone-hover___t2ICs_3-0-2 > input:not(:active):checked:not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body.magritte-old-layout .magritte-card_tone-hover___t2ICs_3-0-2:not(:active).magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-checked-tone-hovered-v18-1-1);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-card_tone-hover___t2ICs_3-0-2 > input:not(:active):checked:not(:disabled) + .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2,
+  body:not(.magritte-old-layout) .magritte-card_tone-hover___t2ICs_3-0-2:not(:active).magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2:hover .magritte-content-border-container___nYgS5_3-0-2{
+    background-color:var(--magritte-color-component-checkable-card-background-state-checked-tone-hovered-v18-1-1);
+  }
+}
+.magritte-card___kxw8G_3-0-2 > input:active:not(:disabled) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2:active:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2{
+  background-color:var(--magritte-color-component-checkable-card-background-state-unchecked-pressed-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2 > input:active:not(:disabled) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before,
+.magritte-card___kxw8G_3-0-2:active:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-color:var(--magritte-color-component-checkable-card-stroke-state-unchecked-pressed-v18-1-1);
+  border-width:1px;
+}
+.magritte-card___kxw8G_3-0-2 > input:active:checked:not(:disabled) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2:active.magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2{
+  background-color:var(--magritte-color-component-checkable-card-background-state-checked-pressed-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2 > input:active:checked:not(:disabled) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before,
+.magritte-card___kxw8G_3-0-2:active.magritte-card_checked___nN6ga_3-0-2:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-color:var(--magritte-color-component-checkable-card-stroke-state-checked-pressed-v18-1-1);
+  border-width:2px;
+}
+.magritte-card_tone-hover___t2ICs_3-0-2 > input:active:not(.magritte-disabled___Ab4OC_3-0-2) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card_tone-hover___t2ICs_3-0-2:active:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2{
+  background-color:var(--magritte-color-component-checkable-card-background-state-unchecked-tone-pressed-v18-1-1);
+}
+.magritte-card_tone-hover___t2ICs_3-0-2 > input:active:not(.magritte-disabled___Ab4OC_3-0-2) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before,
+.magritte-card_tone-hover___t2ICs_3-0-2:active:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-color:var(--magritte-color-component-checkable-card-stroke-state-unchecked-pressed-v18-1-1);
+  border-width:1px;
+}
+.magritte-card_tone-hover___t2ICs_3-0-2 > input:active:checked:not(:disabled) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card_tone-hover___t2ICs_3-0-2.magritte-card_checked___nN6ga_3-0-2:active:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2{
+  background-color:var(--magritte-color-component-checkable-card-background-state-checked-tone-pressed-v18-1-1);
+}
+.magritte-card_tone-hover___t2ICs_3-0-2 > input:active:checked:not(:disabled) + .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before,
+.magritte-card_tone-hover___t2ICs_3-0-2.magritte-card_checked___nN6ga_3-0-2:active:not(.magritte-card_disabled___VY399_3-0-2) .magritte-content___8L-gU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-color:var(--magritte-color-component-checkable-card-stroke-state-checked-pressed-v18-1-1);
+  border-width:2px;
+}
+.magritte-border-radius-0___--hCS_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-border-radius-0___--hCS_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-border-radius-0___--hCS_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-0___IV8UU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-0___IV8UU_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-left-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-0___IV8UU_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-left-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-0___eBVf0_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-0___eBVf0_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-right-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-0___eBVf0_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-right-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-0___jmTBk_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-0___jmTBk_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-left-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-0___jmTBk_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-left-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-0___D-Fs-_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-0___D-Fs-_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-right-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-0___D-Fs-_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-right-radius:var(--magritte-static-border-radius-0-v18-1-1);
+}
+.magritte-border-radius-12___ihVXv_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-border-radius-12___ihVXv_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-border-radius-12___ihVXv_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-12___c-jEA_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-12___c-jEA_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-left-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-12___c-jEA_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-left-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-12___UA8OT_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-12___UA8OT_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-right-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-12___UA8OT_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-right-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-12___fJtJ7_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-12___fJtJ7_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-left-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-12___fJtJ7_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-left-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-12___2FNgs_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-12___2FNgs_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-right-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-12___2FNgs_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-right-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
+}
+.magritte-border-radius-16___6eKmx_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-border-radius-16___6eKmx_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-border-radius-16___6eKmx_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-16___tZAjN_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-16___tZAjN_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-left-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-16___tZAjN_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-left-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-16___1S1ct_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-16___1S1ct_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-right-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-16___1S1ct_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-right-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-16___i0GAm_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-16___i0GAm_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-left-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-16___i0GAm_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-left-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-16___cGBZM_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-16___cGBZM_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-right-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-16___cGBZM_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-right-radius:var(--magritte-static-border-radius-400-v18-1-1);
+}
+.magritte-border-radius-24___ulqxw_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-border-radius-24___ulqxw_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-border-radius-24___ulqxw_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-24___kJKz-_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-24___kJKz-_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-left-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-24___kJKz-_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-left-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-24___h4WrI_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-24___h4WrI_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-right-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-24___h4WrI_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-right-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-24___CwCs8_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-24___CwCs8_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-left-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-24___CwCs8_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-left-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-24___PIRfH_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-24___PIRfH_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-right-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-24___PIRfH_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-right-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-border-radius-32___Bvm7h_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-border-radius-32___Bvm7h_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-border-radius-32___Bvm7h_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-32___QVqKC_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-32___QVqKC_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-left-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-32___QVqKC_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-left-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-32___7a2qq_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-32___7a2qq_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-right-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-32___7a2qq_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-right-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-32___cmrmL_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-32___cmrmL_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-left-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-32___cmrmL_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-left-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-32___yMDwz_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-32___yMDwz_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-right-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-32___yMDwz_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-right-radius:var(--magritte-static-border-radius-800-v18-1-1);
+}
+.magritte-border-radius-40___CSg91_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-border-radius-40___CSg91_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-border-radius-40___CSg91_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-40___oANEa_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-40___oANEa_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-left-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-left-radius-40___oANEa_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-left-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-40___TYtjf_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-40___TYtjf_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-top-right-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-top-right-radius-40___TYtjf_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-top-right-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-40___-bPFb_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-40___-bPFb_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-left-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-left-radius-40___-bPFb_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-left-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-40___ArdFn_3-0-2 .magritte-content-border-container___nYgS5_3-0-2,
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-40___ArdFn_3-0-2 .magritte-content___8L-gU_3-0-2{
+  border-bottom-right-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-card___kxw8G_3-0-2.magritte-border-bottom-right-radius-40___ArdFn_3-0-2 .magritte-content-border-container___nYgS5_3-0-2::before{
+  border-bottom-right-radius:var(--magritte-static-border-radius-1000-v18-1-1);
+}
+.magritte-scroll-container___FuttX_3-0-2{
+  width:200%;
+}
+.magritte-scroll-container___FuttX_3-0-2 > *{
+  flex-wrap:wrap;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout  .magritte-scroll-container___FuttX_3-0-2:not(.magritte-scroll-container-mobile___9y-d7_3-0-2){
+    width:auto;
+  }
+  body.magritte-old-layout  .magritte-scroll-container___FuttX_3-0-2:not(.magritte-scroll-container-mobile___9y-d7_3-0-2) > *{
+    flex-wrap:nowrap;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout)  .magritte-scroll-container___FuttX_3-0-2:not(.magritte-scroll-container-mobile___9y-d7_3-0-2){
+    width:auto;
+  }
+  body:not(.magritte-old-layout)  .magritte-scroll-container___FuttX_3-0-2:not(.magritte-scroll-container-mobile___9y-d7_3-0-2) > *{
+    flex-wrap:nowrap;
+  }
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@hh.ru/magritte-ui-theme-provider';
+export { CheckableCard } from './CheckableCard';
+export { CheckableCardScrollableContainer } from './CheckableCardContainer';

package/index.js

@@ -0,0 +1,16 @@
+import './index.css';
+export * from '@hh.ru/magritte-ui-theme-provider';
+export { CheckableCard } from './CheckableCard.js';
+export { CheckableCardScrollableContainer } from './CheckableCardContainer.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-disabled';
+import './CheckableCardElement.js';
+import 'classnames';
+import './checkable-card-73f694b1.js';
+import './Skeleton.js';
+import '@hh.ru/magritte-common-use-loading-state';
+import '@hh.ru/magritte-ui-skeleton';
+import '@hh.ru/magritte-ui-scrollable-container';
+//# sourceMappingURL=index.js.map

package/index.js.map

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

package/index.mock.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent } from 'react';
+export * from './types';
+declare const ThemeProvider: any;
+export { ThemeProvider };
+export declare const CheckableCard: ForwardRefExoticComponent<Record<string, unknown>>;
+export declare const CheckableCardScrollableContainer: ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,14 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');
+const CheckableCard = mockComponent('CheckableCard', undefined, {
+    withChildren: true,
+});
+const CheckableCardScrollableContainer = mockComponent('CheckableCardScrollableContainer', undefined, {
+    withChildren: true,
+});
+
+export { CheckableCard, CheckableCardScrollableContainer, ThemeProvider };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport * from '@hh.ru/magritte-ui-checkable-card/types';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');\n\nexport { ThemeProvider };\n\nexport const CheckableCard: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n    'CheckableCard',\n    undefined,\n    {\n        withChildren: true,\n    }\n);\n\nexport const CheckableCardScrollableContainer: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n    'CheckableCardScrollableContainer',\n    undefined,\n    {\n        withChildren: true,\n    }\n);\n"],"names":[],"mappings":";;AAMA;AACM,MAAA,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,yCAAyC,EAAE;MAI3E,aAAa,GAAuD,aAAa,CAC1F,eAAe,EACf,SAAS,EACT;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EACH;MAEW,gCAAgC,GAAuD,aAAa,CAC7G,kCAAkC,EAClC,SAAS,EACT;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}

package/package.json

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

package/types.d.ts

@@ -0,0 +1,60 @@
+import { ForwardedRef, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { PropsWithCustomElement, PropsWithElement } from '@hh.ru/magritte-types';
+export type CheckableCardPadding = 0 | 8 | 12 | 16 | 24 | 32 | 40;
+export type CheckableCardBorderRadius = 0 | 12 | 16 | 24 | 32 | 40;
+export interface CheckableCardBaseProps {
+    /** Размер паддинга */
+    padding?: CheckableCardPadding;
+    /** Размер паддинга слева */
+    paddingLeft?: CheckableCardPadding;
+    /** Размер паддинга справа */
+    paddingRight?: CheckableCardPadding;
+    /** Размер паддинга сверху */
+    paddingTop?: CheckableCardPadding;
+    /** Размер паддинга снизу */
+    paddingBottom?: CheckableCardPadding;
+    /** Радиус скругления углов */
+    borderRadius?: CheckableCardBorderRadius;
+    /** Радиус скругления верхнего левого угла */
+    borderTopLeftRadius?: CheckableCardBorderRadius;
+    /** Радиус скругления верхнего правого угла */
+    borderTopRightRadius?: CheckableCardBorderRadius;
+    /** Радиус скругления нижнего левого угла */
+    borderBottomLeftRadius?: CheckableCardBorderRadius;
+    /** Радиус скругления нижнего правого угла */
+    borderBottomRightRadius?: CheckableCardBorderRadius;
+    /** При включении флага flex-shrink и flex-grow устанавливаются в 1 */
+    flexible?: boolean;
+    /** При становке флага фон элемента при наведении мыши становится более темным*/
+    toneHover?: boolean;
+    /** Флаг отключающий CheckableCard */
+    disabled?: boolean;
+    /** data-qa для элемента label */
+    labelDataQa?: string;
+}
+export interface CheckableCardElementBaseProps extends CheckableCardBaseProps {
+    input?: ReactNode;
+    checked?: boolean;
+    contentRef?: ForwardedRef<HTMLDivElement>;
+    Element?: 'label' | 'div';
+    /** Флаг включающий focus-visible состояние */
+    focusVisible?: boolean;
+}
+interface CheckableCardElementLabelProps extends CheckableCardElementBaseProps {
+    labelRef?: ForwardedRef<HTMLLabelElement>;
+}
+interface CheckableCardElementDivProps extends CheckableCardElementBaseProps {
+    labelRef?: ForwardedRef<HTMLDivElement>;
+}
+export type CheckableCardElementHelper<ElementType> = ElementType extends 'div' ? CheckableCardElementDivProps : CheckableCardElementLabelProps;
+export interface CheckableCardElementWithCustomElement<ComponentProps extends PropsWithElement, DefaultElement extends ComponentProps['Element'] | React.ComponentType<any>> {
+    <ElementType extends any = DefaultElement>(props: CheckableCardElementHelper<ComponentProps['Element']> & PropsWithCustomElement<ComponentProps, ElementType>): ReactElement | null;
+    displayName?: string;
+}
+export type CheckableCardElementProps = CheckableCardElementWithCustomElement<CheckableCardElementBaseProps, 'div'>;
+export interface CheckableCardNativeProps extends CheckableCardBaseProps {
+    /** Тип CheckableCard */
+    type: 'radio' | 'checkbox';
+}
+export type CheckableCardProps = CheckableCardNativeProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckableCardBaseProps>;
+export {};

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

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