@plasmicpkgs/commerce 0.0.11 → 0.0.14

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, usePlasmicCanvasContext } 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,716 @@ 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"
   },
   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];
+  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',
+    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
   });
 }
-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 fetcher$3 = SWRFetcher;
 
-  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 fn$3 = function fn(provider) {
+  var _provider$products;
 
-var getProductPrice = function getProductPrice(product, variantId) {
-  var _product$variants$fin, _product$variants$fin2;
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useProduct;
+};
 
-  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 useProduct$1 = function useProduct(input) {
+  var hook = useHook(fn$3);
+  return useSWRHook(_extends({
+    fetcher: fetcher$3
+  }, hook))(input);
 };
 
-var productPriceMeta = {
-  name: "plasmic-commerce-product-price",
-  displayName: "Product Price",
-  props: {},
+var productBoxMeta = {
+  name: "plasmic-commerce-product-box",
+  displayName: "Product Box",
+  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
+        }
+      }]
+    },
+    noLayout: "boolean",
+    id: {
+      type: "string",
+      description: "Fetch a product by its slug or ID"
+    }
+  },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductPrice"
+  importName: "ProductBox"
 };
-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 : "");
+function ProductBox(props) {
+  var className = props.className,
+      children = props.children,
+      noLayout = props.noLayout,
+      id = props.id;
 
-  var _usePrice = usePrice({
-    amount: product ? getProductPrice(product, watchProductVariant) : 0,
-    currencyCode: product ? product.price.currencyCode : 'USD'
+  var _useProduct = useProduct$1({
+    id: id
   }),
-      price = _usePrice.price;
+      data = _useProduct.data,
+      error = _useProduct.error,
+      isLoading = _useProduct.isLoading;
 
-  return React.createElement("span", {
+  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
-  }, price);
+  }, renderedData);
 }
-function registerProductPrice(loader, customProductPriceMeta) {
+function registerProductBox(loader, customProductBoxMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductPriceComponent, customProductPriceMeta != null ? customProductPriceMeta : productPriceMeta);
+  doRegisterComponent(ProductBox, customProductBoxMeta != null ? customProductBoxMeta : productBoxMeta);
 }
 
-var productQuantityMeta = {
-  name: "plasmic-commerce-product-quantity",
-  displayName: "Product Quantity",
+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: {
     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
         }
       }]
-    }
+    },
+    emptyMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "No product found!"
+      }
+    },
+    loadingMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Loading..."
+      }
+    },
+    count: "number",
+    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 : [];
+      },
+      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: "ProductQuantity"
+  importName: "ProductCollection"
 };
