decentraland-ui2 3.12.0 → 3.13.0

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.d.ts

@@ -0,0 +1,12 @@
+import { AssetPreviewPlayerContextValue, AssetPreviewPlayerProviderProps } from './AssetPreviewPlayer.types';
+declare const PREVIEW_IFRAME_ID = "asset-preview-player-iframe";
+/** Returns the player controls, or `null` when no enabled provider is mounted above. */
+declare function useAssetPreviewPlayer(): AssetPreviewPlayerContextValue | null;
+/**
+ * Single pre-warmed `WearablePreview` iframe shared by every card: it boots hidden,
+ * gets repositioned over the hovered card image and receives each asset via
+ * `postMessage(UPDATE)` — never one iframe per card (marketplace PRs #2640/#2648).
+ * Emotes are played by the avatar; wearables are rendered worn by the avatar.
+ */
+declare function AssetPreviewPlayerProvider({ enabled, peerUrl, marketplaceServerUrl, profile, dev, children }: AssetPreviewPlayerProviderProps): import("react/jsx-runtime").JSX.Element;
+export { AssetPreviewPlayerProvider, useAssetPreviewPlayer, PREVIEW_IFRAME_ID };

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Network, PreviewMessageType, Rarity, sendMessage } from '@dcl/schemas';
+import { CircularProgress } from '@mui/material';
+import { WearablePreview } from '../WearablePreview';
+import { PlayerOverlay, SpinnerContainer } from './AssetPreviewPlayer.styled';
+const PREVIEW_IFRAME_ID = 'asset-preview-player-iframe';
+const DEFAULT_PEER_URL = 'https://peer.decentraland.org';
+const DEFAULT_MARKETPLACE_SERVER_URL = 'https://marketplace-api.decentraland.org';
+const AssetPreviewPlayerContext = createContext(null);
+/** Returns the player controls, or `null` when no enabled provider is mounted above. */
+function useAssetPreviewPlayer() {
+    return useContext(AssetPreviewPlayerContext);
+}
+const sourceToOptions = (src, env) => {
+    const base = {
+        profile: env.profile,
+        peerUrl: env.peerUrl,
+        marketplaceServerUrl: env.marketplaceServerUrl,
+        background: Rarity.getColor(src.rarity ?? Rarity.COMMON)
+    };
+    if (src.urn) {
+        return { ...base, urns: [src.urn] };
+    }
+    return {
+        ...base,
+        contractAddress: src.contractAddress ?? null,
+        itemId: src.itemId ?? null,
+        tokenId: src.tokenId ?? null
+    };
+};
+/**
+ * The iframe only rebuilds (and therefore only emits LOAD) when the asset identity
+ * changes — tracking it by key keeps the spinner honest on re-hovers of an
+ * already-rendered asset (marketplace PR #2648).
+ */
+const keyOf = (src) => {
+    if (src.urn) {
+        return `urn:${src.urn}`;
+    }
+    if (src.network === Network.ETHEREUM) {
+        return `eth:${src.contractAddress ?? ''}:${src.tokenId ?? ''}`;
+    }
+    return `${src.contractAddress ?? ''}:${src.itemId ?? src.tokenId ?? ''}`;
+};
+/**
+ * Single pre-warmed `WearablePreview` iframe shared by every card: it boots hidden,
+ * gets repositioned over the hovered card image and receives each asset via
+ * `postMessage(UPDATE)` — never one iframe per card (marketplace PRs #2640/#2648).
+ * Emotes are played by the avatar; wearables are rendered worn by the avatar.
+ */
+function AssetPreviewPlayerProvider({ enabled, peerUrl = DEFAULT_PEER_URL, marketplaceServerUrl = DEFAULT_MARKETPLACE_SERVER_URL, profile = 'default', dev = false, children }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isControllable, setIsControllable] = useState(false);
+    const [isAssetLoading, setIsAssetLoading] = useState(false);
+    const [rect, setRect] = useState(null);
+    const [overlayRarity, setOverlayRarity] = useState(Rarity.COMMON);
+    const targetRef = useRef(null);
+    const hasInitiallyLoadedRef = useRef(false);
+    const pendingSourceRef = useRef(null);
+    const currentKeyRef = useRef(null);
+    const loadedKeyRef = useRef(null);
+    const envConfig = useMemo(() => ({ profile, peerUrl, marketplaceServerUrl }), [profile, peerUrl, marketplaceServerUrl]);
+    const dispatchUpdate = useCallback((src) => {
+        const iframe = document.getElementById(PREVIEW_IFRAME_ID);
+        if (!iframe?.contentWindow) {
+            return false;
+        }
+        sendMessage(iframe.contentWindow, PreviewMessageType.UPDATE, { options: sourceToOptions(src, envConfig) });
+        return true;
+    }, [envConfig]);
+    const show = useCallback((target, source) => {
+        targetRef.current = target;
+        setOverlayRarity(source.rarity ?? Rarity.COMMON);
+        setIsVisible(true);
+        const key = keyOf(source);
+        currentKeyRef.current = key;
+        // If this asset is already rendered in the iframe the UPDATE won't trigger a
+        // rebuild (no LOAD will follow), so don't show a spinner that would never clear.
+        setIsAssetLoading(key !== loadedKeyRef.current);
+        if (!isControllable || !dispatchUpdate(source)) {
+            pendingSourceRef.current = source;
+        }
+    }, [isControllable, dispatchUpdate]);
+    const hide = useCallback(() => {
+        // Keep loadedKeyRef so re-hovering the same asset stays instant.
+        targetRef.current = null;
+        setIsVisible(false);
+        setRect(null);
+    }, []);
+    // Follow the hovered image rect (cards animate/scroll under the fixed overlay).
+    useEffect(() => {
+        if (!isVisible) {
+            return undefined;
+        }
+        let rafId = 0;
+        const tick = () => {
+            const el = targetRef.current;
+            if (el) {
+                const r = el.getBoundingClientRect();
+                setRect(prev => {
+                    if (prev && prev.top === r.top && prev.left === r.left && prev.width === r.width && prev.height === r.height) {
+                        return prev;
+                    }
+                    return { top: r.top, left: r.left, width: r.width, height: r.height };
+                });
+            }
+            rafId = requestAnimationFrame(tick);
+        };
+        rafId = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(rafId);
+    }, [isVisible]);
+    const handlePreviewLoad = useCallback(() => {
+        if (!hasInitiallyLoadedRef.current) {
+            // First LOAD is the iframe boot — it becomes controllable now.
+            hasInitiallyLoadedRef.current = true;
+            setIsControllable(true);
+            return;
+        }
+        loadedKeyRef.current = currentKeyRef.current;
+        setIsAssetLoading(false);
+    }, []);
+    const handlePreviewError = useCallback(() => {
+        setIsAssetLoading(false);
+    }, []);
+    // A hover that raced the iframe boot is flushed as soon as it becomes controllable.
+    useEffect(() => {
+        if (isControllable && pendingSourceRef.current) {
+            const pending = pendingSourceRef.current;
+            pendingSourceRef.current = null;
+            dispatchUpdate(pending);
+        }
+    }, [isControllable, dispatchUpdate]);
+    // Disabling tears the iframe down — reset every ref so the next boot is treated as such.
+    useEffect(() => {
+        if (!enabled) {
+            hasInitiallyLoadedRef.current = false;
+            pendingSourceRef.current = null;
+            currentKeyRef.current = null;
+            loadedKeyRef.current = null;
+            targetRef.current = null;
+            setIsControllable(false);
+            setIsVisible(false);
+            setIsAssetLoading(false);
+            setRect(null);
+        }
+    }, [enabled]);
+    const contextValue = useMemo(() => (enabled ? { show, hide } : null), [enabled, show, hide]);
+    const [lightColor, regularColor] = Rarity.getGradient(overlayRarity);
+    const overlayStyle = isVisible && rect
+        ? {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height,
+            backgroundImage: `radial-gradient(${lightColor}, ${regularColor})`
+        }
+        : undefined;
+    return (_jsxs(AssetPreviewPlayerContext.Provider, { value: contextValue, children: [children, enabled
+                ? createPortal(_jsxs(PlayerOverlay, { visible: Boolean(isVisible && rect), style: overlayStyle, "aria-hidden": true, children: [_jsx(WearablePreview, { id: PREVIEW_IFRAME_ID, profile: profile, peerUrl: peerUrl, marketplaceServerUrl: marketplaceServerUrl, background: Rarity.getColor(Rarity.COMMON), disableAutoRotate: true, disableFadeEffect: true, dev: dev, onLoad: handlePreviewLoad, onError: handlePreviewError }), isAssetLoading ? (_jsx(SpinnerContainer, { children: _jsx(CircularProgress, { size: 28 }) })) : null] }), document.body)
+                : null] }));
+}
+export { AssetPreviewPlayerProvider, useAssetPreviewPlayer, PREVIEW_IFRAME_ID };
+//# sourceMappingURL=AssetPreviewPlayer.js.map

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreviewPlayer.js","sourceRoot":"","sources":["../../../src/components/AssetPreviewPlayer/AssetPreviewPlayer.tsx"],"names":[],"mappings":"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"}

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.styled.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Fixed overlay that floats the shared preview iframe over the hovered card image.
+ * While "warming" (iframe booting, nothing hovered) it stays parked at the viewport
+ * origin hidden via `clip-path` — NOT `visibility: hidden`, which can pause the
+ * iframe's render loop and defeat the pre-warming.
+ */
+declare const PlayerOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    visible: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const SpinnerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { PlayerOverlay, SpinnerContainer };

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.styled.js

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+/**
+ * Fixed overlay that floats the shared preview iframe over the hovered card image.
+ * While "warming" (iframe booting, nothing hovered) it stays parked at the viewport
+ * origin hidden via `clip-path` — NOT `visibility: hidden`, which can pause the
+ * iframe's render loop and defeat the pre-warming.
+ */
+const PlayerOverlay = styled('div')(({ visible }) => ({
+    position: 'fixed',
+    // Above MUI dialogs (zIndex.modal = 1300) so cards hovered inside a profile/event
+    // modal still get their preview; pointer-events stays none so nothing is blocked.
+    zIndex: 1600,
+    borderRadius: 10,
+    overflow: 'hidden',
+    // Clicks fall through to the card underneath (navigation keeps working).
+    pointerEvents: 'none',
+    transition: 'opacity 120ms ease-out',
+    contain: 'layout paint',
+    ...(visible ? { opacity: 1, clipPath: 'none' } : { top: 0, left: 0, width: 320, height: 320, opacity: 0, clipPath: 'inset(50%)' })
+}));
+const SpinnerContainer = styled('div')({
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+});
+export { PlayerOverlay, SpinnerContainer };
+//# sourceMappingURL=AssetPreviewPlayer.styled.js.map

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreviewPlayer.styled.js","sourceRoot":"","sources":["../../../src/components/AssetPreviewPlayer/AssetPreviewPlayer.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC;;;;;GAKG;AACH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAuB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1E,QAAQ,EAAE,OAAO;IACjB,kFAAkF;IAClF,kFAAkF;IAClF,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,EAAE;IAChB,QAAQ,EAAE,QAAQ;IAClB,yEAAyE;IACzE,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,wBAAwB;IACpC,OAAO,EAAE,cAAc;IACvB,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;CACnI,CAAC,CAAC,CAAA;AAEH,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;CACzB,CAAC,CAAA;AAEF,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.types.d.ts

