Merge branch 'agnostic' of github.com:vercel/commerce into agnostic

components/product/ProductCard/ProductCard.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
+import type { Product } from '@commerce/types'
 import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
 import frameworkConfig from '@framework/config.json'

components/product/ProductSlider/ProductSlider.module.css

@@ -15,7 +15,7 @@
 
 .leftControl:hover,
 .rightControl:hover {
-  @apply outline-none shadow-outline-blue;
+  @apply outline-none shadow-outline-normal;
 }
 
 .leftControl {
@@ -70,7 +70,7 @@
 }
 
 .positionIndicator:focus .dot {
-  @apply shadow-outline-blue;
+  @apply shadow-outline-normal;
 }
 
 .positionIndicatorActive .dot {

components/product/ProductView/ProductView.tsx

@@ -8,6 +8,7 @@ import { useUI } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text } from '@components/ui'
 
+import type { Product } from '@commerce/types'
 import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 
@@ -41,8 +42,8 @@ const ProductView: FC<Props> = ({ product }) => {
     setLoading(true)
     try {
       await addItem({
-        productId: product.id,
-        variantId: variant ? variant.id : product.variants[0].id,
+        productId: String(product.id),
+        variantId: String(variant ? variant.id : product.variants[0].id),
       })
       openSidebar()
       setLoading(false)

components/product/helpers.ts

@@ -1,3 +1,5 @@
+import type { Product } from '@commerce/types'
+
 export type SelectedOptions = {
   size: string | null
   color: string | null