@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/card.jsx

@@ -0,0 +1,875 @@
+/*
+* 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.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Card.tsx
+import { t as mergeStyles } from "./runtime.jsx";
+import { a as useProviderProps } from "./provider.jsx";
+import { n as ButtonContext$1, r as LinkButtonContext } from "./context.jsx";
+import { n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
+import { SkeletonContext, SkeletonWrapper, useInertAttribute, useIsSkeleton } from "../skeleton/index.jsx";
+import { pressScale } from "../pressScale.jsx";
+import { n as IllustrationContext, t as IconContext } from "./spectrum-icon.jsx";
+import { ImageContext, ImageCoordinator } from "../image/index.jsx";
+import { AvatarContext } from "../avatar/index.jsx";
+import { c as TextContext$1, i as FooterContext, n as ContentContext } from "./text.jsx";
+import { n as ActionMenuContext } from "./ActionMenu.jsx";
+import { DividerContext } from "../divider/index.jsx";
+import { meshStrip } from "../style/meshStrip.jsx";
+import { Show, createContext, createMemo, createTrackedEffect, useContext } from "solid-js";
+import { mergeProps, splitProps } from "@proyecto-viviana/solidaria/utils";
+import { GridListItem, GridListSelectionCheckbox, Link, filterDOMProps } from "@proyecto-viviana/solidaria-components";
+//#region src/card/mesh-field.ts
+function createMeshField(getElement, isEnabled) {
+	const align = () => {
+		const element = getElement();
+		if (!element) return;
+		const rect = element.getBoundingClientRect();
+		const position = `${String(-(rect.left + window.scrollX))}px ${String(-(rect.top + window.scrollY))}px`;
+		element.style.backgroundPosition = position;
+		element.style.setProperty("--gl-pos", position);
+	};
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
+		if (!isEnabled()) return;
+		let frame = 0;
+		const onMove = (event) => {
+			if (frame) return;
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				const element = getElement();
+				if (!element) return;
+				const rect = element.getBoundingClientRect();
+				element.style.setProperty("--mx", `${String(event.clientX - rect.left)}px`);
+				element.style.setProperty("--my", `${String(event.clientY - rect.top)}px`);
+			});
+		};
+		document.addEventListener("mousemove", onMove);
+		window.addEventListener("resize", align);
+		align();
+		const settle = window.setTimeout(align, 400);
+		_s2Cleanups.push(() => {
+			document.removeEventListener("mousemove", onMove);
+			window.removeEventListener("resize", align);
+			window.clearTimeout(settle);
+			if (frame) cancelAnimationFrame(frame);
+		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
+	});
+}
+//#endregion
+//#region src/card/index.tsx
+const GRAIN = `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -0.3'/></filter><rect width='100%' height='100%' filter='url(#n)' fill='#fff'/></svg>")}")`;
+const meshField = "zMtkJd";
+const card = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let width = false;
+	let matches = String(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 += " sd17";
+	rules += " _ta17";
+	if (!position) rules += " _Pc17";
+	if (props.size === "S") rules += " osmOfn17";
+	else if (props.size === "XS") rules += " osmOfn17";
+	else rules += " oQvqurc17";
+	if (props.size === "S") rules += " nsmOfn17";
+	else if (props.size === "XS") rules += " nsmOfn17";
+	else rules += " nQvqurc17";
+	if (props.size === "S") rules += " ksmOfn17";
+	else if (props.size === "XS") rules += " ksmOfn17";
+	else rules += " kQvqurc17";
+	if (props.size === "S") rules += " jsmOfn17";
+	else if (props.size === "XS") rules += " jsmOfn17";
+	else rules += " jQvqurc17";
+	if (props.variant === "secondary") rules += " -Ovbhqd-gNU7lMd17";
+	else if (props.variant === "primary") rules += " -Ovbhqd-g9ORGnd17";
+	rules += " -Ovbhqd-lgb17";
+	if (props.variant === "quiet") rules += " g917";
+	else if (props.variant === "tertiary") rules += " g917";
+	else rules += " gEzkoQe17";
+	if (props.variant === "quiet") rules += " -Jvcevd-h3TDrc17";
+	else if (props.variant === "tertiary") rules += " -Jvcevd-h3TDrc17";
+	else rules += " -Jvcevd-Nbc1hc17";
+	if (props.variant === "quiet") rules += " _je17";
+	else if (props.variant === "tertiary") rules += " _je17";
+	else rules += " _jf17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	if (props.variant === "quiet") rules += " iA17";
+	else if (props.variant === "tertiary") rules += " iA17";
+	else if (props.mesh === "signal") rules += " iPVKPee17";
+	else rules += " irHHOgb17";
+	if (props.variant === "quiet") rules += " _nd17";
+	else if (props.variant === "tertiary") {
+		if (props.isSelected) rules += " _nd17";
+		else if (props.isFocusVisible) rules += " _nCQS9Xc17";
+		else if (props.isHovered) rules += " _nCQS9Xc17";
+		else rules += " _nfa9Reb17";
+		rules += " _nli6j2Ec17";
+	} else {
+		if (props.isSelected) rules += " _nzGJTuc17";
+		else if (props.isFocusVisible) rules += " _nzGJTuc17";
+		else if (props.isHovered) rules += " _nzGJTuc17";
+		else rules += " _nPP9Zse17";
+		rules += " _nlJWldjc17";
+	}
+	rules += " _yb17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " uk17";
+	rules += " ucJ9TBTb17";
+	rules += " ud3Euai17";
+	rules += " uea17";
+	rules += " ugb17";
+	rules += " uhd17";
+	rules += " uje17";
+	rules += " u2NhKxcl17";
+	rules += " uic17";
+	rules += " _Xa17";
+	if (props.variant === "quiet") rules += " _Ne17";
+	else rules += " _Nb17";
+	if (props.variant === "quiet") rules += " Pe17";
+	else rules += " Pb17";
+	rules += " _qc17";
+	rules += " __ca17";
+	if (props.isCardView) rules += " _4c17";
+	if (props.isLink) rules += " ry17";
+	if (props.isCardView) {
+		if (!width) rules += " Za17";
+	} else if (props.size === "XL") {
+		if (!width) rules += " ZA17";
+	} else if (props.size === "L") {
+		if (!width) rules += " Zy17";
+	} else if (props.size === "M") {
+		if (!width) rules += " Zt17";
+	} else if (props.size === "S") {
+		if (!width) rules += " Zr17";
+	} else if (props.size === "XS") {
+		if (!width) rules += " ZI17";
+	}
+	if (props.isCardView) rules += " Fb17";
+	else rules += " Fd17";
+	if (props.density === "spacious") {
+		if (props.size === "XL") rules += " -dAV6Jb-Ti17";
+		else if (props.size === "L") rules += " -dAV6Jb-Th17";
+		else if (props.size === "M") rules += " -dAV6Jb-Tg17";
+		else if (props.size === "S") rules += " -dAV6Jb-Tf17";
+		else if (props.size === "XS") rules += " -dAV6Jb-Te17";
+	} else if (props.density === "regular") {
+		if (props.size === "XL") rules += " -dAV6Jb-Th17";
+		else if (props.size === "L") rules += " -dAV6Jb-Tg17";
+		else if (props.size === "M") rules += " -dAV6Jb-Tf17";
+		else if (props.size === "S") rules += " -dAV6Jb-Te17";
+		else if (props.size === "XS") rules += " -dAV6Jb-Tt17";
+	} else if (props.density === "compact") {
+		if (props.size === "XL") rules += " -dAV6Jb-Tg17";
+		else if (props.size === "L") rules += " -dAV6Jb-Tf17";
+		else if (props.size === "M") rules += " -dAV6Jb-Te17";
+		else if (props.size === "S") rules += " -dAV6Jb-Tt17";
+		else if (props.size === "XS") rules += " -dAV6Jb-T1DOfn17";
+	}
+	if (props.variant === "quiet") rules += " -jXLvjd-Td17";
+	else rules += " -jXLvjd-T5gMYHd17";
+	if (props.variant === "quiet") rules += " -iXLvjd-Sd17";
+	else rules += " -iXLvjd-S5gMYHd17";
+	rules += " TxTaQHd17";
+	rules += " QxTaQHd17";
+	rules += " S0SaQHd17";
+	rules += " R0SaQHd17";
+	rules += " _oa17";
+	if (props.variant === "quiet") rules += " _Le17";
+	else if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	return rules;
+};
+const selectionIndicator = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pa17";
+	rules += " Wr17";
+	rules += " _lr17";
+	rules += " _Ar17";
+	rules += " _zr17";
+	rules += " _9d17";
+	if (props.size === "S") rules += " osmOfn17";
+	else if (props.size === "XS") rules += " osmOfn17";
+	else rules += " oQvqurc17";
+	if (props.size === "S") rules += " nsmOfn17";
+	else if (props.size === "XS") rules += " nsmOfn17";
+	else rules += " nQvqurc17";
+	if (props.size === "S") rules += " ksmOfn17";
+	else if (props.size === "XS") rules += " ksmOfn17";
+	else rules += " kQvqurc17";
+	if (props.size === "S") rules += " jsmOfn17";
+	else if (props.size === "XS") rules += " jsmOfn17";
+	else rules += " jQvqurc17";
+	rules += " _Ob17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	rules += " _jf17";
+	rules += " infaGpb17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isSelected) rules += " _Ib17";
+	else rules += " _Ia17";
+	rules += " OGcUfH17";
+	rules += " _Kc17";
+	if (props.isStrokeInner) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " _Mc17";
+	return rules;
+};
+const preview = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pc17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " _Nb17";
+	rules += " Pb17";
+	if (props.background === "inset") rules += " gW36Rud17";
+	rules += " I8cyuNb17";
+	rules += " H8cyuNb17";
+	rules += " J39J4qb17";
+	rules += " Gk39J4qb17";
+	if (props.isQuiet) {
+		if (props.size === "S") rules += " osmOfn17";
+		else if (props.size === "XS") rules += " osmOfn17";
+		else rules += " oQvqurc17";
+	}
+	if (props.isQuiet) {
+		if (props.size === "S") rules += " nsmOfn17";
+		else if (props.size === "XS") rules += " nsmOfn17";
+		else rules += " nQvqurc17";
+	}
+	if (props.isQuiet) {
+		if (props.size === "S") rules += " ksmOfn17";
+		else if (props.size === "XS") rules += " ksmOfn17";
+		else rules += " kQvqurc17";
+	}
+	if (props.isQuiet) {
+		if (props.size === "S") rules += " jsmOfn17";
+		else if (props.size === "XS") rules += " jsmOfn17";
+		else rules += " jQvqurc17";
+	}
+	if (props.isQuiet) {
+		if (props.isSelected) rules += " _nPP9Zse17";
+		else if (props.isFocusVisible) rules += " _nPP9Zse17";
+		else if (props.isHovered) rules += " _nPP9Zse17";
+	}
+	if (props.isQuiet) {
+		if (props.isFocusVisible) rules += " _Lf17";
+	} else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	return rules;
+};
+const image = function anonymous(props) {
+	let rules = " ";
+	rules += " Za17";
+	if (props.layout === "grid") rules += " fc17";
+	rules += " _Hb17";
+	rules += " _4c17";
+	rules += " _Ob17";
+	return rules;
+};
+const title = function anonymous(props) {
+	let rules = " ";
+	rules += " uiWD3ad17";
+	rules += " ucJ9TBTb17";
+	rules += " ud3Euai17";
+	rules += " uea17";
+	rules += " ugb17";
+	rules += " uhd17";
+	rules += " uje17";
+	rules += " u2NhKxcl17";
+	rules += " uic17";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
+	} else if (props.size === "M") {
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
+	}
+	rules += " xd17";
+	rules += " _xa17";
+	rules += " xX0cczbc17";
+	rules += " _xX0cczba17";
+	rules += " xfd17";
+	rules += " _xfa17";
+	rules += " xfX0cczbc17";
+	rules += " _xfX0cczba17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	rules += " pmiKvLd17";
+	rules += " __Ea17";
+	rules += " sa17";
+	rules += " __aa17";
+	rules += " __ba17";
+	rules += " zn9DOs17";
+	rules += " yn9DOs17";
+	rules += " Bn9DOs17";
+	rules += " An9DOs17";
+	return rules;
+};
+const description = function anonymous(props) {
+	let rules = " ";
+	rules += " uk17";
+	rules += " ucJ9TBTb17";
+	rules += " ud3Euai17";
+	rules += " uea17";
+	rules += " ugb17";
+	rules += " uhd17";
+	rules += " uje17";
+	rules += " u2NhKxcl17";
+	rules += " uic17";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
+	} else if (props.size === "M") {
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-Ng9acc17";
+		rules += " vx17";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-Ng9acc17";
+		rules += " vx17";
+	}
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _Fb17";
+	rules += " _FnuYUwec17";
+	rules += " pmiKvLd17";
+	rules += " __Ea17";
+	rules += " sa17";
+	rules += " __aa17";
+	rules += " __ba17";
+	rules += " z9u7zPc17";
+	rules += " y9u7zPc17";
+	rules += " B9u7zPc17";
+	rules += " A9u7zPc17";
+	return rules;
+};
+const content = function anonymous(props) {
+	let rules = " ";
+	rules += " se17";
+	rules += " DM8Mfn17";
+	rules += " DlsIuJI4ff417";
+	rules += " CF6O9ne17";
+	rules += " ClsIuJ8IFb4c17";
+	rules += " qb17";
+	rules += " _ub17";
+	rules += " ea17";
+	rules += " _ch17";
+	if (props.size === "XL") rules += " Ue17";
+	else if (props.size === "L") rules += " UWJpoB17";
+	else if (props.size === "M") rules += " UWJpoB17";
+	else if (props.size === "S") rules += " Ub17";
+	else if (props.size === "XS") rules += " Ub17";
+	rules += " T5gMYHd17";
+	rules += " Tbd17";
+	rules += " Q69YG2b17";
+	rules += " Qkd17";
+	return rules;
+};
+const actionMenu = " zgSHDrc17 ygSHDrc17 BgSHDrc17 AgSHDrc17 JTnYEIe17 GTnYEIe17";
+const footer = " sd17 _tc17 ec17 _Ce17 Ue17 qe17 T69YG2b17";
+const displayContents = " sc17";
+const cardCheckboxContainer = " _Pa17 W5gMYHd17 _A5gMYHd17 _9d17 Tp17 Qp17 Sp17 Rp17 gGcUfH17 ob17 nb17 kb17 jb17 _nPP9Zse17";
+const cardCheckboxInput = function anonymous(props) {
+	let rules = " ";
+	rules += " sb17";
+	rules += " Jy17";
+	rules += " Gy17";
+	rules += " Iy17";
+	rules += " Hy17";
+	if (props.size === "XL") rules += " Zn17";
+	else if (props.size === "L") rules += " Zm17";
+	else if (props.size === "M") rules += " Zl17";
+	else if (props.size === "S") rules += " Zu17";
+	else if (props.size === "XS") rules += " Zu17";
+	if (props.size === "XL") rules += " Fo17";
+	else if (props.size === "L") rules += " Fn17";
+	else if (props.size === "M") rules += " Fm17";
+	else if (props.size === "S") rules += " Ft17";
+	else if (props.size === "XS") rules += " Ft17";
+	return rules;
+};
+const previewClip = " oi17 ni17 ki17 ji17 _Nb17 Pb17";
+const previewTag = " _Pa17 WIWpurc17 _AIWpurc17 _9c17 uxe7h417 -_6BNtrc-a17 vx17 xd17 _xa17 xX0cczbc17 _xX0cczba17 -sKUDed-iH4cn17 px17 gFsQ0t17 -Jvcevd-T41bec17 osmOfn17 nsmOfn17 ksmOfn17 jsmOfn17 St17 Rt17 TkNNfn17 QkNNfn17 _Ob17";
+const collection = function anonymous(props) {
+	let rules = " ";
+	rules += " se17";
+	rules += " DvhgoHd17";
+	if (props.size === "S") rules += " Ua17";
+	else if (props.size === "XS") rules += " Ua17";
+	else rules += " Ub17";
+	if (props.size === "S") rules += " qa17";
+	else if (props.size === "XS") rules += " qa17";
+	else rules += " qb17";
+	return rules;
+};
+const collectionImage = " Za17 fa17 f5DbKFc17 y5DbKFwoofG17 _Hb17 _Ob17 _4c17";
+const assetImage = " Za17 Fp4uin17 _Hb17 _Ob17 _4c17";
+const assetIllustrationWrapper = " sd17 eb17 _Ca17 gLX7Xt17 Fp4uin17";
+const assetIllustration = " Fd17 Le17 Ke17 Zc17";
+const userImage = " Za17 fb17 _Hb17 _Ob17 _4c17";
+const userAvatar = " _Pc17 Jy17 Jkymupd0fnV8d17";
+const productPreviewImage = " Za17 fd17 _Hb17 _Ob17 _4c17";
+const productThumbnail = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pc17";
+	rules += " _Ob17";
+	rules += " _4c17";
+	if (props.size === "XL") rules += " ZD17";
+	else if (props.size === "L") rules += " Zx17";
+	else if (props.size === "M") rules += " Zw17";
+	else if (props.size === "S") rules += " Zv17";
+	else if (props.size === "XS") rules += " Zo17";
+	rules += " FRuFGYc17";
+	if (props.size === "S") rules += " oa17";
+	else if (props.size === "XS") rules += " oa17";
+	else rules += " ob17";
+	if (props.size === "S") rules += " na17";
+	else if (props.size === "XS") rules += " na17";
+	else rules += " nb17";
+	if (props.size === "S") rules += " ka17";
+	else if (props.size === "XS") rules += " ka17";
+	else rules += " kb17";
+	if (props.size === "S") rules += " ja17";
+	else if (props.size === "XS") rules += " ja17";
+	else rules += " jb17";
+	rules += " _Hb17";
+	rules += " Jy17";
+	rules += " JkymupdLu7Bcc17";
+	rules += " _Lf17";
+	if (props.size === "XS") rules += " _Mb17";
+	else rules += " _Mc17";
+	rules += " OEzkoQe17";
+	if (props.size === "XL") rules += " -F_-Fy17";
+	else if (props.size === "L") rules += " -F_-Fw17";
+	else if (props.size === "M") rules += " -F_-Fv17";
+	else if (props.size === "S") rules += " -F_-Fu17";
+	else if (props.size === "XS") rules += " -F_-Fp17";
+	return rules;
+};
+const productFooter = " _Cb17";
+const InternalCardViewContext = createContext({
+	ElementType: "div",
+	layout: "grid"
+});
+const CardContext = createContext(null);
+const InternalCardContext = createContext({
+	isQuiet: false,
+	size: "M",
+	isSelected: false,
+	isHovered: false,
+	isFocusVisible: false,
+	isPressed: false,
+	isCheckboxSelection: true
+});
+const InternalAssetPreviewContext = createContext(false);
+const actionButtonSize = {
+	XS: "XS",
+	S: "XS",
+	M: "S",
+	L: "M",
+	XL: "L"
+};
+const avatarSize = {
+	XS: 24,
+	S: 48,
+	M: 64,
+	L: 64,
+	XL: 80
+};
+const buttonSize = {
+	XS: "S",
+	S: "S",
+	M: "M",
+	L: "L",
+	XL: "XL"
+};
+function renderCardChildren(children, renderProps) {
+	return typeof children === "function" ? children(renderProps) : children;
+}
+function CardProviders(props) {
+	return <ImageContext value={{
+		alt: "",
+		styles: image({ layout: props.layout })
+	}}>
+      <TextContext$1 value={{ slots: {
+		default: {},
+		title: { styles: title({ size: props.size }) },
+		description: { styles: description({ size: props.size }) }
+	} }}>
+        <ContentContext value={{ styles: content({ size: props.size }) }}>
+          <DividerContext value={{ size: "S" }}>
+            <FooterContext value={{ styles: footer }}>
+              <ActionMenuContext value={{
+		isQuiet: true,
+		size: actionButtonSize[props.size],
+		isDisabled: props.isSkeleton(),
+		"data-slot": "menu",
+		styles: actionMenu
+	}}>
+                <SkeletonContext value={props.isSkeleton}>
+                  <ImageCoordinator>{props.children}</ImageCoordinator>
+                </SkeletonContext>
+              </ActionMenuContext>
+            </FooterContext>
+          </DividerContext>
+        </ContentContext>
+      </TextContext$1>
+    </ImageContext>;
+}
+function SelectionIndicator$1() {
+	const context = useContext(InternalCardContext);
+	return <div class={selectionIndicator({
+		size: context.size,
+		isSelected: context.isSelected,
+		isStrokeInner: context.isQuiet && !context.isCheckboxSelection
+	})} aria-hidden="true" />;
+}
+function CardCheckbox() {
+	const context = useContext(InternalCardContext);
+	if (context.itemKey == null) return null;
+	return <div class={cardCheckboxContainer} onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
+      <GridListSelectionCheckbox itemKey={context.itemKey} class={cardCheckboxInput({ size: context.size })} excludeFromTabOrder />
+    </div>;
+}
+function cardClassName(local, renderProps) {
+	return [
+		renderProps.hasMesh === true ? meshField : void 0,
+		local.UNSAFE_className,
+		local.class,
+		card(renderProps, local.styles)
+	].filter(Boolean).join(" ");
+}
+function toInternalCardContext(input) {
+	return {
+		size: input.size,
+		itemKey: input.itemKey,
+		isQuiet: input.isQuiet,
+		isSelected: input.isSelected ?? false,
+		isHovered: input.isHovered ?? false,
+		isFocusVisible: input.isFocusVisible ?? false,
+		isPressed: input.isPressed ?? false,
+		isCheckboxSelection: input.isCheckboxSelection ?? false
+	};
+}
+/**
+* A Card summarizes an object that a user can select or navigate to.
+*/ function Card(props) {
+	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
+	const contextProps = getSlottedContextProps(useContext(CardContext), props.slot);
+	const merged = mergeProps({
+		size: "M",
+		density: "regular",
+		variant: "primary"
+	}, flags, contextProps ?? {}, props);
+	const [local, otherProps] = splitProps(merged, [
+		"children",
+		"size",
+		"density",
+		"variant",
+		"mesh",
+		"meshSeed",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"id",
+		"textValue",
+		"href",
+		"download",
+		"target",
+		"rel",
+		"slot",
+		"ref",
+		"isDisabled"
+	]);
+	const { ElementType, layout } = useContext(InternalCardViewContext);
+	const isSkeleton = useIsSkeleton();
+	const inertRef = useInertAttribute(isSkeleton);
+	let rootElement;
+	const assignRootRef = mergeContextRefs(contextProps?.ref, props.ref, inertRef, (element) => {
+		rootElement = element;
+	});
+	const size = () => local.size ?? "M";
+	const density = () => local.density ?? "regular";
+	const variant = () => local.variant ?? "primary";
+	const isQuiet = () => variant() === "quiet";
+	const itemKey = () => local.id;
+	const meshBackground = createMemo(() => {
+		const mesh = local.mesh;
+		if (mesh == null || variant() === "tertiary" || variant() === "quiet") return;
+		return `var(--lightningcss-light, ${meshStrip({
+			dark: false,
+			variant: mesh,
+			seed: local.meshSeed
+		})}) var(--lightningcss-dark, ${meshStrip({
+			dark: true,
+			variant: mesh,
+			seed: local.meshSeed
+		})})`;
+	});
+	const meshVariant = () => meshBackground() != null ? local.mesh : void 0;
+	const meshSpotlight = createMemo(() => {
+		const mesh = meshVariant();
+		if (mesh == null) return void 0;
+		const options = {
+			variant: mesh,
+			seed: local.meshSeed,
+			boost: 2.4
+		};
+		return `var(--lightningcss-light, ${meshStrip({
+			dark: false,
+			...options
+		})}) var(--lightningcss-dark, ${meshStrip({
+			dark: true,
+			...options
+		})})`;
+	});
+	const rootStyle = () => {
+		const backgroundImage = meshBackground();
+		return backgroundImage == null ? local.UNSAFE_style : {
+			"background-image": backgroundImage,
+			"--gl-weave": meshSpotlight(),
+			"--gl-grain": GRAIN,
+			...local.UNSAFE_style
+		};
+	};
+	createMeshField(() => rootElement, () => meshVariant() != null);
+	const children = () => <CardProviders size={size()} layout={layout} isSkeleton={isSkeleton}>
+      {renderCardChildren(local.children, { size: size() })}
+    </CardProviders>;
+	const press = () => pressScale(() => rootElement, rootStyle());
+	if (ElementType === "div" && !isSkeleton() && local.href) return <Link {...filterDOMProps(otherProps, { global: true })} href={local.href} download={local.download} target={local.target} rel={local.rel} isDisabled={local.isDisabled} ref={(element) => assignRootRef(element)} class={(renderProps) => cardClassName(local, {
+		...renderProps,
+		size: size(),
+		density: density(),
+		variant: variant(),
+		isCardView: false,
+		isLink: true,
+		mesh: meshVariant(),
+		hasMesh: meshVariant() != null
+	})} style={(renderProps) => isQuiet() ? local.UNSAFE_style ?? {} : press()(renderProps)} data-size={size()} data-density={density()} data-variant={variant()} data-mesh={meshVariant()}>
+        {(renderProps) => <InternalCardContext value={toInternalCardContext({
+		size: size(),
+		itemKey: itemKey(),
+		isQuiet: isQuiet(),
+		isHovered: renderProps.isHovered,
+		isFocusVisible: renderProps.isFocusVisible,
+		isPressed: renderProps.isPressed
+	})}>
+            {children()}
+          </InternalCardContext>}
+      </Link>;
+	if (ElementType === "div" || isSkeleton()) return <div {...filterDOMProps(otherProps, { global: true })} id={local.id != null ? String(local.id) : void 0} ref={(element) => assignRootRef(element)} class={cardClassName(local, {
+		size: size(),
+		density: density(),
+		variant: variant(),
+		isCardView: ElementType !== "div",
+		mesh: meshVariant(),
+		hasMesh: meshVariant() != null
+	})} style={rootStyle()} data-size={size()} data-density={density()} data-variant={variant()} data-mesh={meshVariant()}>
+        <InternalCardContext value={toInternalCardContext({
+		size: size(),
+		itemKey: itemKey(),
+		isQuiet: isQuiet()
+	})}>
+          {children()}
+        </InternalCardContext>
+      </div>;
+	return <GridListItem {...otherProps} id={local.id} textValue={local.textValue} ref={(element) => assignRootRef(element)} class={(renderProps) => cardClassName(local, {
+		...renderProps,
+		size: size(),
+		density: density(),
+		variant: variant(),
+		isCardView: true,
+		isLink: !!local.href,
+		mesh: meshVariant(),
+		hasMesh: meshVariant() != null
+	})} style={(renderProps) => isQuiet() ? local.UNSAFE_style ?? {} : press()(renderProps)} data-size={size()} data-density={density()} data-variant={variant()} data-mesh={meshVariant()}>
+      {(renderProps) => {
+		const isCheckboxSelection = renderProps.selectionMode !== "none" && renderProps.selectionBehavior === "toggle";
+		return <InternalCardContext value={toInternalCardContext({
+			size: size(),
+			itemKey: itemKey(),
+			isQuiet: isQuiet(),
+			isSelected: renderProps.isSelected,
+			isHovered: renderProps.isHovered,
+			isFocusVisible: renderProps.isFocusVisible,
+			isPressed: renderProps.isPressed,
+			isCheckboxSelection
+		})}>
+            {!isQuiet() && <SelectionIndicator$1 />}
+            {!isQuiet() && isCheckboxSelection && <CardCheckbox />}
+            <div class={displayContents}>{children()}</div>
+          </InternalCardContext>;
+	}}
+    </GridListItem>;
+}
+function CardPreview(props) {
+	const context = useContext(InternalCardContext);
+	const isAssetPreview = useContext(InternalAssetPreviewContext);
+	const [local, domProps] = splitProps(props, [
+		"children",
+		"background",
+		"tag",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"ref"
+	]);
+	let previewElement;
+	const assignPreviewRef = mergeContextRefs(props.ref, (element) => {
+		previewElement = element;
+	});
+	const className = () => [
+		local.UNSAFE_className,
+		local.class,
+		preview({
+			size: context.size,
+			isQuiet: context.isQuiet,
+			isHovered: context.isHovered,
+			isFocusVisible: context.isFocusVisible,
+			isSelected: context.isSelected,
+			background: local.background
+		}, local.styles)
+	].filter(Boolean).join(" ");
+	return <div {...filterDOMProps(domProps, { global: true })} slot="preview" ref={(element) => assignPreviewRef(element)} class={className()} style={context.isQuiet ? pressScale(() => previewElement, local.UNSAFE_style)({ isPressed: context.isPressed }) : local.UNSAFE_style}>
+      {context.isQuiet && <SelectionIndicator$1 />}
+      {context.isQuiet && context.isCheckboxSelection && <CardCheckbox />}
+      <Show when={local.tag}>{(tag) => <div class={previewTag}>{tag()}</div>}</Show>
+      <div class={previewClip}>
+        {isAssetPreview ? <IconContext value={{
+		render: (icon) => <SkeletonWrapper>
+                  <div class={assetIllustrationWrapper}>{icon}</div>
+                </SkeletonWrapper>,
+		styles: assetIllustration
+	}}>
+            {local.children}
+          </IconContext> : local.children}
+      </div>
+    </div>;
+}
+function CollectionCardPreview(props) {
+	const context = useContext(InternalCardContext);
+	return <CardPreview {...props}>
+      <div class={collection({ size: context.size })}>
+        {}
+        <ImageContext value={{ styles: collectionImage }}>{props.children}</ImageContext>
+      </div>
+    </CardPreview>;
+}
+function AssetCard(props) {
+	return <Card {...props} density="regular">
+      {(renderProps) => <ImageContext value={{
+		alt: "",
+		styles: assetImage
+	}}>
+          <IllustrationContext value={{
+		render: (icon) => <SkeletonWrapper>
+                  <div class={assetIllustrationWrapper}>{icon}</div>
+                </SkeletonWrapper>,
+		styles: assetIllustration
+	}}>
+            <InternalAssetPreviewContext value={true}>
+              {renderCardChildren(props.children, renderProps)}
+            </InternalAssetPreviewContext>
+          </IllustrationContext>
+        </ImageContext>}
+    </Card>;
+}
+function UserCard(props) {
+	return <Card {...props} density="spacious">
+      {(renderProps) => <ImageContext value={{
+		alt: "",
+		styles: userImage
+	}}>
+          <AvatarContext value={{
+		size: avatarSize[renderProps.size],
+		UNSAFE_style: { "--size": `${avatarSize[renderProps.size] / 16}rem` },
+		styles: userAvatar,
+		isOverBackground: true
+	}}>
+            {renderCardChildren(props.children, renderProps)}
+          </AvatarContext>
+        </ImageContext>}
+    </Card>;
+}
+function ProductCard(props) {
+	return <Card {...props} density="spacious">
+      {(renderProps) => <ImageContext value={{ slots: {
+		preview: {
+			alt: "",
+			styles: productPreviewImage
+		},
+		thumbnail: {
+			alt: "",
+			styles: productThumbnail({ size: renderProps.size })
+		}
+	} }}>
+          <FooterContext value={{ styles: mergeStyles(footer, productFooter) }}>
+            <ButtonContext$1 value={{ size: buttonSize[renderProps.size] }}>
+              <LinkButtonContext value={{ size: buttonSize[renderProps.size] }}>
+                {renderCardChildren(props.children, renderProps)}
+              </LinkButtonContext>
+            </ButtonContext$1>
+          </FooterContext>
+        </ImageContext>}
+    </Card>;
+}
+//#endregion
+export { CollectionCardPreview as a, UserCard as c, CardPreview as i, Card as n, InternalCardViewContext as o, CardContext as r, ProductCard as s, AssetCard as t };
+
+//# sourceMappingURL=card.jsx.map