@@ -0,0 +1,36 @@
+import { Network, Rarity } from '@dcl/schemas';
+/** Identifies the asset to render in the shared preview iframe. */
+type AssetPreviewSource = {
+    /** Preferred identifier — resolves any collections item (wearable or emote). */
+    urn?: string | null;
+    /** Legacy identifier pair, used when no `urn` is available. */
+    contractAddress?: string;
+    itemId?: string | null;
+    tokenId?: string | null;
+    network?: Network;
+    /** Drives the overlay/iframe background color while the asset loads. */
+    rarity?: Rarity;
+};
+type AssetPreviewPlayerContextValue = {
+    /**
+     * Shows the preview overlay on top of `target`, rendering `source`: the avatar
+     * plays the asset when it is an emote and wears it when it is a wearable.
+     */
+    show: (target: HTMLElement, source: AssetPreviewSource) => void;
+    /** Hides the overlay (the iframe stays warm for the next hover). */
+    hide: () => void;
+};
+type AssetPreviewPlayerProviderProps = {
+    /** Master switch — when false no iframe is mounted and `useAssetPreviewPlayer()` returns null. */
+    enabled: boolean;
+    /** Catalyst peer used by the preview to resolve profiles/content. Defaults to prod. */
+    peerUrl?: string;
+    /** Marketplace API used by the preview to resolve items. Defaults to prod. */
+    marketplaceServerUrl?: string;
+    /** Avatar profile rendered wearing/playing the asset. Defaults to `"default"`. */
+    profile?: string;
+    /** Forwarded to the preview iframe (zone assets). */
+    dev?: boolean;
+    children: React.ReactNode;
+};
+export type { AssetPreviewPlayerContextValue, AssetPreviewPlayerProviderProps, AssetPreviewSource };

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AssetPreviewPlayer.types.js.map

package/dist/components/AssetPreviewPlayer/AssetPreviewPlayer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreviewPlayer.types.js","sourceRoot":"","sources":["../../../src/components/AssetPreviewPlayer/AssetPreviewPlayer.types.ts"],"names":[],"mappings":""}

package/dist/components/AssetPreviewPlayer/index.d.ts

@@ -0,0 +1,2 @@
+export { AssetPreviewPlayerProvider, useAssetPreviewPlayer, PREVIEW_IFRAME_ID } from './AssetPreviewPlayer';
+export type { AssetPreviewPlayerContextValue, AssetPreviewPlayerProviderProps, AssetPreviewSource } from './AssetPreviewPlayer.types';

package/dist/components/AssetPreviewPlayer/index.js

@@ -0,0 +1,2 @@
+export { AssetPreviewPlayerProvider, useAssetPreviewPlayer, PREVIEW_IFRAME_ID } from './AssetPreviewPlayer';
+//# sourceMappingURL=index.js.map

package/dist/components/AssetPreviewPlayer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AssetPreviewPlayer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/components/CatalogCard/CatalogCard.js

@@ -1,13 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Network } from '@dcl/schemas';
 import { Typography } from '@mui/material';
 import { CatalogCardPrice } from './CatalogCardPrice';
+import { useAssetPreviewPlayer } from '../../components/AssetPreviewPlayer';
 import { RarityBadge } from '../../components/RarityBadge';
