@hh.ru/magritte-ui-card 6.0.2

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 (14) hide show
  1. package/Card.d.ts +2 -0
  2. package/Card.js +73 -0
  3. package/Card.js.map +1 -0
  4. package/Skeleton.d.ts +3 -0
  5. package/Skeleton.js +14 -0
  6. package/Skeleton.js.map +1 -0
  7. package/index.css +545 -0
  8. package/index.d.ts +3 -0
  9. package/index.js +13 -0
  10. package/index.js.map +1 -0
  11. package/package.json +42 -0
  12. package/types.d.ts +78 -0
  13. package/types.js +3 -0
  14. package/types.js.map +1 -0
package/Card.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { CardWithSkeleton } from './types';
2
+ export declare const Card: CardWithSkeleton;
package/Card.js ADDED
@@ -0,0 +1,73 @@
1
+ import './index.css';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { forwardRef, useRef, useCallback } from 'react';
4
+ import classnames from 'classnames';
5
+ import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
6
+ import { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';
7
+ import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
8
+ import { CardSkeleton } from './Skeleton.js';
9
+ import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
10
+ import { TextDynamic } from '@hh.ru/magritte-ui-typography';
11
+
12
+ var styles = {"card":"magritte-card___bhGKz_6-0-2","card-action":"magritte-card-action___4A43B_6-0-2","cardAction":"magritte-card-action___4A43B_6-0-2","card-disabled":"magritte-card-disabled___SMFnB_6-0-2","cardDisabled":"magritte-card-disabled___SMFnB_6-0-2","card-stretched":"magritte-card-stretched___0Uc0J_6-0-2","cardStretched":"magritte-card-stretched___0Uc0J_6-0-2","card-vertical-stretched":"magritte-card-vertical-stretched___Lrxmc_6-0-2","cardVerticalStretched":"magritte-card-vertical-stretched___Lrxmc_6-0-2","card-tone":"magritte-card-tone___rqQ5N_6-0-2","cardTone":"magritte-card-tone___rqQ5N_6-0-2","card-with-border":"magritte-card-with-border___3KsrG_6-0-2","cardWithBorder":"magritte-card-with-border___3KsrG_6-0-2","card-show-shadow":"magritte-card-show-shadow___x4pSd_6-0-2","cardShowShadow":"magritte-card-show-shadow___x4pSd_6-0-2","card-shadow-on-hover":"magritte-card-shadow-on-hover___BoRL3_6-0-2","cardShadowOnHover":"magritte-card-shadow-on-hover___BoRL3_6-0-2","card-style-blank":"magritte-card-style-blank___oyRfK_6-0-2","cardStyleBlank":"magritte-card-style-blank___oyRfK_6-0-2","card-hover-style-blank":"magritte-card-hover-style-blank___fvKKw_6-0-2","cardHoverStyleBlank":"magritte-card-hover-style-blank___fvKKw_6-0-2","card-style-neutral":"magritte-card-style-neutral___VtbBE_6-0-2","cardStyleNeutral":"magritte-card-style-neutral___VtbBE_6-0-2","card-hover-style-neutral":"magritte-card-hover-style-neutral___IhvdR_6-0-2","cardHoverStyleNeutral":"magritte-card-hover-style-neutral___IhvdR_6-0-2","card-style-contrast":"magritte-card-style-contrast___lhGwj_6-0-2","cardStyleContrast":"magritte-card-style-contrast___lhGwj_6-0-2","card-hover-style-contrast":"magritte-card-hover-style-contrast___CXrlc_6-0-2","cardHoverStyleContrast":"magritte-card-hover-style-contrast___CXrlc_6-0-2","card-style-positive":"magritte-card-style-positive___4sgFq_6-0-2","cardStylePositive":"magritte-card-style-positive___4sgFq_6-0-2","card-hover-style-positive":"magritte-card-hover-style-positive___zQ7MM_6-0-2","cardHoverStylePositive":"magritte-card-hover-style-positive___zQ7MM_6-0-2","card-style-negative":"magritte-card-style-negative___Fk6xX_6-0-2","cardStyleNegative":"magritte-card-style-negative___Fk6xX_6-0-2","card-hover-style-negative":"magritte-card-hover-style-negative___1cL78_6-0-2","cardHoverStyleNegative":"magritte-card-hover-style-negative___1cL78_6-0-2","card-style-warning":"magritte-card-style-warning___NIuCV_6-0-2","cardStyleWarning":"magritte-card-style-warning___NIuCV_6-0-2","card-hover-style-warning":"magritte-card-hover-style-warning___Fw34b_6-0-2","cardHoverStyleWarning":"magritte-card-hover-style-warning___Fw34b_6-0-2","card-style-extra-1":"magritte-card-style-extra-1___HvxuD_6-0-2","cardStyleExtra1":"magritte-card-style-extra-1___HvxuD_6-0-2","card-hover-style-extra-1":"magritte-card-hover-style-extra-1___SpmpG_6-0-2","cardHoverStyleExtra1":"magritte-card-hover-style-extra-1___SpmpG_6-0-2","card-style-extra-2":"magritte-card-style-extra-2___o7xE6_6-0-2","cardStyleExtra2":"magritte-card-style-extra-2___o7xE6_6-0-2","card-hover-style-extra-2":"magritte-card-hover-style-extra-2___zl1ds_6-0-2","cardHoverStyleExtra2":"magritte-card-hover-style-extra-2___zl1ds_6-0-2","card-style-extra-3":"magritte-card-style-extra-3___Civka_6-0-2","cardStyleExtra3":"magritte-card-style-extra-3___Civka_6-0-2","card-hover-style-extra-3":"magritte-card-hover-style-extra-3___V0Ju3_6-0-2","cardHoverStyleExtra3":"magritte-card-hover-style-extra-3___V0Ju3_6-0-2","card-style-extra-4":"magritte-card-style-extra-4___1Ak5j_6-0-2","cardStyleExtra4":"magritte-card-style-extra-4___1Ak5j_6-0-2","card-hover-style-extra-4":"magritte-card-hover-style-extra-4___bM8oz_6-0-2","cardHoverStyleExtra4":"magritte-card-hover-style-extra-4___bM8oz_6-0-2","card-style-extra-5":"magritte-card-style-extra-5___QvO0Q_6-0-2","cardStyleExtra5":"magritte-card-style-extra-5___QvO0Q_6-0-2","card-hover-style-extra-5":"magritte-card-hover-style-extra-5___diZv6_6-0-2","cardHoverStyleExtra5":"magritte-card-hover-style-extra-5___diZv6_6-0-2","card-border-radius-0":"magritte-card-border-radius-0___wvt4-_6-0-2","cardBorderRadius0":"magritte-card-border-radius-0___wvt4-_6-0-2","card-border-top-left-radius-0":"magritte-card-border-top-left-radius-0___xhKvn_6-0-2","cardBorderTopLeftRadius0":"magritte-card-border-top-left-radius-0___xhKvn_6-0-2","card-border-top-right-radius-0":"magritte-card-border-top-right-radius-0___PeZ4S_6-0-2","cardBorderTopRightRadius0":"magritte-card-border-top-right-radius-0___PeZ4S_6-0-2","card-border-bottom-left-radius-0":"magritte-card-border-bottom-left-radius-0___xhqfz_6-0-2","cardBorderBottomLeftRadius0":"magritte-card-border-bottom-left-radius-0___xhqfz_6-0-2","card-border-bottom-right-radius-0":"magritte-card-border-bottom-right-radius-0___wkU84_6-0-2","cardBorderBottomRightRadius0":"magritte-card-border-bottom-right-radius-0___wkU84_6-0-2","card-border-radius-12":"magritte-card-border-radius-12___az-Ir_6-0-2","cardBorderRadius12":"magritte-card-border-radius-12___az-Ir_6-0-2","card-border-top-left-radius-12":"magritte-card-border-top-left-radius-12___-oawE_6-0-2","cardBorderTopLeftRadius12":"magritte-card-border-top-left-radius-12___-oawE_6-0-2","card-border-top-right-radius-12":"magritte-card-border-top-right-radius-12___IhPsK_6-0-2","cardBorderTopRightRadius12":"magritte-card-border-top-right-radius-12___IhPsK_6-0-2","card-border-bottom-left-radius-12":"magritte-card-border-bottom-left-radius-12___FCM6F_6-0-2","cardBorderBottomLeftRadius12":"magritte-card-border-bottom-left-radius-12___FCM6F_6-0-2","card-border-bottom-right-radius-12":"magritte-card-border-bottom-right-radius-12___tCOdR_6-0-2","cardBorderBottomRightRadius12":"magritte-card-border-bottom-right-radius-12___tCOdR_6-0-2","card-border-radius-16":"magritte-card-border-radius-16___Ys6Ji_6-0-2","cardBorderRadius16":"magritte-card-border-radius-16___Ys6Ji_6-0-2","card-border-top-left-radius-16":"magritte-card-border-top-left-radius-16___ukzUt_6-0-2","cardBorderTopLeftRadius16":"magritte-card-border-top-left-radius-16___ukzUt_6-0-2","card-border-top-right-radius-16":"magritte-card-border-top-right-radius-16___gsFms_6-0-2","cardBorderTopRightRadius16":"magritte-card-border-top-right-radius-16___gsFms_6-0-2","card-border-bottom-left-radius-16":"magritte-card-border-bottom-left-radius-16___RNl-W_6-0-2","cardBorderBottomLeftRadius16":"magritte-card-border-bottom-left-radius-16___RNl-W_6-0-2","card-border-bottom-right-radius-16":"magritte-card-border-bottom-right-radius-16___mW4e4_6-0-2","cardBorderBottomRightRadius16":"magritte-card-border-bottom-right-radius-16___mW4e4_6-0-2","card-border-radius-24":"magritte-card-border-radius-24___o72BE_6-0-2","cardBorderRadius24":"magritte-card-border-radius-24___o72BE_6-0-2","card-border-top-left-radius-24":"magritte-card-border-top-left-radius-24___WggIU_6-0-2","cardBorderTopLeftRadius24":"magritte-card-border-top-left-radius-24___WggIU_6-0-2","card-border-top-right-radius-24":"magritte-card-border-top-right-radius-24___-tF1L_6-0-2","cardBorderTopRightRadius24":"magritte-card-border-top-right-radius-24___-tF1L_6-0-2","card-border-bottom-left-radius-24":"magritte-card-border-bottom-left-radius-24___LvciK_6-0-2","cardBorderBottomLeftRadius24":"magritte-card-border-bottom-left-radius-24___LvciK_6-0-2","card-border-bottom-right-radius-24":"magritte-card-border-bottom-right-radius-24___2nUtu_6-0-2","cardBorderBottomRightRadius24":"magritte-card-border-bottom-right-radius-24___2nUtu_6-0-2","card-border-radius-32":"magritte-card-border-radius-32___XpJKx_6-0-2","cardBorderRadius32":"magritte-card-border-radius-32___XpJKx_6-0-2","card-border-top-left-radius-32":"magritte-card-border-top-left-radius-32___fILSa_6-0-2","cardBorderTopLeftRadius32":"magritte-card-border-top-left-radius-32___fILSa_6-0-2","card-border-top-right-radius-32":"magritte-card-border-top-right-radius-32___TdHDP_6-0-2","cardBorderTopRightRadius32":"magritte-card-border-top-right-radius-32___TdHDP_6-0-2","card-border-bottom-left-radius-32":"magritte-card-border-bottom-left-radius-32___3MKJI_6-0-2","cardBorderBottomLeftRadius32":"magritte-card-border-bottom-left-radius-32___3MKJI_6-0-2","card-border-bottom-right-radius-32":"magritte-card-border-bottom-right-radius-32___w0HZZ_6-0-2","cardBorderBottomRightRadius32":"magritte-card-border-bottom-right-radius-32___w0HZZ_6-0-2","card-border-radius-40":"magritte-card-border-radius-40___7J5EX_6-0-2","cardBorderRadius40":"magritte-card-border-radius-40___7J5EX_6-0-2","card-border-top-left-radius-40":"magritte-card-border-top-left-radius-40___VQ3ZO_6-0-2","cardBorderTopLeftRadius40":"magritte-card-border-top-left-radius-40___VQ3ZO_6-0-2","card-border-top-right-radius-40":"magritte-card-border-top-right-radius-40___Ao-nP_6-0-2","cardBorderTopRightRadius40":"magritte-card-border-top-right-radius-40___Ao-nP_6-0-2","card-border-bottom-left-radius-40":"magritte-card-border-bottom-left-radius-40___psJqI_6-0-2","cardBorderBottomLeftRadius40":"magritte-card-border-bottom-left-radius-40___psJqI_6-0-2","card-border-bottom-right-radius-40":"magritte-card-border-bottom-right-radius-40___UyYrk_6-0-2","cardBorderBottomRightRadius40":"magritte-card-border-bottom-right-radius-40___UyYrk_6-0-2"};
13
+
14
+ const genBorderRadiusClasses = (radiusProps) => Object.entries(radiusProps).reduce((acc, [key, value]) => value !== undefined ? [...acc, styles[`cardBorder${key}Radius${value}`]] : acc, []);
15
+ const genPaddingProps = (paddingProps) => Object.entries(paddingProps).reduce((acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc), {});
16
+ const CardForwardRefRenderFunc = ({ Element = 'div', stretched = false, verticalStretched = false, actionCard = false, onClick, style, hoverStyle, disabled = false, showShadow = false, showShadowOnHover = false, showBorder = false, padding = 0, paddingLeft, paddingRight, paddingTop, paddingBottom, borderRadius = 0, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, children, ...restProps }, ref) => {
17
+ const isToneCard = style !== undefined;
18
+ const forceDisabled = useDisabled();
19
+ const hasFocusRef = useRef(false);
20
+ const focusCallback = () => {
21
+ hasFocusRef.current = true;
22
+ };
23
+ const blurCallback = () => {
24
+ hasFocusRef.current = false;
25
+ };
26
+ const activationHandler = useCallback((event) => {
27
+ if (disabled || forceDisabled || !onClick) {
28
+ return;
29
+ }
30
+ if (event.type === 'click' ||
31
+ (event.type === 'keydown' &&
32
+ keyboardMatches(event.nativeEvent, [
33
+ keyboardKeys.Enter,
34
+ keyboardKeys.Space,
35
+ ]) &&
36
+ hasFocusRef.current)) {
37
+ !isEventFromInteractiveComponent(event) && onClick(event);
38
+ }
39
+ }, [onClick, disabled, forceDisabled]);
40
+ const paddingProps = genPaddingProps({
41
+ Left: paddingLeft,
42
+ Right: paddingRight,
43
+ Top: paddingTop,
44
+ Bottom: paddingBottom,
45
+ });
46
+ const additionalProps = {};
47
+ if (actionCard && !forceDisabled && !disabled) {
48
+ additionalProps.tabIndex = 0;
49
+ }
50
+ if (ref) {
51
+ additionalProps.ref = ref;
52
+ }
53
+ return (jsx(DisabledContext.Provider, { value: forceDisabled || (!!disabled && actionCard), children: jsx(Element, { ...restProps, ...additionalProps, onFocus: focusCallback, onBlur: blurCallback, onClick: activationHandler, onKeyDown: activationHandler, style: { padding, ...paddingProps }, className: classnames(styles.card, styles[`cardBorderRadius${borderRadius}`], isToneCard && styles[`card-style-${style}`], hoverStyle && styles[`card-hover-style-${hoverStyle}`], ...genBorderRadiusClasses({
54
+ TopLeft: borderTopLeftRadius,
55
+ TopRight: borderTopRightRadius,
56
+ BottomLeft: borderBottomLeftRadius,
57
+ BottomRight: borderBottomRightRadius,
58
+ }), {
59
+ [styles.cardStretched]: stretched,
60
+ [styles.cardVerticalStretched]: verticalStretched,
61
+ [styles.cardTone]: isToneCard,
62
+ [styles.cardAction]: actionCard,
63
+ [styles.cardShowShadow]: showShadow && !isToneCard,
64
+ [styles.cardShadowOnHover]: showShadowOnHover && !isToneCard && actionCard,
65
+ [styles.cardWithBorder]: showBorder,
66
+ [styles.cardDisabled]: actionCard && !!disabled,
67
+ }), children: jsx(TextDynamic, { stretched: true, children: children }) }) }));
68
+ };
69
+ const CardComponent = forwardRef(CardForwardRefRenderFunc);
70
+ const Card = enrichWithSkeleton(CardComponent, CardSkeleton);
71
+
72
+ export { Card };
73
+ //# sourceMappingURL=Card.js.map
package/Card.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Card.js","sources":["../src/Card.tsx"],"sourcesContent":["import { MouseEvent, KeyboardEvent, forwardRef, useCallback, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { CardSkeleton } from '@hh.ru/magritte-ui-card/Skeleton';\nimport {\n CardBorderRadius,\n CardPadding,\n CardForwardRefRenderFuncWithCustomElement,\n CardWithSkeleton,\n} from '@hh.ru/magritte-ui-card/types';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { TextDynamic } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './card.less';\n\nconst genBorderRadiusClasses = (radiusProps: {\n TopLeft?: CardBorderRadius;\n TopRight?: CardBorderRadius;\n BottomLeft?: CardBorderRadius;\n BottomRight?: CardBorderRadius;\n}) =>\n Object.entries(radiusProps).reduce<string[]>(\n (acc, [key, value]) =>\n value !== undefined ? [...acc, styles[`cardBorder${key as keyof typeof radiusProps}Radius${value}`]] : acc,\n []\n );\n\nconst genPaddingProps = (paddingProps: {\n Left?: CardPadding;\n Right?: CardPadding;\n Top?: CardPadding;\n Bottom?: CardPadding;\n}) =>\n Object.entries(paddingProps).reduce<Record<string, number>>(\n (acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc),\n {}\n );\n\nconst CardForwardRefRenderFunc: CardForwardRefRenderFuncWithCustomElement = (\n {\n Element = 'div',\n stretched = false,\n verticalStretched = false,\n actionCard = false,\n onClick,\n style,\n hoverStyle,\n disabled = false,\n showShadow = false,\n showShadowOnHover = false,\n showBorder = false,\n padding = 0,\n paddingLeft,\n paddingRight,\n paddingTop,\n paddingBottom,\n borderRadius = 0,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n children,\n ...restProps\n },\n ref\n) => {\n const isToneCard = style !== undefined;\n const forceDisabled = useDisabled();\n const hasFocusRef = useRef(false);\n const focusCallback = () => {\n hasFocusRef.current = true;\n };\n const blurCallback = () => {\n hasFocusRef.current = false;\n };\n const activationHandler = useCallback(\n (event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>) => {\n if (disabled || forceDisabled || !onClick) {\n return;\n }\n\n if (\n event.type === 'click' ||\n (event.type === 'keydown' &&\n keyboardMatches((event as KeyboardEvent<HTMLElement>).nativeEvent, [\n keyboardKeys.Enter,\n keyboardKeys.Space,\n ]) &&\n hasFocusRef.current)\n ) {\n !isEventFromInteractiveComponent(event) && onClick(event);\n }\n },\n [onClick, disabled, forceDisabled]\n );\n const paddingProps = genPaddingProps({\n Left: paddingLeft,\n Right: paddingRight,\n Top: paddingTop,\n Bottom: paddingBottom,\n });\n const additionalProps: Record<string, unknown> = {};\n if (actionCard && !forceDisabled && !disabled) {\n additionalProps.tabIndex = 0;\n }\n\n if (ref) {\n additionalProps.ref = ref;\n }\n\n return (\n <DisabledContext.Provider value={forceDisabled || (!!disabled && actionCard)}>\n <Element\n {...restProps}\n {...additionalProps}\n onFocus={focusCallback}\n onBlur={blurCallback}\n onClick={activationHandler}\n onKeyDown={activationHandler}\n style={{ padding, ...paddingProps }}\n className={classnames(\n styles.card,\n styles[`cardBorderRadius${borderRadius}`],\n isToneCard && styles[`card-style-${style}`],\n hoverStyle && styles[`card-hover-style-${hoverStyle}`],\n ...genBorderRadiusClasses({\n TopLeft: borderTopLeftRadius,\n TopRight: borderTopRightRadius,\n BottomLeft: borderBottomLeftRadius,\n BottomRight: borderBottomRightRadius,\n }),\n\n {\n [styles.cardStretched]: stretched,\n [styles.cardVerticalStretched]: verticalStretched,\n [styles.cardTone]: isToneCard,\n [styles.cardAction]: actionCard,\n [styles.cardShowShadow]: showShadow && !isToneCard,\n [styles.cardShadowOnHover]: showShadowOnHover && !isToneCard && actionCard,\n [styles.cardWithBorder]: showBorder,\n [styles.cardDisabled]: actionCard && !!disabled,\n }\n )}\n >\n <TextDynamic stretched>{children}</TextDynamic>\n </Element>\n </DisabledContext.Provider>\n );\n};\n\nconst CardComponent = forwardRef(CardForwardRefRenderFunc);\n\nexport const Card = enrichWithSkeleton(CardComponent, CardSkeleton) as CardWithSkeleton;\n"],"names":["_jsx"],"mappings":"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"}
package/Skeleton.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { CardProps } from './types';
2
+ import { IncompleteSkeletonComponent } from '@hh.ru/magritte-ui-skeleton';
3
+ export declare const CardSkeleton: IncompleteSkeletonComponent<CardProps>;
package/Skeleton.js ADDED
@@ -0,0 +1,14 @@
1
+ import './index.css';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
4
+
5
+ const CardSkeleton = ({ Component: Card,
6
+ // skeleton props
7
+ width, height,
8
+ // borderRadius остается в cardProps
9
+ inline, additionalClass, loading, ...cardProps }) => {
10
+ return (jsx(Skeleton, { width: cardProps.stretched ? `100%` : width, height: cardProps.verticalStretched ? `100%` : height, borderRadius: cardProps.borderRadius, borderTopLeftRadius: cardProps.borderTopLeftRadius, borderTopRightRadius: cardProps.borderTopRightRadius, borderBottomLeftRadius: cardProps.borderBottomLeftRadius, borderBottomRightRadius: cardProps.borderBottomRightRadius, loading: loading, children: jsx(Card, { ...cardProps }) }));
11
+ };
12
+
13
+ export { CardSkeleton };
14
+ //# sourceMappingURL=Skeleton.js.map
package/Skeleton.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Skeleton.js","sources":["../src/Skeleton.tsx"],"sourcesContent":["import { CardProps } from '@hh.ru/magritte-ui-card/types';\nimport { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\n\nexport const CardSkeleton: IncompleteSkeletonComponent<CardProps> = ({\n Component: Card,\n\n // skeleton props\n width,\n height,\n // borderRadius остается в cardProps\n inline,\n additionalClass,\n loading,\n\n ...cardProps\n}) => {\n return (\n <Skeleton\n width={cardProps.stretched ? `100%` : width}\n height={cardProps.verticalStretched ? `100%` : height}\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 <Card {...cardProps} />\n </Skeleton>\n );\n};\n"],"names":["_jsx"],"mappings":";;;MAGa,YAAY,GAA2C,CAAC,EACjE,SAAS,EAAE,IAAI;AAEf;AACA,KAAK,EACL,MAAM;AACN;AACA,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,EACL,KAAK,EAAE,SAAS,CAAC,SAAS,GAAG,CAAM,IAAA,CAAA,GAAG,KAAK,EAC3C,MAAM,EAAE,SAAS,CAAC,iBAAiB,GAAG,CAAM,IAAA,CAAA,GAAG,MAAM,EACrD,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,EAEhB,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAK,EAAA,GAAA,SAAS,EAAI,CAAA,EAAA,CAChB,EACb;AACN;;;;"}
package/index.css ADDED
@@ -0,0 +1,545 @@
1
+ :root{
2
+ --magritte-color-component-card-background-blank-v18-1-1:#ffffff;
3
+ --magritte-color-component-card-background-neutral-v18-1-1:#F1F4F9;
4
+ --magritte-color-component-card-background-extra-1-v18-1-1:#EDF6FF;
5
+ --magritte-color-component-card-background-extra-2-v18-1-1:#FFF1F3;
6
+ --magritte-color-component-card-background-extra-3-v18-1-1:#E8F7FE;
7
+ --magritte-color-component-card-background-extra-4-v18-1-1:#FDF4D7;
8
+ --magritte-color-component-card-background-extra-5-v18-1-1:#F7F4FF;
9
+ --magritte-color-component-card-background-contrast-v18-1-1:#000000;
10
+ --magritte-color-component-card-background-positive-v18-1-1:#E8F9EC;
11
+ --magritte-color-component-card-background-negative-v18-1-1:#FEF2EF;
12
+ --magritte-color-component-card-background-warning-v18-1-1:#FFF3E6;
13
+ --magritte-color-component-card-stroke-neutral-v18-1-1:#DCE3EB;
14
+ --magritte-color-component-card-stroke-neutral-inner-v18-1-1:#DCE3EB;
15
+ --magritte-color-component-card-stroke-phantom-v18-1-1:#dce3eb00;
16
+ --magritte-color-component-card-stroke-phantom-inner-v18-1-1:#dce3eb00;
17
+ --magritte-color-component-card-stroke-state-neutral-hovered-v18-1-1:#CCD5DF;
18
+ --magritte-color-component-card-stroke-state-neutral-inner-hovered-v18-1-1:#CCD5DF;
19
+ --magritte-color-component-card-stroke-state-phantom-hovered-v18-1-1:#ccd5df00;
20
+ --magritte-color-component-card-stroke-state-phantom-inner-hovered-v18-1-1:#ccd5df00;
21
+ --magritte-color-component-card-stroke-state-neutral-disabled-v18-1-1:#DCE3EB;
22
+ --magritte-color-component-card-stroke-state-neutral-inner-disabled-v18-1-1:#DCE3EB;
23
+ --magritte-color-component-card-stroke-state-phantom-disabled-v18-1-1:#dce3eb00;
24
+ --magritte-color-component-card-stroke-state-phantom-inner-disabled-v18-1-1:#dce3eb00;
25
+ --magritte-color-component-card-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
26
+ --magritte-color-component-card-background-state-blank-hovered-v18-1-1:#ffffff;
27
+ --magritte-color-component-card-background-state-blank-disabled-v18-1-1:#ffffff;
28
+ --magritte-color-component-card-background-state-neutral-hovered-v18-1-1:#EEF1F7;
29
+ --magritte-color-component-card-background-state-neutral-disabled-v18-1-1:#F4F6FB;
30
+ --magritte-color-component-card-background-state-extra-1-hovered-v18-1-1:#e7f2ff;
31
+ --magritte-color-component-card-background-state-extra-1-disabled-v18-1-1:#f3f9ff;
32
+ --magritte-color-component-card-background-state-extra-2-hovered-v18-1-1:#feecef;
33
+ --magritte-color-component-card-background-state-extra-2-disabled-v18-1-1:#fff5f7;
34
+ --magritte-color-component-card-background-state-extra-3-hovered-v18-1-1:#e0f4fe;
35
+ --magritte-color-component-card-background-state-extra-3-disabled-v18-1-1:#eff9fe;
36
+ --magritte-color-component-card-background-state-extra-4-hovered-v18-1-1:#fdf0c7;
37
+ --magritte-color-component-card-background-state-extra-4-disabled-v18-1-1:#fdf8e7;
38
+ --magritte-color-component-card-background-state-extra-5-hovered-v18-1-1:#f3eeff;
39
+ --magritte-color-component-card-background-state-extra-5-disabled-v18-1-1:#f9f7ff;
40
+ --magritte-color-component-card-background-state-contrast-hovered-v18-1-1:#000000;
41
+ --magritte-color-component-card-background-state-contrast-disabled-v18-1-1:#000000;
42
+ --magritte-color-component-card-background-state-positive-hovered-v18-1-1:#e0f6e5;
43
+ --magritte-color-component-card-background-state-positive-disabled-v18-1-1:#f0fbf3;
44
+ --magritte-color-component-card-background-state-negative-hovered-v18-1-1:#fdede9;
45
+ --magritte-color-component-card-background-state-negative-disabled-v18-1-1:#fff6f4;
46
+ --magritte-color-component-card-background-state-warning-hovered-v18-1-1:#ffeedd;
47
+ --magritte-color-component-card-background-state-warning-disabled-v18-1-1:#fff7ee;
48
+ --magritte-shadow-level-2-color-v18-1-1:#7090b03d;
49
+ --magritte-shadow-level-2-x-v18-1-1:0px;
50
+ --magritte-shadow-level-2-y-v18-1-1:8px;
51
+ --magritte-shadow-level-2-blur-v18-1-1:16px;
52
+ --magritte-shadow-level-2-spread-v18-1-1:0px;
53
+ --magritte-shadow-level-1-color-v18-1-1:#7090b029;
54
+ --magritte-shadow-level-1-x-v18-1-1:0px;
55
+ --magritte-shadow-level-1-y-v18-1-1:4px;
56
+ --magritte-shadow-level-1-blur-v18-1-1:12px;
57
+ --magritte-shadow-level-1-spread-v18-1-1:0px;
58
+ }
59
+ :root{
60
+ --magritte-semantic-border-radius-form-v18-1-1:12px;
61
+ --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
62
+ --magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1:200ms;
63
+ --magritte-static-border-radius-0-v18-1-1:0px;
64
+ --magritte-static-border-radius-400-v18-1-1:16px;
65
+ --magritte-static-border-radius-600-v18-1-1:24px;
66
+ --magritte-static-border-radius-800-v18-1-1:32px;
67
+ --magritte-static-border-radius-1000-v18-1-1:40px;
68
+ }
69
+ .magritte-night-theme{
70
+ --magritte-color-component-card-background-blank-v18-1-1:#1B1B1B;
71
+ --magritte-color-component-card-background-neutral-v18-1-1:#303030;
72
+ --magritte-color-component-card-background-extra-1-v18-1-1:#222D3D;
73
+ --magritte-color-component-card-background-extra-2-v18-1-1:#3a0817;
74
+ --magritte-color-component-card-background-extra-3-v18-1-1:#081e29;
75
+ --magritte-color-component-card-background-extra-4-v18-1-1:#221b02;
76
+ --magritte-color-component-card-background-extra-5-v18-1-1:#2F293C;
77
+ --magritte-color-component-card-background-contrast-v18-1-1:#000000;
78
+ --magritte-color-component-card-background-positive-v18-1-1:#16321F;
79
+ --magritte-color-component-card-background-negative-v18-1-1:#3D2622;
80
+ --magritte-color-component-card-background-warning-v18-1-1:#3D270E;
81
+ --magritte-color-component-card-stroke-neutral-v18-1-1:#30303000;
82
+ --magritte-color-component-card-stroke-neutral-inner-v18-1-1:#303030;
83
+ --magritte-color-component-card-stroke-phantom-v18-1-1:#30303000;
84
+ --magritte-color-component-card-stroke-phantom-inner-v18-1-1:#30303000;
85
+ --magritte-color-component-card-stroke-state-neutral-hovered-v18-1-1:#30303000;
86
+ --magritte-color-component-card-stroke-state-neutral-inner-hovered-v18-1-1:#303030;
87
+ --magritte-color-component-card-stroke-state-phantom-hovered-v18-1-1:#30303000;
88
+ --magritte-color-component-card-stroke-state-phantom-inner-hovered-v18-1-1:#30303000;
89
+ --magritte-color-component-card-stroke-state-neutral-disabled-v18-1-1:#30303000;
90
+ --magritte-color-component-card-stroke-state-neutral-inner-disabled-v18-1-1:#303030;
91
+ --magritte-color-component-card-stroke-state-phantom-disabled-v18-1-1:#30303000;
92
+ --magritte-color-component-card-stroke-state-phantom-inner-disabled-v18-1-1:#30303000;
93
+ --magritte-color-component-card-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
94
+ --magritte-color-component-card-background-state-blank-hovered-v18-1-1:#262626;
95
+ --magritte-color-component-card-background-state-blank-disabled-v18-1-1:#111;
96
+ --magritte-color-component-card-background-state-neutral-hovered-v18-1-1:#3B3B3B;
97
+ --magritte-color-component-card-background-state-neutral-disabled-v18-1-1:#262626;
98
+ --magritte-color-component-card-background-state-extra-1-hovered-v18-1-1:#00235a;
99
+ --magritte-color-component-card-background-state-extra-1-disabled-v18-1-1:#000f31;
100
+ --magritte-color-component-card-background-state-extra-2-hovered-v18-1-1:#4d0b1f;
101
+ --magritte-color-component-card-background-state-extra-2-disabled-v18-1-1:#26050d;
102
+ --magritte-color-component-card-background-state-extra-3-hovered-v18-1-1:#0b2937;
103
+ --magritte-color-component-card-background-state-extra-3-disabled-v18-1-1:#05121a;
104
+ --magritte-color-component-card-background-state-extra-4-hovered-v18-1-1:#2d2507;
105
+ --magritte-color-component-card-background-state-extra-4-disabled-v18-1-1:#161001;
106
+ --magritte-color-component-card-background-state-extra-5-hovered-v18-1-1:#33115d;
107
+ --magritte-color-component-card-background-state-extra-5-disabled-v18-1-1:#190532;
108
+ --magritte-color-component-card-background-state-contrast-hovered-v18-1-1:#000000;
109
+ --magritte-color-component-card-background-state-contrast-disabled-v18-1-1:#000000;
110
+ --magritte-color-component-card-background-state-positive-hovered-v18-1-1:#012d13;
111
+ --magritte-color-component-card-background-state-positive-disabled-v18-1-1:#001504;
112
+ --magritte-color-component-card-background-state-negative-hovered-v18-1-1:#4c1008;
113
+ --magritte-color-component-card-background-state-negative-disabled-v18-1-1:#260605;
114
+ --magritte-color-component-card-background-state-warning-hovered-v18-1-1:#3c1f00;
115
+ --magritte-color-component-card-background-state-warning-disabled-v18-1-1:#1d0d01;
116
+ --magritte-shadow-level-2-color-v18-1-1:#0000003d;
117
+ --magritte-shadow-level-2-x-v18-1-1:0px;
118
+ --magritte-shadow-level-2-y-v18-1-1:8px;
119
+ --magritte-shadow-level-2-blur-v18-1-1:16px;
120
+ --magritte-shadow-level-2-spread-v18-1-1:0px;
121
+ --magritte-shadow-level-1-color-v18-1-1:#00000029;
122
+ --magritte-shadow-level-1-x-v18-1-1:0px;
123
+ --magritte-shadow-level-1-y-v18-1-1:4px;
124
+ --magritte-shadow-level-1-blur-v18-1-1:12px;
125
+ --magritte-shadow-level-1-spread-v18-1-1:0px;
126
+ }
127
+ .magritte-card___bhGKz_6-0-2{
128
+ display:inline-flex;
129
+ box-sizing:border-box;
130
+ border-width:0;
131
+ background-color:var(--magritte-color-component-card-background-blank-v18-1-1);
132
+ transition-property:box-shadow, border-color, background-color;
133
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v18-1-1);
134
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v18-1-1);
135
+ --magritte-card-border-color:var(--magritte-color-component-card-stroke-neutral-v18-1-1);
136
+ --magritte-card-hovered-border-color:var(--magritte-color-component-card-stroke-state-neutral-hovered-v18-1-1);
137
+ --magritte-card-disabled-border-color:var(--magritte-color-component-card-stroke-state-neutral-disabled-v18-1-1);
138
+ }
139
+ .magritte-card___bhGKz_6-0-2.focus-visible{
140
+ outline:var(--magritte-color-component-card-stroke-state-accent-focused-accessible-v18-1-1) solid 4px;
141
+ }
142
+ .magritte-card-action___4A43B_6-0-2{
143
+ cursor:pointer;
144
+ }
145
+ .magritte-card-disabled___SMFnB_6-0-2{
146
+ cursor:default;
147
+ }
148
+ .magritte-card___bhGKz_6-0-2 .magritte-card___bhGKz_6-0-2{
149
+ --magritte-card-border-color:var(--magritte-color-component-card-stroke-neutral-inner-v18-1-1);
150
+ --magritte-card-hovered-border-color:var(--magritte-color-component-card-stroke-state-neutral-inner-hovered-v18-1-1);
151
+ --magritte-card-disabled-border-color:var(--magritte-color-component-card-stroke-state-neutral-inner-disabled-v18-1-1);
152
+ }
153
+ .magritte-card-stretched___0Uc0J_6-0-2{
154
+ width:100%;
155
+ }
156
+ .magritte-card-vertical-stretched___Lrxmc_6-0-2{
157
+ height:100%;
158
+ }
159
+ .magritte-card-tone___rqQ5N_6-0-2{
160
+ --magritte-card-border-color:var(--magritte-color-component-card-stroke-phantom-v18-1-1);
161
+ --magritte-card-hovered-border-color:var(--magritte-color-component-card-stroke-state-phantom-hovered-v18-1-1);
162
+ --magritte-card-disabled-border-color:var(--magritte-color-component-card-stroke-state-phantom-disabled-v18-1-1);
163
+ }
164
+ .magritte-card___bhGKz_6-0-2 .magritte-card-tone___rqQ5N_6-0-2{
165
+ --magritte-card-border-color:var(--magritte-color-component-card-stroke-phantom-inner-v18-1-1);
166
+ --magritte-card-hovered-border-color:var(--magritte-color-component-card-stroke-state-phantom-inner-hovered-v18-1-1);
167
+ --magritte-card-disabled-border-color:var(--magritte-color-component-card-stroke-state-phantom-inner-disabled-v18-1-1);
168
+ }
169
+ .magritte-card-with-border___3KsrG_6-0-2{
170
+ border:1px solid var(--magritte-card-border-color);
171
+ }
172
+ .magritte-card-with-border___3KsrG_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
173
+ .magritte-card-with-border___3KsrG_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
174
+ border-color:var(--magritte-card-disabled-border-color);
175
+ }
176
+ @media (min-width: 1020px){
177
+ body.magritte-old-layout .magritte-card-with-border___3KsrG_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
178
+ border-color:var(--magritte-card-hovered-border-color);
179
+ }
180
+ }
181
+ @media (min-width: 1024px){
182
+ body:not(.magritte-old-layout) .magritte-card-with-border___3KsrG_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
183
+ border-color:var(--magritte-card-hovered-border-color);
184
+ }
185
+ }
186
+ .magritte-card-show-shadow___x4pSd_6-0-2,
187
+ .magritte-card-show-shadow___x4pSd_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2),
188
+ .magritte-card-shadow-on-hover___BoRL3_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
189
+ box-shadow:var(--magritte-shadow-level-1-x-v18-1-1) var(--magritte-shadow-level-1-y-v18-1-1) var(--magritte-shadow-level-1-blur-v18-1-1) var(--magritte-shadow-level-1-spread-v18-1-1) var(--magritte-shadow-level-1-color-v18-1-1);
190
+ }
191
+ @media (min-width: 1020px){
192
+ body.magritte-old-layout .magritte-card-show-shadow___x4pSd_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2),
193
+ body.magritte-old-layout .magritte-card-shadow-on-hover___BoRL3_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
194
+ box-shadow:var(--magritte-shadow-level-2-x-v18-1-1) var(--magritte-shadow-level-2-y-v18-1-1) var(--magritte-shadow-level-2-blur-v18-1-1) var(--magritte-shadow-level-2-spread-v18-1-1) var(--magritte-shadow-level-2-color-v18-1-1);
195
+ }
196
+ }
197
+ @media (min-width: 1024px){
198
+ body:not(.magritte-old-layout) .magritte-card-show-shadow___x4pSd_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2),
199
+ body:not(.magritte-old-layout) .magritte-card-shadow-on-hover___BoRL3_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
200
+ box-shadow:var(--magritte-shadow-level-2-x-v18-1-1) var(--magritte-shadow-level-2-y-v18-1-1) var(--magritte-shadow-level-2-blur-v18-1-1) var(--magritte-shadow-level-2-spread-v18-1-1) var(--magritte-shadow-level-2-color-v18-1-1);
201
+ }
202
+ }
203
+ .magritte-card-style-blank___oyRfK_6-0-2{
204
+ background-color:var(--magritte-color-component-card-background-blank-v18-1-1);
205
+ }
206
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-blank___oyRfK_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
207
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-blank___oyRfK_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
208
+ background-color:var(--magritte-color-component-card-background-state-blank-disabled-v18-1-1);
209
+ }
210
+ @media (min-width: 1020px){
211
+ body.magritte-old-layout .magritte-card-style-blank___oyRfK_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
212
+ background-color:var(--magritte-color-component-card-background-state-blank-hovered-v18-1-1);
213
+ }
214
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-blank___fvKKw_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
215
+ background-color:var(--magritte-color-component-card-background-state-blank-hovered-v18-1-1);
216
+ }
217
+ }
218
+ @media (min-width: 1024px){
219
+ body:not(.magritte-old-layout) .magritte-card-style-blank___oyRfK_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
220
+ background-color:var(--magritte-color-component-card-background-state-blank-hovered-v18-1-1);
221
+ }
222
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-blank___fvKKw_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
223
+ background-color:var(--magritte-color-component-card-background-state-blank-hovered-v18-1-1);
224
+ }
225
+ }
226
+ .magritte-card-style-neutral___VtbBE_6-0-2{
227
+ background-color:var(--magritte-color-component-card-background-neutral-v18-1-1);
228
+ }
229
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-neutral___VtbBE_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
230
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-neutral___VtbBE_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
231
+ background-color:var(--magritte-color-component-card-background-state-neutral-disabled-v18-1-1);
232
+ }
233
+ @media (min-width: 1020px){
234
+ body.magritte-old-layout .magritte-card-style-neutral___VtbBE_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
235
+ background-color:var(--magritte-color-component-card-background-state-neutral-hovered-v18-1-1);
236
+ }
237
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-neutral___IhvdR_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
238
+ background-color:var(--magritte-color-component-card-background-state-neutral-hovered-v18-1-1);
239
+ }
240
+ }
241
+ @media (min-width: 1024px){
242
+ body:not(.magritte-old-layout) .magritte-card-style-neutral___VtbBE_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
243
+ background-color:var(--magritte-color-component-card-background-state-neutral-hovered-v18-1-1);
244
+ }
245
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-neutral___IhvdR_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
246
+ background-color:var(--magritte-color-component-card-background-state-neutral-hovered-v18-1-1);
247
+ }
248
+ }
249
+ .magritte-card-style-contrast___lhGwj_6-0-2{
250
+ background-color:var(--magritte-color-component-card-background-contrast-v18-1-1);
251
+ }
252
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-contrast___lhGwj_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
253
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-contrast___lhGwj_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
254
+ background-color:var(--magritte-color-component-card-background-state-contrast-disabled-v18-1-1);
255
+ }
256
+ @media (min-width: 1020px){
257
+ body.magritte-old-layout .magritte-card-style-contrast___lhGwj_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
258
+ background-color:var(--magritte-color-component-card-background-state-contrast-hovered-v18-1-1);
259
+ }
260
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-contrast___CXrlc_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
261
+ background-color:var(--magritte-color-component-card-background-state-contrast-hovered-v18-1-1);
262
+ }
263
+ }
264
+ @media (min-width: 1024px){
265
+ body:not(.magritte-old-layout) .magritte-card-style-contrast___lhGwj_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
266
+ background-color:var(--magritte-color-component-card-background-state-contrast-hovered-v18-1-1);
267
+ }
268
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-contrast___CXrlc_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
269
+ background-color:var(--magritte-color-component-card-background-state-contrast-hovered-v18-1-1);
270
+ }
271
+ }
272
+ .magritte-card-style-positive___4sgFq_6-0-2{
273
+ background-color:var(--magritte-color-component-card-background-positive-v18-1-1);
274
+ }
275
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-positive___4sgFq_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
276
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-positive___4sgFq_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
277
+ background-color:var(--magritte-color-component-card-background-state-positive-disabled-v18-1-1);
278
+ }
279
+ @media (min-width: 1020px){
280
+ body.magritte-old-layout .magritte-card-style-positive___4sgFq_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
281
+ background-color:var(--magritte-color-component-card-background-state-positive-hovered-v18-1-1);
282
+ }
283
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-positive___zQ7MM_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
284
+ background-color:var(--magritte-color-component-card-background-state-positive-hovered-v18-1-1);
285
+ }
286
+ }
287
+ @media (min-width: 1024px){
288
+ body:not(.magritte-old-layout) .magritte-card-style-positive___4sgFq_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
289
+ background-color:var(--magritte-color-component-card-background-state-positive-hovered-v18-1-1);
290
+ }
291
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-positive___zQ7MM_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
292
+ background-color:var(--magritte-color-component-card-background-state-positive-hovered-v18-1-1);
293
+ }
294
+ }
295
+ .magritte-card-style-negative___Fk6xX_6-0-2{
296
+ background-color:var(--magritte-color-component-card-background-negative-v18-1-1);
297
+ }
298
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-negative___Fk6xX_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
299
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-negative___Fk6xX_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
300
+ background-color:var(--magritte-color-component-card-background-state-negative-disabled-v18-1-1);
301
+ }
302
+ @media (min-width: 1020px){
303
+ body.magritte-old-layout .magritte-card-style-negative___Fk6xX_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
304
+ background-color:var(--magritte-color-component-card-background-state-negative-hovered-v18-1-1);
305
+ }
306
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-negative___1cL78_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
307
+ background-color:var(--magritte-color-component-card-background-state-negative-hovered-v18-1-1);
308
+ }
309
+ }
310
+ @media (min-width: 1024px){
311
+ body:not(.magritte-old-layout) .magritte-card-style-negative___Fk6xX_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
312
+ background-color:var(--magritte-color-component-card-background-state-negative-hovered-v18-1-1);
313
+ }
314
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-negative___1cL78_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
315
+ background-color:var(--magritte-color-component-card-background-state-negative-hovered-v18-1-1);
316
+ }
317
+ }
318
+ .magritte-card-style-warning___NIuCV_6-0-2{
319
+ background-color:var(--magritte-color-component-card-background-warning-v18-1-1);
320
+ }
321
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-warning___NIuCV_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
322
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-warning___NIuCV_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
323
+ background-color:var(--magritte-color-component-card-background-state-warning-disabled-v18-1-1);
324
+ }
325
+ @media (min-width: 1020px){
326
+ body.magritte-old-layout .magritte-card-style-warning___NIuCV_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
327
+ background-color:var(--magritte-color-component-card-background-state-warning-hovered-v18-1-1);
328
+ }
329
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-warning___Fw34b_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
330
+ background-color:var(--magritte-color-component-card-background-state-warning-hovered-v18-1-1);
331
+ }
332
+ }
333
+ @media (min-width: 1024px){
334
+ body:not(.magritte-old-layout) .magritte-card-style-warning___NIuCV_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
335
+ background-color:var(--magritte-color-component-card-background-state-warning-hovered-v18-1-1);
336
+ }
337
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-warning___Fw34b_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
338
+ background-color:var(--magritte-color-component-card-background-state-warning-hovered-v18-1-1);
339
+ }
340
+ }
341
+ .magritte-card-style-extra-1___HvxuD_6-0-2{
342
+ background-color:var(--magritte-color-component-card-background-extra-1-v18-1-1);
343
+ }
344
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-1___HvxuD_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
345
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-1___HvxuD_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
346
+ background-color:var(--magritte-color-component-card-background-state-extra-1-disabled-v18-1-1);
347
+ }
348
+ @media (min-width: 1020px){
349
+ body.magritte-old-layout .magritte-card-style-extra-1___HvxuD_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
350
+ background-color:var(--magritte-color-component-card-background-state-extra-1-hovered-v18-1-1);
351
+ }
352
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-1___SpmpG_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
353
+ background-color:var(--magritte-color-component-card-background-state-extra-1-hovered-v18-1-1);
354
+ }
355
+ }
356
+ @media (min-width: 1024px){
357
+ body:not(.magritte-old-layout) .magritte-card-style-extra-1___HvxuD_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
358
+ background-color:var(--magritte-color-component-card-background-state-extra-1-hovered-v18-1-1);
359
+ }
360
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-1___SpmpG_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
361
+ background-color:var(--magritte-color-component-card-background-state-extra-1-hovered-v18-1-1);
362
+ }
363
+ }
364
+ .magritte-card-style-extra-2___o7xE6_6-0-2{
365
+ background-color:var(--magritte-color-component-card-background-extra-2-v18-1-1);
366
+ }
367
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-2___o7xE6_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
368
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-2___o7xE6_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
369
+ background-color:var(--magritte-color-component-card-background-state-extra-2-disabled-v18-1-1);
370
+ }
371
+ @media (min-width: 1020px){
372
+ body.magritte-old-layout .magritte-card-style-extra-2___o7xE6_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
373
+ background-color:var(--magritte-color-component-card-background-state-extra-2-hovered-v18-1-1);
374
+ }
375
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-2___zl1ds_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
376
+ background-color:var(--magritte-color-component-card-background-state-extra-2-hovered-v18-1-1);
377
+ }
378
+ }
379
+ @media (min-width: 1024px){
380
+ body:not(.magritte-old-layout) .magritte-card-style-extra-2___o7xE6_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
381
+ background-color:var(--magritte-color-component-card-background-state-extra-2-hovered-v18-1-1);
382
+ }
383
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-2___zl1ds_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
384
+ background-color:var(--magritte-color-component-card-background-state-extra-2-hovered-v18-1-1);
385
+ }
386
+ }
387
+ .magritte-card-style-extra-3___Civka_6-0-2{
388
+ background-color:var(--magritte-color-component-card-background-extra-3-v18-1-1);
389
+ }
390
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-3___Civka_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
391
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-3___Civka_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
392
+ background-color:var(--magritte-color-component-card-background-state-extra-3-disabled-v18-1-1);
393
+ }
394
+ @media (min-width: 1020px){
395
+ body.magritte-old-layout .magritte-card-style-extra-3___Civka_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
396
+ background-color:var(--magritte-color-component-card-background-state-extra-3-hovered-v18-1-1);
397
+ }
398
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-3___V0Ju3_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
399
+ background-color:var(--magritte-color-component-card-background-state-extra-3-hovered-v18-1-1);
400
+ }
401
+ }
402
+ @media (min-width: 1024px){
403
+ body:not(.magritte-old-layout) .magritte-card-style-extra-3___Civka_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
404
+ background-color:var(--magritte-color-component-card-background-state-extra-3-hovered-v18-1-1);
405
+ }
406
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-3___V0Ju3_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
407
+ background-color:var(--magritte-color-component-card-background-state-extra-3-hovered-v18-1-1);
408
+ }
409
+ }
410
+ .magritte-card-style-extra-4___1Ak5j_6-0-2{
411
+ background-color:var(--magritte-color-component-card-background-extra-4-v18-1-1);
412
+ }
413
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-4___1Ak5j_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
414
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-4___1Ak5j_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
415
+ background-color:var(--magritte-color-component-card-background-state-extra-4-disabled-v18-1-1);
416
+ }
417
+ @media (min-width: 1020px){
418
+ body.magritte-old-layout .magritte-card-style-extra-4___1Ak5j_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
419
+ background-color:var(--magritte-color-component-card-background-state-extra-4-hovered-v18-1-1);
420
+ }
421
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-4___bM8oz_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
422
+ background-color:var(--magritte-color-component-card-background-state-extra-4-hovered-v18-1-1);
423
+ }
424
+ }
425
+ @media (min-width: 1024px){
426
+ body:not(.magritte-old-layout) .magritte-card-style-extra-4___1Ak5j_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
427
+ background-color:var(--magritte-color-component-card-background-state-extra-4-hovered-v18-1-1);
428
+ }
429
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-4___bM8oz_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
430
+ background-color:var(--magritte-color-component-card-background-state-extra-4-hovered-v18-1-1);
431
+ }
432
+ }
433
+ .magritte-card-style-extra-5___QvO0Q_6-0-2{
434
+ background-color:var(--magritte-color-component-card-background-extra-5-v18-1-1);
435
+ }
436
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-5___QvO0Q_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2,
437
+ .magritte-card___bhGKz_6-0-2.magritte-card-style-extra-5___QvO0Q_6-0-2.magritte-card-action___4A43B_6-0-2.magritte-card-disabled___SMFnB_6-0-2:hover{
438
+ background-color:var(--magritte-color-component-card-background-state-extra-5-disabled-v18-1-1);
439
+ }
440
+ @media (min-width: 1020px){
441
+ body.magritte-old-layout .magritte-card-style-extra-5___QvO0Q_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
442
+ background-color:var(--magritte-color-component-card-background-state-extra-5-hovered-v18-1-1);
443
+ }
444
+ body.magritte-old-layout .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-5___diZv6_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
445
+ background-color:var(--magritte-color-component-card-background-state-extra-5-hovered-v18-1-1);
446
+ }
447
+ }
448
+ @media (min-width: 1024px){
449
+ body:not(.magritte-old-layout) .magritte-card-style-extra-5___QvO0Q_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
450
+ background-color:var(--magritte-color-component-card-background-state-extra-5-hovered-v18-1-1);
451
+ }
452
+ body:not(.magritte-old-layout) .magritte-card___bhGKz_6-0-2.magritte-card-hover-style-extra-5___diZv6_6-0-2.magritte-card-action___4A43B_6-0-2:hover:not(.magritte-card-disabled___SMFnB_6-0-2){
453
+ background-color:var(--magritte-color-component-card-background-state-extra-5-hovered-v18-1-1);
454
+ }
455
+ }
456
+ .magritte-card-border-radius-0___wvt4-_6-0-2{
457
+ border-radius:var(--magritte-static-border-radius-0-v18-1-1);
458
+ }
459
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-left-radius-0___xhKvn_6-0-2{
460
+ border-top-left-radius:var(--magritte-static-border-radius-0-v18-1-1);
461
+ }
462
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-right-radius-0___PeZ4S_6-0-2{
463
+ border-top-right-radius:var(--magritte-static-border-radius-0-v18-1-1);
464
+ }
465
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-left-radius-0___xhqfz_6-0-2{
466
+ border-bottom-left-radius:var(--magritte-static-border-radius-0-v18-1-1);
467
+ }
468
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-right-radius-0___wkU84_6-0-2{
469
+ border-bottom-right-radius:var(--magritte-static-border-radius-0-v18-1-1);
470
+ }
471
+ .magritte-card-border-radius-12___az-Ir_6-0-2{
472
+ border-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
473
+ }
474
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-left-radius-12___-oawE_6-0-2{
475
+ border-top-left-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
476
+ }
477
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-right-radius-12___IhPsK_6-0-2{
478
+ border-top-right-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
479
+ }
480
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-left-radius-12___FCM6F_6-0-2{
481
+ border-bottom-left-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
482
+ }
483
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-right-radius-12___tCOdR_6-0-2{
484
+ border-bottom-right-radius:var(--magritte-semantic-border-radius-form-v18-1-1);
485
+ }
486
+ .magritte-card-border-radius-16___Ys6Ji_6-0-2{
487
+ border-radius:var(--magritte-static-border-radius-400-v18-1-1);
488
+ }
489
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-left-radius-16___ukzUt_6-0-2{
490
+ border-top-left-radius:var(--magritte-static-border-radius-400-v18-1-1);
491
+ }
492
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-right-radius-16___gsFms_6-0-2{
493
+ border-top-right-radius:var(--magritte-static-border-radius-400-v18-1-1);
494
+ }
495
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-left-radius-16___RNl-W_6-0-2{
496
+ border-bottom-left-radius:var(--magritte-static-border-radius-400-v18-1-1);
497
+ }
498
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-right-radius-16___mW4e4_6-0-2{
499
+ border-bottom-right-radius:var(--magritte-static-border-radius-400-v18-1-1);
500
+ }
501
+ .magritte-card-border-radius-24___o72BE_6-0-2{
502
+ border-radius:var(--magritte-static-border-radius-600-v18-1-1);
503
+ }
504
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-left-radius-24___WggIU_6-0-2{
505
+ border-top-left-radius:var(--magritte-static-border-radius-600-v18-1-1);
506
+ }
507
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-right-radius-24___-tF1L_6-0-2{
508
+ border-top-right-radius:var(--magritte-static-border-radius-600-v18-1-1);
509
+ }
510
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-left-radius-24___LvciK_6-0-2{
511
+ border-bottom-left-radius:var(--magritte-static-border-radius-600-v18-1-1);
512
+ }
513
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-right-radius-24___2nUtu_6-0-2{
514
+ border-bottom-right-radius:var(--magritte-static-border-radius-600-v18-1-1);
515
+ }
516
+ .magritte-card-border-radius-32___XpJKx_6-0-2{
517
+ border-radius:var(--magritte-static-border-radius-800-v18-1-1);
518
+ }
519
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-left-radius-32___fILSa_6-0-2{
520
+ border-top-left-radius:var(--magritte-static-border-radius-800-v18-1-1);
521
+ }
522
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-right-radius-32___TdHDP_6-0-2{
523
+ border-top-right-radius:var(--magritte-static-border-radius-800-v18-1-1);
524
+ }
525
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-left-radius-32___3MKJI_6-0-2{
526
+ border-bottom-left-radius:var(--magritte-static-border-radius-800-v18-1-1);
527
+ }
528
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-right-radius-32___w0HZZ_6-0-2{
529
+ border-bottom-right-radius:var(--magritte-static-border-radius-800-v18-1-1);
530
+ }
531
+ .magritte-card-border-radius-40___7J5EX_6-0-2{
532
+ border-radius:var(--magritte-static-border-radius-1000-v18-1-1);
533
+ }
534
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-left-radius-40___VQ3ZO_6-0-2{
535
+ border-top-left-radius:var(--magritte-static-border-radius-1000-v18-1-1);
536
+ }
537
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-top-right-radius-40___Ao-nP_6-0-2{
538
+ border-top-right-radius:var(--magritte-static-border-radius-1000-v18-1-1);
539
+ }
540
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-left-radius-40___psJqI_6-0-2{
541
+ border-bottom-left-radius:var(--magritte-static-border-radius-1000-v18-1-1);
542
+ }
543
+ .magritte-card___bhGKz_6-0-2.magritte-card-border-bottom-right-radius-40___UyYrk_6-0-2{
544
+ border-bottom-right-radius:var(--magritte-static-border-radius-1000-v18-1-1);
545
+ }
package/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './Card';
2
+ export { type CardStyle, type CardProps } from './types';
3
+ export * from '@hh.ru/magritte-ui-theme-provider';
package/index.js ADDED
@@ -0,0 +1,13 @@
1
+ import './index.css';
2
+ export { Card } from './Card.js';
3
+ export * from '@hh.ru/magritte-ui-theme-provider';
4
+ import 'react/jsx-runtime';
5
+ import 'react';
6
+ import 'classnames';
7
+ import '@hh.ru/magritte-common-keyboard';
8
+ import '@hh.ru/magritte-common-mouse';
9
+ import '@hh.ru/magritte-common-use-disabled';
10
+ import './Skeleton.js';
11
+ import '@hh.ru/magritte-ui-skeleton';
12
+ import '@hh.ru/magritte-ui-typography';
13
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@hh.ru/magritte-ui-card",
3
+ "version": "6.0.2",
4
+ "main": "index.js",
5
+ "types": "index.d.ts",
6
+ "sideEffects": [
7
+ "index.css"
8
+ ],
9
+ "scripts": {
10
+ "build": "yarn root:build $(pwd)",
11
+ "build-test-branch": "yarn root:build-test-branch $(pwd)",
12
+ "changelog": "yarn root:changelog $(pwd)",
13
+ "prepack": "yarn root:prepack $(pwd)",
14
+ "postpublish": "yarn root:postpublish $(pwd)",
15
+ "stylelint-test": "yarn root:stylelint-test $(pwd)",
16
+ "eslint-test": "yarn root:eslint-test $(pwd)",
17
+ "ts-config": "yarn root:ts-config $(pwd)",
18
+ "ts-check": "yarn root:ts-check $(pwd)",
19
+ "test": "yarn root:test $(pwd)"
20
+ },
21
+ "peerDependencies": {
22
+ "classnames": ">=2.3.2",
23
+ "react": ">=18.2.0"
24
+ },
25
+ "dependencies": {
26
+ "@hh.ru/magritte-common-focus-visible": "0.1.3",
27
+ "@hh.ru/magritte-common-keyboard": "3.0.2",
28
+ "@hh.ru/magritte-common-mouse": "1.1.8",
29
+ "@hh.ru/magritte-common-use-disabled": "1.0.8",
30
+ "@hh.ru/magritte-design-tokens": "18.1.1",
31
+ "@hh.ru/magritte-types": "4.0.1",
32
+ "@hh.ru/magritte-ui-breakpoint": "4.0.1",
33
+ "@hh.ru/magritte-ui-mock-component": "1.0.10",
34
+ "@hh.ru/magritte-ui-skeleton": "2.1.2",
35
+ "@hh.ru/magritte-ui-theme-provider": "1.1.21",
36
+ "@hh.ru/magritte-ui-typography": "3.0.8"
37
+ },
38
+ "publishConfig": {
39
+ "access": "public"
40
+ },
41
+ "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
42
+ }
package/types.d.ts ADDED
@@ -0,0 +1,78 @@
1
+ import { KeyboardEvent, MouseEvent } from 'react';
2
+ import { ComponentWithCustomElement, ForwardRefRenderFuncWithCustomElement } from '@hh.ru/magritte-types';
3
+ import { SkeletonComponentProps } from '@hh.ru/magritte-ui-skeleton';
4
+ export type CardPadding = 0 | 8 | 12 | 16 | 24 | 32 | 40;
5
+ export type CardBorderRadius = 0 | 12 | 16 | 24 | 32 | 40;
6
+ export type CardStyle = 'blank' | 'neutral' | 'contrast' | 'positive' | 'negative' | 'warning' | 'extra-1' | 'extra-2' | 'extra-3' | 'extra-4' | 'extra-5';
7
+ interface CommonCardProps {
8
+ /** Кастомный элемент 'a', 'div' или функция */
9
+ Element?: 'a' | 'div';
10
+ /** Флаг включающий растягивание на всю ширину контейнера */
11
+ stretched?: boolean;
12
+ /** Флаг включающий растягивание на всю высоту контейнера */
13
+ verticalStretched?: boolean;
14
+ /** Флаг включающий отображение рамки */
15
+ showBorder?: boolean;
16
+ /** Размер паддинга */
17
+ padding?: CardPadding;
18
+ /** Размер паддинга слева */
19
+ paddingLeft?: CardPadding;
20
+ /** Размер паддинга справа */
21
+ paddingRight?: CardPadding;
22
+ /** Размер паддинга сверху */
23
+ paddingTop?: CardPadding;
24
+ /** Размер паддинга снизу */
25
+ paddingBottom?: CardPadding;
26
+ /** Радиус скругления углов */
27
+ borderRadius?: CardBorderRadius;
28
+ /** Радиус скругления верхнего левого угла */
29
+ borderTopLeftRadius?: CardBorderRadius;
30
+ /** Радиус скругления верхнего правого угла */
31
+ borderTopRightRadius?: CardBorderRadius;
32
+ /** Радиус скругления нижнего левого угла */
33
+ borderBottomLeftRadius?: CardBorderRadius;
34
+ /** Радиус скругления нижнего правого угла */
35
+ borderBottomRightRadius?: CardBorderRadius;
36
+ }
37
+ interface BlankCardProps {
38
+ /**
39
+ * Флаг включающий отображение тени, если это action карточка,
40
+ * то при наведении будет отображаться тень второго уровня
41
+ * */
42
+ showShadow?: boolean;
43
+ /** Цвет карточки */
44
+ style?: never;
45
+ /** Флаг включающий отображение тени для blank карточки в случае если не установлен флаг showShadow */
46
+ showShadowOnHover?: boolean;
47
+ }
48
+ interface ToneCardProps {
49
+ showShadow?: never;
50
+ style: CardStyle;
51
+ showShadowOnHover?: never;
52
+ }
53
+ interface StaticCardProps {
54
+ /** Флаг включающий action поведение карточки */
55
+ actionCard?: false;
56
+ /** Флаг отключения карточки */
57
+ disabled?: never;
58
+ showShadowOnHover?: never;
59
+ /** Функция обработчик клика */
60
+ onClick?: never;
61
+ hoverStyle?: never;
62
+ }
63
+ interface ActionCardProps {
64
+ actionCard: true;
65
+ disabled?: boolean;
66
+ /** Цвет карточки при наведении */
67
+ hoverStyle?: CardStyle;
68
+ showShadowOnHover?: boolean;
69
+ onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
70
+ }
71
+ type CardVariants = (StaticCardProps | ActionCardProps) & (BlankCardProps | ToneCardProps);
72
+ export type CardProps = CommonCardProps & CardVariants;
73
+ export type CardForwardRefRenderFuncWithCustomElement = ForwardRefRenderFuncWithCustomElement<CardProps, 'div'>;
74
+ export type CardWithCustomElement = ComponentWithCustomElement<CardProps, 'div'>;
75
+ export type CardWithSkeleton = CardWithCustomElement & {
76
+ Skeleton: ComponentWithCustomElement<SkeletonComponentProps<CardProps>, 'div'>;
77
+ };
78
+ export {};
package/types.js ADDED
@@ -0,0 +1,3 @@
1
+ import './index.css';
2
+
3
+ //# sourceMappingURL=types.js.map
package/types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}