@faststore/core 3.0.38 → 3.0.40

package/.turbo/turbo-build.log

@@ -35,7 +35,7 @@ Browserslist: caniuse-lite is outdated. Please run:
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      3.36 kB         143 kB
 ├   └ css/d586715f4f707df4.css             6.56 kB
-├   /_app                                  0 B            93.4 kB
+├   /_app                                  0 B            93.5 kB
 ├ ● /[...slug]                             4.47 kB         156 kB
 ├   └ css/4c4d90eb8cb1d2b7.css             7 kB
 ├ ● /[slug]/p                              11.1 kB         151 kB
@@ -43,17 +43,17 @@ Route (pages)                              Size     First Load JS
 ├ ○ /404                                   1.47 kB         127 kB
 ├ ● /500                                   1.47 kB         127 kB
 ├ ● /account                               676 B           126 kB
-├ λ /api/graphql                           0 B            93.4 kB
-├ λ /api/health/live                       0 B            93.4 kB
-├ λ /api/health/ready                      0 B            93.4 kB
-├ λ /api/preview                           0 B            93.4 kB
+├ λ /api/graphql                           0 B            93.5 kB
+├ λ /api/health/live                       0 B            93.5 kB
+├ λ /api/health/ready                      0 B            93.5 kB
+├ λ /api/preview                           0 B            93.5 kB
 ├ ● /checkout                              662 B           126 kB
 ├ ● /login                                 1.58 kB         127 kB
 └ ● /s                                     4.66 kB         141 kB
 + First Load JS shared by all              96.5 kB
   ├ chunks/framework-8e279965036b6169.js   45.4 kB
   ├ chunks/main-6f63f6746cc029db.js        33.1 kB
-  ├ chunks/pages/_app-4df2b21628950d8a.js  12.6 kB
+  ├ chunks/pages/_app-ec0d2e833bd9cea0.js  12.6 kB
   ├ chunks/webpack-b4a2fdf4ef127bb7.js     2.45 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (26.203 s)