-import { AssetAddress, AssetHeaderContainer, AssetImageContainer, AssetTitle, CardContentContainer, CatalogCardContainer, CatalogItemInformationContainer, ExtraInformationContainer } from './CatalogCard.styled';
+import { i18n as rarityBadgeI18nDefault } from '../../components/RarityBadge/RarityBadge.i18n';
+import { AssetAddress, AssetHeaderContainer, AssetImageContainer, AssetTitle, BadgeRow, BottomActionContainer, CardContentContainer, CatalogCardContainer, CatalogItemInformationContainer, CatalogItemInformationContent, CatalogRarityChip, ExtraInformationContainer, ExtraInformationContent, InfoBadgesContainer, RarityBadgeSlot } from './CatalogCard.styled';
 const CatalogCard = React.memo((props) => {
-    const { asset, imageSrc, price, owners, extraInformation, action, actionIcon, withShadow, i18n } = props;
-    return (_jsxs(CatalogCardContainer, { withShadow: withShadow, children: [_jsx(AssetImageContainer, { className: "AssetImageContainer", name: asset.name, rarity: asset.rarity, src: imageSrc }), _jsxs(CardContentContainer, { children: [_jsxs(AssetHeaderContainer, { children: [_jsx(AssetTitle, { variant: "body1", children: asset.name }), asset.network === Network.MATIC && _jsx(AssetAddress, { value: asset.creator })] }), _jsxs(CatalogItemInformationContainer, { className: "CatalogItemInformationContainer", children: [_jsx(Typography, { variant: "body2", children: action }), actionIcon] }), price ? _jsx(CatalogCardPrice, { price: price, asset: asset }) : owners, extraInformation && (_jsx(ExtraInformationContainer, { className: "ExtraInformationContainer", children: extraInformation })), _jsx(RarityBadge, { square: true, rarity: asset.rarity, i18n: i18n })] })] }));
+    const { asset, imageSrc, price, owners, extraInformation, action, actionIcon, withShadow, i18n, creatorSlot, hideRarityOnHover, hoverShadow, bottomAction, infoBadges, disableInfoExpansion, subduedRarity, hoverPreviewUrn } = props;
+    const showDefaultCreator = creatorSlot === undefined && asset.network === Network.MATIC;
+    // Live asset preview on hover (marketplace PRs #2640/#2648): emotes are played by the
+    // avatar, wearables are shown worn by it. Only when the consumer provided the urn, an
+    // enabled AssetPreviewPlayerProvider is mounted above, and the pointer actually hovers
+    // (touch taps would race the card's navigation click).
+    const containerRef = useRef(null);
+    const assetPreviewPlayer = useAssetPreviewPlayer();
+    const [supportsHover, setSupportsHover] = useState(() => typeof window !== 'undefined' && window.matchMedia('(hover: hover) and (pointer: fine)').matches);
+    // Pointer capability can change at runtime (tablet keyboard detach, external mouse).
+    useEffect(() => {
+        const mql = window.matchMedia('(hover: hover) and (pointer: fine)');
+        const handler = (event) => setSupportsHover(event.matches);
+        mql.addEventListener('change', handler);
+        return () => mql.removeEventListener('change', handler);
+    }, []);
+    const canPreviewAsset = Boolean(hoverPreviewUrn && assetPreviewPlayer && supportsHover);
+    const handlePreviewHoverEnter = useCallback(() => {
+        if (!assetPreviewPlayer || !hoverPreviewUrn)
+            return;
+        const imageEl = containerRef.current?.querySelector('[data-role="catalog-card-image"]');
+        if (!imageEl)
+            return;
+        assetPreviewPlayer.show(imageEl, { urn: hoverPreviewUrn, network: asset.network, rarity: asset.rarity });
+    }, [assetPreviewPlayer, hoverPreviewUrn, asset.network, asset.rarity]);
+    const handlePreviewHoverLeave = useCallback(() => {
+        assetPreviewPlayer?.hide();
+    }, [assetPreviewPlayer]);
+    return (_jsxs(CatalogCardContainer, { ref: containerRef, withShadow: withShadow, hideRarityOnHover: hideRarityOnHover, hoverShadow: hoverShadow, disableInfoExpansion: disableInfoExpansion, onMouseEnter: canPreviewAsset ? handlePreviewHoverEnter : undefined, onMouseLeave: canPreviewAsset ? handlePreviewHoverLeave : undefined, children: [_jsx(AssetImageContainer, { "data-role": "catalog-card-image", name: asset.name, rarity: asset.rarity, src: imageSrc }), _jsxs(CardContentContainer, { children: [_jsxs(AssetHeaderContainer, { children: [_jsx(AssetTitle, { variant: "body1", children: asset.name }), showDefaultCreator ? _jsx(AssetAddress, { value: asset.creator }) : creatorSlot] }), action || actionIcon ? (_jsx(CatalogItemInformationContainer, { className: "CatalogItemInformationContainer", "data-role": "catalog-card-reveal", children: _jsxs(CatalogItemInformationContent, { children: [_jsx(Typography, { variant: "body2", children: action }), actionIcon] }) })) : null, price ? _jsx(CatalogCardPrice, { price: price, asset: asset }) : owners, extraInformation ? (_jsx(ExtraInformationContainer, { className: "ExtraInformationContainer", "data-role": "catalog-card-reveal", children: _jsx(ExtraInformationContent, { children: extraInformation }) })) : null, _jsxs(BadgeRow, { "data-role": bottomAction ? 'catalog-card-badge-row' : undefined, children: [_jsx(RarityBadgeSlot, { "data-role": "catalog-card-rarity", children: subduedRarity ? (_jsx(CatalogRarityChip, { rarity: asset.rarity, children: (i18n ?? rarityBadgeI18nDefault).rarities[asset.rarity] })) : (_jsx(RarityBadge, { square: true, rarity: asset.rarity, i18n: i18n })) }), infoBadges ? _jsx(InfoBadgesContainer, { children: infoBadges }) : null] })] }), bottomAction ? _jsx(BottomActionContainer, { "data-role": "catalog-card-bottom-action", children: bottomAction }) : null] }));
 });
 export { CatalogCard };
 //# sourceMappingURL=CatalogCard.js.map

package/dist/components/CatalogCard/CatalogCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogCard.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAE1D,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,oBAAoB,EACpB,oBAAoB,EACpB,+BAA+B,EAC/B,yBAAyB,EAC1B,MAAM,sBAAsB,CAAA;AAE7B,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAuB,EAAE,EAAE;IACzD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACxG,OAAO,CACL,MAAC,oBAAoB,IAAC,UAAU,EAAE,UAAU,aAC1C,KAAC,mBAAmB,IAAC,SAAS,EAAC,qBAAqB,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,GAAI,EAC9G,MAAC,oBAAoB,eACnB,MAAC,oBAAoB,eACnB,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,YAAE,KAAK,CAAC,IAAI,GAAc,EACpD,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAI,IACrD,EACvB,MAAC,+BAA+B,IAAC,SAAS,EAAC,iCAAiC,aAC1E,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,YAAE,MAAM,GAAc,EAChD,UAAU,IACqB,EACjC,KAAK,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,MAAM,EACjE,gBAAgB,IAAI,CACnB,KAAC,yBAAyB,IAAC,SAAS,EAAC,2BAA2B,YAAE,gBAAgB,GAA6B,CAChH,EACD,KAAC,WAAW,IAAC,MAAM,QAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,IACnC,IACF,CACxB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"CatalogCard.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/CatalogCard/CatalogCard.stories.d.ts

