npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-73414999f-240916 → 3.0.0-nightly-c904e066c-240917 - Mend

@react-spectrum/s2 3.0.0-nightly-73414999f-240916 → 3.0.0-nightly-c904e066c-240917

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/Card.mjs CHANGED Viewed

@@ -13,7 +13,7 @@ import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressSc
 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 "./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} from "react-aria-components";
+import {Provider as $jzFZE$Provider, DEFAULT_SLOT as $jzFZE$DEFAULT_SLOT, 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} from "@react-aria/utils";
 import {useDOMRef as $jzFZE$useDOMRef} from "@react-spectrum/utils";
@@ -453,7 +453,9 @@ const $68e4e6fe083e22fd$export$60332b2344f7fe41 = /*#__PURE__*/ (0, $jzFZE$forwa
             ]
         ],
         children: /*#__PURE__*/ (0, $jzFZE$jsx)((0, $4b5e069e9e001e8b$export$1b926c015f09611d), {
-            children: props.children
+            children: typeof props.children === 'function' ? props.children({
+                size: size
+            }) : props.children
         })
     });
     let ElementType = (0, $jzFZE$useContext)($68e4e6fe083e22fd$export$64992ac69f286e5c);
@@ -605,32 +607,32 @@ const $68e4e6fe083e22fd$export$eff93e4e59ccc3b8 = /*#__PURE__*/ (0, $jzFZE$forwa
         ...props,
         ref: ref,
         density: "regular",
-        children: /*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
-            values: [
-                [
-                    (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
-                    {
-                        alt: '',
-                        styles: " . l4 _bb __Na __Ba __Da"
-                    }
+        children: (0, $jzFZE$composeRenderProps)(props.children, (children)=>/*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
+                values: [
+                    [
+                        (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
+                        {
+                            alt: '',
+                            styles: " . l4 _bb __Na __Ba __Da"
+                        }
+                    ],
+                    [
+                        (0, $ac8c32e6775ddd1f$export$207c7561471de4bd),
+                        {
+                            render (icon) {
+                                return /*#__PURE__*/ (0, $jzFZE$jsx)((0, $5ad421ec19460c48$export$6069cbe61f690103), {
+                                    children: /*#__PURE__*/ (0, $jzFZE$jsx)("div", {
+                                        className: " . _Zd _1c _2d bg _bb",
+                                        children: icon
+                                    })
+                                });
+                            },
+                            styles: " . k3 rJ rbM pJ pbM l-3760fj"
+                        }
+                    ]
                 ],
