@shopify/shop-minis-react 0.0.21 → 0.0.22

package/dist/utils/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../src/utils/colors.ts"],"sourcesContent":["import Color from 'color'\n\nexport const isDarkColor = (color: string): boolean => {\n  return Color(color).darken(0.2).isDark()\n}\n"],"names":["isDarkColor","color","Color"],"mappings":";AAEa,MAAAA,IAAc,CAACC,MACnBC,EAAMD,CAAK,EAAE,OAAO,GAAG,EAAE,OAAO;"}

package/dist/utils/merchant-card.js

@@ -0,0 +1,44 @@
+function u(e) {
+  return e >= 1e6 ? `${Math.floor(e / 1e5) / 10}M` : e >= 1e3 ? `${Math.floor(e / 1e3)}K` : e.toString();
+}
+function m(e) {
+  return Math.round(e * 10) / 10;
+}
+function l(e) {
+  if (!e)
+    return {
+      type: "default",
+      backgroundColor: "white"
+    };
+  if (e.headerTheme) {
+    const o = e.headerTheme.coverImage?.url ?? e.headerTheme.thumbnailImage?.url, r = e.headerTheme.coverImage?.thumbhash ?? e.headerTheme.thumbnailImage?.thumbhash ?? void 0, a = e.colors?.coverDominant;
+    if (o && a)
+      return {
+        type: "coverImage",
+        coverImageUrl: o,
+        coverImageThumbhash: r,
+        backgroundColor: a
+      };
+  }
+  return e.colors?.primary ? {
+    type: "brandColor",
+    backgroundColor: e.colors.primary
+  } : e.colors?.logoDominant ? {
+    type: "logoColor",
+    backgroundColor: e.colors.logoDominant
+  } : {
+    type: "default",
+    backgroundColor: "white"
+  };
+}
+function t(e, o = 4) {
+  const r = e?.featuredImages.slice(0, o);
+  return r ? r.length === 3 ? e?.featuredImages.slice(0, 2) : r : [];
+}
+export {
+  l as extractBrandTheme,
+  u as formatReviewCount,
+  t as getFeaturedImages,
+  m as normalizeRating
+};
+//# sourceMappingURL=merchant-card.js.map