@@ -3,5 +3,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<CatalogCardProps>;
 type Story = StoryObj<CatalogCardProps>;
 declare const Default: Story;
+declare const WithInfoBadges: Story;
+declare const WithInfoBadgesBaseMale: Story;
+declare const WithInfoBadgesBaseFemale: Story;
+declare const WithBottomActionAndInfoBadges: Story;
+declare const StaticHoverNoExpansion: Story;
+declare const SubduedRarityNoPrice: Story;
+declare const EmotePlayOnHover: Story;
+declare const WearableTryOnHover: Story;
 export default meta;
-export { Default };
+export { Default, EmotePlayOnHover, StaticHoverNoExpansion, SubduedRarityNoPrice, WearableTryOnHover, WithBottomActionAndInfoBadges, WithInfoBadges, WithInfoBadgesBaseFemale, WithInfoBadgesBaseMale };

package/dist/components/CatalogCard/CatalogCard.stories.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Network, Rarity } from '@dcl/schemas';
+import { Box, Button, Typography } from '@mui/material';
 import { CatalogCard } from './CatalogCard';
 import { item } from '../../data/item';
-import { MintIcon } from '../Icon';
+import { AssetPreviewPlayerProvider } from '../AssetPreviewPlayer';
+import { BaseFemaleIcon, BaseMaleIcon, MintIcon, UnisexIcon, UpperBodyIcon } from '../Icon';
 import { i18n as rarityBadgeI18n } from '../RarityBadge/RarityBadge.i18n';
 const meta = {
     component: CatalogCard,
@@ -74,7 +76,148 @@ const Default = {
         i18n: rarityBadgeI18n
     }
 };
+const WithInfoBadges = {
+    name: 'With info badges (category + body shape)',
+    args: {
+        withShadow: false,
+        price: '10',
+        imageSrc: item.thumbnail,
+        asset: item,
+        action: null,
+        extraInformation: null,
+        i18n: rarityBadgeI18n,
+        infoBadges: (_jsxs(_Fragment, { children: [_jsx(UpperBodyIcon, { fontSize: "small", titleAccess: "upper_body" }), _jsx(UnisexIcon, { fontSize: "small", titleAccess: "unisex" })] }))
+    }
+};
+const WithInfoBadgesBaseMale = {
+    name: 'With info badges (base male only)',
+    args: {
+        withShadow: false,
+        price: '10',
+        imageSrc: item.thumbnail,
+        asset: item,
+        action: null,
+        extraInformation: null,
+        i18n: rarityBadgeI18n,
+        infoBadges: (_jsxs(_Fragment, { children: [_jsx(UpperBodyIcon, { fontSize: "small", titleAccess: "upper_body" }), _jsx(BaseMaleIcon, { fontSize: "small", titleAccess: "BaseMale" })] }))
+    }
+};
+const WithInfoBadgesBaseFemale = {
+    name: 'With info badges (base female only)',
+    args: {
+        withShadow: false,
+        price: '10',
+        imageSrc: item.thumbnail,
+        asset: item,
+        action: null,
+        extraInformation: null,
+        i18n: rarityBadgeI18n,
+        infoBadges: (_jsxs(_Fragment, { children: [_jsx(UpperBodyIcon, { fontSize: "small", titleAccess: "upper_body" }), _jsx(BaseFemaleIcon, { fontSize: "small", titleAccess: "BaseFemale" })] }))
+    }
+};
+const WithBottomActionAndInfoBadges = {
+    name: 'Hover: bottom action + info badges',
+    args: {
+        withShadow: false,
+        price: '10',
+        imageSrc: item.thumbnail,
+        asset: item,
+        action: null,
+        extraInformation: null,
+        i18n: rarityBadgeI18n,
+        hoverShadow: 'glow',
+        infoBadges: (_jsxs(_Fragment, { children: [_jsx(UpperBodyIcon, { fontSize: "small", titleAccess: "upper_body" }), _jsx(UnisexIcon, { fontSize: "small", titleAccess: "unisex" })] })),
+        bottomAction: (_jsx(Button, { variant: "contained", color: "primary", fullWidth: true, children: "BUY" }))
+    }
+};
+const StaticHoverNoExpansion = {
+    name: 'Static hover (disableInfoExpansion)',
+    args: {
+        withShadow: false,
+        price: '10',
+        imageSrc: item.thumbnail,
+        asset: item,
+        action: null,
+        extraInformation: null,
+        i18n: rarityBadgeI18n,
+        hoverShadow: 'glow',
+        disableInfoExpansion: true,
+        infoBadges: (_jsxs(_Fragment, { children: [_jsx(UpperBodyIcon, { fontSize: "small", titleAccess: "upper_body" }), _jsx(UnisexIcon, { fontSize: "small", titleAccess: "unisex" })] }))
+    }
+};
+const SubduedRarityNoPrice = {
+    name: 'Subdued rarity (no price)',
+    args: {
+        withShadow: false,
+        imageSrc: item.thumbnail,
+        asset: item,
+        action: null,
+        extraInformation: null,
+        i18n: rarityBadgeI18n,
+        subduedRarity: true,
+        hoverShadow: 'glow',
+        disableInfoExpansion: true,
+        infoBadges: (_jsxs(_Fragment, { children: [_jsx(UpperBodyIcon, { fontSize: "small", titleAccess: "upper_body" }), _jsx(UnisexIcon, { fontSize: "small", titleAccess: "unisex" })] }))
+    }
+};
+const peerThumbnail = (urn) => `https://peer.decentraland.org/lambdas/collections/contents/${urn}/thumbnail`;
+const EMOTE_FIXTURES = [
+    {
+        name: 'Building Castles in the Sky',
+        urn: 'urn:decentraland:matic:collections-v2:0xedabe0283a5f87c2ca3d9a6326781c9125d6e556:0',
+        rarity: Rarity.MYTHIC,
+        creator: '0x4a6767c70796be741453cc6b74f0567eb886614d'
+    },
+    {
+        name: 'Jack Frost Sad Boi',
+        urn: 'urn:decentraland:matic:collections-v2:0x1d30377fe076d67f573179a6800d5cff1d5b3187:0',
+        rarity: Rarity.LEGENDARY,
+        creator: '0xb5658530f22c1009e1b920fa657f6ce21564f974'
+    },
+    {
+        name: 'Say Hello, Friend',
+        urn: 'urn:decentraland:matic:collections-v2:0x145d8f54194283a6ae71ad4316040d4c13633194:1',
+        rarity: Rarity.EPIC,
+        creator: '0x9990a41efb8a6176199ee2676cf08f5424adf0fd'
+    }
+];
+const WEARABLE_FIXTURES = [
+    {
+        name: 'Grill Angel',
+        urn: 'urn:decentraland:matic:collections-v2:0x7dd2c14796d6a411439f3ed465071fb1626084a8:0',
+        rarity: Rarity.LEGENDARY,
+        creator: '0xdb760099f0f3359131e08716848f23c014d35b9e'
+    },
+    {
+        name: 'Calaca Headphones',
+        urn: 'urn:decentraland:matic:collections-v2:0x6bcc21bc566ca5359fc79bdea1b41c9aacc75bbe:1',
+        rarity: Rarity.EPIC,
+        creator: '0x8b4221b34efeb8f4ba874cf07d7f6c456c5cc347'
+    },
+    {
+        name: 'Sneakers Viva La Calaca',
+        urn: 'urn:decentraland:matic:collections-v2:0x4fde0297c458e7a0bc35f07c015f322ca31b459e:1',
+        rarity: Rarity.RARE,
+        creator: '0x8b4221b34efeb8f4ba874cf07d7f6c456c5cc347'
+    }
+];
+const renderHoverPreviewGrid = (fixtures) => (_jsx(AssetPreviewPlayerProvider, { enabled: true, children: _jsx(Box, { display: "flex", gap: 2, children: fixtures.map(fixture => (_jsx(CatalogCard, { asset: {
+                id: fixture.urn,
+                url: '/',
+                name: fixture.name,
+                rarity: fixture.rarity,
+                network: Network.MATIC,
+                creator: fixture.creator
+            }, imageSrc: peerThumbnail(fixture.urn), action: null, extraInformation: null, notForSale: false, withShadow: false, price: "10", i18n: rarityBadgeI18n, subduedRarity: true, hoverShadow: "glow", hoverPreviewUrn: fixture.urn }, fixture.urn))) }) }));
+const EmotePlayOnHover = {
+    name: 'Emotes: avatar plays them on hover',
+    render: () => renderHoverPreviewGrid(EMOTE_FIXTURES)
+};
+const WearableTryOnHover = {
+    name: 'Wearables: avatar wears them on hover',
+    render: () => renderHoverPreviewGrid(WEARABLE_FIXTURES)
+};
 // eslint-disable-next-line import/no-default-export
 export default meta;
