@plasmicpkgs/commerce 0.0.12 → 0.0.15

package/dist/commerce.esm.js

@@ -2,8 +2,8 @@ import registerComponent from '@plasmicapp/host/registerComponent';
 import React, { useContext, useRef, useMemo, createContext, useCallback } from 'react';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import useSWR from 'swr';
-import { repeatedElement, PlasmicCanvasContext } from '@plasmicapp/host';
 import Cookies from 'js-cookie';
+import { PlasmicCanvasContext, repeatedElement } from '@plasmicapp/host';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -964,6 +964,7 @@ var defaultProduct = {
 
 var ProductContext = /*#__PURE__*/React.createContext(undefined);
 var CategoryContext = /*#__PURE__*/React.createContext(undefined);
+var SliderContext = /*#__PURE__*/React.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -988,6 +989,20 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return useContext(CategoryContext);
 };
+function ProductSliderProvider(_ref3) {
+  var mediaIndex = _ref3.mediaIndex,
+      onClick = _ref3.onClick,
+      children = _ref3.children;
+  return React.createElement(SliderContext.Provider, {
+    value: mediaIndex,
+    key: mediaIndex
+  }, React.cloneElement(React.isValidElement(children) ? children : React.createElement(React.Fragment, null), {
+    onClick: onClick
+  }));
+}
+var useProductSliderContext = function useProductSliderContext() {
+  return useContext(SliderContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/createContext({});
@@ -1333,143 +1348,209 @@ function registerAddToCartButton(loader, customAddToCartButtonMeta) {
   doRegisterComponent(AddToCartButton, customAddToCartButtonMeta != null ? customAddToCartButtonMeta : addToCartButtonMeta);
 }
 
-var fetcher$1 = SWRFetcher;
+var fetcher$1 = /*#__PURE__*/function () {
+  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
+    var options, cartId, fetch;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            options = _ref.options, cartId = _ref.input.cartId, fetch = _ref.fetch;
+
+            if (!cartId) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 4;
+            return fetch(options);
+
+          case 4:
+            _context.t0 = _context.sent;
+            _context.next = 8;
+            break;
+
+          case 7:
+            _context.t0 = null;
+
+          case 8:
+            return _context.abrupt("return", _context.t0);
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function fetcher(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
 
 var fn$1 = function fn(provider) {
-  var _provider$products;
+  var _provider$cart;
 
-  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useProduct;
+  return (_provider$cart = provider.cart) == null ? void 0 : _provider$cart.useCart;
 };
 
-var useProduct$1 = function useProduct(input) {
+var useCart = function useCart(input) {
+  var _hook$fetcher;
+
   var hook = useHook(fn$1);
-  return useSWRHook(_extends({
-    fetcher: fetcher$1
-  }, hook))(input);
+
+  var _useCommerce = useCommerce(),
+      cartCookie = _useCommerce.cartCookie;
+
+  var fetcherFn = (_hook$fetcher = hook.fetcher) != null ? _hook$fetcher : fetcher$1;
+
+  var wrapper = function wrapper(context) {
+    context.input.cartId = Cookies.get(cartCookie);
+    return fetcherFn(context);
+  };
+
+  return useSWRHook(_extends({}, hook, {
+    fetcher: wrapper
+  }))(input);
 };
 
-var productBoxMeta = {
-  name: "plasmic-commerce-product-box",
-  displayName: "Product Box",
+/*
+  Forked from https://github.com/vercel/commerce/tree/main/packages/commerce/src
+  Changes: None
+*/
+function formatPrice(_ref) {
+  var amount = _ref.amount,
+      currencyCode = _ref.currencyCode,
+      locale = _ref.locale;
+  var formatCurrency = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currencyCode
+  });
+  return formatCurrency.format(amount);
+}
+function formatVariantPrice(_ref2) {
+  var amount = _ref2.amount,
+      baseAmount = _ref2.baseAmount,
+      currencyCode = _ref2.currencyCode,
+      locale = _ref2.locale;
+  var hasDiscount = baseAmount > amount;
+  var formatDiscount = new Intl.NumberFormat(locale, {
+    style: 'percent'
+  });
+  var discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null;
+  var price = formatPrice({
+    amount: amount,
+    currencyCode: currencyCode,
+    locale: locale
+  });
+  var basePrice = hasDiscount ? formatPrice({
+    amount: baseAmount,
+    currencyCode: currencyCode,
+    locale: locale
+  }) : null;
+  return {
+    price: price,
+    basePrice: basePrice,
+    discount: discount
+  };
+}
+function usePrice(data) {
+  var _ref3 = data != null ? data : {},
+      amount = _ref3.amount,
+      baseAmount = _ref3.baseAmount,
+      currencyCode = _ref3.currencyCode;
+
+  var _useCommerce = useCommerce(),
+      locale = _useCommerce.locale;
+
+  var value = useMemo(function () {
+    if (typeof amount !== 'number' || !currencyCode) return '';
+    return baseAmount ? formatVariantPrice({
+      amount: amount,
+      baseAmount: baseAmount,
+      currencyCode: currencyCode,
+      locale: locale
+    }) : formatPrice({
+      amount: amount,
+      currencyCode: currencyCode,
+      locale: locale
+    });
+  }, [amount, baseAmount, currencyCode]);
+  return typeof value === 'string' ? {
+    price: value
+  } : value;
+}
+
+var cartMeta = {
+  name: "plasmic-commerce-cart",
+  displayName: "Cart",
   props: {
-    children: {
-      type: "slot",
-      defaultValue: [{
-        type: "vbox",
-        children: [{
-          type: "component",
-          name: "plasmic-commerce-product-text-field",
-          props: {
-            field: "name"
-          }
-        }, {
-          type: "component",
-          name: "plasmic-commerce-product-media"
-        }],
-        styles: {
-          width: "100%",
-          minWidth: 0
-        }
-      }]
+    field: {
+      type: "choice",
+      options: ["Size", "Total Price"]
     },
-    noLayout: "boolean",
-    id: {
-      type: "string",
-      description: "Fetch a product by its slug or ID"
+    hideIfIsEmpty: {
+      type: "boolean"
     }
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductBox"
+  importName: "CartComponent"
 };
-function ProductBox(props) {
+function CartComponent(props) {
+  var _data$totalPrice, _data$currency$code;
+
   var className = props.className,
-      children = props.children,
-      noLayout = props.noLayout,
-      id = props.id;
+      field = props.field,
+      hideIfIsEmpty = props.hideIfIsEmpty;
 
-  var _useProduct = useProduct$1({
-    id: id
+  var _useCart = useCart(),
+      data = _useCart.data;
+
+  var _usePrice = usePrice({
+    amount: (_data$totalPrice = data == null ? void 0 : data.totalPrice) != null ? _data$totalPrice : 0,
+    currencyCode: (_data$currency$code = data == null ? void 0 : data.currency.code) != null ? _data$currency$code : "USD"
   }),
-      data = _useProduct.data,
-      error = _useProduct.error,
-      isLoading = _useProduct.isLoading;
+      price = _usePrice.price;
 
-  if (!id) {
-    return React.createElement("span", null, "You must set the id prop");
+  if (!field) {
+    return React.createElement("p", null, "You must set the field prop");
   }
 
-  if (error) {
-    throw new CommerceError({
-      message: error.message,
-      code: error.code
-    });
-  }
+  var value;
 
-  if (isLoading) {
-    return React.createElement("span", null, "Loading...");
-  }
+  if (field === "Size") {
+    var _data$lineItems$lengt;
 
-  if (!data) {
-    throw new Error("Product not found!");
+    value = (_data$lineItems$lengt = data == null ? void 0 : data.lineItems.length) != null ? _data$lineItems$lengt : 0;
+  } else if (field === "Total Price") {
+    value = price != null ? price : 0;
   }
 
-  var renderedData = React.createElement(ProductProvider, {
-    product: data
-  }, children);
-  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
+  return hideIfIsEmpty && value === 0 ? null : React.createElement("span", {
     className: className
-  }, renderedData);
+  }, value);
 }
-function registerProductBox(loader, customProductBoxMeta) {
+function registerCart(loader, customCartMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductBox, customProductBoxMeta != null ? customProductBoxMeta : productBoxMeta);
+  doRegisterComponent(CartComponent, customCartMeta != null ? customCartMeta : cartMeta);
 }
 
 var fetcher$2 = SWRFetcher;
 
 var fn$2 = function fn(provider) {
-  var _provider$products;
-
-  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useSearch;
-};
-
-var useSearch = function useSearch(input) {
-  var hook = useHook(fn$2);
-  return useSWRHook(_extends({
-    fetcher: fetcher$2
-  }, hook))(input);
-};
-
-var fetcher$3 = SWRFetcher;
-
-var fn$3 = function fn(provider) {
   var _provider$site;
 
   return (_provider$site = provider.site) == null ? void 0 : _provider$site.useCategories;
 };
 
 var useCategories = function useCategories(input) {
-  var hook = useHook(fn$3);
-  return useSWRHook(_extends({
-    fetcher: fetcher$3
-  }, hook))(input);
-};
-
-var fetcher$4 = SWRFetcher;
-
-var fn$4 = function fn(provider) {
-  var _provider$site;
-
-  return (_provider$site = provider.site) == null ? void 0 : _provider$site.useBrands;
-};
-
-var useBrands = function useBrands(input) {
-  var hook = useHook(fn$4);
+  var hook = useHook(fn$2);
   return useSWRHook(_extends({
-    fetcher: fetcher$4
+    fetcher: fetcher$2
   }, hook))(input);
 };
 
@@ -1480,9 +1561,9 @@ var useCommerceExtraFeatures = function useCommerceExtraFeatures() {
   return providerRef.current.extraFeatures;
 };
 
-var productCollectionMeta = {
-  name: "plasmic-commerce-product-collection",
-  displayName: "Product Collection",
+var categoryCollectionMeta = {
+  name: "plasmic-commerce-category-collection",
+  displayName: "Category Collection",
   props: {
     children: {
       type: "slot",
@@ -1490,13 +1571,13 @@ var productCollectionMeta = {
         type: "vbox",
         children: [{
           type: "component",
-          name: "plasmic-commerce-product-text-field",
+          name: "plasmic-commerce-category-field",
           props: {
             field: "name"
           }
         }, {
           type: "component",
-          name: "plasmic-commerce-product-media"
+          name: "plasmic-commerce-product-collection"
         }],
         styles: {
           width: "100%",
@@ -1504,11 +1585,14 @@ var productCollectionMeta = {
         }
       }]
     },
+    noLayout: {
+      type: "boolean"
+    },
     emptyMessage: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "No product found!"
+        value: "No collection found!"
       }
     },
     loadingMessage: {
@@ -1518,7 +1602,6 @@ var productCollectionMeta = {
         value: "Loading..."
       }
     },
-    count: "number",
     category: {
       type: "choice",
       options: function options(props, ctx) {
@@ -1530,102 +1613,63 @@ var productCollectionMeta = {
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
-      },
-      hidden: function hidden(props, ctx) {
-        return !!(ctx != null && ctx.hasCategoryCtx);
-      }
-    },
-    includeSubCategories: {
-      type: "boolean",
-      hidden: function hidden(props, ctx) {
-        var _ctx$features;
-
-        return !(ctx != null && (_ctx$features = ctx.features) != null && _ctx$features.includeSubCategories);
-      }
-    },
-    brand: {
-      type: "choice",
-      options: function options(props, ctx) {
-        var _ctx$brands$map;
-
-        return (_ctx$brands$map = ctx == null ? void 0 : ctx.brands.map(function (brand) {
-          return {
-            label: brand.name,
-            value: brand.entityId
-          };
-        })) != null ? _ctx$brands$map : [];
       }
-    },
-    noLayout: "boolean"
+    }
   },
   defaultStyles: {
     display: "grid",
-    gridTemplateColumns: "1fr 1fr 1fr 1fr",
+    gridTemplateColumns: "1fr",
     gridRowGap: "8px",
-    gridColumnGap: "8px",
     padding: "8px",
     maxWidth: "100%"
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductCollection"
+  importName: "CategoryCollection"
 };
-function ProductCollection(props) {
-  var _categoryCtx$id;
-
-  var className = props.className,
-      children = props.children,
-      count = props.count,
-      category = props.category,
-      includeSubCategories = props.includeSubCategories,
-      brand = props.brand,
+function CategoryCollection(props) {
+  var children = props.children,
       noLayout = props.noLayout,
-      setControlContextData = props.setControlContextData,
+      className = props.className,
+      loadingMessage = props.loadingMessage,
       emptyMessage = props.emptyMessage,
-      loadingMessage = props.loadingMessage;
+      selectedCategory = props.category,
+      setControlContextData = props.setControlContextData;
+  var features = useCommerceExtraFeatures();
+  var inEditor = React.useContext(PlasmicCanvasContext);
 
   var _useCategories = useCategories(),
-      categories = _useCategories.data,
-      isCategoriesLoading = _useCategories.isLoading;
-
-  var _useBrands = useBrands(),
-      brands = _useBrands.data,
-      isBrandsLoading = _useBrands.isLoading;
-
-  var categoryCtx = useCategoryContext();
+      allCategories = _useCategories.data,
+      isAllCategoriesLoading = _useCategories.isLoading;
 
-  var _useSearch = useSearch({
-    categoryId: (_categoryCtx$id = categoryCtx == null ? void 0 : categoryCtx.id) != null ? _categoryCtx$id : category,
-    brandId: brand,
-    count: count,
-    categories: categories != null ? categories : [],
-    includeSubCategories: includeSubCategories
+  var _useCategories2 = useCategories({
+    categoryId: selectedCategory,
+    topologicalSort: !selectedCategory && (features == null ? void 0 : features.includeSubCategories),
+    addIsEmptyField: !!inEditor
   }),
-      data = _useSearch.data,
-      isSearchLoading = _useSearch.isLoading;
-
-  var features = useCommerceExtraFeatures();
+      categories = _useCategories2.data,
+      isLoading = _useCategories2.isLoading;
 
-  if (categories && brands) {
+  if (allCategories) {
     setControlContextData == null ? void 0 : setControlContextData({
-      categories: categories,
-      brands: brands,
-      features: features,
-      hasCategoryCtx: !!categoryCtx
+      categories: allCategories
     });
   }
 
-  var renderedData = data == null ? void 0 : data.products.map(function (product, i) {
-    return React.createElement(ProductProvider, {
-      product: product,
-      key: product.id
-    }, repeatedElement(i === 0, children));
+  var firstCategoryNotEmpty = categories == null ? void 0 : categories.find(function (category) {
+    return !category.isEmpty;
+  });
+  var renderedData = categories == null ? void 0 : categories.map(function (category, i) {
+    return React.createElement(CategoryProvider, {
+      category: category,
+      key: category.id
+    }, repeatedElement(firstCategoryNotEmpty ? category === firstCategoryNotEmpty : i === 0, children));
   });
 
-  if ([isSearchLoading, isBrandsLoading, isCategoriesLoading].includes(true)) {
+  if ([isAllCategoriesLoading, isLoading].includes(true)) {
     return React.isValidElement(loadingMessage) ? loadingMessage : null;
   }
 
-  if (!data || data.products.length === 0) {
+  if (!categories || categories.length === 0) {
     return React.isValidElement(emptyMessage) ? emptyMessage : null;
   }
 
@@ -1633,38 +1677,72 @@ function ProductCollection(props) {
     className: className
   }, renderedData);
 }
-function registerProductCollection(loader, customProductCollectionMeta) {
+function registerCategoryCollection(loader, customCategoryCollectionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductCollection, customProductCollectionMeta != null ? customProductCollectionMeta : productCollectionMeta);
+  doRegisterComponent(CategoryCollection, customCategoryCollectionMeta != null ? customCategoryCollectionMeta : categoryCollectionMeta);
 }
 
-var productLinkMeta = {
-  name: "plasmic-commerce-product-link",
-  displayName: "Product Link",
+var categoryFieldMeta = {
+  name: "plasmic-commerce-category-field",
+  displayName: "Category Field",
+  props: {
+    field: {
+      type: "choice",
+      options: ["id", "name", "slug", "path"]
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "CategoryField"
+};
+function CategoryField(props) {
+  var className = props.className,
+      field = props.field;
+  var category = useCategoryContext();
+
+  if (!field) {
+    return React.createElement("span", null, "You must set the field prop");
+  }
+
+  var data = category ? category[field] : "Category field placeholder";
+  return React.createElement("span", {
+    className: className
+  }, data);
+}
+function registerCategoryField(loader, customCategoryFieldMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(CategoryField, customCategoryFieldMeta != null ? customCategoryFieldMeta : categoryFieldMeta);
+}
+
+var categoryLinkMeta = {
+  name: "plasmic-commerce-category-link",
+  displayName: "Category Link",
   props: {
     children: "slot",
     linkDest: {
       type: "string",
-      defaultValueHint: "products/{slug}",
-      description: "Set the link destination. You can use {slug} to replace by the product slug"
+      defaultValueHint: "category/{slug}",
+      description: "Set the link destination. You can use {slug} to replace by the category slug"
     }
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductLink"
+  importName: "CategoryLink"
 };
-function ProductLink(props) {
+function CategoryLink(props) {
   var className = props.className,
       children = props.children,
       linkDest = props.linkDest;
-  var product = useProduct();
+  var category = useCategoryContext();
 
   var resolveLink = function resolveLink(linkDest) {
     var _linkDest$match;
 
-    if (!product || !linkDest) {
+    if (!linkDest) {
       return undefined;
     }
 
@@ -1677,11 +1755,11 @@ function ProductLink(props) {
       var match = _step.value;
       var field = match.slice(1, -1);
 
-      if (!(field in product)) {
+      if (!category || !(field in category)) {
         return undefined;
       }
 
-      resolvedLink = resolvedLink.replace(regex, product[field]);
+      resolvedLink = resolvedLink.replace(regex, category[field]);
     }
 
     return resolvedLink;
@@ -1696,580 +1774,762 @@ function ProductLink(props) {
     }
   }, children);
 }
-function registerProductLink(loader, customProductLinkMeta) {
+function registerCategoryLink(loader, customCategoryLinkMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductLink, customProductLinkMeta != null ? customProductLinkMeta : productLinkMeta);
+  doRegisterComponent(CategoryLink, customCategoryLinkMeta != null ? customCategoryLinkMeta : categoryLinkMeta);
 }
 
-var placeholderImage = "https://static1.plasmic.app/commerce/lightweight-jacket-0.png";
-var productMediaMeta = {
-  name: "plasmic-commerce-product-media",
-  displayName: "Product Media",
+var categoryMediaMeta = {
+  name: "plasmic-commerce-category-media",
+  displayName: "Category Media",
   props: {
-    mediaIndex: "number"
+    mediaIndex: "number",
+    mediaSize: {
+      type: "choice",
+      options: [{
+        label: "Fill",
+        value: "fill"
+      }, {
+        label: "Container",
+        value: "contain"
+      }, {
+        label: "Cover",
+        value: "cover"
+      }, {
+        label: "None",
+        value: "none"
+      }, {
+        label: "Scale down",
+        value: "scale-down"
+      }]
+    }
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductMedia"
+  importName: "CategoryMedia"
 };
-function ProductMedia(props) {
+function CategoryMedia(props) {
   var _image$url;
 
   var className = props.className,
       _props$mediaIndex = props.mediaIndex,
-      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex;
-  var product = useProduct();
-  var image = product == null ? void 0 : product.images[mediaIndex];
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
+      mediaSize = props.mediaSize;
+  var category = useCategoryContext();
+  var image = category != null && category.images ? category.images[mediaIndex] : undefined;
   return React.createElement("img", {
-    alt: (product == null ? void 0 : product.name) || 'Product Image',
-    src: product ? (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "" : placeholderImage,
-    loading: 'lazy',
-    className: className
+    alt: (category == null ? void 0 : category.name) || "Category Image",
+    src: (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "",
+    loading: "lazy",
+    className: className,
+    style: {
+      objectFit: mediaSize
+    }
   });
 }
-function registerProductMedia(loader, customProductMediaMeta) {
+function registerCategoryMedia(loader, customCategoryMediaMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductMedia, customProductMediaMeta != null ? customProductMediaMeta : productMediaMeta);
-}
-
-/*
-  Forked from https://github.com/vercel/commerce/tree/main/packages/commerce/src
-  Changes: None
-*/
-function formatPrice(_ref) {
-  var amount = _ref.amount,
-      currencyCode = _ref.currencyCode,
-      locale = _ref.locale;
-  var formatCurrency = new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency: currencyCode
-  });
-  return formatCurrency.format(amount);
-}
-function formatVariantPrice(_ref2) {
-  var amount = _ref2.amount,
-      baseAmount = _ref2.baseAmount,
-      currencyCode = _ref2.currencyCode,
-      locale = _ref2.locale;
-  var hasDiscount = baseAmount > amount;
-  var formatDiscount = new Intl.NumberFormat(locale, {
-    style: 'percent'
-  });
-  var discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null;
-  var price = formatPrice({
-    amount: amount,
-    currencyCode: currencyCode,
-    locale: locale
-  });
-  var basePrice = hasDiscount ? formatPrice({
-    amount: baseAmount,
-    currencyCode: currencyCode,
-    locale: locale
-  }) : null;
-  return {
-    price: price,
-    basePrice: basePrice,
-    discount: discount
-  };
+  doRegisterComponent(CategoryMedia, customCategoryMediaMeta != null ? customCategoryMediaMeta : categoryMediaMeta);
 }
-function usePrice(data) {
-  var _ref3 = data != null ? data : {},
-      amount = _ref3.amount,
-      baseAmount = _ref3.baseAmount,
-      currencyCode = _ref3.currencyCode;
-
-  var _useCommerce = useCommerce(),
-      locale = _useCommerce.locale;
 
-  var value = useMemo(function () {
-    if (typeof amount !== 'number' || !currencyCode) return '';
-    return baseAmount ? formatVariantPrice({
-      amount: amount,
-      baseAmount: baseAmount,
-      currencyCode: currencyCode,
-      locale: locale
-    }) : formatPrice({
-      amount: amount,
-      currencyCode: currencyCode,
-      locale: locale
-    });
-  }, [amount, baseAmount, currencyCode]);
-  return typeof value === 'string' ? {
-    price: value
-  } : value;
-}
+var fetcher$3 = SWRFetcher;
 
-var getProductPrice = function getProductPrice(product, variantId) {
-  var _product$variants$fin, _product$variants$fin2;
+var fn$3 = function fn(provider) {
+  var _provider$products;
 
-  return (_product$variants$fin = (_product$variants$fin2 = product.variants.find(function (variant) {
-    return variant.id === variantId;
-  })) == null ? void 0 : _product$variants$fin2.price) != null ? _product$variants$fin : product.price.value;
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useProduct;
 };
 
-var productPriceMeta = {
-  name: "plasmic-commerce-product-price",
-  displayName: "Product Price",
-  props: {},
-  importPath: "@plasmicpkgs/commerce",
-  importName: "ProductPrice"
+var useProduct$1 = function useProduct(input) {
+  var hook = useHook(fn$3);
+  return useSWRHook(_extends({
+    fetcher: fetcher$3
+  }, hook))(input);
 };
-function ProductPriceComponent(props) {
-  var _product$variants$0$i;
-
-  var className = props.className;
-  var product = useProduct();
-  var form = useFormContext();
-  var watchProductVariant = form == null ? void 0 : form.watch("ProductVariant", (_product$variants$0$i = product.variants[0].id) != null ? _product$variants$0$i : "");
-
-  var _usePrice = usePrice({
-    amount: product ? getProductPrice(product, watchProductVariant) : 0,
-    currencyCode: product ? product.price.currencyCode : 'USD'
-  }),
-      price = _usePrice.price;
-
-  return React.createElement("span", {
-    className: className
-  }, price);
-}
-function registerProductPrice(loader, customProductPriceMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
-
-  doRegisterComponent(ProductPriceComponent, customProductPriceMeta != null ? customProductPriceMeta : productPriceMeta);
-}
 
-var productQuantityMeta = {
-  name: "plasmic-commerce-product-quantity",
-  displayName: "Product Quantity",
+var productBoxMeta = {
+  name: "plasmic-commerce-product-box",
+  displayName: "Product Box",
   props: {
     children: {
       type: "slot",
       defaultValue: [{
-        type: "input",
-        attrs: {
-          value: "1"
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-text-field",
+          props: {
+            field: "name"
+          }
+        }, {
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }],
+        styles: {
+          width: "100%",
+          minWidth: 0
         }
       }]
+    },
+    noLayout: "boolean",
+    id: {
+      type: "string",
+      description: "Fetch a product by its slug or ID"
     }
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductQuantity"
+  importName: "ProductBox"
 };
-function ProductQuantity(props) {
+function ProductBox(props) {
   var className = props.className,
-      children = props.children;
-  var form = useFormContext();
-  return React.createElement("div", {
+      children = props.children,
+      noLayout = props.noLayout,
+      id = props.id;
+
+  var _useProduct = useProduct$1({
+    id: id
+  }),
+      data = _useProduct.data,
+      error = _useProduct.error,
+      isLoading = _useProduct.isLoading;
+
+  if (!id) {
+    return React.createElement("span", null, "You must set the id prop");
+  }
+
+  if (error) {
+    throw new CommerceError({
+      message: error.message,
+      code: error.code
+    });
+  }
+
+  if (isLoading) {
+    return React.createElement("span", null, "Loading...");
+  }
+
+  if (!data) {
+    throw new Error("Product not found!");
+  }
+
+  var renderedData = React.createElement(ProductProvider, {
+    product: data
+  }, children);
+  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
     className: className
-  }, React.createElement(Controller, {
-    name: "ProductQuantity",
-    defaultValue: 1,
-    control: form == null ? void 0 : form.control,
-    render: function render(_ref) {
-      var field = _ref.field;
-      return React.isValidElement(children) ? React.cloneElement(children, _extends({}, children.props, field, {
-        name: "ProductQuantity"
-      })) : React.createElement(React.Fragment, null);
-    }
-  }));
+  }, renderedData);
 }
-function registerProductQuantity(loader, customProductQuantityMeta) {
+function registerProductBox(loader, customProductBoxMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductQuantity, customProductQuantityMeta != null ? customProductQuantityMeta : productQuantityMeta);
+  doRegisterComponent(ProductBox, customProductBoxMeta != null ? customProductBoxMeta : productBoxMeta);
 }
 
-var productTextFieldMeta = {
-  name: "plasmic-commerce-product-text-field",
-  displayName: "Product Text Field",
+var fetcher$4 = SWRFetcher;
+
+var fn$4 = function fn(provider) {
+  var _provider$products;
+
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useSearch;
+};
+
+var useSearch = function useSearch(input) {
+  var hook = useHook(fn$4);
+  return useSWRHook(_extends({
+    fetcher: fetcher$4
+  }, hook))(input);
+};
+
+var fetcher$5 = SWRFetcher;
+
+var fn$5 = function fn(provider) {
+  var _provider$site;
+
+  return (_provider$site = provider.site) == null ? void 0 : _provider$site.useBrands;
+};
+
+var useBrands = function useBrands(input) {
+  var hook = useHook(fn$5);
+  return useSWRHook(_extends({
+    fetcher: fetcher$5
+  }, hook))(input);
+};
+
+var productCollectionMeta = {
+  name: "plasmic-commerce-product-collection",
+  displayName: "Product Collection",
   props: {
-    field: {
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-text-field",
+          props: {
+            field: "name"
+          }
+        }, {
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }],
+        styles: {
+          width: "100%",
+          minWidth: 0
+        }
+      }]
+    },
+    emptyMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "No product found!"
+      }
+    },
+    loadingMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Loading..."
+      }
+    },
+    count: "number",
+    category: {
       type: "choice",
-      options: ["id", "name", "description", "sku", "slug", "path"]
-    }
+      options: function options(props, ctx) {
+        var _ctx$categories$map;
+
+        return (_ctx$categories$map = ctx == null ? void 0 : ctx.categories.map(function (category) {
+          return {
+            label: category.name,
+            value: category.id
+          };
+        })) != null ? _ctx$categories$map : [];
+      },
+      hidden: function hidden(props, ctx) {
+        return !!(ctx != null && ctx.hasCategoryCtx);
+      }
+    },
+    includeSubCategories: {
+      type: "boolean",
+      hidden: function hidden(props, ctx) {
+        var _ctx$features;
+
+        return !(ctx != null && (_ctx$features = ctx.features) != null && _ctx$features.includeSubCategories);
+      }
+    },
+    brand: {
+      type: "choice",
+      options: function options(props, ctx) {
+        var _ctx$brands$map;
+
+        return (_ctx$brands$map = ctx == null ? void 0 : ctx.brands.map(function (brand) {
+          return {
+            label: brand.name,
+            value: brand.entityId
+          };
+        })) != null ? _ctx$brands$map : [];
+      }
+    },
+    search: {
+      type: "string"
+    },
+    sort: {
+      type: "choice",
+      options: [{
+        label: "Trending",
+        value: "trending-desc"
+      }, {
+        label: "New Arrivals",
+        value: "latest-desc"
+      }, {
+        label: "Price: Low to High",
+        value: "price-asc"
+      }, {
+        label: "Price: High to Low",
+        value: "price-desc"
+      }]
+    },
+    noLayout: "boolean"
+  },
+  defaultStyles: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr 1fr 1fr",
+    gridRowGap: "8px",
+    gridColumnGap: "8px",
+    padding: "8px",
+    maxWidth: "100%"
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductTextField"
+  importName: "ProductCollection"
 };
-function ProductTextField(props) {
+function ProductCollection(props) {
+  var _categoryCtx$id;
+
   var className = props.className,
-      field = props.field;
-  var product = useProduct();
+      children = props.children,
+      count = props.count,
+      category = props.category,
+      includeSubCategories = props.includeSubCategories,
+      brand = props.brand,
+      noLayout = props.noLayout,
+      setControlContextData = props.setControlContextData,
+      emptyMessage = props.emptyMessage,
+      loadingMessage = props.loadingMessage,
+      search = props.search,
+      sort = props.sort;
 
-  if (!product) {
-    return React.createElement("span", {
-      className: className
-    }, "Fake Product Field");
-  }
+  var _useCategories = useCategories(),
+      categories = _useCategories.data,
+      isCategoriesLoading = _useCategories.isLoading;
 
-  if (!field) {
-    return React.createElement("span", {
-      className: className
-    }, "Unknown Product Field");
+  var _useBrands = useBrands(),
+      brands = _useBrands.data,
+      isBrandsLoading = _useBrands.isLoading;
+
+  var categoryCtx = useCategoryContext();
+
+  var _useSearch = useSearch({
+    categoryId: (_categoryCtx$id = categoryCtx == null ? void 0 : categoryCtx.id) != null ? _categoryCtx$id : category,
+    brandId: brand,
+    count: count,
+    categories: categories != null ? categories : [],
+    includeSubCategories: includeSubCategories,
+    search: search,
+    sort: sort
+  }),
+      data = _useSearch.data,
+      isSearchLoading = _useSearch.isLoading;
+
+  var features = useCommerceExtraFeatures();
+
+  if (categories && brands) {
+    setControlContextData == null ? void 0 : setControlContextData({
+      categories: categories,
+      brands: brands,
+      features: features,
+      hasCategoryCtx: !!categoryCtx
+    });
   }
 
-  var value;
+  var renderedData = data == null ? void 0 : data.products.map(function (product, i) {
+    return React.createElement(ProductProvider, {
+      product: product,
+      key: product.id
+    }, repeatedElement(i === 0, children));
+  });
 
-  if (field === "description") {
-    return product.descriptionHtml ? React.createElement("div", {
-      className: className,
-      dangerouslySetInnerHTML: {
-        __html: product.descriptionHtml
-      }
-    }) : React.createElement("div", {
-      className: className
-    }, product.description);
-  } else {
-    value = product[field];
+  if ([isSearchLoading, isBrandsLoading, isCategoriesLoading].includes(true)) {
+    return React.isValidElement(loadingMessage) ? loadingMessage : null;
   }
 
-  return React.createElement("span", {
+  if (!data || data.products.length === 0) {
+    return React.isValidElement(emptyMessage) ? emptyMessage : null;
+  }
+
+  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
     className: className
-  }, value);
+  }, renderedData);
 }
-function registerTextField(loader, customProductTextFieldMeta) {
+function registerProductCollection(loader, customProductCollectionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductTextField, customProductTextFieldMeta != null ? customProductTextFieldMeta : productTextFieldMeta);
+  doRegisterComponent(ProductCollection, customProductCollectionMeta != null ? customProductCollectionMeta : productCollectionMeta);
 }
 
-var productVariantPickerMeta = {
-  name: "plasmic-commerce-product-variant-picker",
-  displayName: "Product Variant Picker",
-  props: {},
+var productLinkMeta = {
+  name: "plasmic-commerce-product-link",
+  displayName: "Product Link",
+  props: {
+    children: "slot",
+    linkDest: {
+      type: "string",
+      defaultValueHint: "products/{slug}",
+      description: "Set the link destination. You can use {slug} to replace by the product slug"
+    }
+  },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductVariantPicker"
+  importName: "ProductLink"
 };
-function ProductVariantPicker(props) {
-  var _useFormContext;
-
-  var className = props.className;
+function ProductLink(props) {
+  var className = props.className,
+      children = props.children,
+      linkDest = props.linkDest;
   var product = useProduct();
-  var form = (_useFormContext = useFormContext()) != null ? _useFormContext : useForm();
-  return React.createElement(Controller, {
-    name: "ProductVariant",
-    control: form == null ? void 0 : form.control,
-    defaultValue: product == null ? void 0 : product.variants[0].id,
-    render: function render(_ref) {
-      var _product$variants$map;
-
-      var field = _ref.field;
-      return React.createElement("select", Object.assign({
-        className: className
-      }, field), (_product$variants$map = product == null ? void 0 : product.variants.map(function (variant) {
-        return React.createElement("option", {
-          value: variant.id
-        }, variant.name);
-      })) != null ? _product$variants$map : React.createElement("option", null, "Product Variant Placeholder"));
-    }
-  });
-}
-function registerProductVariantPicker(loader, customProductVariantPickerMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
-
-  doRegisterComponent(ProductVariantPicker, customProductVariantPickerMeta != null ? customProductVariantPickerMeta : productVariantPickerMeta);
-}
 
-var fetcher$5 = /*#__PURE__*/function () {
-  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
-    var options, cartId, fetch;
-    return runtime_1.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            options = _ref.options, cartId = _ref.input.cartId, fetch = _ref.fetch;
-
-            if (!cartId) {
-              _context.next = 7;
-              break;
-            }
-
-            _context.next = 4;
-            return fetch(options);
+  var resolveLink = function resolveLink(linkDest) {
+    var _linkDest$match;
 
-          case 4:
-            _context.t0 = _context.sent;
-            _context.next = 8;
-            break;
+    if (!linkDest) {
+      return undefined;
+    }
 
-          case 7:
-            _context.t0 = null;
+    var regex = /{[^}]*}/;
+    var regexAll = new RegExp(regex, "g");
+    var matches = (_linkDest$match = linkDest.match(regexAll)) != null ? _linkDest$match : [];
+    var resolvedLink = linkDest;
 
-          case 8:
-            return _context.abrupt("return", _context.t0);
+    for (var _iterator = _createForOfIteratorHelperLoose(matches), _step; !(_step = _iterator()).done;) {
+      var match = _step.value;
+      var field = match.slice(1, -1);
 
-          case 9:
-          case "end":
-            return _context.stop();
-        }
+      if (!product || !(field in product)) {
+        return undefined;
       }
-    }, _callee);
-  }));
-
-  return function fetcher(_x) {
-    return _ref2.apply(this, arguments);
-  };
-}();
-
-var fn$5 = function fn(provider) {
-  var _provider$cart;
-
-  return (_provider$cart = provider.cart) == null ? void 0 : _provider$cart.useCart;
-};
-
-var useCart = function useCart(input) {
-  var _hook$fetcher;
-
-  var hook = useHook(fn$5);
 
-  var _useCommerce = useCommerce(),
-      cartCookie = _useCommerce.cartCookie;
+      resolvedLink = resolvedLink.replace(regex, product[field]);
+    }
 
-  var fetcherFn = (_hook$fetcher = hook.fetcher) != null ? _hook$fetcher : fetcher$5;
+    return resolvedLink;
+  };
 
-  var wrapper = function wrapper(context) {
-    context.input.cartId = Cookies.get(cartCookie);
-    return fetcherFn(context);
+  return React.createElement("a", {
+    className: className,
+    href: resolveLink(linkDest),
+    style: {
+      color: "inherit",
+      textDecoration: "inherit"
+    }
+  }, children);
+}
+function registerProductLink(loader, customProductLinkMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  return useSWRHook(_extends({}, hook, {
-    fetcher: wrapper
-  }))(input);
-};
+  doRegisterComponent(ProductLink, customProductLinkMeta != null ? customProductLinkMeta : productLinkMeta);
+}
 
-var cartMeta = {
-  name: "plasmic-commerce-cart",
-  displayName: "Cart",
+var placeholderImage = "https://static1.plasmic.app/commerce/lightweight-jacket-0.png";
+var productMediaMeta = {
+  name: "plasmic-commerce-product-media",
+  displayName: "Product Media",
   props: {
-    field: {
+    mediaIndex: "number",
+    mediaSize: {
       type: "choice",
-      options: ["Size", "Total Price"]
-    },
-    hideIfIsEmpty: {
-      type: "boolean"
+      options: [{
+        label: "Fill",
+        value: "fill"
+      }, {
+        label: "Container",
+        value: "contain"
+      }, {
+        label: "Cover",
+        value: "cover"
+      }, {
+        label: "None",
+        value: "none"
+      }, {
+        label: "Scale down",
+        value: "scale-down"
+      }]
     }
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "Cart"
+  importName: "ProductMedia"
 };
-function CartComponent(props) {
-  var _data$totalPrice, _data$currency$code;
+function ProductMedia(props) {
+  var _image$url;
 
   var className = props.className,
-      field = props.field,
-      hideIfIsEmpty = props.hideIfIsEmpty;
+      _props$mediaIndex = props.mediaIndex,
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
+      mediaSize = props.mediaSize;
+  var product = useProduct();
+  var sliderContext = useProductSliderContext();
+  var image = product == null ? void 0 : product.images[sliderContext != null ? sliderContext : mediaIndex];
+  return React.createElement("img", {
+    alt: (product == null ? void 0 : product.name) || "Product Image",
+    src: product ? (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "" : placeholderImage,
+    loading: "lazy",
+    className: className,
+    style: {
+      objectFit: mediaSize
+    }
+  });
+}
+function registerProductMedia(loader, customProductMediaMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
 
-  var _useCart = useCart(),
-      data = _useCart.data;
+  doRegisterComponent(ProductMedia, customProductMediaMeta != null ? customProductMediaMeta : productMediaMeta);
+}
 
-  var _usePrice = usePrice({
-    amount: (_data$totalPrice = data == null ? void 0 : data.totalPrice) != null ? _data$totalPrice : 0,
-    currencyCode: (_data$currency$code = data == null ? void 0 : data.currency.code) != null ? _data$currency$code : "USD"
-  }),
-      price = _usePrice.price;
+var getProductPrice = function getProductPrice(product, variantId) {
+  var _product$variants$fin, _product$variants$fin2;
 
-  if (!field) {
-    return React.createElement("p", null, "You must set the field prop");
-  }
+  return (_product$variants$fin = (_product$variants$fin2 = product.variants.find(function (variant) {
+    return variant.id === variantId;
+  })) == null ? void 0 : _product$variants$fin2.price) != null ? _product$variants$fin : product.price.value;
+};
 
-  var value;
+var productPriceMeta = {
+  name: "plasmic-commerce-product-price",
+  displayName: "Product Price",
+  props: {},
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductPriceComponent"
+};
+function ProductPriceComponent(props) {
+  var _product$price;
 
-  if (field === "Size") {
-    var _data$lineItems$lengt;
+  var className = props.className;
+  var product = useProduct();
+  var form = useFormContext();
+  var watchProductVariant = form == null ? void 0 : form.watch("ProductVariant", (_product$price = product.price) != null ? _product$price : "");
 
-    value = (_data$lineItems$lengt = data == null ? void 0 : data.lineItems.length) != null ? _data$lineItems$lengt : 0;
-  } else if (field === "Total Price") {
-    value = price != null ? price : 0;
-  }
+  var _usePrice = usePrice({
+    amount: product ? getProductPrice(product, watchProductVariant) : 0,
+    currencyCode: product ? product.price.currencyCode : "USD"
+  }),
+      price = _usePrice.price;
 
-  return hideIfIsEmpty && value === 0 ? null : React.createElement("span", {
+  return React.createElement("span", {
     className: className
-  }, value);
+  }, price);
 }
-function registerCart(loader, customCartMeta) {
+function registerProductPrice(loader, customProductPriceMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(CartComponent, customCartMeta != null ? customCartMeta : cartMeta);
+  doRegisterComponent(ProductPriceComponent, customProductPriceMeta != null ? customProductPriceMeta : productPriceMeta);
 }
 
-var categoryCollectionMeta = {
-  name: "plasmic-commerce-category-collection",
-  displayName: "Category Collection",
+var productQuantityMeta = {
+  name: "plasmic-commerce-product-quantity",
+  displayName: "Product Quantity",
   props: {
     children: {
       type: "slot",
       defaultValue: [{
-        type: "vbox",
-        children: [{
-          type: "component",
-          name: "plasmic-commerce-category-field",
-          props: {
-            field: "name"
-          }
-        }, {
-          type: "component",
-          name: "plasmic-commerce-product-collection"
-        }],
-        styles: {
-          width: "100%",
-          minWidth: 0
+        type: "input",
+        attrs: {
+          value: "1"
         }
       }]
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductQuantity"
+};
+function ProductQuantity(props) {
+  var className = props.className,
+      children = props.children;
+  var form = useFormContext();
+  return React.createElement("div", {
+    className: className
+  }, React.createElement(Controller, {
+    name: "ProductQuantity",
+    defaultValue: 1,
+    control: form == null ? void 0 : form.control,
+    render: function render(_ref) {
+      var field = _ref.field;
+      return React.isValidElement(children) ? React.cloneElement(children, _extends({}, children.props, field, {
+        name: "ProductQuantity"
+      })) : React.createElement(React.Fragment, null);
+    }
+  }));
+}
+function registerProductQuantity(loader, customProductQuantityMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductQuantity, customProductQuantityMeta != null ? customProductQuantityMeta : productQuantityMeta);
+}
+
+var productSliderMeta = {
+  name: "plasmic-commerce-product-slider",
+  displayName: "Product Slider",
+  props: {
+    thumbsVisible: {
+      type: "number",
+      description: "Number of thumbs visible",
+      defaultValue: 4,
+      defaultValueHint: 4
     },
-    noLayout: {
-      type: "boolean"
-    },
-    emptyMessage: {
+    slideContainer: {
       type: "slot",
       defaultValue: {
-        type: "text",
-        value: "No collection found!"
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
       }
     },
-    loadingMessage: {
+    thumbsContainer: {
       type: "slot",
       defaultValue: {
-        type: "text",
-        value: "Loading..."
+        type: "hbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
       }
     },
-    category: {
-      type: "choice",
-      options: function options(props, ctx) {
-        var _ctx$categories$map;
-
-        return (_ctx$categories$map = ctx == null ? void 0 : ctx.categories.map(function (category) {
-          return {
-            label: category.name,
-            value: category.id
-          };
-        })) != null ? _ctx$categories$map : [];
-      }
+    slideSelected: {
+      type: "number",
+      defaultValue: 0,
+      defaultValueHint: 0,
+      description: "Current slide selected"
     }
   },
-  defaultStyles: {
-    display: "grid",
-    gridTemplateColumns: "1fr",
-    gridRowGap: "8px",
-    padding: "8px",
-    maxWidth: "100%"
-  },
   importPath: "@plasmicpkgs/commerce",
-  importName: "CategoryCollection"
+  importName: "ProductSlider"
 };
-function CategoryCollection(props) {
-  var children = props.children,
-      noLayout = props.noLayout,
-      className = props.className,
-      loadingMessage = props.loadingMessage,
-      emptyMessage = props.emptyMessage,
-      selectedCategory = props.category,
-      setControlContextData = props.setControlContextData;
-  var features = useCommerceExtraFeatures();
-  var inEditor = React.useContext(PlasmicCanvasContext);
-
-  var _useCategories = useCategories(),
-      allCategories = _useCategories.data,
-      isAllCategoriesLoading = _useCategories.isLoading;
-
-  var _useCategories2 = useCategories({
-    categoryId: selectedCategory,
-    topologicalSort: !selectedCategory && (features == null ? void 0 : features.includeSubCategories),
-    addIsEmptyField: !!inEditor
-  }),
-      categories = _useCategories2.data,
-      isLoading = _useCategories2.isLoading;
-
-  if (allCategories) {
-    setControlContextData == null ? void 0 : setControlContextData({
-      categories: allCategories
-    });
-  }
-
-  var firstCategoryNotEmpty = categories == null ? void 0 : categories.find(function (category) {
-    return !category.isEmpty;
-  });
-  var renderedData = categories == null ? void 0 : categories.map(function (category, i) {
-    return React.createElement(CategoryProvider, {
-      category: category,
-      key: category.id
-    }, repeatedElement(firstCategoryNotEmpty ? category === firstCategoryNotEmpty : i === 0, children));
-  });
-
-  if ([isAllCategoriesLoading, isLoading].includes(true)) {
-    return React.isValidElement(loadingMessage) ? loadingMessage : null;
-  }
+function ProductSlider(props) {
+  var className = props.className,
+      slideContainer = props.slideContainer,
+      thumbsContainer = props.thumbsContainer,
+      _props$thumbsVisible = props.thumbsVisible,
+      thumbsVisible = _props$thumbsVisible === void 0 ? 4 : _props$thumbsVisible,
+      _props$slideSelected = props.slideSelected,
+      slideSelected = _props$slideSelected === void 0 ? 0 : _props$slideSelected;
+  var product = useProduct();
 
-  if (!categories || categories.length === 0) {
-    return React.isValidElement(emptyMessage) ? emptyMessage : null;
-  }
+  var _React$useState = React.useState(slideSelected),
+      selected = _React$useState[0],
+      setSelected = _React$useState[1];
 
-  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
+  var maximumRight = product.images.length - thumbsVisible;
+  var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
+  return React.createElement("div", {
     className: className
-  }, renderedData);
+  }, React.createElement(ProductSliderProvider, {
+    mediaIndex: selected,
+    children: slideContainer
+  }), React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
+    }
+  }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
+    return repeatedElement(i === 0, React.createElement(ProductSliderProvider, {
+      mediaIndex: leftIndex + i,
+      children: thumbsContainer,
+      onClick: function onClick() {
+        return setSelected(leftIndex + i);
+      }
+    }));
+  })));
 }
-function registerCategoryCollection(loader, customCategoryCollectionMeta) {
+function registerProductSlider(loader, customProductSliderMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(CategoryCollection, customCategoryCollectionMeta != null ? customCategoryCollectionMeta : categoryCollectionMeta);
+  doRegisterComponent(ProductSlider, customProductSliderMeta != null ? customProductSliderMeta : productSliderMeta);
 }
 
-var categoryFieldMeta = {
-  name: "plasmic-commerce-category-field",
-  displayName: "Category Field",
+var productTextFieldMeta = {
+  name: "plasmic-commerce-product-text-field",
+  displayName: "Product Text Field",
   props: {
     field: {
       type: "choice",
-      options: ["id", "name", "slug", "path"]
+      options: ["id", "name", "description", "sku", "slug", "path"]
     }
   },
   importPath: "@plasmicpkgs/commerce",
-  importName: "CategoryField"
+  importName: "ProductTextField"
 };
-function CategoryField(props) {
+function ProductTextField(props) {
   var className = props.className,
       field = props.field;
-  var category = useCategoryContext();
+  var product = useProduct();
+
+  if (!product) {
+    return React.createElement("span", {
+      className: className
+    }, "Fake Product Field");
+  }
 
   if (!field) {
-    return React.createElement("span", null, "You must set the field prop");
+    return React.createElement("span", {
+      className: className
+    }, "Unknown Product Field");
+  }
+
+  var value;
+
+  if (field === "description") {
+    var _product$descriptionH;
+
+    return React.createElement("div", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: (_product$descriptionH = product.descriptionHtml) != null ? _product$descriptionH : product.description
+      }
+    });
+  } else {
+    value = product[field];
   }
 
-  var data = category ? category[field] : "Category field placeholder";
   return React.createElement("span", {
     className: className
-  }, data);
+  }, value);
 }
-function registerCategoryField(loader, customCategoryFieldMeta) {
+function registerTextField(loader, customProductTextFieldMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(CategoryField, customCategoryFieldMeta != null ? customCategoryFieldMeta : categoryFieldMeta);
+  doRegisterComponent(ProductTextField, customProductTextFieldMeta != null ? customProductTextFieldMeta : productTextFieldMeta);
 }
 
+var productVariantPickerMeta = {
+  name: "plasmic-commerce-product-variant-picker",
+  displayName: "Product Variant Picker",
+  props: {},
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductVariantPicker"
+};
+function ProductVariantPicker(props) {
+  var _useFormContext, _product$variants$fin;
+
+  var className = props.className;
+  var product = useProduct();
+  var form = (_useFormContext = useFormContext()) != null ? _useFormContext : useForm();
+  return React.createElement(Controller, {
+    name: "ProductVariant",
+    control: form == null ? void 0 : form.control,
+    defaultValue: product == null ? void 0 : (_product$variants$fin = product.variants.find(function (v) {
+      return v.price === product.price.value;
+    })) == null ? void 0 : _product$variants$fin.id,
+    render: function render(_ref) {
+      var _product$variants$map;
 
+      var field = _ref.field;
+      return React.createElement("select", Object.assign({
+        className: className
+      }, field), (_product$variants$map = product == null ? void 0 : product.variants.map(function (variant) {
+        return React.createElement("option", {
+          value: variant.id
+        }, variant.name);
+      })) != null ? _product$variants$map : React.createElement("option", null, "Product Variant Placeholder"));
+    }
+  });
+}
+function registerProductVariantPicker(loader, customProductVariantPickerMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
 
-var product = {
-  __proto__: null
-};
+  doRegisterComponent(ProductVariantPicker, customProductVariantPickerMeta != null ? customProductVariantPickerMeta : productVariantPickerMeta);
+}
 
 var fetcher$6 = mutationFetcher;
 
@@ -2309,6 +2569,15 @@ var cart = {
 
 
 
+var product = {
+  __proto__: null
+};
+
+/*
+  Forked from https://github.com/vercel/commerce/tree/main/packages/commerce/src
+  Changes: Added CategoryImage
+*/
+
 var site = {
   __proto__: null
 };
@@ -2323,10 +2592,13 @@ function registerAll(loader) {
   registerProductQuantity(loader);
   registerProductVariantPicker(loader);
   registerProductBox(loader);
+  registerProductSlider(loader);
   registerProductLink(loader);
   registerCategoryCollection(loader);
   registerCategoryField(loader);
+  registerCategoryLink(loader);
+  registerCategoryMedia(loader);
 }
 
-export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, ProductPriceComponent, ProductQuantity, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, fetcher$2 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
+export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CategoryMedia, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductSlider, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, categoryMediaMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productSliderMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerCategoryMedia, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductSlider, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
 //# sourceMappingURL=commerce.esm.js.map