-                [
-                    (0, $ac8c32e6775ddd1f$export$207c7561471de4bd),
-                    {
-                        render (icon) {
-                            return /*#__PURE__*/ (0, $jzFZE$jsx)((0, $5ad421ec19460c48$export$6069cbe61f690103), {
-                                children: /*#__PURE__*/ (0, $jzFZE$jsx)("div", {
-                                    className: " . _Zd _1c _2d bg _bb",
-                                    children: icon
-                                })
-                            });
-                        },
-                        styles: " . k3 rJ rbM pJ pbM l-3760fj"
-                    }
-                ]
-            ],
-            children: props.children
-        })
+                children: children
+            }))
     });
 });
 const $68e4e6fe083e22fd$var$avatarSize = {
@@ -646,29 +648,29 @@ const $68e4e6fe083e22fd$export$78e8870b5d8ae469 = /*#__PURE__*/ (0, $jzFZE$forwa
         ...props,
         ref: ref,
         density: "spacious",
-        children: /*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
-            values: [
-                [
-                    (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
-                    {
-                        alt: '',
-                        styles: " . l4 _b-375yqg __Nb __Ba __Da"
-                    }
+        children: (0, $jzFZE$composeRenderProps)(props.children, (children)=>/*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
+                values: [
+                    [
+                        (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
+                        {
+                            alt: '',
+                            styles: " . l4 _b-375yqg __Nb __Ba __Da"
+                        }
+                    ],
+                    [
+                        (0, $3ffa2cd930156220$export$a20dad690e1279e2),
+                        {
+                            size: $68e4e6fe083e22fd$var$avatarSize[size],
+                            UNSAFE_style: {
+                                '--size': $68e4e6fe083e22fd$var$avatarSize[size] + 'px'
+                            },
+                            styles: " . Uc Aa A-1d75it2-1oavddy",
+                            isOverBackground: true
+                        }
+                    ]
                 ],
-                [
-                    (0, $3ffa2cd930156220$export$a20dad690e1279e2),
-                    {
-                        size: $68e4e6fe083e22fd$var$avatarSize[size],
-                        UNSAFE_style: {
-                            '--size': $68e4e6fe083e22fd$var$avatarSize[size] + 'px'
-                        },
-                        styles: " . Uc Aa A-1d75it2-1oavddy",
-                        isOverBackground: true
-                    }
-                ]
-            ],
-            children: props.children
-        })
+                children: children
+            }))
     });
 });
 const $68e4e6fe083e22fd$var$buttonSize = {
@@ -684,104 +686,104 @@ const $68e4e6fe083e22fd$export$e6cbe35324ccf844 = /*#__PURE__*/ (0, $jzFZE$forwa
         ...props1,
         ref: ref,
         density: "spacious",
-        children: /*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
-            values: [
-                [
-                    (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
-                    {
-                        slots: {
-                            preview: {
-                                alt: '',
-                                styles: " . l4 _b-3760ey __Nb __Ba __Da"
-                            },
-                            thumbnail: {
-                                alt: '',
-                                styles: function anonymous(props) {
-                                    let rules = " .";
-                                    rules += ' Uc';
-                                    rules += ' __Ba';
-                                    rules += ' __Da';
-                                    if (props.size === "XL") {
-                                        rules += ' lbA';
-                                        rules += ' lz';
-                                    } else if (props.size === "L") {
-                                        rules += ' lbw';
-                                        rules += ' lv';
-                                    } else if (props.size === "M") {
-                                        rules += ' lbu';
-                                        rules += ' lr';
-                                    } else if (props.size === "S") {
-                                        rules += ' lbt';
-                                        rules += ' ls';
-                                    } else if (props.size === "XS") {
-                                        rules += ' lbn';
-                                        rules += ' lm';
-                                    }
-                                    rules += ' k-375toq';
-                                    if (props.size === "S") rules += ' _vb';
-                                    else if (props.size === "XS") rules += ' _vb';
-                                    else rules += ' _vc';
-                                    if (props.size === "S") rules += ' _wb';
-                                    else if (props.size === "XS") rules += ' _wb';
-                                    else rules += ' _wc';
-                                    if (props.size === "S") rules += ' _xb';
-                                    else if (props.size === "XS") rules += ' _xb';
-                                    else rules += ' _xc';
-                                    if (props.size === "S") rules += ' _yb';
-                                    else if (props.size === "XS") rules += ' _yb';
-                                    else rules += ' _yc';
-                                    rules += ' __Nb';
-                                    rules += ' A-1d75it2-6grsbv';
-                                    rules += ' Aa';
-                                    rules += ' _Lb';
-                                    if (props.size === "XS") rules += ' _Nb';
-                                    else rules += ' _Nc';
-                                    rules += ' d-1de2x0q';
-                                    if (props.size === "XL") {
-                                        rules += ' -_375toq_k-bA';
-                                        rules += ' -_375toq_k-z';
-                                    } else if (props.size === "L") {
-                                        rules += ' -_375toq_k-bw';
-                                        rules += ' -_375toq_k-v';
-                                    } else if (props.size === "M") {
-                                        rules += ' -_375toq_k-bu';
-                                        rules += ' -_375toq_k-r';
-                                    } else if (props.size === "S") {
-                                        rules += ' -_375toq_k-bt';
-                                        rules += ' -_375toq_k-s';
-                                    } else if (props.size === "XS") {
-                                        rules += ' -_375toq_k-bn';
-                                        rules += ' -_375toq_k-m';
-                                    }
-                                    return rules;
-                                }({
-                                    size: size
-                                })
+        children: (0, $jzFZE$composeRenderProps)(props1.children, (children)=>/*#__PURE__*/ (0, $jzFZE$jsx)((0, $jzFZE$Provider), {
+                values: [
+                    [
+                        (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
+                        {
+                            slots: {
+                                preview: {
+                                    alt: '',
+                                    styles: " . l4 _b-3760ey __Nb __Ba __Da"
+                                },
+                                thumbnail: {
+                                    alt: '',
+                                    styles: function anonymous(props) {
+                                        let rules = " .";
+                                        rules += ' Uc';
+                                        rules += ' __Ba';
+                                        rules += ' __Da';
+                                        if (props.size === "XL") {
+                                            rules += ' lbA';
+                                            rules += ' lz';
+                                        } else if (props.size === "L") {
+                                            rules += ' lbw';
+                                            rules += ' lv';
+                                        } else if (props.size === "M") {
+                                            rules += ' lbu';
+                                            rules += ' lr';
+                                        } else if (props.size === "S") {
+                                            rules += ' lbt';
+                                            rules += ' ls';
+                                        } else if (props.size === "XS") {
+                                            rules += ' lbn';
+                                            rules += ' lm';
+                                        }
+                                        rules += ' k-375toq';
+                                        if (props.size === "S") rules += ' _vb';
+                                        else if (props.size === "XS") rules += ' _vb';
+                                        else rules += ' _vc';
+                                        if (props.size === "S") rules += ' _wb';
+                                        else if (props.size === "XS") rules += ' _wb';
+                                        else rules += ' _wc';
+                                        if (props.size === "S") rules += ' _xb';
+                                        else if (props.size === "XS") rules += ' _xb';
+                                        else rules += ' _xc';
+                                        if (props.size === "S") rules += ' _yb';
+                                        else if (props.size === "XS") rules += ' _yb';
+                                        else rules += ' _yc';
+                                        rules += ' __Nb';
+                                        rules += ' A-1d75it2-6grsbv';
+                                        rules += ' Aa';
+                                        rules += ' _Lb';
+                                        if (props.size === "XS") rules += ' _Nb';
+                                        else rules += ' _Nc';
+                                        rules += ' d-1de2x0q';
+                                        if (props.size === "XL") {
+                                            rules += ' -_375toq_k-bA';
+                                            rules += ' -_375toq_k-z';
+                                        } else if (props.size === "L") {
+                                            rules += ' -_375toq_k-bw';
+                                            rules += ' -_375toq_k-v';
+                                        } else if (props.size === "M") {
+                                            rules += ' -_375toq_k-bu';
+                                            rules += ' -_375toq_k-r';
+                                        } else if (props.size === "S") {
+                                            rules += ' -_375toq_k-bt';
+                                            rules += ' -_375toq_k-s';
+                                        } else if (props.size === "XS") {
+                                            rules += ' -_375toq_k-bn';
+                                            rules += ' -_375toq_k-m';
+                                        }
+                                        return rules;
+                                    }({
+                                        size: size
+                                    })
+                                }
                             }
                         }
-                    }
-                ],
-                [
-                    (0, $8e847109a6ab556d$export$5630640b68817ed6),
-                    {
-                        styles: (0, $feb886035e0d4633$export$e618dc39ac9ad607)($68e4e6fe083e22fd$var$footer, " . _2c")
-                    }
-                ],
-                [
-                    (0, $067ea9f64ccd4e8e$export$24d547caef80ccd1),
-                    {
-                        size: $68e4e6fe083e22fd$var$buttonSize[size]
-                    }
+                    ],
+                    [
+                        (0, $8e847109a6ab556d$export$5630640b68817ed6),
+                        {
+                            styles: (0, $feb886035e0d4633$export$e618dc39ac9ad607)($68e4e6fe083e22fd$var$footer, " . _2c")
+                        }
+                    ],
+                    [
+                        (0, $067ea9f64ccd4e8e$export$24d547caef80ccd1),
+                        {
+                            size: $68e4e6fe083e22fd$var$buttonSize[size]
+                        }
+                    ],
+                    [
+                        (0, $067ea9f64ccd4e8e$export$1c1a176f3b9e48d3),
+                        {
+                            size: $68e4e6fe083e22fd$var$buttonSize[size]
+                        }
+                    ]
                 ],
-                [
-                    (0, $067ea9f64ccd4e8e$export$1c1a176f3b9e48d3),
-                    {
-                        size: $68e4e6fe083e22fd$var$buttonSize[size]
-                    }
-                ]
-            ],
-            children: props1.children
-        })
+                children: children
+            }))
     });
 });