package/dist/utils/merchant-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merchant-card.js","sources":["../../src/utils/merchant-card.ts"],"sourcesContent":["import {type Shop, type BrandSettings} from '@shopify/shop-minis-platform'\n\nexport type ExtractedBrandTheme =\n  | {\n      type: 'coverImage'\n      coverImageUrl: string\n      coverImageThumbhash?: string\n      backgroundColor: string\n    }\n  | {\n      type: 'brandColor'\n      backgroundColor: string\n    }\n  | {\n      type: 'logoColor'\n      backgroundColor: string\n    }\n  | {\n      type: 'default'\n      backgroundColor: string\n    }\n\nexport function formatReviewCount(count: number): string {\n  if (count >= 1000000) {\n    return `${Math.floor(count / 100000) / 10}M`\n  }\n  if (count >= 1000) {\n    return `${Math.floor(count / 1000)}K`\n  }\n  return count.toString()\n}\n\nexport function normalizeRating(rating: number): number {\n  return Math.round(rating * 10) / 10\n}\n\nexport function extractBrandTheme(\n  brandSettings?: BrandSettings | null\n): ExtractedBrandTheme {\n  if (!brandSettings) {\n    return {\n      type: 'default',\n      backgroundColor: 'white',\n    }\n  }\n\n  if (brandSettings.headerTheme) {\n    const coverImageUrl =\n      brandSettings.headerTheme.coverImage?.url ??\n      brandSettings.headerTheme.thumbnailImage?.url\n    const coverImageThumbhash =\n      brandSettings.headerTheme.coverImage?.thumbhash ??\n      brandSettings.headerTheme.thumbnailImage?.thumbhash ??\n      undefined\n    const coverImageColor = brandSettings.colors?.coverDominant\n\n    if (coverImageUrl && coverImageColor) {\n      return {\n        type: 'coverImage',\n        coverImageUrl,\n        coverImageThumbhash,\n        backgroundColor: coverImageColor,\n      }\n    }\n  }\n\n  if (brandSettings.colors?.primary) {\n    return {\n      type: 'brandColor',\n      backgroundColor: brandSettings.colors.primary,\n    }\n  }\n\n  if (brandSettings.colors?.logoDominant) {\n    return {\n      type: 'logoColor',\n      backgroundColor: brandSettings.colors.logoDominant,\n    }\n  }\n\n  return {\n    type: 'default',\n    backgroundColor: 'white',\n  }\n}\n\nexport function getFeaturedImages(visualTheme: Shop['visualTheme'], limit = 4) {\n  const images = visualTheme?.featuredImages.slice(0, limit)\n\n  if (!images) {\n    return []\n  }\n\n  if (images.length === 3) {\n    return visualTheme?.featuredImages.slice(0, 2)\n  }\n\n  return images\n}\n"],"names":["formatReviewCount","count","normalizeRating","rating","extractBrandTheme","brandSettings","coverImageUrl","coverImageThumbhash","coverImageColor","getFeaturedImages","visualTheme","limit","images"],"mappings":"AAsBO,SAASA,EAAkBC,GAAuB;AACvD,SAAIA,KAAS,MACJ,GAAG,KAAK,MAAMA,IAAQ,GAAM,IAAI,EAAE,MAEvCA,KAAS,MACJ,GAAG,KAAK,MAAMA,IAAQ,GAAI,CAAC,MAE7BA,EAAM,SAAS;AACxB;AAEO,SAASC,EAAgBC,GAAwB;AACtD,SAAO,KAAK,MAAMA,IAAS,EAAE,IAAI;AACnC;AAEO,SAASC,EACdC,GACqB;AACrB,MAAI,CAACA;AACI,WAAA;AAAA,MACL,MAAM;AAAA,MACN,iBAAiB;AAAA,IACnB;AAGF,MAAIA,EAAc,aAAa;AAC7B,UAAMC,IACJD,EAAc,YAAY,YAAY,OACtCA,EAAc,YAAY,gBAAgB,KACtCE,IACJF,EAAc,YAAY,YAAY,aACtCA,EAAc,YAAY,gBAAgB,aAC1C,QACIG,IAAkBH,EAAc,QAAQ;AAE9C,QAAIC,KAAiBE;AACZ,aAAA;AAAA,QACL,MAAM;AAAA,QACN,eAAAF;AAAA,QACA,qBAAAC;AAAA,QACA,iBAAiBC;AAAA,MACnB;AAAA,EACF;AAGE,SAAAH,EAAc,QAAQ,UACjB;AAAA,IACL,MAAM;AAAA,IACN,iBAAiBA,EAAc,OAAO;AAAA,EACxC,IAGEA,EAAc,QAAQ,eACjB;AAAA,IACL,MAAM;AAAA,IACN,iBAAiBA,EAAc,OAAO;AAAA,EACxC,IAGK;AAAA,IACL,MAAM;AAAA,IACN,iBAAiB;AAAA,EACnB;AACF;AAEgB,SAAAI,EAAkBC,GAAkCC,IAAQ,GAAG;AAC7E,QAAMC,IAASF,GAAa,eAAe,MAAM,GAAGC,CAAK;AAEzD,SAAKC,IAIDA,EAAO,WAAW,IACbF,GAAa,eAAe,MAAM,GAAG,CAAC,IAGxCE,IAPE,CAAC;AAQZ;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -44,6 +44,7 @@
     "@vitejs/plugin-react": "4.5.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
+    "color": "^4.2.3",
     "embla-carousel-react": "8.6.0",
     "js-base64": "^3.7.7",
     "lodash": "4.17.21",
@@ -67,16 +68,19 @@
     "@shopify/generate-docs": "^0.16.6",
     "@storybook/addon-docs": "^9.0.16",
     "@storybook/react-vite": "^9.0.16",
+    "@types/color": "^3.0.6",
     "@types/node": "^20.12.1",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.2",
     "@types/react-window": "^1.8.8",
