@plasmicpkgs/commerce 0.0.12 → 0.0.15

package/dist/commerce.cjs.development.js

@@ -9,8 +9,8 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var reactHookForm = require('react-hook-form');
 var useSWR = _interopDefault(require('swr'));
-var host = require('@plasmicapp/host');
 var Cookies = _interopDefault(require('js-cookie'));
+var host = require('@plasmicapp/host');
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -971,6 +971,7 @@ var defaultProduct = {
 
 var ProductContext = /*#__PURE__*/React__default.createContext(undefined);
 var CategoryContext = /*#__PURE__*/React__default.createContext(undefined);
+var SliderContext = /*#__PURE__*/React__default.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -995,6 +996,20 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return React.useContext(CategoryContext);
 };
+function ProductSliderProvider(_ref3) {
+  var mediaIndex = _ref3.mediaIndex,
+      onClick = _ref3.onClick,
+      children = _ref3.children;
+  return React__default.createElement(SliderContext.Provider, {
+    value: mediaIndex,
+    key: mediaIndex
+  }, React__default.cloneElement(React__default.isValidElement(children) ? children : React__default.createElement(React__default.Fragment, null), {
+    onClick: onClick
+  }));
+}
+var useProductSliderContext = function useProductSliderContext() {
+  return React.useContext(SliderContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/React.createContext({});
@@ -1340,143 +1355,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 = React.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__default.createElement("span", null, "You must set the id prop");
+  if (!field) {
+    return React__default.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__default.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__default.createElement(ProductProvider, {
-    product: data
-  }, children);
-  return noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.createElement("div", {
+  return hideIfIsEmpty && value === 0 ? null : React__default.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);
 };
 
@@ -1487,9 +1568,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",
@@ -1497,13 +1578,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%",
@@ -1511,11 +1592,14 @@ var productCollectionMeta = {
         }
       }]
     },
+    noLayout: {
+      type: "boolean"
+    },
     emptyMessage: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "No product found!"
+        value: "No collection found!"
       }
     },
     loadingMessage: {
@@ -1525,7 +1609,6 @@ var productCollectionMeta = {
         value: "Loading..."
       }
     },