package/dist/Card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode,\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {props.children}\n </Provider>\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {props.children}\n </Provider>\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {props.children}\n </Provider>\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.mjs.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;AAiDD,MAAM,qCAAe;IACnB,SAAS;IACT,MAAM;QACJ,IAAI;QACJ,GAAG;IACL;AACF;AAEA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqIJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BJ,MAAM;AAQN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCJ,IAAI;AASG,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAA+B;AACnE,MAAM,yDAAc,CAAA,GAAA,oBAAY,EAAiE;AAYxG,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAA4B;IAClE,SAAS;IACT,MAAM;IACN,YAAY;IACZ,WAAW;IACX,gBAAgB;IAChB,WAAW;IACX,qBAAqB;AACvB;AAEA,MAAM,yCAAmB;IACvB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEO,MAAM,0DAAO,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,CAAC,MAAM,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IAC9C,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,WAAC,UAAU,iBAAW,OAAO,cAAK,UAAU,6BAAW,mBAAmB,kBAAI,YAAY,UAAE,MAAM,MAAE,EAAE,EAAE,GAAG,YAAW,GAAG;IAC7H,IAAI,UAAU,YAAY;IAC1B,IAAI,aAAa,CAAA,GAAA,yCAAY;IAC7B,IAAI,yBACF,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,yCAAW;gBAAG;oBAAC,KAAK;oBAAI,QAAQ;gBAAK;aAAE;YACxC;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,OAAO;wBACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;wBACjB,OAAO;4BAAC,QAAQ,4BAAM;sCAAC;4BAAI;wBAAE;wBAC7B,aAAa;4BAAC,QAAQ,kCAAY;sCAAC;4BAAI;wBAAE;oBAC3C;gBACF;aAAE;YACF;gBAAC,CAAA,GAAA,yCAAa;gBAAG;oBAAC,QAAQ,8BAAQ;8BAAC;oBAAI;gBAAE;aAAE;YAC3C;gBAAC,CAAA,GAAA,yCAAa;gBAAG;oBAAC,MAAM;gBAAG;aAAE;YAC7B;gBAAC,CAAA,GAAA,yCAAY;gBAAG;oBAAC,QAAQ;gBAAM;aAAE;YACjC;gBAAC,CAAA,GAAA,yCAAgB;gBAAG;oBAClB,SAAS;oBACT,MAAM,sCAAgB,CAAC,KAAK;oBAC5B,YAAY;oBACZ,aAAa;oBACb,aAAa;oBACb,MAAM;gBACR;aAAE;YACF;gBAAC,CAAA,GAAA,yCAAc;gBAAG;aAAW;SAC9B;kBACD,cAAA,gBAAC,CAAA,GAAA,yCAAe;sBACb,OAAO,MAAM,QAAQ,KAAK,aAAa,MAAM,QAAQ,CAAC;sBAAC;YAAI,KAAK,MAAM,QAAQ;;;IAKrF,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE;IAC7B,IAAI,gBAAgB,SAAS,YAC3B,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,IAAI,OAAO;QACX,iCAAiC;QACjC,OAAO,aAAa,SAAS;QAC7B,KAAK;QACL,WAAW,mBAAmB,2BAAK;kBAAC;qBAAM;qBAAS;YAAS,YAAY,gBAAgB;QAAK,GAAG;QAChG,OAAO;kBACP,cAAA,gBAAC,0CAAoB,QAAQ;YAAC,OAAO;sBAAC;yBAAM;gBAAS,qBAAqB;gBAAO,WAAW;gBAAO,gBAAgB;gBAAO,YAAY;gBAAO,WAAW;YAAK;sBAC1J;;;IAMT,IAAI,QAAQ,CAAA,GAAA,yCAAS,EAAE,QAAQ;IAC/B,qBACE,gBAAC;QACE,GAAG,KAAK;QACT,KAAK;QACL,WAAW,CAAA,cAAe,mBAAmB,2BAAK;gBAAC,GAAG,WAAW;gBAAE,YAAY;gBAAM,QAAQ,CAAC,CAAC,MAAM,IAAI;sBAAE;yBAAM;yBAAS;YAAO,GAAG;QACpI,OAAO,CAAA,cACL,uDAAuD;YACvD,YAAY,UAAU,eAAe,MAAM;kBAE5C,CAAC,iBAAC,aAAa,qBAAE,iBAAiB,aAAE,SAAS,kBAAE,cAAc,cAAE,UAAU,aAAE,SAAS,EAAC,iBACpF,iBAAC,0CAAoB,QAAQ;gBAAC,OAAO;0BAAC;6BAAM;oBAAS,qBAAqB,kBAAkB,UAAU,sBAAsB;+BAAU;oCAAW;gCAAgB;+BAAY;gBAAS;;oBAEnL,CAAC,yBAAW,gBAAC;oBACb,CAAC,WAAW,kBAAkB,UAAU,sBAAsB,0BAC7D,gBAAC;kCAGH,gBAAC;wBAAI,SAAS;kCACX;;;;;AAMb;AAEA,SAAS;IACP,IAAI,QAAC,IAAI,cAAE,UAAU,WAAE,OAAO,uBAAE,mBAAmB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IAClE,qBACE,gBAAC;QACC,WAAW,yCAAmB;kBAC5B;wBACA;YACA,gEAAgE;YAChE,wDAAwD;YACxD,eAAe,WAAW,CAAC;QAC7B;;AAEN;AAEA,SAAS;IACP,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxB,qBACE,gBAAC;QACC,SAAS;kBAUT,cAAA,gBAAC,CAAA,GAAA,yCAAO;YACN,MAAK;YACL,mBAAmB;YACnB,MAAM,SAAS,OAAO,MAAM;;;AAGpC;AAMO,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,IAAI,QAAC,IAAI,WAAE,OAAO,aAAE,SAAS,kBAAE,cAAc,cAAE,UAAU,aAAE,SAAS,uBAAE,mBAAmB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxG,IAAI,oBAAC,gBAAgB,gBAAE,YAAY,EAAC,GAAG;IACvC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,MAAM;QACzB,MAAK;QACL,KAAK;QACL,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;uBAAS;4BAAW;wBAAgB;QAAU;QAC3F,OAAO,UAAU,CAAA,GAAA,yCAAS,EAAE,QAAQ;uBAAC;QAAS,KAAK;;YAClD,yBAAW,gBAAC;YACZ,WAAW,qCAAuB,gBAAC;0BACpC,gBAAC;gBAAI,SAAS;0BACX,MAAM,QAAQ;;;;AAIvB;AAEA,MAAM;;;;;;;;;;;;AAYN,MAAM;AAcC,MAAM,0DAAwB,CAAA,GAAA,iBAAS,EAAE,SAAS,sBAAsB,KAAuB,EAAE,GAA2B;IACjI,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxB,qBACE,gBAAC;QAAa,GAAG,KAAK;QAAE,KAAK;kBAC3B,cAAA,gBAAC;YAAI,WAAW,iCAAW;sBAAC;YAAI;sBAC9B,cAAA,gBAAC,CAAA,GAAA,yCAAW,EAAE,QAAQ;gBAAC,OAAO;oBAAC,QAAQ;gBAAe;0BACnD,MAAM,QAAQ;;;;AAKzB;AAIO,MAAM,0DAAY,CAAA,GAAA,iBAAS,EAAE,SAAS,UAAU,KAAqB,EAAE,GAA2B;IACvG,qBACE,gBAAC;QAAM,GAAG,KAAK;QAAE,KAAK;QAAK,SAAQ;kBAChC,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAA,yBAClC,gBAAC,CAAA,GAAA,eAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,yCAAW;wBAAG;4BACb,KAAK;4BACL,MAAM;wBAOR;qBAAE;oBACF;wBAAC,CAAA,GAAA,yCAAkB;wBAAG;4BACpB,QAAO,IAAI;gCACT,qBACE,gBAAC,CAAA,GAAA,yCAAc;8CACb,cAAA,gBAAC;wCACC,SAAS;kDAOR;;;4BAIT;4BACA,MAAM;wBAMR;qBAAE;iBACH;0BACA;;;AAKX;AAEA,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAOO,MAAM,0DAAW,CAAA,GAAA,iBAAS,EAAE,SAAS,SAAS,KAAgB,EAAE,GAA2B;IAChG,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,qBACE,gBAAC;QAAM,GAAG,KAAK;QAAE,KAAK;QAAK,SAAQ;kBAChC,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAA,yBAClC,gBAAC,CAAA,GAAA,eAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,yCAAW;wBAAG;4BACb,KAAK;4BACL,MAAM;wBAOR;qBAAE;oBACF;wBAAC,CAAA,GAAA,yCAAY;wBAAG;4BACd,MAAM,gCAAU,CAAC,KAAK;4BACtB,cAAc;gCACZ,UAAU,gCAAU,CAAC,KAAK,GAAG;4BAC/B;4BACA,MAAM;4BAON,kBAAkB;wBACpB;qBAAE;iBACH;0BACA;;;AAKX;AAEA,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAOO,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,MAAuB,EAAE,GAA2B;IAC7G,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,qBACE,gBAAC;QAAM,GAAG,MAAK;QAAE,KAAK;QAAK,SAAQ;kBAChC,CAAA,GAAA,yBAAiB,EAAE,OAAM,QAAQ,EAAE,CAAA,yBAClC,gBAAC,CAAA,GAAA,eAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,yCAAW;wBAAG;4BACb,OAAO;gCACL,SAAS;oCACP,KAAK;oCACL,MAAM;gCAOR;gCACA,WAAW;oCACT,KAAK;oCACL,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAiCL;8CAAC;oCAAI;gCACV;4BACF;wBACF;qBAAE;oBACF;wBAAC,CAAA,GAAA,yCAAY;wBAAG;4BACd,QAAQ,CAAA,GAAA,yCAAU,EAAE;wBAGtB;qBAAE;oBACF;wBAAC,CAAA,GAAA,yCAAY;wBAAG;4BAAC,MAAM,gCAAU,CAAC,KAAK;wBAAA;qBAAE;oBACzC;wBAAC,CAAA,GAAA,yCAAgB;wBAAG;4BAAC,MAAM,gCAAU,CAAC,KAAK;wBAAA;qBAAE;iBAC9C;0BACA;;;AAKX","sources":["packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n /* The size of the Card. /\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode \| ((renderProps: CardRenderProps) => ReactNode),\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {typeof props.children === 'function' ? props.children({size}) : props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.mjs.map"}