+PASS test/server/index.test.ts (26.365 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (9 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (26 ms)
+      ✓ should return a valid GraphQL schema (8 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (10 ms)
       ✓ should return a valid GraphQL schema contain all expected queries (2 ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations (1 ms)
+      ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (9 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (18 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (42 ms)
+      ✓ should return a valid merged GraphQL schema (59 ms)
     Envelop
-      ✓ should exist with its plugins (45 ms)
-      ✓ should handle options and execute (549 ms)
+      ✓ should exist with its plugins (53 ms)
+      ✓ should handle options and execute (237 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        26.246 s
+Time:        26.461 s
 Ran all test suites.

package/faststore.config.default.js

@@ -29,7 +29,8 @@ module.exports = {
       symbol: '$',
     },
     locale: 'en-US',
-    channel: '{"salesChannel":"1","regionId":""}',
+    channel:
+      '{"salesChannel":"1","regionId":"","hasOnlyDefaultSalesChannel":"true"}',
     country: 'USA',
     deliveryMode: null,
     addressType: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.38",
+  "version": "3.0.40",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -39,11 +39,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^3.0.37",
-    "@faststore/components": "^3.0.38",
-    "@faststore/graphql-utils": "^3.0.24",
-    "@faststore/sdk": "^3.0.34",
-    "@faststore/ui": "^3.0.38",
+    "@faststore/api": "^3.0.40",
+    "@faststore/components": "^3.0.40",
+    "@faststore/graphql-utils": "^3.0.40",
+    "@faststore/sdk": "^3.0.40",
+    "@faststore/ui": "^3.0.40",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/typescript": "^3.0.4",
@@ -63,7 +63,6 @@
     "draftjs-to-html": "^0.9.1",
     "graphql": "^15.0.0",
     "include-media": "^1.4.10",
-    "msw": "^0.43.1",
     "next": "^13.5.6",
     "next-seo": "^6.4.0",
     "nextjs-progressbar": "^0.0.14",
@@ -83,8 +82,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/cli": "^3.0.35",
-    "@faststore/eslint-config": "^3.0.24",
+    "@faststore/cli": "^3.0.40",
+    "@faststore/eslint-config": "^3.0.40",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
@@ -121,12 +120,9 @@
       "stylelint --fix"
     ]
   },
-  "msw": {
-    "workerDirectory": "public"
-  },
   "volta": {
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "ea1f9b69ed525c7f4ff5fac3a7ecf974786b3d4e"
+  "gitHead": "0c9cf2d2306ff21a626c3073a54e2ee69aaac919"
 }

package/pull_request_template.md

@@ -33,5 +33,4 @@
 
 **Documentation**
 - [ ] PR description
-- [ ] Added to/Updated the Storybook - *if applicable*
 - [ ] For documentation changes, ping `@carolinamenezes` or `@PedroAntunesCosta` to review and update

package/src/components/auth/ProfileChallenge/ProfileChallenge.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import { useAuth } from 'src/sdk/auth'
+
+export type ProfileChallengeProps = {
+  fallback?: ReactNode
+}
+
+const ProfileChallenge = ({
+  fallback = null,
+  children,
+}: PropsWithChildren<ProfileChallengeProps>) => {
+  const { isAutenticated } = useAuth()
+
+  return <>{isAutenticated ? children : fallback}</>
+}
+
+export default ProfileChallenge

package/src/components/auth/ProfileChallenge/index.ts

@@ -0,0 +1 @@
+export { default as ProfileChallenge } from './ProfileChallenge'

package/src/experimental/index.ts

@@ -4,6 +4,7 @@ export {
   sessionStore as sessionStore_unstable,
   validateSession as validateSession_unstable,
 } from '../../src/sdk/session'
+export { useAuth as useAuth_unstable } from '../../src/sdk/auth'
 export {
   useCart as useCart_unstable,
   cartStore as cartStore_unstable,
@@ -34,3 +35,4 @@ export { useShippingSimulation as useShippingSimulation_unstable } from '../../s
 
 // Components
 export { Image as Image_unstable } from '../../src/components/ui/Image'
+export { ProfileChallenge as ProfileChallenge_unstable } from '../../src/components/auth/ProfileChallenge'

package/src/sdk/auth/index.ts

@@ -0,0 +1,19 @@
+import { useSession } from '../session'
+
+export const useAuth = () => {
+  const { person, isValidating, channel: channelJson } = useSession()
+
+  const channel = JSON.parse(channelJson) as {
+    salesChannel: number
+    regionId: string
+    hasOnlyDefaultSalesChannel?: boolean
+  }
+
+  const hasSalesChannel =
+    Boolean(channel.salesChannel) &&
+    channel.hasOnlyDefaultSalesChannel === false
+
+  const isAutenticated = hasSalesChannel && person
+
+  return { isAutenticated, profile: person, channel, isValidating }
+}

package/tsconfig.json

@@ -28,5 +28,5 @@
     "esModuleInterop": true
   },
   "include": ["*.d.ts", "src/**/*.ts", "src/**/*.tsx", "@generated/**/*.ts"],
-  "exclude": ["node_modules", "public", "src/components/search/searchMock.ts"]
+  "exclude": ["node_modules", "public"]
 }

package/.next/server/chunks/257.js

@@ -1,6 +0,0 @@
-"use strict";exports.id=257,exports.ids=[257],exports.modules={3421:(e,t)=>{function decode(e){return -1!==e.indexOf("%")?decodeURIComponent(e):e}/*!
- * cookie
- * Copyright(c) 2012-2014 Roman Shtylman
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */t.Q=function(e,t){if("string"!=typeof e)throw TypeError("argument str must be a string");for(var r={},n=(t||{}).decode||decode,a=0;a<e.length;){var c=e.indexOf("=",a);if(-1===c)break;var i=e.indexOf(";",a);if(-1===i)i=e.length;else if(i<c){a=e.lastIndexOf(";",c-1)+1;continue}var o=e.slice(a,c).trim();if(void 0===r[o]){var s=e.slice(c+1,i).trim();34===s.charCodeAt(0)&&(s=s.slice(1,-1)),r[o]=function(e,t){try{return t(e)}catch(t){return e}}(s,n)}a=i+1}return r},Object.prototype.toString},3404:e=>{var t,r=function(){function DataLoader(e,t){if("function"!=typeof e)throw TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but got: "+e+".");this._batchLoadFn=e,this._maxBatchSize=function(e){if(!(!e||!1!==e.batch))return 1;var t=e&&e.maxBatchSize;if(void 0===t)return 1/0;if("number"!=typeof t||t<1)throw TypeError("maxBatchSize must be a positive number: "+t);return t}(t),this._batchScheduleFn=function(e){var t=e&&e.batchScheduleFn;if(void 0===t)return n;if("function"!=typeof t)throw TypeError("batchScheduleFn must be a function: "+t);return t}(t),this._cacheKeyFn=function(e){var t=e&&e.cacheKeyFn;if(void 0===t)return function(e){return e};if("function"!=typeof t)throw TypeError("cacheKeyFn must be a function: "+t);return t}(t),this._cacheMap=function(e){if(!(!e||!1!==e.cache))return null;var t=e&&e.cacheMap;if(void 0===t)return new Map;if(null!==t){var r=["get","set","delete","clear"].filter(function(e){return t&&"function"!=typeof t[e]});if(0!==r.length)throw TypeError("Custom cacheMap missing methods: "+r.join(", "))}return t}(t),this._batch=null}var e=DataLoader.prototype;return e.load=function(e){if(null==e)throw TypeError("The loader.load() function must be called with a value, but got: "+String(e)+".");var t=function(e){var t=e._batch;if(null!==t&&!t.hasDispatched&&t.keys.length<e._maxBatchSize&&(!t.cacheHits||t.cacheHits.length<e._maxBatchSize))return t;var r={hasDispatched:!1,keys:[],callbacks:[]};return e._batch=r,e._batchScheduleFn(function(){(function(e,t){if(t.hasDispatched=!0,0===t.keys.length){resolveCacheHits(t);return}var r=e._batchLoadFn(t.keys);if(!r||"function"!=typeof r.then)return failedDispatch(e,t,TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but the function did not return a Promise: "+String(r)+"."));r.then(function(e){if(!isArrayLike(e))throw TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but the function did not return a Promise of an Array: "+String(e)+".");if(e.length!==t.keys.length)throw TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but the function did not return a Promise of an Array of the same length as the Array of keys.\n\nKeys:\n"+String(t.keys)+"\n\nValues:\n"+String(e));resolveCacheHits(t);for(var r=0;r<t.callbacks.length;r++){var n=e[r];n instanceof Error?t.callbacks[r].reject(n):t.callbacks[r].resolve(n)}}).catch(function(r){failedDispatch(e,t,r)})})(e,r)}),r}(this),r=this._cacheMap,n=this._cacheKeyFn(e);if(r){var a=r.get(n);if(a){var c=t.cacheHits||(t.cacheHits=[]);return new Promise(function(e){c.push(function(){e(a)})})}}t.keys.push(e);var i=new Promise(function(e,r){t.callbacks.push({resolve:e,reject:r})});return r&&r.set(n,i),i},e.loadMany=function(e){if(!isArrayLike(e))throw TypeError("The loader.loadMany() function must be called with Array<key> but got: "+e+".");for(var t=[],r=0;r<e.length;r++)t.push(this.load(e[r]).catch(function(e){return e}));return Promise.all(t)},e.clear=function(e){var t=this._cacheMap;if(t){var r=this._cacheKeyFn(e);t.delete(r)}return this},e.clearAll=function(){var e=this._cacheMap;return e&&e.clear(),this},e.prime=function(e,t){var r=this._cacheMap;if(r){var n,a=this._cacheKeyFn(e);void 0===r.get(a)&&(t instanceof Error?(n=Promise.reject(t)).catch(function(){}):n=Promise.resolve(t),r.set(a,n))}return this},DataLoader}(),n="object"==typeof process&&"function"==typeof process.nextTick?function(e){t||(t=Promise.resolve()),t.then(function(){process.nextTick(e)})}:"function"==typeof setImmediate?function(e){setImmediate(e)}:function(e){setTimeout(e)};function failedDispatch(e,t,r){resolveCacheHits(t);for(var n=0;n<t.keys.length;n++)e.clear(t.keys[n]),t.callbacks[n].reject(r)}function resolveCacheHits(e){if(e.cacheHits)for(var t=0;t<e.cacheHits.length;t++)e.cacheHits[t]()}function isArrayLike(e){return"object"==typeof e&&null!==e&&"number"==typeof e.length&&(0===e.length||e.length>0&&Object.prototype.hasOwnProperty.call(e,e.length-1))}e.exports=r}};

