Merge branch 'custom-checkout' of https://github.com/vercel/commerce into local-provider

components/ui/Grid/Grid.module.css

@@ -1,7 +1,5 @@
 .root {
   @apply grid grid-cols-1 gap-0;
-  --row-height: calc(100vh - 88px);
-  min-height: var(--row-height);
 
   @screen lg {
     @apply grid-cols-3 grid-rows-2;

components/ui/Marquee/Marquee.module.css

@@ -1,16 +1,16 @@
 .root {
-  @apply w-full relative;
+  @apply w-full min-w-full relative flex flex-row items-center overflow-hidden py-0;
-  height: 360px;
+  max-height: 320px;
-  min-width: 100%;
 }
 
-.container {
+.root > div {
-  @apply flex flex-row items-center;
+  max-height: 320px;
+  padding: 0;
+  margin: 0;
 }
 
-.container > * {
+.root > div > * > *:nth-child(2) * {
-  @apply relative flex-1 px-16 py-4 h-full;
+  max-height: 100%;
-  min-height: 360px;
 }
 
 .primary {

components/ui/Marquee/Marquee.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import s from './Marquee.module.css'
 import { FC, ReactNode, Component, Children } from 'react'
-import Ticker from 'react-ticker'
+import { default as FastMarquee } from 'react-fast-marquee'
 
 interface MarqueeProps {
   className?: string
@@ -24,10 +24,7 @@ const Marquee: FC<MarqueeProps> = ({
   )
 
   return (
-    <div className={rootClassName}>
+    <FastMarquee gradient={false} className={rootClassName}>
-      <Ticker offset={80}>
-        {() => (
-          <div className={s.container}>
       {Children.map(children, (child) => ({
         ...child,
         props: {
@@ -35,10 +32,7 @@ const Marquee: FC<MarqueeProps> = ({
           className: cn(child.props.className, `${variant}`),
         },
       }))}
-          </div>
+    </FastMarquee>
-        )}
-      </Ticker>
-    </div>
   )
 }
 

package.json

@@ -42,8 +42,8 @@
     "postcss-nesting": "^8.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-fast-marquee": "^1.1.3",
     "react-merge-refs": "^1.1.0",
-    "react-ticker": "^1.2.2",
     "react-use-measure": "^2.0.4",
     "shopify-buy": "^2.11.0",
     "swell-js": "^4.0.0-next.0",

yarn.lock

@@ -5676,6 +5676,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-fast-marquee@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.1.3.tgz#8f1f397c64258bdee0e915147d503828ab74d695"
+  integrity sha512-DIfrpWMgIHEoEPWKYzs5dnV5ZSMuu0+4ddRG4qB6Ee2zDi5LuPAGc1gnOceG8j8tvnuSrdkaqYYQwLZ61VzU5w==
+
 react-is@16.13.1, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5691,11 +5696,6 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-ticker@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"
-  integrity sha512-PXUujoPJvajxwOfosuuujlrBUrjgGp4FB4haWFOI25ujhMppW4SuLkiOdQ9AylrWN3yTHWdk2kbQWe3n9SjFGA==
-
 react-use-measure@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.4.tgz#cb675b36eaeaf3681b94d5f5e08b2a1e081fedc9"