-export { Default };
+export { Default, EmotePlayOnHover, StaticHoverNoExpansion, SubduedRarityNoPrice, WearableTryOnHover, WithBottomActionAndInfoBadges, WithInfoBadges, WithInfoBadgesBaseFemale, WithInfoBadgesBaseMale };
 //# sourceMappingURL=CatalogCard.stories.js.map

package/dist/components/CatalogCard/CatalogCard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogCard.stories.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCard.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,iCAAiC,CAAA;AAIzE,MAAM,IAAI,GAA2B;IACnC,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,IAAI;SACnB;QACD,KAAK,EAAE;YACL,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,IAAI;SACnB;QACD,MAAM,EAAE;YACN,WAAW,EAAE,mBAAmB;YAChC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,UAAU;SACzB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B;QACD,KAAK,EAAE;YACL,WAAW,EAAE,0DAA0D;YACvE,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,IAAI;SACnB;QACD,MAAM,EAAE;YACN,WAAW,EAAE,0CAA0C;YACvD,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,2BAA2B;SAC1C;QACD,UAAU,EAAE;YACV,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SACzB;QACD,gBAAgB,EAAE;YAChB,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SACzB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,6BAA6B;YAC1C,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,eAAe;SAC9B;KACF;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,GAAI;CAC1C,CAAA;AAID,MAAM,OAAO,GAAU;IACrB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,2BAA2B;QACnC,UAAU,EAAE,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG;QACzC,gBAAgB,EAAE,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,0BAAuB;QACpE,IAAI,EAAE,eAAe;KACtB;CACF,CAAA;AAED,oDAAoD;AACpD,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"CatalogCard.stories.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCard.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC3F,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,iCAAiC,CAAA;AAIzE,MAAM,IAAI,GAA2B;IACnC,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,IAAI;SACnB;QACD,KAAK,EAAE;YACL,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,IAAI;SACnB;QACD,MAAM,EAAE;YACN,WAAW,EAAE,mBAAmB;YAChC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,UAAU;SACzB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B;QACD,KAAK,EAAE;YACL,WAAW,EAAE,0DAA0D;YACvE,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,IAAI;SACnB;QACD,MAAM,EAAE;YACN,WAAW,EAAE,0CAA0C;YACvD,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,2BAA2B;SAC1C;QACD,UAAU,EAAE;YACV,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SACzB;QACD,gBAAgB,EAAE;YAChB,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SACzB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,6BAA6B;YAC1C,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,eAAe;SAC9B;KACF;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,GAAI;CAC1C,CAAA;AAID,MAAM,OAAO,GAAU;IACrB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,2BAA2B;QACnC,UAAU,EAAE,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG;QACzC,gBAAgB,EAAE,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,0BAAuB;QACpE,IAAI,EAAE,eAAe;KACtB;CACF,CAAA;AAED,MAAM,cAAc,GAAU;IAC5B,IAAI,EAAE,0CAA0C;IAChD,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,CACV,8BACE,KAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,GAAG,EAC3D,KAAC,UAAU,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,GAAG,IACnD,CACJ;KACF;CACF,CAAA;AAED,MAAM,sBAAsB,GAAU;IACpC,IAAI,EAAE,mCAAmC;IACzC,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,CACV,8BACE,KAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,GAAG,EAC3D,KAAC,YAAY,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,UAAU,GAAG,IACvD,CACJ;KACF;CACF,CAAA;AAED,MAAM,wBAAwB,GAAU;IACtC,IAAI,EAAE,qCAAqC;IAC3C,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,CACV,8BACE,KAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,GAAG,EAC3D,KAAC,cAAc,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,GAAG,IAC3D,CACJ;KACF;CACF,CAAA;AAED,MAAM,6BAA6B,GAAU;IAC3C,IAAI,EAAE,oCAAoC;IAC1C,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,eAAe;QACrB,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,CACV,8BACE,KAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,GAAG,EAC3D,KAAC,UAAU,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,GAAG,IACnD,CACJ;QACD,YAAY,EAAE,CACZ,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,0BAE5C,CACV;KACF;CACF,CAAA;AAED,MAAM,sBAAsB,GAAU;IACpC,IAAI,EAAE,qCAAqC;IAC3C,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,eAAe;QACrB,WAAW,EAAE,MAAM;QACnB,oBAAoB,EAAE,IAAI;QAC1B,UAAU,EAAE,CACV,8BACE,KAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,GAAG,EAC3D,KAAC,UAAU,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,GAAG,IACnD,CACJ;KACF;CACF,CAAA;AAED,MAAM,oBAAoB,GAAU;IAClC,IAAI,EAAE,2BAA2B;IACjC,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,SAAS;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,eAAe;QACrB,aAAa,EAAE,IAAI;QACnB,WAAW,EAAE,MAAM;QACnB,oBAAoB,EAAE,IAAI;QAC1B,UAAU,EAAE,CACV,8BACE,KAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,GAAG,EAC3D,KAAC,UAAU,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,GAAG,IACnD,CACJ;KACF;CACF,CAAA;AAYD,MAAM,aAAa,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,8DAA8D,GAAG,YAAY,CAAA;AAE5H,MAAM,cAAc,GAAqB;IACvC;QACE,IAAI,EAAE,6BAA6B;QACnC,GAAG,EAAE,oFAAoF;QACzF,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,OAAO,EAAE,4CAA4C;KACtD;IACD;QACE,IAAI,EAAE,oBAAoB;QAC1B,GAAG,EAAE,oFAAoF;QACzF,MAAM,EAAE,MAAM,CAAC,SAAS;QACxB,OAAO,EAAE,4CAA4C;KACtD;IACD;QACE,IAAI,EAAE,mBAAmB;QACzB,GAAG,EAAE,oFAAoF;QACzF,MAAM,EAAE,MAAM,CAAC,IAAI;QACnB,OAAO,EAAE,4CAA4C;KACtD;CACF,CAAA;AAED,MAAM,iBAAiB,GAAqB;IAC1C;QACE,IAAI,EAAE,aAAa;QACnB,GAAG,EAAE,oFAAoF;QACzF,MAAM,EAAE,MAAM,CAAC,SAAS;QACxB,OAAO,EAAE,4CAA4C;KACtD;IACD;QACE,IAAI,EAAE,mBAAmB;QACzB,GAAG,EAAE,oFAAoF;QACzF,MAAM,EAAE,MAAM,CAAC,IAAI;QACnB,OAAO,EAAE,4CAA4C;KACtD;IACD;QACE,IAAI,EAAE,yBAAyB;QAC/B,GAAG,EAAE,oFAAoF;QACzF,MAAM,EAAE,MAAM,CAAC,IAAI;QACnB,OAAO,EAAE,4CAA4C;KACtD;CACF,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,QAA0B,EAAE,EAAE,CAAC,CAC7D,KAAC,0BAA0B,IAAC,OAAO,kBACjC,KAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,GAAG,EAAE,CAAC,YACvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACvB,KAAC,WAAW,IAEV,KAAK,EAAE;gBACL,EAAE,EAAE,OAAO,CAAC,GAAG;gBACf,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,OAAO,EAAE,OAAO,CAAC,KAAK;gBACtB,OAAO,EAAE,OAAO,CAAC,OAAO;aACzB,EACD,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EACpC,MAAM,EAAE,IAAI,EACZ,gBAAgB,EAAE,IAAI,EACtB,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAC,IAAI,EACV,IAAI,EAAE,eAAe,EACrB,aAAa,QACb,WAAW,EAAC,MAAM,EAClB,eAAe,EAAE,OAAO,CAAC,GAAG,IAlBvB,OAAO,CAAC,GAAG,CAmBhB,CACH,CAAC,GACE,GACqB,CAC9B,CAAA;AAED,MAAM,gBAAgB,GAAU;IAC9B,IAAI,EAAE,oCAAoC;IAC1C,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,cAAc,CAAC;CACrD,CAAA;AAED,MAAM,kBAAkB,GAAU;IAChC,IAAI,EAAE,uCAAuC;IAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,iBAAiB,CAAC;CACxD,CAAA;AAED,oDAAoD;AACpD,eAAe,IAAI,CAAA;AACnB,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,6BAA6B,EAC7B,cAAc,EACd,wBAAwB,EACxB,sBAAsB,EACvB,CAAA"}