-function ProductQuantity(props) {
+function ProductCollection(props) {
+  var _categoryCtx$id;
+
   var className = props.className,
-      children = props.children;
-  var form = useFormContext();
-  return React.createElement("div", {
+      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;
+
+  var _useCategories = useCategories(),
+      categories = _useCategories.data,
+      isCategoriesLoading = _useCategories.isLoading;
+
+  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 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 ([isSearchLoading, isBrandsLoading, isCategoriesLoading].includes(true)) {
+    return React.isValidElement(loadingMessage) ? loadingMessage : null;
+  }
+
+  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
-  }, 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 registerProductCollection(loader, customProductCollectionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductQuantity, customProductQuantityMeta != null ? customProductQuantityMeta : productQuantityMeta);
+  doRegisterComponent(ProductCollection, customProductCollectionMeta != null ? customProductCollectionMeta : productCollectionMeta);
 }
 
-var productTextFieldMeta = {
-  name: "plasmic-commerce-product-text-field",
-  displayName: "Product Text Field",
+var productLinkMeta = {
+  name: "plasmic-commerce-product-link",
+  displayName: "Product Link",
   props: {
-    field: {
-      type: "choice",
-      options: ["id", "name", "description", "sku", "slug", "path"]
+    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: "ProductTextField"
+  importName: "ProductLink"
 };
-function ProductTextField(props) {
+function ProductLink(props) {
   var className = props.className,
-      field = props.field;
+      children = props.children,
+      linkDest = props.linkDest;
   var product = useProduct();
 
-  if (!product) {
-    return React.createElement("span", {
-      className: className
-    }, "Fake Product Field");
-  }
+  var resolveLink = function resolveLink(linkDest) {
+    var _linkDest$match;
 
-  if (!field) {
-    return React.createElement("span", {
-      className: className
-    }, "Unknown Product Field");
-  }
+    if (!linkDest) {
+      return undefined;
+    }
 
-  var value;
+    var regex = /{[^}]*}/;
+    var regexAll = new RegExp(regex, "g");
+    var matches = (_linkDest$match = linkDest.match(regexAll)) != null ? _linkDest$match : [];
+    var resolvedLink = linkDest;
 
-  if (field === "description") {
-    return product.descriptionHtml ? React.createElement("div", {
-      className: className,
-      dangerouslySetInnerHTML: {
-        __html: product.descriptionHtml
+    for (var _iterator = _createForOfIteratorHelperLoose(matches), _step; !(_step = _iterator()).done;) {
+      var match = _step.value;
+      var field = match.slice(1, -1);
+
+      if (!product || !(field in product)) {
+        return undefined;
       }
-    }) : React.createElement("div", {
-      className: className
-    }, product.description);
-  } else {
-    value = product[field];
-  }
 
-  return React.createElement("span", {
-    className: className
-  }, value);
+      resolvedLink = resolvedLink.replace(regex, product[field]);
+    }
+
+    return resolvedLink;
+  };
+
+  return React.createElement("a", {
+    className: className,
+    href: resolveLink(linkDest),
+    style: {
+      color: "inherit",
+      textDecoration: "inherit"
+    }
+  }, children);
 }
-function registerTextField(loader, customProductTextFieldMeta) {
+function registerProductLink(loader, customProductLinkMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductTextField, customProductTextFieldMeta != null ? customProductTextFieldMeta : productTextFieldMeta);
+  doRegisterComponent(ProductLink, customProductLinkMeta != null ? customProductLinkMeta : productLinkMeta);
 }
 
-var productVariantPickerMeta = {
-  name: "plasmic-commerce-product-variant-picker",
-  displayName: "Product Variant Picker",
-  props: {},
+var placeholderImage = "https://static1.plasmic.app/commerce/lightweight-jacket-0.png";
+var productMediaMeta = {
+  name: "plasmic-commerce-product-media",
+  displayName: "Product Media",
+  props: {
+    mediaIndex: "number"
+  },
   importPath: "@plasmicpkgs/commerce",
-  importName: "ProductVariantPicker"
+  importName: "ProductMedia"
 };
-function ProductVariantPicker(props) {
-  var _useFormContext;
+function ProductMedia(props) {
+  var _image$url;
 
-  var className = props.className;
+  var className = props.className,
+      _props$mediaIndex = props.mediaIndex,
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex;
   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"));
-    }
+  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
   });
 }
-function registerProductVariantPicker(loader, customProductVariantPickerMeta) {
+function registerProductMedia(loader, customProductMediaMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductVariantPicker, customProductVariantPickerMeta != null ? customProductVariantPickerMeta : productVariantPickerMeta);
+  doRegisterComponent(ProductMedia, customProductMediaMeta != null ? customProductMediaMeta : productMediaMeta);
 }
 
-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);
-
-          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$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;
-
-  var fetcherFn = (_hook$fetcher = hook.fetcher) != null ? _hook$fetcher : fetcher$5;
-
-  var wrapper = function wrapper(context) {
-    context.input.cartId = Cookies.get(cartCookie);
-    return fetcherFn(context);
-  };
+var getProductPrice = function getProductPrice(product, variantId) {
+  var _product$variants$fin, _product$variants$fin2;
 
-  return useSWRHook(_extends({}, hook, {
-    fetcher: wrapper
-  }))(input);
+  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 cartMeta = {
-  name: "plasmic-commerce-cart",
-  displayName: "Cart",
-  props: {
-    field: {
-      type: "choice",
-      options: ["Size", "Total Price"]
-    },
-    hideIfIsEmpty: {
-      type: "boolean"
-    }
-  },
+var productPriceMeta = {
+  name: "plasmic-commerce-product-price",
+  displayName: "Product Price",
+  props: {},
   importPath: "@plasmicpkgs/commerce",
-  importName: "Cart"
+  importName: "ProductPriceComponent"
 };
-function CartComponent(props) {
-  var _data$totalPrice, _data$currency$code;
-
-  var className = props.className,
-      field = props.field,
-      hideIfIsEmpty = props.hideIfIsEmpty;
-
-  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"
-  }),
-      price = _usePrice.price;
-
-  if (!field) {
-    return React.createElement("p", null, "You must set the field prop");
-  }
-
-  var value;
+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 = usePlasmicCanvasContext();
-
-  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 +2523,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 +2546,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, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
 //# sourceMappingURL=commerce.esm.js.map