@react-spectrum/s2
Version:
Spectrum 2 UI components in React
829 lines (808 loc) • 34 kB
JavaScript
import "./Card.css";
import {ActionMenuContext as $8bf3cd2442eb485e$export$7f4b66acaca28bd5} from "./ActionMenu.mjs";
import {AvatarContext as $3ffa2cd930156220$export$a20dad690e1279e2} from "./Avatar.mjs";
import {ButtonContext as $067ea9f64ccd4e8e$export$24d547caef80ccd1, LinkButtonContext as $067ea9f64ccd4e8e$export$1c1a176f3b9e48d3} from "./Button.mjs";
import {Checkbox as $9b405e0f8095dce0$export$48513f6b9f8ce62d} from "./Checkbox.mjs";
import {ContentContext as $8e847109a6ab556d$export$1cbdd774077931b4, FooterContext as $8e847109a6ab556d$export$5630640b68817ed6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
import {DividerContext as $bdf52657dac0f070$export$30fbfd376abdf190} from "./Divider.mjs";
import {IllustrationContext as $ac8c32e6775ddd1f$export$207c7561471de4bd} from "../icons/Icon.mjs";
import {ImageContext as $dbd6f0b2503b938c$export$8151eb379fcf2442} from "./Image.mjs";
import {ImageCoordinator as $4b5e069e9e001e8b$export$1b926c015f09611d} from "./ImageCoordinator.mjs";
import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "../icons/runtime.mjs";
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
import {SkeletonContext as $5ad421ec19460c48$export$74e166679b1f49ee, SkeletonWrapper as $5ad421ec19460c48$export$6069cbe61f690103, useIsSkeleton as $5ad421ec19460c48$export$4f8dc7555740235c} from "../icons/Skeleton.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $jzFZE$jsx, jsxs as $jzFZE$jsxs} from "react/jsx-runtime";
import {Provider as $jzFZE$Provider, DEFAULT_SLOT as $jzFZE$DEFAULT_SLOT, Link as $jzFZE$Link, composeRenderProps as $jzFZE$composeRenderProps} from "react-aria-components";
import {createContext as $jzFZE$createContext, forwardRef as $jzFZE$forwardRef, useContext as $jzFZE$useContext} from "react";
import {filterDOMProps as $jzFZE$filterDOMProps, inertValue as $jzFZE$inertValue} from "@react-aria/utils";
import {useDOMRef as $jzFZE$useDOMRef} from "@react-spectrum/utils";
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $68e4e6fe083e22fd$var$borderRadius = {
default: 'lg',
size: {
XS: 'default',
S: 'default'
}
};
let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let width = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "Z") width = true;
rules += p[0];
}
rules += ' sd1';
rules += ' _ta1';
if (!position) rules += ' _Pc1';
if (props.size === "S") rules += ' ob1';
else if (props.size === "XS") rules += ' ob1';
else rules += ' oc1';
if (props.size === "S") rules += ' nb1';
else if (props.size === "XS") rules += ' nb1';
else rules += ' nc1';
if (props.size === "S") rules += ' kb1';
else if (props.size === "XS") rules += ' kb1';
else rules += ' kc1';
if (props.size === "S") rules += ' jb1';
else if (props.size === "XS") rules += ' jb1';
else rules += ' jc1';
if (props.variant === "secondary") rules += ' -Ovbhqd-gqlRAZb1';
else if (props.variant === "primary") rules += ' -Ovbhqd-g_g1';
rules += ' -Ovbhqd-lgb1';
if (props.variant === "quiet") rules += ' g91';
else if (props.variant === "tertiary") rules += ' g91';
else rules += ' gEzkoQe1';
if (props.variant === "quiet") rules += ' _nd1';
else if (props.variant === "tertiary") {
if (props.isSelected) rules += ' _nd1';
else if (props.isFocusVisible) rules += ' _nrC99Ne1';
else if (props.isHovered) rules += ' _nrC99Ne1';
else rules += ' _nnvmtGb1';
rules += ' _nli6j2Ec1';
} else {
if (props.isSelected) rules += ' _nLeasBb1';
else if (props.isFocusVisible) rules += ' _nLeasBb1';
else if (props.isHovered) rules += ' _nLeasBb1';
else rules += ' _n4zCLMe1';
rules += ' _nlJWldjc1';
}
rules += ' _yb1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' _Xa1';
if (props.variant === "quiet") rules += ' _Ne1';
else rules += ' _Nb1';
if (props.variant === "quiet") rules += ' Pe1';
else rules += ' Pb1';
rules += ' _qc1';
rules += ' __ca1';
if (props.isCardView) rules += ' _4c1';
if (props.isLink) rules += ' ry1';
if (props.isCardView) {
if (!width) rules += ' Za1';
} else if (props.size === "XL") {
if (!width) rules += ' ZA1';
} else if (props.size === "L") {
if (!width) rules += ' Zy1';
} else if (props.size === "M") {
if (!width) rules += ' Zt1';
} else if (props.size === "S") {
if (!width) rules += ' Zr1';
} else if (props.size === "XS") {
if (!width) rules += ' ZI1';
}
rules += ' Fb1';
if (props.density === "spacious") {
if (props.size === "XL") rules += ' -dAV6Jb-Ti1';
else if (props.size === "L") rules += ' -dAV6Jb-Th1';
else if (props.size === "M") rules += ' -dAV6Jb-Tg1';
else if (props.size === "S") rules += ' -dAV6Jb-Tf1';
else if (props.size === "XS") rules += ' -dAV6Jb-Te1';
} else if (props.density === "regular") {
if (props.size === "XL") rules += ' -dAV6Jb-Th1';
else if (props.size === "L") rules += ' -dAV6Jb-Tg1';
else if (props.size === "M") rules += ' -dAV6Jb-Tf1';
else if (props.size === "S") rules += ' -dAV6Jb-Te1';
else if (props.size === "XS") rules += ' -dAV6Jb-Tt1';
} else if (props.density === "compact") {
if (props.size === "XL") rules += ' -dAV6Jb-Tg1';
else if (props.size === "L") rules += ' -dAV6Jb-Tf1';
else if (props.size === "M") rules += ' -dAV6Jb-Te1';
else if (props.size === "S") rules += ' -dAV6Jb-Tt1';
else if (props.size === "XS") rules += ' -dAV6Jb-T1DOfn1';
}
if (props.variant === "quiet") rules += ' -jXLvjd-Td1';
else rules += ' -jXLvjd-T5gMYHd1';
if (props.variant === "quiet") rules += ' -iXLvjd-Sd1';
else rules += ' -iXLvjd-S5gMYHd1';
rules += ' TxTaQHd1';
rules += ' QxTaQHd1';
rules += ' S0SaQHd1';
rules += ' R0SaQHd1';
rules += ' _oa1';
if (props.variant === "quiet") rules += ' _Le1';
else if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
return rules;
};
let $68e4e6fe083e22fd$var$selectionIndicator = function anonymous(props) {
let rules = " ";
rules += ' _Pa1';
rules += ' Wr1';
rules += ' _lr1';
rules += ' _Ar1';
rules += ' _zr1';
rules += ' _9d1';
if (props.size === "S") rules += ' ob1';
else if (props.size === "XS") rules += ' ob1';
else rules += ' oc1';
if (props.size === "S") rules += ' nb1';
else if (props.size === "XS") rules += ' nb1';
else rules += ' nc1';
if (props.size === "S") rules += ' kb1';
else if (props.size === "XS") rules += ' kb1';
else rules += ' kc1';
if (props.size === "S") rules += ' jb1';
else if (props.size === "XS") rules += ' jb1';
else rules += ' jc1';
rules += ' _Ob1';
rules += ' _kc1';
rules += ' hc1';
rules += ' mc1';
rules += ' lc1';
rules += ' _jf1';
rules += ' ik1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
if (props.isSelected) rules += ' _Ib1';
else rules += ' _Ia1';
rules += ' OGcUfH1';
rules += ' _Kc1';
if (props.isStrokeInner) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' _Mc1';
return rules;
};
let $68e4e6fe083e22fd$var$preview = function anonymous(props) {
let rules = " ";
rules += ' _Pc1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
rules += ' _Nb1';
rules += ' Pb1';
rules += ' I8cyuNb1';
rules += ' H8cyuNb1';
rules += ' J39J4qb1';
rules += ' Gk39J4qb1';
if (props.isQuiet) {
if (props.size === "S") rules += ' ob1';
else if (props.size === "XS") rules += ' ob1';
else rules += ' oc1';
}
if (props.isQuiet) {
if (props.size === "S") rules += ' nb1';
else if (props.size === "XS") rules += ' nb1';
else rules += ' nc1';
}
if (props.isQuiet) {
if (props.size === "S") rules += ' kb1';
else if (props.size === "XS") rules += ' kb1';
else rules += ' kc1';
}
if (props.isQuiet) {
if (props.size === "S") rules += ' jb1';
else if (props.size === "XS") rules += ' jb1';
else rules += ' jc1';
}
if (props.isQuiet) {
if (props.isSelected) rules += ' _nLeasBb1';
else if (props.isFocusVisible) rules += ' _nLeasBb1';
else if (props.isHovered) rules += ' _nLeasBb1';
}
if (props.isQuiet) {
if (props.isFocusVisible) rules += ' _Lf1';
} else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
return rules;
};
const $68e4e6fe083e22fd$var$image = function anonymous(props) {
let rules = " ";
rules += ' Za1';
if (props.layout === "grid") rules += ' fc1';
rules += ' _Hb1';
rules += ' _4c1';
rules += ' _Ob1';
return rules;
};
let $68e4e6fe083e22fd$var$title = function anonymous(props) {
let rules = " ";
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "M") {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
}
rules += ' xd1';
rules += ' _xa1';
rules += ' xX0cczbc1';
rules += ' _xX0cczba1';
rules += ' xfd1';
rules += ' _xfa1';
rules += ' xfX0cczbc1';
rules += ' _xfX0cczba1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
rules += ' po1';
rules += ' __Ea1';
rules += ' sa1';
rules += ' __aa1';
rules += ' __ba1';
rules += ' zn9DOs1';
rules += ' yn9DOs1';
rules += ' Bn9DOs1';
rules += ' An9DOs1';
return rules;
};
let $68e4e6fe083e22fd$var$description = function anonymous(props) {
let rules = " ";
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
if (props.size === "XL") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
} else if (props.size === "M") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
}
rules += ' xb1';
rules += ' _xa1';
rules += ' _Fb1';
rules += ' _FnuYUwec1';
rules += ' pt1';
rules += ' __Ea1';
rules += ' sa1';
rules += ' __aa1';
rules += ' __ba1';
rules += ' z9u7zPc1';
rules += ' y9u7zPc1';
rules += ' B9u7zPc1';
rules += ' A9u7zPc1';
return rules;
};
let $68e4e6fe083e22fd$var$content = function anonymous(props) {
let rules = " ";
rules += ' se1';
rules += ' DM8Mfn1';
rules += ' DlsIuJI4ff41';
rules += ' CfLapxc1';
rules += ' ClsIuJg9IhLd1';
rules += ' qb1';
rules += ' _ub1';
rules += ' ea1';
rules += ' _cf1';
if (props.size === "XL") rules += ' Ue1';
else if (props.size === "L") rules += ' UWJpoB1';
else if (props.size === "M") rules += ' UWJpoB1';
else if (props.size === "S") rules += ' Ub1';
else if (props.size === "XS") rules += ' Ub1';
rules += ' T5gMYHd1';
rules += ' Tbd1';
rules += ' Q69YG2b1';
rules += ' Qkd1';
return rules;
};
let $68e4e6fe083e22fd$var$actionMenu = " zgSHDrc1 ygSHDrc1 BgSHDrc1 AgSHDrc1 JTnYEIe1 GTnYEIe1";
let $68e4e6fe083e22fd$var$footer = " sd1 _tc1 ec1 _Ce1 Ue1 qe1 T69YG2b1";
const $68e4e6fe083e22fd$export$cb658fed5fefe1d = /*#__PURE__*/ (0, $jzFZE$createContext)({
ElementType: 'div',
layout: 'grid'
});
const $68e4e6fe083e22fd$export$d0b2ee33ebf7d64 = /*#__PURE__*/ (0, $jzFZE$createContext)(null);
const $68e4e6fe083e22fd$var$InternalCardContext = /*#__PURE__*/ (0, $jzFZE$createContext)({
isQuiet: false,
size: 'M',
isSelected: false,
isHovered: false,
isFocusVisible: false,
isPressed: false,
isCheckboxSelection: true
});
const $68e4e6fe083e22fd$var$actionButtonSize = {
XS: 'XS',
S: 'XS',
M: 'S',
L: 'M',
XL: 'L'
};
const $68e4e6fe083e22fd$export$60332b2344f7fe41 = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function Card(props, ref) {
[props] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $68e4e6fe083e22fd$export$d0b2ee33ebf7d64);
let { ElementType: ElementType, layout: layout } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$export$cb658fed5fefe1d);
let domRef = (0, $jzFZE$useDOMRef)(ref);
let { density: density = 'regular', size: size = 'M', variant: variant = 'primary', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, id: id, ...otherProps } = props;
let isQuiet = variant === 'quiet';
let isSkeleton = (0, $5ad421ec19460c48$export$4f8dc7555740235c)();
let children = /*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
values: [
[
(0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
{
alt: '',
styles: $68e4e6fe083e22fd$var$image({
layout: layout
})
}
],
[
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
{
slots: {
[(0, $jzFZE$DEFAULT_SLOT)]: {},
title: {
styles: $68e4e6fe083e22fd$var$title({
size: size
})
},
description: {
styles: $68e4e6fe083e22fd$var$description({
size: size
})
}
}
}
],
[
(0, $8e847109a6ab556d$export$1cbdd774077931b4),
{
styles: $68e4e6fe083e22fd$var$content({
size: size
})
}
],
[
(0, $bdf52657dac0f070$export$30fbfd376abdf190),
{
size: 'S'
}
],
[
(0, $8e847109a6ab556d$export$5630640b68817ed6),
{
styles: $68e4e6fe083e22fd$var$footer
}
],
[
(0, $8bf3cd2442eb485e$export$7f4b66acaca28bd5),
{
isQuiet: true,
size: $68e4e6fe083e22fd$var$actionButtonSize[size],
isDisabled: isSkeleton,
// @ts-ignore
'data-slot': 'menu',
styles: $68e4e6fe083e22fd$var$actionMenu
}
],
[
(0, $5ad421ec19460c48$export$74e166679b1f49ee),
isSkeleton
]
],
children: /*#__PURE__*/ (0, $jzFZE$jsx)((0, $4b5e069e9e001e8b$export$1b926c015f09611d), {
children: typeof props.children === 'function' ? props.children({
size: size
}) : props.children
})
});
let press = (0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef, UNSAFE_style);
if (ElementType === 'div' && !isSkeleton && props.href) // Standalone Card that has an href should be rendered as a Link.
// NOTE: In this case, the card must not contain interactive elements.
return /*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Link), {
...(0, $jzFZE$filterDOMProps)(otherProps, {
isLink: true
}),
ref: domRef,
className: (renderProps)=>UNSAFE_className + $68e4e6fe083e22fd$var$card({
...renderProps,
size: size,
density: density,
variant: variant,
isCardView: false,
isLink: true
}, styles),
style: (renderProps)=>// Only the preview in quiet cards scales down on press
variant === 'quiet' ? UNSAFE_style : press(renderProps),
children: (renderProps)=>/*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$var$InternalCardContext.Provider, {
value: {
size: size,
isQuiet: isQuiet,
isCheckboxSelection: false,
isSelected: false,
...renderProps
},
children: children
})
});
if (ElementType === 'div' || isSkeleton) return /*#__PURE__*/ (0, $jzFZE$jsx)("div", {
...(0, $jzFZE$filterDOMProps)(otherProps),
id: id != null ? String(id) : undefined,
// @ts-ignore - React < 19 compat
inert: (0, $jzFZE$inertValue)(isSkeleton),
ref: domRef,
className: UNSAFE_className + $68e4e6fe083e22fd$var$card({
size: size,
density: density,
variant: variant,
isCardView: ElementType !== 'div'
}, styles),
style: UNSAFE_style,
children: /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$var$InternalCardContext.Provider, {
value: {
size: size,
isQuiet: isQuiet,
isCheckboxSelection: false,
isHovered: false,
isFocusVisible: false,
isSelected: false,
isPressed: false
},
children: children
})
});
return /*#__PURE__*/ (0, $jzFZE$jsx)(ElementType, {
...props,
ref: domRef,
className: (renderProps)=>UNSAFE_className + $68e4e6fe083e22fd$var$card({
...renderProps,
isCardView: true,
isLink: !!props.href,
size: size,
density: density,
variant: variant
}, styles),
style: (renderProps)=>// Only the preview in quiet cards scales down on press
variant === 'quiet' ? UNSAFE_style : press(renderProps),
children: ({ selectionMode: selectionMode, selectionBehavior: selectionBehavior, isHovered: isHovered, isFocusVisible: isFocusVisible, isSelected: isSelected, isPressed: isPressed })=>/*#__PURE__*/ (0, $jzFZE$jsxs)($68e4e6fe083e22fd$var$InternalCardContext.Provider, {
value: {
size: size,
isQuiet: isQuiet,
isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle',
isHovered: isHovered,
isFocusVisible: isFocusVisible,
isSelected: isSelected,
isPressed: isPressed
},
children: [
!isQuiet && /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$var$SelectionIndicator, {}),
!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$var$CardCheckbox, {}),
/*#__PURE__*/ (0, $jzFZE$jsx)("div", {
className: " sc1",
children: children
})
]
})
});
});
function $68e4e6fe083e22fd$var$SelectionIndicator() {
let { size: size, isSelected: isSelected, isQuiet: isQuiet, isCheckboxSelection: isCheckboxSelection } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$var$InternalCardContext);
return /*#__PURE__*/ (0, $jzFZE$jsx)("div", {
className: $68e4e6fe083e22fd$var$selectionIndicator({
size: size,
isSelected: isSelected,
// Add an inner stroke only for quiet cards with no checkbox to
// help distinguish the selected state from the preview.
isStrokeInner: isQuiet && !isCheckboxSelection
})
});
}
function $68e4e6fe083e22fd$var$CardCheckbox() {
let { size: size } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$var$InternalCardContext);
return /*#__PURE__*/ (0, $jzFZE$jsx)("div", {
className: " _Pa1 W5gMYHd1 _A5gMYHd1 _9d1 Tp1 Qp1 Sp1 Rp1 gGcUfH1 ob1 nb1 kb1 jb1 _n4zCLMe1",
children: /*#__PURE__*/ (0, $jzFZE$jsx)((0, $9b405e0f8095dce0$export$48513f6b9f8ce62d), {
slot: "selection",
excludeFromTabOrder: true,
size: size === 'XS' ? 'S' : size
})
});
}
const $68e4e6fe083e22fd$export$115f017852a4bb7c = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function CardPreview(props, ref) {
let { size: size, isQuiet: isQuiet, isHovered: isHovered, isFocusVisible: isFocusVisible, isSelected: isSelected, isPressed: isPressed, isCheckboxSelection: isCheckboxSelection } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$var$InternalCardContext);
let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
let domRef = (0, $jzFZE$useDOMRef)(ref);
return /*#__PURE__*/ (0, $jzFZE$jsxs)("div", {
...(0, $jzFZE$filterDOMProps)(props),
slot: "preview",
ref: domRef,
className: UNSAFE_className + $68e4e6fe083e22fd$var$preview({
size: size,
isQuiet: isQuiet,
isHovered: isHovered,
isFocusVisible: isFocusVisible,
isSelected: isSelected
}),
style: isQuiet ? (0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef)({
isPressed: isPressed
}) : UNSAFE_style,
children: [
isQuiet && /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$var$SelectionIndicator, {}),
isQuiet && isCheckboxSelection && /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$var$CardCheckbox, {}),
/*#__PURE__*/ (0, $jzFZE$jsx)("div", {
className: " oi1 ni1 ki1 ji1 _Nb1 Pb1",
children: props.children
})
]
});
});
const $68e4e6fe083e22fd$var$collection = function anonymous(props) {
let rules = " ";
rules += ' se1';
rules += ' DvhgoHd1';
if (props.size === "S") rules += ' Ua1';
else if (props.size === "XS") rules += ' Ua1';
else rules += ' Ub1';
if (props.size === "S") rules += ' qa1';
else if (props.size === "XS") rules += ' qa1';
else rules += ' qb1';
return rules;
};
const $68e4e6fe083e22fd$var$collectionImage = " Za1 fa1 f5DbKFc1 y5DbKFwoofG1 _Hb1 _Ob1 _4c1";
const $68e4e6fe083e22fd$export$c368ea3e577b1b86 = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function CollectionCardPreview(props, ref) {
let { size: size } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$var$InternalCardContext);
return /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$export$115f017852a4bb7c, {
...props,
ref: ref,
children: /*#__PURE__*/ (0, $jzFZE$jsx)("div", {
className: $68e4e6fe083e22fd$var$collection({
size: size
}),
children: /*#__PURE__*/ (0, $jzFZE$jsx)((0, $dbd6f0b2503b938c$export$8151eb379fcf2442).Provider, {
value: {
styles: $68e4e6fe083e22fd$var$collectionImage
},
children: props.children
})
})
});
});
const $68e4e6fe083e22fd$export$eff93e4e59ccc3b8 = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function AssetCard(props1, ref) {
let { layout: layout } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$export$cb658fed5fefe1d);
return /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$export$60332b2344f7fe41, {
...props1,
ref: ref,
density: "regular",
children: (0, $jzFZE$composeRenderProps)(props1.children, (children)=>/*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
values: [
[
(0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
{
alt: '',
styles: function anonymous(props) {
let rules = " ";
rules += ' Za1';
if (props.layout === "grid") rules += ' fa1';
rules += ' _Ha1';
rules += ' _Ob1';
rules += ' _4c1';
return rules;
}({
layout: layout
})
}
],
[
(0, $ac8c32e6775ddd1f$export$207c7561471de4bd),
{
render (icon) {
return /*#__PURE__*/ (0, $jzFZE$jsx)((0, $5ad421ec19460c48$export$6069cbe61f690103), {
children: /*#__PURE__*/ (0, $jzFZE$jsx)("div", {
className: " sd1 eb1 _Ca1 gH1 fa1",
children: icon
})
});
},
styles: " Fd1 Le1 Ke1 Zc1"
}
]
],
children: children
}))
});
});
const $68e4e6fe083e22fd$var$avatarSize = {
XS: 24,
S: 48,
M: 64,
L: 64,
XL: 80
};
const $68e4e6fe083e22fd$export$78e8870b5d8ae469 = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function UserCard(props, ref) {
let { size: size = 'M' } = props;
return /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$export$60332b2344f7fe41, {
...props,
ref: ref,
density: "spacious",
children: (0, $jzFZE$composeRenderProps)(props.children, (children)=>/*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
values: [
[
(0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
{
alt: '',
styles: " Za1 fb1 _Hb1 _Ob1 _4c1"
}
],
[
(0, $3ffa2cd930156220$export$a20dad690e1279e2),
{
size: $68e4e6fe083e22fd$var$avatarSize[size],
UNSAFE_style: {
'--size': $68e4e6fe083e22fd$var$avatarSize[size] / 16 + 'rem'
},
styles: " _Pc1 Jy1 Jkymupd0fnV8d1",
isOverBackground: true
}
]
],
children: children
}))
});
});
const $68e4e6fe083e22fd$var$buttonSize = {
XS: 'S',
S: 'S',
M: 'M',
L: 'L',
XL: 'XL'
};
const $68e4e6fe083e22fd$export$e6cbe35324ccf844 = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function ProductCard(props1, ref) {
let { size: size = 'M' } = props1;
return /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$export$60332b2344f7fe41, {
...props1,
ref: ref,
density: "spacious",
children: (0, $jzFZE$composeRenderProps)(props1.children, (children)=>/*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
values: [
[
(0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
{
slots: {
preview: {
alt: '',
styles: " Za1 fd1 _Hb1 _Ob1 _4c1"
},
thumbnail: {
alt: '',
styles: function anonymous(props) {
let rules = " ";
rules += ' _Pc1';
rules += ' _Ob1';
rules += ' _4c1';
if (props.size === "XL") rules += ' ZD1';
else if (props.size === "L") rules += ' Zx1';
else if (props.size === "M") rules += ' Zw1';
else if (props.size === "S") rules += ' Zv1';
else if (props.size === "XS") rules += ' Zo1';
rules += ' FRuFGYc1';
if (props.size === "S") rules += ' oa1';
else if (props.size === "XS") rules += ' oa1';
else rules += ' ob1';
if (props.size === "S") rules += ' na1';
else if (props.size === "XS") rules += ' na1';
else rules += ' nb1';
if (props.size === "S") rules += ' ka1';
else if (props.size === "XS") rules += ' ka1';
else rules += ' kb1';
if (props.size === "S") rules += ' ja1';
else if (props.size === "XS") rules += ' ja1';
else rules += ' jb1';
rules += ' _Hb1';
rules += ' Jy1';
rules += ' JkymupdLu7Bcc1';
rules += ' _Lf1';
if (props.size === "XS") rules += ' _Mb1';
else rules += ' _Mc1';
rules += ' OEzkoQe1';
if (props.size === "XL") rules += ' -F_-Fy1';
else if (props.size === "L") rules += ' -F_-Fw1';
else if (props.size === "M") rules += ' -F_-Fv1';
else if (props.size === "S") rules += ' -F_-Fu1';
else if (props.size === "XS") rules += ' -F_-Fp1';
return rules;
}({
size: size
})
}
}
}
],
[
(0, $8e847109a6ab556d$export$5630640b68817ed6),
{
styles: (0, $feb886035e0d4633$export$e618dc39ac9ad607)($68e4e6fe083e22fd$var$footer, " _Cb1")
}
],
[
(0, $067ea9f64ccd4e8e$export$24d547caef80ccd1),
{
size: $68e4e6fe083e22fd$var$buttonSize[size]
}
],
[
(0, $067ea9f64ccd4e8e$export$1c1a176f3b9e48d3),
{
size: $68e4e6fe083e22fd$var$buttonSize[size]
}
]
],
children: children
}))
});
});
export {$68e4e6fe083e22fd$export$cb658fed5fefe1d as InternalCardViewContext, $68e4e6fe083e22fd$export$d0b2ee33ebf7d64 as CardContext, $68e4e6fe083e22fd$export$60332b2344f7fe41 as Card, $68e4e6fe083e22fd$export$115f017852a4bb7c as CardPreview, $68e4e6fe083e22fd$export$c368ea3e577b1b86 as CollectionCardPreview, $68e4e6fe083e22fd$export$eff93e4e59ccc3b8 as AssetCard, $68e4e6fe083e22fd$export$78e8870b5d8ae469 as UserCard, $68e4e6fe083e22fd$export$e6cbe35324ccf844 as ProductCard};
//# sourceMappingURL=Card.mjs.map