package/dist/components/CatalogCard/CatalogCard.styled.d.ts

@@ -1,7 +1,9 @@
+import { Rarity } from '@dcl/schemas';
+import { Theme } from '@mui/material';
 import { CatalogCardProps } from './CatalogCard.types';
 declare const AssetImageContainer: import("@emotion/styled").StyledComponent<{
     name: string;
-    rarity: import("@dcl/schemas").Rarity;
+    rarity: Rarity;
     src: string;
 } & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
@@ -11,9 +13,9 @@ declare const CardContentContainer: import("@emotion/styled").StyledComponent<im
 }, "className" | "style" | "classes" | "children" | "sx"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-declare const AssetHeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const AssetHeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 declare const AssetTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
@@ -24,24 +26,67 @@ declare const AssetTitle: import("@emotion/styled").StyledComponent<import("@mui
 declare const AssetAddress: import("@emotion/styled").StyledComponent<import("../Address/Address.types").AddressProps & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-declare const CatalogItemInformationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const CatalogItemInformationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-declare const CatalogCardPriceContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const CatalogItemInformationContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-declare const ExtraInformationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const CatalogCardPriceContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+declare const PriceText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "typography" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const ExtraInformationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const ExtraInformationContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const BottomActionContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const RarityBadgeSlot: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const CatalogRarityChip: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    rarity: Rarity;
+}, {}, {}>;
+declare const BadgeRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const InfoBadgesContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+type ContainerProps = Pick<CatalogCardProps, 'withShadow' | 'hideRarityOnHover' | 'hoverShadow' | 'disableInfoExpansion'>;
 declare const CatalogCardContainer: import("@emotion/styled").StyledComponent<import("@mui/material").CardOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "elevation" | "className" | "style" | "classes" | "children" | "square" | "sx" | "variant" | "raised"> & {
     theme?: import("@emotion/react").Theme;
-} & Pick<CatalogCardProps, "withShadow">, {}, {}>;
-export { CatalogCardContainer, AssetImageContainer, CatalogCardPriceContainer, AssetHeaderContainer, CardContentContainer, AssetAddress, AssetTitle, ExtraInformationContainer, CatalogItemInformationContainer };
+} & ContainerProps, {}, {}>;
+export { CatalogCardContainer, AssetImageContainer, CatalogCardPriceContainer, PriceText, AssetHeaderContainer, CardContentContainer, AssetAddress, AssetTitle, BadgeRow, BottomActionContainer, CatalogRarityChip, ExtraInformationContainer, ExtraInformationContent, CatalogItemInformationContainer, CatalogItemInformationContent, InfoBadgesContainer, RarityBadgeSlot };

package/dist/components/CatalogCard/CatalogCard.styled.js

@@ -1,22 +1,46 @@
+import { Rarity } from '@dcl/schemas';
 import styled from '@emotion/styled';
 import { Box, Card, CardContent, Typography } from '@mui/material';
 import { Address } from '../../components/Address';
+import { neutral } from '../../theme/colors';
 import { hexToRgba } from '../../utils/colors';
 import { AssetImage } from '../AssetImage';
