@plasmicpkgs/commerce 0.0.10 → 0.0.13

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 {
@@ -1333,143 +1333,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,23 +1546,23 @@ var useCommerceExtraFeatures = function useCommerceExtraFeatures() {
   return providerRef.current.extraFeatures;
 };
 
-var productCollectionMeta = {
-  name: "plasmic-commerce-product-collection",
-  displayName: "Product Collection",
-  props: {
-    children: {
+var categoryCollectionMeta = {
+  name: "plasmic-commerce-category-collection",
+  displayName: "Category Collection",
+  props: {
+    children: {
       type: "slot",
       defaultValue: [{
         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 +1570,14 @@ var productCollectionMeta = {
         }
       }]
     },
+    noLayout: {
+      type: "boolean"
+    },
     emptyMessage: {
       type: "slot",
       defaultValue: {
         type: "text",
-        value: "No product found!"
+        value: "No collection found!"
       }
     },
     loadingMessage: {
@@ -1518,7 +1587,6 @@ var productCollectionMeta = {
         value: "Loading..."
       }
     },
-    count: "number",
     category: {
       type: "choice",
       options: function options(props, ctx) {
@@ -1530,102 +1598,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 +1662,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 +1740,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 +1759,599 @@ 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 fetcher$3 = SWRFetcher;
+
+var fn$3 = function fn(provider) {
+  var _provider$products;
+
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useProduct;
+};
+
+var useProduct$1 = function useProduct(input) {
+  var hook = useHook(fn$3);
+  return useSWRHook(_extends({
+    fetcher: fetcher$3
+  }, hook))(input);
+};
+
+var productBoxMeta = {
+  name: "plasmic-commerce-product-box",
+  displayName: "Product Box",
   props: {
-    mediaIndex: "number"
+    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: "ProductMedia"
+  importName: "ProductBox"
 };
-function ProductMedia(props) {
-  var _image$url;
-
+function ProductBox(props) {
   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];
-  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 registerProductMedia(loader, customProductMediaMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
+      children = props.children,
+      noLayout = props.noLayout,
+      id = props.id;
 
-  doRegisterComponent(ProductMedia, customProductMediaMeta != null ? customProductMediaMeta : productMediaMeta);
-}
+  var _useProduct = useProduct$1({
+    id: id
+  }),
+      data = _useProduct.data,
+      error = _useProduct.error,
+      isLoading = _useProduct.isLoading;
 
-/*
-  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);
+  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
+  }, renderedData);
 }
-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 registerProductBox(loader, customProductBoxMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
-}
-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;
+  doRegisterComponent(ProductBox, customProductBoxMeta != null ? customProductBoxMeta : productBoxMeta);
 }
 
-var getProductPrice = function getProductPrice(product, variantId) {
-  var _product$variants$fin, _product$variants$fin2;
+var fetcher$4 = SWRFetcher;
 
-  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 fn$4 = function fn(provider) {
+  var _provider$products;
+
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useSearch;
 };
 
-var productPriceMeta = {
-  name: "plasmic-commerce-product-price",
-  displayName: "Product Price",
-  props: {},
-  importPath: "@plasmicpkgs/commerce",
-  importName: "ProductPrice"
+var useSearch = function useSearch(input) {
+  var hook = useHook(fn$4);
+  return useSWRHook(_extends({
+    fetcher: fetcher$4
+  }, hook))(input);
 };
-function ProductPriceComponent(props) {
-  var _product$variants$0$i;
 
-  var className = props.className;
-  var product = useProduct();
-  var form = useFormContext();
-  var watchProductVariant = form == null ? void 0 : form.watch("ProductVariant", (_product$variants$0$i = product.variants[0].id) != null ? _product$variants$0$i : "");
+var fetcher$5 = SWRFetcher;
 
-  var _usePrice = usePrice({
-    amount: product ? getProductPrice(product, watchProductVariant) : 0,
-    currencyCode: product ? product.price.currencyCode : 'USD'
-  }),
-      price = _usePrice.price;
+var fn$5 = function fn(provider) {
+  var _provider$site;
 
-  return React.createElement("span", {
-    className: className
-  }, price);
-}
-function registerProductPrice(loader, customProductPriceMeta) {
-  var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
-  };
+  return (_provider$site = provider.site) == null ? void 0 : _provider$site.useBrands;
+};
 
-  doRegisterComponent(ProductPriceComponent, customProductPriceMeta != null ? customProductPriceMeta : productPriceMeta);
-}
+var useBrands = function useBrands(input) {
+  var hook = useHook(fn$5);
+  return useSWRHook(_extends({
+    fetcher: fetcher$5
+  }, hook))(input);
+};
 
-var productQuantityMeta = {
-  name: "plasmic-commerce-product-quantity",
-  displayName: "Product Quantity",
+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 image = product == null ? void 0 : product.images[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;
+function ProductPriceComponent(props) {
+  var _product$price;
 
-  var _useCart = useCart(),
-      data = _useCart.data;
+  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 : "");
 
   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"
+    amount: product ? getProductPrice(product, watchProductVariant) : 0,
+    currencyCode: product ? product.price.currencyCode : "USD"
   }),
       price = _usePrice.price;
 
-  if (!field) {
-    return React.createElement("p", null, "You must set the field prop");
-  }
-
-  var value;
-
-  if (field === "Size") {
-    var _data$lineItems$lengt;
-
-    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;
-  }
-
-  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"
         }
       }]
-    },
-    noLayout: {
-      type: "boolean"
-    },
-    emptyMessage: {
-      type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "No collection found!"
-      }
-    },
-    loadingMessage: {
-      type: "slot",
-      defaultValue: {
-        type: "text",
-        value: "Loading..."
-      }
-    },
-    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 : [];
-      }
     }
   },
-  defaultStyles: {
-    display: "grid",
-    gridTemplateColumns: "1fr",
-    gridRowGap: "8px",
-    padding: "8px",
-    maxWidth: "100%"
-  },
   importPath: "@plasmicpkgs/commerce",
-  importName: "CategoryCollection"
+  importName: "ProductQuantity"
 };
-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;
-  }
-
-  if (!categories || categories.length === 0) {
-    return React.isValidElement(emptyMessage) ? emptyMessage : null;
-  }
-
-  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
+function ProductQuantity(props) {
+  var className = props.className,
+      children = props.children;
+  var form = useFormContext();
+  return React.createElement("div", {
     className: className
-  }, renderedData);
+  }, 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 registerCategoryCollection(loader, customCategoryCollectionMeta) {
+function registerProductQuantity(loader, customProductQuantityMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(CategoryCollection, customCategoryCollectionMeta != null ? customCategoryCollectionMeta : categoryCollectionMeta);
+  doRegisterComponent(ProductQuantity, customProductQuantityMeta != null ? customProductQuantityMeta : productQuantityMeta);
 }
 
-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") {
+    return product.descriptionHtml ? React.createElement("div", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: product.descriptionHtml
+      }
+    }) : React.createElement("div", {
+      className: className
+    }, 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 +2391,12 @@ var cart = {
 
 
 
+var product = {
+  __proto__: null
+};
+
+
+
 var site = {
   __proto__: null
 };
@@ -2326,7 +2414,8 @@ function registerAll(loader) {
   registerProductLink(loader);
   registerCategoryCollection(loader);
   registerCategoryField(loader);
+  registerCategoryLink(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