+    "@types/video.js": "^7.3.58",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^9.0.16",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^9.0.16",
     "typescript": "^5.8.3",
+    "video.js": "^8.23.3",
     "vite": "^6.3.3",
     "vite-plugin-dts": "^4.3.0"
   },

package/src/components/atoms/video-player.tsx

@@ -0,0 +1,213 @@
+import {
+  useRef,
+  useEffect,
+  useState,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
+
+import videojs from 'video.js'
+import Player from 'video.js/dist/types/player'
+import 'video.js/dist/video-js.css'
+
+export interface VideoPlayerRef {
+  play: () => Promise<void>
+  pause: () => void
+}
+
+interface VideoPlayerProps {
+  src: string
+  /**
+   * The format/MIME type of the video.
+   * @default 'video/mp4'
+   */
+  format?: string
+  muted?: boolean
+  poster?: string
+  autoplay?: boolean
+  width?: number
+  height?: number
+  playButtonComponent?: React.ReactNode
+  onPlay?: () => void
+  onPause?: () => void
+  onEnded?: () => void
+  onReady?: () => void
+}
+
+export const VideoPlayer: React.ForwardRefExoticComponent<
+  VideoPlayerProps & React.RefAttributes<VideoPlayerRef>
+> = forwardRef<VideoPlayerRef, VideoPlayerProps>(
+  (
+    {
+      src,
+      format = 'video/mp4',
+      poster,
+      muted,
+      autoplay,
+      width,
+      height,
+      playButtonComponent,
+      onPlay,
+      onPause,
+      onEnded,
+      onReady,
+    },
+    ref
+  ) => {
+    const videoContainerRef = useRef<HTMLDivElement>(null)
+    const playerRef = useRef<Player | null>(null)
+
+    const [isPlaying, setIsPlaying] = useState(false)
+
+    // Expose imperative methods to parent components
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: async () => {
+          if (playerRef.current) {
+            try {
+              await playerRef.current.play()
+              setIsPlaying(true)
+            } catch (error) {
+              console.error('Error playing video:', error)
+            }
+          }
+        },
+        pause: () => {
+          if (playerRef.current) {
+            playerRef.current.pause()
+            setIsPlaying(false)
+          }
+        },
+      }),
+      []
+    )
+
+    const options = useMemo(
+      () => ({
+        controls: false,
+        controlBar: {
+          volumePanel: {
+            inline: false,
+          },
+        },
+        preload: 'auto',
+        muted,
+        // This makes sure that the video player does not take over the whole screen
+        preferFullWindow: false,
+        playsinline: true,
+        poster,
+        height,
+        width,
+        sources: [
+          {
+            src,
+            type: format,
+          },
+        ],
+      }),
+      [muted, poster, height, width, src, format]
+    )
+
+    useEffect(() => {
+      const player = playerRef.current
+
+      return () => {
+        if (player && !player.isDisposed()) {
+          player.dispose()
+          playerRef.current = null
+        }
+      }
+    }, [playerRef])
+
+    useEffect(() => {
+      if (!playerRef.current) return
+
+      const handlePlay = () => {
+        onPlay?.()
+        setIsPlaying(true)
+      }
+      const handlePause = () => {
+        onPause?.()
+        setIsPlaying(false)
+      }
+      const handleEnded = () => {
+        onEnded?.()
+        setIsPlaying(false)
+      }
+
+      playerRef.current.on('play', handlePlay)
+      playerRef.current.on('pause', handlePause)
+      playerRef.current.on('ended', handleEnded)
+
+      return () => {
+        if (playerRef.current) {
+          playerRef.current.off('play', handlePlay)
+          playerRef.current.off('pause', handlePause)
+          playerRef.current.off('ended', handleEnded)
+        }
+      }
+    }, [onEnded, onPause, onPlay])
+
+    const togglePlayPause = useCallback(() => {
+      if (isPlaying) {
+        playerRef.current?.pause()
+        setIsPlaying(false)
+      } else {
+        playerRef.current?.play()
+        setIsPlaying(true)
+      }
+    }, [isPlaying])
+
+    useEffect(() => {
+      if (!playerRef.current) {
+        const videoElement = document.createElement('video-js')
+
+        // The Video.js player needs to be _inside_ the component element for React 18 Strict Mode.
+        videoContainerRef.current?.appendChild(videoElement)
+
+        playerRef.current = videojs(videoElement, options, () => {
+          onReady && onReady()
+
+          if (autoplay) {
+            togglePlayPause()
+          }
+        })
+      }
+    }, [options, videoContainerRef, autoplay, onReady, togglePlayPause])
+
+    const containerClassName = [
+      width ? `w-${width}` : undefined,
+      'relative',
+    ].join(' ')
+
+    return (
+      <div className="flex">
+        <div data-vjs-player className={containerClassName}>
+          <div ref={videoContainerRef} />
+          <div
+            className="absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer"
+            onClick={togglePlayPause}
+            aria-hidden
+          >
+            {isPlaying ? null : (playButtonComponent ?? <DefaultPlayIcon />)}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+const DefaultPlayIcon = () => (
+  <div className="absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200">
+    <svg
+      viewBox="0 0 24 24"
+      className="w-10 h-10 text-white"
+      fill="currentColor"
+    >
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  </div>
+)

package/src/components/commerce/merchant-card.tsx

@@ -7,10 +7,19 @@ import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {cn} from '../../lib/utils'
+import {
+  type ExtractedBrandTheme,
+  extractBrandTheme,
+  formatReviewCount,
+  getFeaturedImages,
+  normalizeRating,
+} from '../../utils'
+import {isDarkColor} from '../../utils/colors'
+import {ThumbhashImage} from '../atoms/thumbhash-image'
 import {Touchable} from '../atoms/touchable'
 
 const merchantCardVariants = cva(
-  'relative w-full aspect-square overflow-hidden rounded-xl border border-grayscale-l20 bg-grayscale-l0 flex flex-col',
+  'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200',
   {
     variants: {
       touchable: {
@@ -24,20 +33,6 @@ const merchantCardVariants = cva(
   }
 )
 
-function formatReviewCount(count: number): string {
-  if (count >= 1000000) {
-    return `${Math.floor(count / 100000) / 10}M`
-  }
-  if (count >= 1000) {
-    return `${Math.floor(count / 1000)}K`
-  }
-  return count.toString()
-}
-
-function normalizeRating(rating: number): number {
-  return Math.round(rating * 10) / 10
-}
-
 export interface MerchantCardRootProps
   extends React.ComponentProps<'div'>,
     VariantProps<typeof merchantCardVariants> {
@@ -96,12 +91,31 @@ function MerchantCardImage({
   className,
   src,
   alt,
+  thumbhash,
   ...props
 }: React.ComponentProps<'img'> & {
   src?: string
   alt?: string
+  thumbhash?: string
 }) {
-  return src ? (
+  if (!src) {
+    return <div className="w-full h-full bg-gray-100" />
+  }
+
+  if (thumbhash) {
+    return (
+      <ThumbhashImage
+        data-slot="merchant-card-image"
+        src={src}
+        alt={alt}
+        thumbhash={thumbhash}
+        className={cn('w-full h-full object-cover', className)}
+        {...props}
+      />
+    )
+  }
+
+  return (
     <img
       data-slot="merchant-card-image"
       src={src}
@@ -109,8 +123,6 @@ function MerchantCardImage({
       className={cn('w-full h-full object-cover', className)}
       {...props}
     />
-  ) : (
-    <div className="w-full h-full bg-grayscale-l10" />
   )
 }
 
@@ -118,17 +130,19 @@ function MerchantCardLogo({
   className,
   src,
   alt,
+  shopName,
   ...props
 }: React.ComponentProps<'div'> & {
   src?: string
   alt?: string
+  shopName?: string
 }) {
   return (
     <div
       data-slot="merchant-card-logo"
       className={cn(
-        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
-        'w-14 h-14 rounded-xl',
+        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',
+        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',
         'flex items-center justify-center overflow-hidden',
         className
       )}
@@ -137,7 +151,11 @@ function MerchantCardLogo({
       {src ? (
         <img src={src} alt={alt} className="w-full h-full object-cover" />
       ) : (
-        <div className="w-full h-full bg-grayscale-l20" />
+        <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+          <span className="text-gray-600 font-semibold text-lg">
+            {shopName?.slice(0, 1)}
+          </span>
+        </div>
       )}
     </div>
   )
@@ -147,7 +165,10 @@ function MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="merchant-card-info"
-      className={cn('p-3 space-y-1 flex-shrink-0', className)}
+      className={cn(
+        'p-3 space-y-2 flex-shrink-0 flex items-center justify-between',
+        className
+      )}
       {...props}
     />
   )
@@ -187,28 +208,83 @@ function MerchantCardRating({
   return (
     <div
       data-slot="merchant-card-rating"
-      className={cn(
-        'flex items-center gap-1 text-sm text-grayscale-d100',
-        className
-      )}
+      className={cn('flex items-center gap-1 text-xs', className)}
       {...props}
     >
-      <Star className="h-3.5 w-3.5 fill-current" />
-      <>
+      <Star className="h-3 w-3 fill-current" />
+      <span className="text-xs">
         {normalizeRating(rating)} ({formatReviewCount(reviewCount)})
-      </>
+      </span>
     </div>
   )
 }
 
+function MerchantCardBrandedHeader({
+  shop,
+  cardTheme,
+  logoBackgroundClassName,
+}: {
+  shop: Shop
+  cardTheme: ExtractedBrandTheme
+  logoBackgroundClassName?: string
+}) {
+  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark
+
+  return (
+    <div className="size-full relative">
+      {cardTheme.type === 'coverImage' && (
+        <>
+          <MerchantCardImage
+            src={cardTheme.coverImageUrl}
+            alt={shop.name}
+            thumbhash={cardTheme.coverImageThumbhash ?? undefined}
+            className="size-full"
+          />
+
+          <div className="absolute inset-0 z-[1] bg-black/20" />
+
+          <div
+            className="absolute bottom-0 z-[1] size-full"
+            style={{
+              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,
+            }}
+          />
+        </>
+      )}
+
+      <div className="absolute inset-0 z-[1] flex items-center justify-center">
+        {wordmarkImage ? (
+          <img
+            src={wordmarkImage.url}
+            alt={wordmarkImage.altText || shop.name}
+            className="max-h-16 min-h-10 max-w-28 object-contain"
+            data-testid="store-data-wordmark"
+          />
+        ) : (
+          <MerchantCardLogo
+            src={shop.visualTheme?.logoImage?.url}
+            alt={`${shop.name} logo`}
+            shopName={shop.name}
+            className={logoBackgroundClassName}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
 export interface MerchantCardProps {
-  variant?: 'default' | 'compact'
   shop: Shop
   touchable?: boolean
+  fixedHeight?: boolean
+  featuredImagesLimit?: number
 }
 
-// Composed MerchantCard component
-function MerchantCard({shop, touchable = true}: MerchantCardProps) {
+function MerchantCard({
+  shop,
+  touchable = true,
+  fixedHeight = false,
+  featuredImagesLimit = 4,
+}: MerchantCardProps) {
   const {navigateToShop} = useShopNavigation()
 
   const {
@@ -223,24 +299,117 @@ function MerchantCard({shop, touchable = true}: MerchantCardProps) {
     navigateToShop({shopId: id})
   }, [navigateToShop, id, touchable])
 
+  const featuredImages = React.useMemo(
+    () => getFeaturedImages(visualTheme, featuredImagesLimit),
+    [visualTheme, featuredImagesLimit]
+  )
+
+  const numberOfFeaturedImages = featuredImages?.length ?? 0
+
+  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage
+  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant
+  const logoColor = logoAverageColor || logoDominantColor
+
+  const logoBackgroundClassName = React.useMemo(
+    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),
+    [logoColor]
+  )
+
+  const cardTheme = React.useMemo(
+    () => extractBrandTheme(visualTheme?.brandSettings),
+    [visualTheme?.brandSettings]
+  )
+
+  const isDarkTheme = React.useMemo(() => {
+    return (
+      cardTheme.backgroundColor !== 'white' &&
+      isDarkColor(cardTheme.backgroundColor)
+    )
+  }, [cardTheme.backgroundColor])
+
+  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'
+
+  const hasBrandedHeader =
+    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'
+
   return (
-    <MerchantCardRoot touchable={touchable} onPress={handlePress}>
-      <MerchantCardImageContainer>
-        <MerchantCardImage
-          src={visualTheme?.featuredImages?.[0]?.url}
-          alt={`${name} featured image`}
-        />
-        <MerchantCardLogo
-          src={visualTheme?.logoImage?.url}
-          alt={`${name} logo`}
-        />
-      </MerchantCardImageContainer>
-
-      <MerchantCardInfo>
-        <MerchantCardName>{name}</MerchantCardName>
-        <MerchantCardRating rating={averageRating} reviewCount={reviewCount} />
-      </MerchantCardInfo>
-    </MerchantCardRoot>
+    <div className={cn('flex', fixedHeight ? '' : 'aspect-square')}>
+      <MerchantCardRoot
+        touchable={touchable}
+        onPress={handlePress}
+        style={{
+          backgroundColor: cardTheme.backgroundColor,
+        }}
+      >
+        <MerchantCardImageContainer
+          className={cn(
+            'relative overflow-hidden w-full',
+            fixedHeight ? 'h-[120px]' : 'flex-1'
+          )}
+        >
+          {hasBrandedHeader ? (
+            <MerchantCardBrandedHeader
+              shop={shop}
+              cardTheme={cardTheme}
+              logoBackgroundClassName={logoBackgroundClassName}
+            />
+          ) : (
+            <>
+              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
+                <MerchantCardLogo
+                  src={visualTheme?.logoImage?.url}
+                  alt={`${name} logo`}
+                  shopName={name}
+                  className={logoBackgroundClassName}
+                  data-testid="merchant-logo"
+                />
+              </div>
+
+              {numberOfFeaturedImages > 0 ? (
+                featuredImages?.map((image, index) => (
+                  <div
+                    className="z-0 flex h-full flex-1"
+                    key={image.url || index}
+                  >
+                    <MerchantCardImage
+                      src={image.url}
+                      alt={image.altText || ''}
+                      thumbhash={image.thumbhash ?? undefined}
+                    />
+                  </div>
+                ))
+              ) : (
+                <div
+                  className="h-20 bg-gray-100"
+                  data-testid="image-fallback"
+                />
+              )}
+            </>
+          )}
+        </MerchantCardImageContainer>
+
+        <MerchantCardInfo className="flex items-center justify-between p-3">
+          <div className="flex flex-col items-start gap-2">
+            <div className="flex min-w-0 flex-1 flex-col">
+              <MerchantCardName
+                className={cn(
+                  'line-clamp-1 overflow-hidden text-ellipsis',
+                  textColor
+                )}
+              >
+                {name}
+              </MerchantCardName>
+
+              <MerchantCardRating
+                rating={averageRating}
+                reviewCount={reviewCount}
+                className={textColor}
+              />
+            </div>
+          </div>
+        </MerchantCardInfo>
+      </MerchantCardRoot>
+    </div>
   )
 }
 
@@ -251,6 +420,7 @@ export const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {
   Info: MerchantCardInfo,
   Name: MerchantCardName,
   Rating: MerchantCardRating,
+  BrandedHeader: MerchantCardBrandedHeader,
 })
 
 export {MerchantCard}

package/src/components/index.ts

@@ -16,6 +16,7 @@ export * from './atoms/thumbhash-image'
 export * from './atoms/touchable'
 export * from './atoms/alert-dialog'
 export * from './atoms/list'
+export * from './atoms/video-player'
 
 export * from './ui/accordion'
 export * from './ui/alert'