-const AssetImageContainer = styled(AssetImage)(({ theme }) => ({
-    borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
-    height: theme.spacing(26),
-    transition: 'height 0.3s ease-in-out',
-    [theme.breakpoints.down('sm')]: {
-        height: theme.spacing(15)
+// Figma 94:36542 (MarketplaceCards) — flat rarity surface (replaces the legacy radial
+// gradient) with the thumbnail rendered as a fixed centered square and a soft drop shadow.
+// The image area flexes inside the fixed-height card: it absorbs whatever vertical space
+// the info section below doesn't need, so hover-revealed rows (bottomAction / action /
+// extraInformation) shrink the image by EXACTLY their own height — no fixed jump, and no
+// shrink at all when the card has nothing to reveal.
+const AssetImageContainer = styled(AssetImage)(({ rarity }) => ({
+    borderRadius: '12px 12px 0 0',
+    backgroundImage: 'none',
+    backgroundColor: Rarity.getColor(rarity),
+    flex: '1 1 auto',
+    minHeight: 0,
+    height: 'auto',
+    '& img': {
+        width: '68%',
+        height: '68%',
+        objectFit: 'contain',
+        filter: 'drop-shadow(1px 4px 5px rgba(0, 0, 0, 0.10))'
     }
 }));
 const CardContentContainer = styled(CardContent)(({ theme }) => ({
     display: 'flex',
-    flex: 1,
+    // Natural height: the section grows only when hover reveals extra rows, and the
+    // flexing image above gives up exactly that space (the card keeps its fixed height).
+    flex: '0 0 auto',
     flexDirection: 'column',
     flexFlow: 'column nowrap',
     alignItems: 'flex-start',
+    // Figma 94:36542 Info section — translucent black over the page bg, hairline gray-2
+    // border on the three open sides and 12px bottom rounding.
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    border: `1px solid ${neutral.gray2}`,
+    borderTop: 'none',
+    borderRadius: '0 0 12px 12px',
+    // Keep gap tight — specific separations (e.g. price→rarity) are applied as margins
+    // on the target element rather than via the container gap.
     gap: theme.spacing(0.25),
     minHeight: theme.spacing(20)
 }));
@@ -29,29 +53,46 @@ const AssetHeaderContainer = styled(Box)({
     textOverflow: 'ellipsis',
     maxWidth: '100%'
 });
+// Figma 94:36542 — Inter SemiBold 14, line 1.57, soft white
 const AssetTitle = styled(Typography)({
     fontWeight: 600,
+    fontSize: 14,
+    lineHeight: 1.57,
+    color: neutral.softWhite,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     maxWidth: '100%'
 });
-const AssetAddress = styled(Address)(({ theme }) => ({
-    fontSize: theme.typography.body2.fontSize,
-    fontWeight: theme.typography.body2.fontWeight,
-    lineHeight: theme.typography.body2.lineHeight,
-    color: theme.palette.text.secondary
-}));
-const CatalogItemInformationContainer = styled(Box)(({ theme }) => ({
-    flex: 1,
+// Figma 94:36542 — "By <creator>" row: Inter Regular 12, gray-2
+const AssetAddress = styled(Address)({
+    fontSize: 12,
+    fontWeight: 400,
+    lineHeight: 1.43,
+    color: neutral.gray2
+});
+// Hover-revealed rows share one mechanic: a grid track animating 0fr → 1fr. The track
+// height IS the row's natural height, so the image shrink always matches the revealed
+// content — and the reveal animates smoothly without hardcoding any height.
+// Below `sm` (touch) the action/extra rows are always visible, as before.
+const hoverRevealRowStyles = (theme) => ({
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+        display: 'grid',
+        gridTemplateRows: '0fr',
+        opacity: 0,
+        pointerEvents: 'none',
+        transition: 'grid-template-rows 0.3s ease-in-out, opacity 0.3s ease-in-out'
+    }
+});
+const CatalogItemInformationContainer = styled(Box)(({ theme }) => hoverRevealRowStyles(theme));
+const CatalogItemInformationContent = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(0.5),
     [theme.breakpoints.up('sm')]: {
-        height: theme.spacing(0),
-        opacity: 0,
         overflow: 'hidden',
-        transition: 'height 0.1s ease-in-out, opacity 0.6s ease-in-out'
+        minHeight: 0
     }
 }));
 const CatalogCardPriceContainer = styled(Box)({
@@ -59,44 +100,138 @@ const CatalogCardPriceContainer = styled(Box)({
     display: 'flex',
     alignItems: 'center'
 });
-const ExtraInformationContainer = styled(Box)(({ theme }) => ({
-    flex: 1,
+// Figma 94:36542 — price value: Inter SemiBold ~21, white
+const PriceText = styled(Typography)({
+    fontSize: 20,
+    fontWeight: 600,
+    lineHeight: 'normal'
+});
+const ExtraInformationContainer = styled(Box)(({ theme }) => hoverRevealRowStyles(theme));
+const ExtraInformationContent = styled(Box)(({ theme }) => ({
     [theme.breakpoints.up('sm')]: {
-        height: theme.spacing(0),
-        opacity: 0,
         overflow: 'hidden',
-        transition: 'height 0.1s ease-in-out, opacity 0.6s ease-in-out'
+        minHeight: 0
     }
 }));
-const CatalogCardContainer = styled(Card)(({ theme, withShadow }) => ({
-    height: theme.spacing(45),
-    transition: 'transform 0.1s ease-in-out, box-shadow 0.3s ease-in-out, height 0.1s ease-in-out',
-    borderRadius: theme.spacing(1),
-    width: theme.spacing(36),
-    maxWidth: '100%',
-    position: 'relative',
+// Slides in from the card's bottom edge on hover and rests over the badge-row slot —
+// the badge row fades out underneath, so the action never ADDS height (the image above
+// stays put). Hidden at every breakpoint when not hovered — touch devices simply never
+// show it.
+const BottomActionContainer = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    // Side gutters match the CardContent 16px padding; the bottom one sets where the
+    // slide-in rests (over the badge row slot).
+    padding: theme.spacing(0, 2, 2),
+    opacity: 0,
+    transform: 'translateY(100%)',
+    transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
+    pointerEvents: 'none'
+}));
+const RarityBadgeSlot = styled(Box)({
     display: 'flex',
-    flexDirection: 'column',
-    padding: 0,
-    overflow: 'hidden',
-    '&:hover': {
-        transition: 'transform 0.1s ease-in-out, box-shadow 0.3s ease-in-out, height 0.3s ease-in-out',
-        height: theme.spacing(46),
-        padding: theme.spacing(0),
-        borderRadius: theme.spacing(1),
-        boxShadow: withShadow
-            ? `0px 0px 20px 6px ${hexToRgba(theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black, 0.37)}`
-            : 'none',
-        [`${ExtraInformationContainer}, ${CatalogItemInformationContainer}`]: {
-            height: 'auto',
-            opacity: 1,
-            transition: 'height 0.3s ease-in-out, opacity 0.6s ease-in-out'
-        },
-        [`${AssetImageContainer}`]: {
-            height: theme.spacing(20),
-            transition: 'height 0.1s ease-in-out'
-        }
-    }
+    transition: 'opacity 0.2s ease-in-out'
+});
+// Figma marketplace-card spec — subdued rarity chip rendered on the dark info area
+// (canonical rarity hue at 30% alpha, light hue text). The canonical hex per rarity is
+// owned by `@dcl/schemas.Rarity.getColor` / `getGradient`; we derive the chip surface
+// from those so the ui2 palette stays in sync with the schemas source of truth.
+const CatalogRarityChip = styled(Box)(({ rarity }) => {
+    const baseHex = Rarity.getColor(rarity);
+    const [lightHex] = Rarity.getGradient(rarity);
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        borderRadius: 4,
+        padding: '2px 6px',
+        textTransform: 'uppercase',
+        fontFamily: '"Inter", sans-serif',
+        fontWeight: 400,
+        fontSize: 10.55,
+        lineHeight: '14.6px',
+        letterSpacing: 0,
+        whiteSpace: 'nowrap',
+        backgroundColor: hexToRgba(baseHex, 0.3),
+        color: lightHex
+    };
+});
+const BadgeRow = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    flexWrap: 'wrap',
+    // Anchor the badges to the bottom of the info area: when the card has no price the
+    // auto margin absorbs the free space, so the title block keeps its position instead
+    // of everything cramming together at the top. The padding keeps an 8px minimum
+    // separation from whatever sits above (price row / title).
+    marginTop: 'auto',
+    paddingTop: theme.spacing(1),
+    transition: 'opacity 0.2s ease-in-out'
 }));
-export { CatalogCardContainer, AssetImageContainer, CatalogCardPriceContainer, AssetHeaderContainer, CardContentContainer, AssetAddress, AssetTitle, ExtraInformationContainer, CatalogItemInformationContainer };
+const InfoBadgesContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.75),
+    color: theme.palette.text.secondary
+}));
+const CatalogCardContainer = styled(Card, {
+    shouldForwardProp: prop => prop !== 'withShadow' && prop !== 'hideRarityOnHover' && prop !== 'hoverShadow' && prop !== 'disableInfoExpansion'
+})(({ theme, withShadow, hideRarityOnHover, hoverShadow, disableInfoExpansion }) => {
+    const glow = hoverShadow === 'glow';
+    // data-role selectors don't depend on `@emotion/babel-plugin` running on this file,
+    // so they survive any consumer bundler setup (see ui2 CLAUDE.md §4).
+    const revealOnHover = disableInfoExpansion
+        ? {}
+        : {
+            '& [data-role="catalog-card-reveal"]': {
+                gridTemplateRows: '1fr',
+                opacity: 1
+            },
+            // The action slides up from the card's bottom edge and covers the badge-row
+            // slot; the badge row fades out underneath (the attribute is only present on
+            // cards that actually carry a bottomAction).
+            '& [data-role="catalog-card-bottom-action"]': {
+                opacity: 1,
+                transform: 'translateY(0)',
+                pointerEvents: 'auto'
+            },
+            '& [data-role="catalog-card-badge-row"]': {
+                opacity: 0
+            }
+        };
+    return {
+        // The card height never changes — hover redistributes space between the flexing
+        // image and the growing info section instead of growing the card.
+        height: theme.spacing(45),
+        transition: 'transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out',
+        // Figma 94:36542 — 12px rounding and a transparent card body: the image section paints
+        // the flat rarity color and the info section its own translucent black, so the page
+        // background shows through the hairline border corners.
+        borderRadius: 12,
+        backgroundColor: 'transparent',
+        backgroundImage: 'none',
+        boxShadow: 'none',
+        width: theme.spacing(36),
+        maxWidth: '100%',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 0,
+        overflow: 'hidden',
+        '&:hover': {
+            transform: glow ? 'translateY(-4px)' : 'none',
+            backgroundColor: glow ? 'rgba(255, 255, 255, 0.02)' : 'transparent',
+            boxShadow: glow
+                ? '0px 2px 12px 12px rgba(255, 255, 255, 0.3)'
+                : withShadow
+                    ? `0px 0px 20px 6px ${hexToRgba(theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black, 0.37)}`
+                    : 'none',
+            ...revealOnHover,
+            '& [data-role="catalog-card-rarity"]': hideRarityOnHover ? { opacity: 0 } : {}
+        }
+    };
+});
+export { CatalogCardContainer, AssetImageContainer, CatalogCardPriceContainer, PriceText, AssetHeaderContainer, CardContentContainer, AssetAddress, AssetTitle, BadgeRow, BottomActionContainer, CatalogRarityChip, ExtraInformationContainer, ExtraInformationContent, CatalogItemInformationContainer, CatalogItemInformationContent, InfoBadgesContainer, RarityBadgeSlot };
 //# sourceMappingURL=CatalogCard.styled.js.map