-    count: "number",
     category: {
       type: "choice",
       options: function options(props, ctx) {
@@ -1537,102 +1620,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__default.useContext(host.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__default.createElement(ProductProvider, {
-      product: product,
-      key: product.id
-    }, host.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__default.createElement(CategoryProvider, {
+      category: category,
+      key: category.id
+    }, host.repeatedElement(firstCategoryNotEmpty ? category === firstCategoryNotEmpty : i === 0, children));
   });
 
-  if ([isSearchLoading, isBrandsLoading, isCategoriesLoading].includes(true)) {
+  if ([isAllCategoriesLoading, isLoading].includes(true)) {
     return React__default.isValidElement(loadingMessage) ? loadingMessage : null;
   }
 
-  if (!data || data.products.length === 0) {
+  if (!categories || categories.length === 0) {
     return React__default.isValidElement(emptyMessage) ? emptyMessage : null;
   }
 
@@ -1640,38 +1684,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__default.createElement("span", null, "You must set the field prop");
+  }
+
+  var data = category ? category[field] : "Category field placeholder";
+  return React__default.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;
     }
 
@@ -1684,11 +1762,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;
@@ -1703,580 +1781,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__default.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 fetcher$3 = SWRFetcher;
 
-  var value = React.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 = reactHookForm.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__default.createElement("span", {
+  if (!id) {
+    return React__default.createElement("span", null, "You must set the id prop");
+  }
+
+  if (error) {
+    throw new CommerceError({
+      message: error.message,
+      code: error.code
+    });
+  }
+
+  if (isLoading) {
+    return React__default.createElement("span", null, "Loading...");
+  }
+
+  if (!data) {
+    throw new Error("Product not found!");
+  }
+
+  var renderedData = React__default.createElement(ProductProvider, {
+    product: data
+  }, children);
+  return noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.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 = reactHookForm.useFormContext();
-  return React__default.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__default.createElement(ProductProvider, {
+      product: product,
+      key: product.id
+    }, host.repeatedElement(i === 0, children));
+  });
+
+  if ([isSearchLoading, isBrandsLoading, isCategoriesLoading].includes(true)) {
+    return React__default.isValidElement(loadingMessage) ? loadingMessage : null;
+  }
+
+  if (!data || data.products.length === 0) {
+    return React__default.isValidElement(emptyMessage) ? emptyMessage : null;
+  }
+
+  return noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.createElement("div", {
     className: className
-  }, React__default.createElement(reactHookForm.Controller, {
-    name: "ProductQuantity",
-    defaultValue: 1,
-    control: form == null ? void 0 : form.control,
-    render: function render(_ref) {
-      var field = _ref.field;
-      return React__default.isValidElement(children) ? React__default.cloneElement(children, _extends({}, children.props, field, {
-        name: "ProductQuantity"
-      })) : React__default.createElement(React__default.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__default.createElement("span", {
-      className: className
-    }, "Fake Product Field");
-  }
+  var resolveLink = function resolveLink(linkDest) {
+    var _linkDest$match;
 
-  if (!field) {
-    return React__default.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__default.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__default.createElement("div", {
-      className: className
-    }, product.description);
-  } else {
-    value = product[field];
-  }
 
-  return React__default.createElement("span", {
-    className: className
-  }, value);
+      resolvedLink = resolvedLink.replace(regex, product[field]);
+    }
+
+    return resolvedLink;
+  };
+
+  return React__default.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",
+    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: "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,
+      mediaSize = props.mediaSize;
   var product = useProduct();
-  var form = (_useFormContext = reactHookForm.useFormContext()) != null ? _useFormContext : reactHookForm.useForm();
-  return React__default.createElement(reactHookForm.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__default.createElement("select", Object.assign({
-        className: className
-      }, field), (_product$variants$map = product == null ? void 0 : product.variants.map(function (variant) {
-        return React__default.createElement("option", {
-          value: variant.id
-        }, variant.name);
-      })) != null ? _product$variants$map : React__default.createElement("option", null, "Product Variant Placeholder"));
+  var sliderContext = useProductSliderContext();
+  var image = product == null ? void 0 : product.images[sliderContext != null ? sliderContext : mediaIndex];
+  return React__default.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 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__default.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 = reactHookForm.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__default.createElement("span", {
+  return React__default.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 = reactHookForm.useFormContext();
+  return React__default.createElement("div", {
+    className: className
+  }, React__default.createElement(reactHookForm.Controller, {
+    name: "ProductQuantity",
+    defaultValue: 1,
+    control: form == null ? void 0 : form.control,
+    render: function render(_ref) {
+      var field = _ref.field;
+      return React__default.isValidElement(children) ? React__default.cloneElement(children, _extends({}, children.props, field, {
+        name: "ProductQuantity"
+      })) : React__default.createElement(React__default.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__default.useContext(host.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__default.createElement(CategoryProvider, {
-      category: category,
-      key: category.id
-    }, host.repeatedElement(firstCategoryNotEmpty ? category === firstCategoryNotEmpty : i === 0, children));
-  });
-
-  if ([isAllCategoriesLoading, isLoading].includes(true)) {
-    return React__default.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__default.isValidElement(emptyMessage) ? emptyMessage : null;
-  }
+  var _React$useState = React__default.useState(slideSelected),
+      selected = _React$useState[0],
+      setSelected = _React$useState[1];
 
-  return noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.createElement("div", {
+  var maximumRight = product.images.length - thumbsVisible;
+  var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
+  return React__default.createElement("div", {
     className: className
-  }, renderedData);
+  }, React__default.createElement(ProductSliderProvider, {
+    mediaIndex: selected,
+    children: slideContainer
+  }), React__default.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
+    }
+  }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
+    return host.repeatedElement(i === 0, React__default.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__default.createElement("span", {
+      className: className
+    }, "Fake Product Field");
+  }
 
   if (!field) {
-    return React__default.createElement("span", null, "You must set the field prop");
+    return React__default.createElement("span", {
+      className: className
+    }, "Unknown Product Field");
+  }
+
+  var value;
+
+  if (field === "description") {
+    var _product$descriptionH;
+
+    return React__default.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__default.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 = reactHookForm.useFormContext()) != null ? _useFormContext : reactHookForm.useForm();
+  return React__default.createElement(reactHookForm.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__default.createElement("select", Object.assign({
+        className: className
+      }, field), (_product$variants$map = product == null ? void 0 : product.variants.map(function (variant) {
+        return React__default.createElement("option", {
+          value: variant.id
+        }, variant.name);
+      })) != null ? _product$variants$map : React__default.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;
 
@@ -2316,6 +2576,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
 };
@@ -2330,9 +2599,12 @@ function registerAll(loader) {
   registerProductQuantity(loader);
   registerProductVariantPicker(loader);
   registerProductBox(loader);
+  registerProductSlider(loader);
   registerProductLink(loader);
   registerCategoryCollection(loader);
   registerCategoryField(loader);
+  registerCategoryLink(loader);
+  registerCategoryMedia(loader);
 }
 
 exports.AddToCartButton = AddToCartButton;
@@ -2340,6 +2612,8 @@ exports.CartComponent = CartComponent;
 exports.CartType = cart;
 exports.CategoryCollection = CategoryCollection;
 exports.CategoryField = CategoryField;
+exports.CategoryLink = CategoryLink;
+exports.CategoryMedia = CategoryMedia;
 exports.CommerceError = CommerceError;
 exports.CoreCommerceProvider = CoreCommerceProvider;
 exports.FetcherError = FetcherError;
@@ -2347,8 +2621,10 @@ exports.ProductBox = ProductBox;
 exports.ProductCollection = ProductCollection;
 exports.ProductLink = ProductLink;
 exports.ProductMedia = ProductMedia;
+exports.ProductPlaceholder = defaultProduct;
 exports.ProductPriceComponent = ProductPriceComponent;
 exports.ProductQuantity = ProductQuantity;
+exports.ProductSlider = ProductSlider;
 exports.ProductTextField = ProductTextField;
 exports.ProductTypes = product;
 exports.ProductVariantPicker = ProductVariantPicker;
@@ -2358,7 +2634,9 @@ exports.addToCartButtonMeta = addToCartButtonMeta;
 exports.cartMeta = cartMeta;
 exports.categoryCollectionMeta = categoryCollectionMeta;
 exports.categoryFieldMeta = categoryFieldMeta;
-exports.fetcher = fetcher$2;
+exports.categoryLinkMeta = categoryLinkMeta;
+exports.categoryMediaMeta = categoryMediaMeta;
+exports.fetcher = fetcher$4;
 exports.getCommerceProvider = getCommerceProvider;
 exports.productBoxMeta = productBoxMeta;
 exports.productCollectionMeta = productCollectionMeta;
@@ -2366,6 +2644,7 @@ exports.productLinkMeta = productLinkMeta;
 exports.productMediaMeta = productMediaMeta;
 exports.productPriceMeta = productPriceMeta;
 exports.productQuantityMeta = productQuantityMeta;
+exports.productSliderMeta = productSliderMeta;
 exports.productTextFieldMeta = productTextFieldMeta;
 exports.productVariantPickerMeta = productVariantPickerMeta;
 exports.registerAddToCartButton = registerAddToCartButton;
@@ -2373,12 +2652,15 @@ exports.registerAll = registerAll;
 exports.registerCart = registerCart;
 exports.registerCategoryCollection = registerCategoryCollection;
 exports.registerCategoryField = registerCategoryField;
+exports.registerCategoryLink = registerCategoryLink;
+exports.registerCategoryMedia = registerCategoryMedia;
 exports.registerProductBox = registerProductBox;
 exports.registerProductCollection = registerProductCollection;
 exports.registerProductLink = registerProductLink;
 exports.registerProductMedia = registerProductMedia;
 exports.registerProductPrice = registerProductPrice;
 exports.registerProductQuantity = registerProductQuantity;
+exports.registerProductSlider = registerProductSlider;
 exports.registerProductVariantPicker = registerProductVariantPicker;
 exports.registerTextField = registerTextField;
 exports.useAddItem = useAddItem;