package/.next/server/chunks/981.js

@@ -1,6 +0,0 @@
-"use strict";exports.id=981,exports.ids=[981],exports.modules={7679:(e,t)=>{function decode(e){return -1!==e.indexOf("%")?decodeURIComponent(e):e}/*!
- * cookie
- * Copyright(c) 2012-2014 Roman Shtylman
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */t.Q=function(e,t){if("string"!=typeof e)throw TypeError("argument str must be a string");for(var r={},n=(t||{}).decode||decode,a=0;a<e.length;){var c=e.indexOf("=",a);if(-1===c)break;var i=e.indexOf(";",a);if(-1===i)i=e.length;else if(i<c){a=e.lastIndexOf(";",c-1)+1;continue}var o=e.slice(a,c).trim();if(void 0===r[o]){var s=e.slice(c+1,i).trim();34===s.charCodeAt(0)&&(s=s.slice(1,-1)),r[o]=function(e,t){try{return t(e)}catch(t){return e}}(s,n)}a=i+1}return r},Object.prototype.toString},3057:e=>{var t,r=function(){function DataLoader(e,t){if("function"!=typeof e)throw TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but got: "+e+".");this._batchLoadFn=e,this._maxBatchSize=function(e){if(!(!e||!1!==e.batch))return 1;var t=e&&e.maxBatchSize;if(void 0===t)return 1/0;if("number"!=typeof t||t<1)throw TypeError("maxBatchSize must be a positive number: "+t);return t}(t),this._batchScheduleFn=function(e){var t=e&&e.batchScheduleFn;if(void 0===t)return n;if("function"!=typeof t)throw TypeError("batchScheduleFn must be a function: "+t);return t}(t),this._cacheKeyFn=function(e){var t=e&&e.cacheKeyFn;if(void 0===t)return function(e){return e};if("function"!=typeof t)throw TypeError("cacheKeyFn must be a function: "+t);return t}(t),this._cacheMap=function(e){if(!(!e||!1!==e.cache))return null;var t=e&&e.cacheMap;if(void 0===t)return new Map;if(null!==t){var r=["get","set","delete","clear"].filter(function(e){return t&&"function"!=typeof t[e]});if(0!==r.length)throw TypeError("Custom cacheMap missing methods: "+r.join(", "))}return t}(t),this._batch=null}var e=DataLoader.prototype;return e.load=function(e){if(null==e)throw TypeError("The loader.load() function must be called with a value, but got: "+String(e)+".");var t=function(e){var t=e._batch;if(null!==t&&!t.hasDispatched&&t.keys.length<e._maxBatchSize&&(!t.cacheHits||t.cacheHits.length<e._maxBatchSize))return t;var r={hasDispatched:!1,keys:[],callbacks:[]};return e._batch=r,e._batchScheduleFn(function(){(function(e,t){if(t.hasDispatched=!0,0===t.keys.length){resolveCacheHits(t);return}var r=e._batchLoadFn(t.keys);if(!r||"function"!=typeof r.then)return failedDispatch(e,t,TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but the function did not return a Promise: "+String(r)+"."));r.then(function(e){if(!isArrayLike(e))throw TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but the function did not return a Promise of an Array: "+String(e)+".");if(e.length!==t.keys.length)throw TypeError("DataLoader must be constructed with a function which accepts Array<key> and returns Promise<Array<value>>, but the function did not return a Promise of an Array of the same length as the Array of keys.\n\nKeys:\n"+String(t.keys)+"\n\nValues:\n"+String(e));resolveCacheHits(t);for(var r=0;r<t.callbacks.length;r++){var n=e[r];n instanceof Error?t.callbacks[r].reject(n):t.callbacks[r].resolve(n)}}).catch(function(r){failedDispatch(e,t,r)})})(e,r)}),r}(this),r=this._cacheMap,n=this._cacheKeyFn(e);if(r){var a=r.get(n);if(a){var c=t.cacheHits||(t.cacheHits=[]);return new Promise(function(e){c.push(function(){e(a)})})}}t.keys.push(e);var i=new Promise(function(e,r){t.callbacks.push({resolve:e,reject:r})});return r&&r.set(n,i),i},e.loadMany=function(e){if(!isArrayLike(e))throw TypeError("The loader.loadMany() function must be called with Array<key> but got: "+e+".");for(var t=[],r=0;r<e.length;r++)t.push(this.load(e[r]).catch(function(e){return e}));return Promise.all(t)},e.clear=function(e){var t=this._cacheMap;if(t){var r=this._cacheKeyFn(e);t.delete(r)}return this},e.clearAll=function(){var e=this._cacheMap;return e&&e.clear(),this},e.prime=function(e,t){var r=this._cacheMap;if(r){var n,a=this._cacheKeyFn(e);void 0===r.get(a)&&(t instanceof Error?(n=Promise.reject(t)).catch(function(){}):n=Promise.resolve(t),r.set(a,n))}return this},DataLoader}(),n="object"==typeof process&&"function"==typeof process.nextTick?function(e){t||(t=Promise.resolve()),t.then(function(){process.nextTick(e)})}:"function"==typeof setImmediate?function(e){setImmediate(e)}:function(e){setTimeout(e)};function failedDispatch(e,t,r){resolveCacheHits(t);for(var n=0;n<t.keys.length;n++)e.clear(t.keys[n]),t.callbacks[n].reject(r)}function resolveCacheHits(e){if(e.cacheHits)for(var t=0;t<e.cacheHits.length;t++)e.cacheHits[t]()}function isArrayLike(e){return"object"==typeof e&&null!==e&&"number"==typeof e.length&&(0===e.length||e.length>0&&Object.prototype.hasOwnProperty.call(e,e.length-1))}e.exports=r}};

package/src/components/product/ProductCard/ProductCard.stories.mdx

@@ -1,413 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Button } from '@faststore/ui'
-
-import Icon from '../../ui/Icon'
-import ProductCard from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/ProductCard"
-  component={ProductCard}
-  argTypes={{
-    variant: {
-      defaultValue: 'default',
-      table: { defaultValue: 'default' },
-    },
-    product: { table: { disable: true } },
-    index: { table: { disable: true } },
-    aspectRatio: {
-      options: [0.75, 1.5, 1],
-      control: { type: 'radio' },
-      table: { defaultValue: '1' },
-    },
-    BuyButton: {
-      control: 'boolean',
-      table: { defaultValue: false },
-    },
-  }}
-/>
-
-export const product = {
-  id: '15503951',
-  slug: 'handmade-steel-towels-practical-15503951',
-  sku: '15503951',
-  brand: { brandName: 'Brand', name: 'Brand' },
-  name: 'red',
-  gtin: '5595633577807',
-  isVariantOf: {
-    productGroupID: '130742',
-    name: 'Handmade Steel Towels Practical',
-  },
-  image: [
-    {
-      url: 'http://storeframework.vtexassets.com/arquivos/ids/190191/numquam.jpg?v=637755599170100000',
-      alternateName: 'est',
-    },
-  ],
-  offers: {
-    lowPrice: 181.71,
-    offers: [
-      {
-        availability: 'https://schema.org/InStock',
-        price: 181.71,
-        listPrice: 208.72,
-        quantity: 1,
-        seller: { identifier: '1' },
-      },
-    ],
-  },
-}
-
-export const Template = ({ BuyButton, ...args }) => {
-  const button = BuyButton ? (
-    <Button
-      variant="primary"
-      data-fs-button-size="small"
-      icon={<Icon name="ShoppingCart" width={18} height={18} />}
-      iconPosition="left"
-    >
-      Add
-    </Button>
-  ) : null
-  return (
-    <div style={{ width: 300 }}>
-      <ProductCard BuyButton={button} {...args} />
-    </div>
-  )
-}
-
-export const TemplateWide = ({ BuyButton, ...args }) => {
-  const button = BuyButton ? (
-    <Button
-      variant="primary"
-      data-fs-button-size="small"
-      icon={<Icon name="ShoppingCart" width={18} height={18} />}
-      iconPosition="left"
-    >
-      Add
-    </Button>
-  ) : null
-  return (
-    <div style={{ width: 400 }}>
-      <ProductCard BuyButton={button} {...args} />
-    </div>
-  )
-}
-
-<header>
-
-# Product Card
-
-ProductCard displays summarized information about a product. They usually present a call-to-action button, as well as the product's name, price, and image.
-
-</header>
-
-## Overview
-
-The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststore.dev/reference/ui/molecules/ProductCard).
-
-<Canvas className="sbdocs-vertically-center">
-  <Story
-    name="overview-default"
-    args={{
-      product: product,
-      index: 1,
-      variant: 'default',
-      bordered: false,
-      aspectRatio: 1,
-      BuyButton: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-bordered"
-    args={{
-      product: product,
-      index: 1,
-      variant: 'default',
-      bordered: true,
-      aspectRatio: 1,
-      BuyButton: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-wide"
-    args={{
-      product: product,
-      index: 1,
-      variant: 'wide',
-      bordered: false,
-      aspectRatio: 1.5,
-      BuyButton: false,
-    }}
-  >
-    {TemplateWide.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      product: product,
-      index: 1,
-      variant: 'default',
-      bordered: false,
-      aspectRatio: 1,
-      BuyButton: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-padding"
-    value="var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1)"
-  />
-  <TokenRow token="--fs-product-card-gap" value="var(--fs-grid-gap-2)" />
-  <TokenRow token="--fs-product-card-min-width" value="10rem" />
-  <TokenDivider />
-  <TokenRow token="--fs-product-card-shadow" value="var(--fs-shadow)" />
-  <TokenRow
-    token="--fs-product-card-shadow-hover"
-    value="var(--fs-shadow-hover)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-product-card-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-card-bkg-color-hover"
-    value="var(--fs-product-card-bkg-color)"
-    globalValue="var(--fs-color-body-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-card-bkg-color-focus"
-    value="var(--fs-product-card-bkg-color-hover)"
-    globalValue="var(--fs-color-body-bkg)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-product-card-border-radius"
-    value="var(--fs-border-radius)"
-  />
-  <TokenRow
-    token="--fs-product-card-border-color-hover"
-    value="var(--fs-border-color-hover)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-product-card-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-product-card-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-product-card-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Content
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-content-padding"
-    value="var(--fs-spacing-2) 0 0 0"
-  />
-</TokenTable>
-
-### Image
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-img-radius"
-    value="var(--fs-product-card-border-radius)"
-  />
-  <TokenRow token="--fs-product-card-img-scale-hover" value="1" />
-</TokenTable>
-
-### Title
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-title-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-card-title-size"
-    value="var(--fs-text-size-base)"
-  />
-  <TokenRow
-    token="--fs-product-card-title-weight"
-    value="var(--fs-text-weight-regular)"
-  />
-  <TokenRow
-    token="--fs-product-card-title-max-lines"
-    value="var(--fs-text-max-lines)"
-  />
-</TokenTable>
-
-### Price
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-price-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-card-price-size"
-    value="var(--fs-text-size-base)"
-  />
-  <TokenRow
-    token="--fs-product-card-price-listing-color"
-    value="var(--fs-color-text-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-card-price-listing-size"
-    value="var(--fs-text-size-legend)"
-  />
-</TokenTable>
-
-### Description
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-description-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-card-description-size"
-    value="var(--fs-text-size-legend)"
-  />
-</TokenTable>
-
-### Subtitle
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-subtitle-color"
-    value="var(--fs-color-text-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-card-subtitle-size"
-    value="var(--fs-text-size-tiny)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Default
-
-<Canvas>
-  <Story
-    name="product-card-default"
-    args={{
-      product: product,
-      index: 1,
-      variant: 'default',
-      bordered: false,
-      aspectRatio: 1,
-      BuyButton: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Bordered
-
-<Canvas>
-  <Story
-    name="product-card-bordered"
-    args={{
-      product: product,
-      index: 1,
-      variant: 'default',
-      bordered: true,
-      aspectRatio: 1,
-      BuyButton: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-border-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-product-card-border-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-</TokenTable>
-
-### Wide
-
-<Canvas>
-  <Story
-    name="product-card-wide"
-    args={{
-      product: product,
-      index: 1,
-      variant: 'wide',
-      bordered: false,
-      aspectRatio: 1.5,
-      BuyButton: false,
-    }}
-  >
-    {TemplateWide.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-product-card-wide-padding" value="0" />
-  <TokenRow
-    token="--fs-product-card-wide-content-padding"
-    value="var(--fs-spacing-2)"
-  />
-  <TokenRow
-    token="--fs-product-card-wide-bkg-color"
-    value="var(--fs-color-neutral-bkg)"
-    isColor
-  />
-  <TokenRow token="--fs-product-card-wide-min-width" value="9rem" />
-</TokenTable>