package/dist/components/CatalogCard/CatalogCard.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogCard.styled.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCard.styled.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CatalogCard.styled.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCard.styled.ts"],"names":[],"mappings":"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"}

package/dist/components/CatalogCard/CatalogCard.types.d.ts

@@ -11,5 +11,21 @@ type CatalogCardProps = {
     price?: string;
     owners?: string;
     i18n?: RarityBadgeI18N;
+    /** Replaces the default `<AssetAddress>` below the title. Pass `null` to hide it entirely. */
+    creatorSlot?: React.ReactNode;
+    /** Fade out the RarityBadge while the card is hovered (lets `bottomAction` take its visual slot). */
+    hideRarityOnHover?: boolean;
+    /** Shadow style on hover. `'glow'` uses the whats-on Live/Upcoming spotlight; `'default'` keeps the legacy depth shadow. */
+    hoverShadow?: 'default' | 'glow';
+    /** Full-width block revealed at the bottom of the card on hover (e.g. a "BUY" button). */
+    bottomAction?: React.ReactNode;
+    /** Always-visible badges rendered next to the RarityBadge (e.g. wearable category + body shape icons). */
+    infoBadges?: React.ReactNode;
+    /** When true, skips the hover reveal of `ExtraInformationContainer` / `CatalogItemInformationContainer` / `bottomAction` so the card visuals stay static. Useful when the card itself is the action target and no `bottomAction` needs room. */
+    disableInfoExpansion?: boolean;
+    /** When true, renders the rarity tag as a subdued pastel chip (rgba bg + light text) instead of the default solid `<RarityBadge>`. Matches the Figma marketplace-card spec for profile/equipped contexts. Opt-in to avoid touching every existing consumer. */
+    subduedRarity?: boolean;
+    /** URN of the asset to preview on hover: emotes are played by the avatar, wearables are shown worn by it. Requires an `<AssetPreviewPlayerProvider enabled>` above; without one (or on touch devices) the card stays static. */
+    hoverPreviewUrn?: string;
 };
 export { CatalogCardProps };

package/dist/components/CatalogCard/CatalogCardPrice.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Typography } from '@mui/material';
 import { Mana } from '../../components/Mana';
-import { CatalogCardPriceContainer } from './CatalogCard.styled';
+import { CatalogCardPriceContainer, PriceText } from './CatalogCard.styled';
 const CatalogCardPrice = React.memo((props) => {
     const { price, asset } = props;
-    return (_jsxs(CatalogCardPriceContainer, { children: [_jsx(Mana, { size: "large", network: asset.network }), _jsx(Typography, { variant: "h4", children: price })] }));
+    return (_jsxs(CatalogCardPriceContainer, { children: [_jsx(Mana, { size: "large", network: asset.network }), _jsx(PriceText, { variant: "h4", children: price })] }));
 });
 export { CatalogCardPrice };
 //# sourceMappingURL=CatalogCardPrice.js.map

package/dist/components/CatalogCard/CatalogCardPrice.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogCardPrice.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCardPrice.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAEhE,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAgD,EAAE,EAAE;IACvF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAC9B,OAAO,CACL,MAAC,yBAAyB,eACxB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,EAC7C,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAc,IACnB,CAC7B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"CatalogCardPrice.js","sourceRoot":"","sources":["../../../src/components/CatalogCard/CatalogCardPrice.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAE3E,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAgD,EAAE,EAAE;IACvF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAC9B,OAAO,CACL,MAAC,yBAAyB,eACxB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,EAC7C,KAAC,SAAS,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAa,IACjB,CAC7B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export * from './components/Footer';
 export * from './components/FooterLanding';
 export * from './components/LanguageDropdown';
 export * from './components/RarityBadge';
+export * from './components/AssetPreviewPlayer';
 export * from './components/CatalogCard';
 export * from './components/CreditsToggle';
 export * from './components/SceneCard';

package/dist/index.js

@@ -39,6 +39,7 @@ export * from './components/Footer';
 export * from './components/FooterLanding';
 export * from './components/LanguageDropdown';
 export * from './components/RarityBadge';
+export * from './components/AssetPreviewPlayer';
 export * from './components/CatalogCard';
 export * from './components/CreditsToggle';
 export * from './components/SceneCard';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "decentraland-ui2",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "Decentraland's UI components and styles",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -117,5 +117,5 @@
     "url": "https://github.com/decentraland/ui2/issues"
   },
   "homepage": "https://github.com/decentraland/ui2#readme",
-  "commit": "36fb039b96687c0482bce5a2a0aa53b1479ac0d5"
+  "commit": "0745c2a1c2dc06c2c8498e057b635c076203d8bf"
 }