@plasmicpkgs/commerce-local 0.0.42 → 0.0.45

package/dist/commerce-local.cjs.development.js

@@ -4,10 +4,2234 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
+var registerGlobalContext = _interopDefault(require('@plasmicapp/host/registerGlobalContext'));
 var React = require('react');
 var React__default = _interopDefault(React);
 var commerce = require('@plasmicpkgs/commerce');
+var Cookies = _interopDefault(require('js-cookie'));
+
+var categories = [
+	{
+		id: "id::270412710052",
+		name: "New Arrivals",
+		slug: "clothes",
+		path: "/clothes",
+		isEmpty: false,
+		products: [
+			"id::5447323812004",
+			"id::5447324270756",
+			"id::5447324729508",
+			"id::5447325024420",
+			"id::6621772644516"
+		]
+	},
+	{
+		id: "id::271211167908",
+		name: "Featured",
+		slug: "featured",
+		path: "/featured",
+		isEmpty: false,
+		products: [
+			"id::5447323156644",
+			"id::5447323812004",
+			"id::6621772644516"
+		]
+	}
+];
+var products = [
+	{
+		id: "id::5447322697892",
+		name: "Special Edition T-Shirt",
+		vendor: "ACME",
+		path: "/conf-shirt",
+		slug: "conf-shirt",
+		price: {
+			value: 50,
+			currencyCode: "USD"
+		},
+		images: [
+			{
+				url: "https://static1.plasmic.app/commerce/conf-shirt-0.png",
+				altText: null,
+				width: 958,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/conf-shirt-1.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/conf-shirt-2.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/conf-shirt-3.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			}
+		],
+		variants: [
+			{
+				id: "id::40047332688036",
+				name: "Black / S",
+				sku: "",
+				price: 200,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40047332688036",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40047332688036",
+						displayName: "size",
+						values: [
+							{
+								label: "S"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40009056387236",
+				name: "Black / M",
+				sku: "",
+				price: 200,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40009056387236",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40009056387236",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40064229212324",
+				name: "Black / L",
+				sku: "",
+				price: 200,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40064229212324",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40064229212324",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40073451602084",
+				name: "Black / XL",
+				sku: "",
+				price: 50,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40073451602084",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40073451602084",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40073450061988",
+				name: "Black / XXL",
+				sku: "",
+				price: 50,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40073450061988",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40073450061988",
+						displayName: "size",
+						values: [
+							{
+								label: "XXL"
+							}
+						]
+					}
+				]
+			}
+		],
+		options: [
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940501311652",
+				displayName: "color",
+				values: [
+					{
+						label: "Black",
+						hexColors: [
+							"#000000"
+						]
+					}
+				]
+			},
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940501278884",
+				displayName: "size",
+				values: [
+					{
+						label: "S"
+					},
+					{
+						label: "M"
+					},
+					{
+						label: "L"
+					},
+					{
+						label: "XL"
+					},
+					{
+						label: "XXL"
+					}
+				]
+			}
+		],
+		description: "Show off your love for Next.js and Vercel with this unique, limited edition t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made! All proceeds will be donated to charity.",
+		descriptionHtml: "<p><meta charset=\"utf-8\"><span>Show off your love for Next.js and Vercel with this unique, </span><strong>limited edition</strong><span> t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made! </span><strong>All proceeds will be donated to charity.</strong></p>"
+	},
+	{
+		id: "id::5447323156644",
+		name: "Quarter Zip",
+		vendor: "ACME",
+		path: "/quarter-zip",
+		slug: "quarter-zip",
+		price: {
+			value: 90,
+			currencyCode: "USD"
+		},
+		images: [
+			{
+				url: "https://static1.plasmic.app/commerce/quarter-zip-0.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/quarter-zip-1.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/quarter-zip-2.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			}
+		],
+		variants: [
+			{
+				id: "id::40065999569060",
+				name: "Black / S",
+				sku: "",
+				price: 90,
+				listPrice: 20,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065999569060",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065999569060",
+						displayName: "size",
+						values: [
+							{
+								label: "S"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40008984756388",
+				name: "Black / M",
+				sku: "",
+				price: 90,
+				listPrice: 20,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40008984756388",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40008984756388",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40065122828452",
+				name: "Black / L",
+				sku: "",
+				price: 90,
+				listPrice: 20,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065122828452",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065122828452",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40065123713188",
+				name: "Black / XL",
+				sku: "",
+				price: 90,
+				listPrice: 20,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065123713188",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065123713188",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40065125286052",
+				name: "Black / XXL",
+				sku: "",
+				price: 90,
+				listPrice: 20,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065125286052",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40065125286052",
+						displayName: "size",
+						values: [
+							{
+								label: "XXL"
+							}
+						]
+					}
+				]
+			}
+		],
+		options: [
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940501835940",
+				displayName: "color",
+				values: [
+					{
+						label: "Black",
+						hexColors: [
+							"#000000"
+						]
+					}
+				]
+			},
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940501803172",
+				displayName: "size",
+				values: [
+					{
+						label: "S"
+					},
+					{
+						label: "M"
+					},
+					{
+						label: "L"
+					},
+					{
+						label: "XL"
+					},
+					{
+						label: "XXL"
+					}
+				]
+			}
+		],
+		description: "Show off your love for Next.js and Vercel with this unique, limited edition quarter zip. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made! All proceeds will be donated to charity.",
+		descriptionHtml: "<p>Show off your love for Next.js and Vercel with this unique, <strong>limited edition</strong> quarter zip. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made! <strong>All proceeds will be donated to charity.</strong></p>"
+	},
+	{
+		id: "id::5447323812004",
+		name: "Sticker",
+		vendor: "ACME",
+		path: "/sticker",
+		slug: "sticker",
+		price: {
+			value: 0,
+			currencyCode: "USD"
+		},
+		images: [
+			{
+				url: "https://static1.plasmic.app/commerce/sticker-0.png",
+				altText: null,
+				width: 900,
+				height: 900
+			}
+		],
+		variants: [
+			{
+				id: "id::40008892580004",
+				name: "Gradient",
+				sku: "",
+				price: 0,
+				listPrice: 60,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40008892580004",
+						displayName: "color",
+						values: [
+							{
+								label: "Gradient"
+							}
+						]
+					}
+				]
+			}
+		],
+		options: [
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940502524068",
+				displayName: "color",
+				values: [
+					{
+						label: "Gradient"
+					}
+				]
+			}
+		],
+		description: "Wafer cupcake candy macaroon bonbon candy canes cheesecake candy. Donut chupa chups sesame snaps candy chocolate cake chocolate cake danish. Tart cotton candy gummies cotton candy sweet roll. Wafer pie chocolate cake. Caramels toffee gummies. Liquorice sweet oat cake chocolate candy canes toffee bear claw. Chocolate cupcake wafer. Halvah soufflé halvah. Dessert pastry toffee apple pie chocolate cake lemon drops. Tart carrot cake wafer halvah tiramisu fruitcake.",
+		descriptionHtml: "<p><meta charset=\"utf-8\">Wafer cupcake candy macaroon bonbon candy canes cheesecake candy. Donut chupa chups sesame snaps candy chocolate cake chocolate cake danish. Tart cotton candy gummies cotton candy sweet roll. Wafer pie chocolate cake. Caramels toffee gummies. Liquorice sweet oat cake chocolate candy canes toffee bear claw. Chocolate cupcake wafer. Halvah soufflé halvah. Dessert pastry toffee apple pie chocolate cake lemon drops. Tart carrot cake wafer halvah tiramisu fruitcake.<br></p>"
+	},
+	{
+		id: "id::5447324270756",
+		name: "Bomber Jacket",
+		vendor: "Next.js",
+		path: "/bomber-jacket",
+		slug: "bomber-jacket",
+		price: {
+			value: 635.99,
+			currencyCode: "USD"
+		},
+		images: [
+			{
+				url: "https://static1.plasmic.app/commerce/bomber-jacket-0.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/bomber-jacket-1.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			}
+		],
+		variants: [
+			{
+				id: "id::40046243905700",
+				name: "L / Black",
+				sku: "",
+				price: 635.99,
+				listPrice: 5200,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046243905700",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046243905700",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046243938468",
+				name: "L / DarkOliveGreen",
+				sku: "",
+				price: 635.99,
+				listPrice: 5200,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046243938468",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046243938468",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkOliveGreen",
+								hexColors: [
+									"#556B2F"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046243971236",
+				name: "XL / Black",
+				sku: "",
+				price: 635.99,
+				listPrice: 5200,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046243971236",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046243971236",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046244004004",
+				name: "XL / DarkOliveGreen",
+				sku: "",
+				price: 635.99,
+				listPrice: 5200,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046244004004",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046244004004",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkOliveGreen",
+								hexColors: [
+									"#556B2F"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046244036772",
+				name: "XXL / Black",
+				sku: "",
+				price: 635.99,
+				listPrice: 5200,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046244036772",
+						displayName: "size",
+						values: [
+							{
+								label: "XXL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046244036772",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046244069540",
+				name: "XXL / DarkOliveGreen",
+				sku: "",
+				price: 635.99,
+				listPrice: 5200,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046244069540",
+						displayName: "size",
+						values: [
+							{
+								label: "XXL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046244069540",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkOliveGreen",
+								hexColors: [
+									"#556B2F"
+								]
+							}
+						]
+					}
+				]
+			}
+		],
+		options: [
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940503015588",
+				displayName: "size",
+				values: [
+					{
+						label: "L"
+					},
+					{
+						label: "XL"
+					},
+					{
+						label: "XXL"
+					}
+				]
+			},
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::8655769764004",
+				displayName: "color",
+				values: [
+					{
+						label: "Black",
+						hexColors: [
+							"#000000"
+						]
+					},
+					{
+						label: "DarkOliveGreen",
+						hexColors: [
+							"#556B2F"
+						]
+					}
+				]
+			}
+		],
+		description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.",
+		descriptionHtml: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</p>"
+	},
+	{
+		id: "id::5447324729508",
+		name: "Short Sleeve T-Shirt",
+		vendor: "Next.js",
+		path: "/short-sleeve-t-shirt",
+		slug: "short-sleeve-t-shirt",
+		price: {
+			value: 35,
+			currencyCode: "USD"
+		},
+		images: [
+			{
+				url: "https://static1.plasmic.app/commerce/short-sleeve-t-shirt-0.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/short-sleeve-t-shirt-1.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/short-sleeve-t-shirt-2.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/short-sleeve-t-shirt-3.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			}
+		],
+		variants: [
+			{
+				id: "id::35180690669732",
+				name: "M / gray",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::35180690669732",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::35180690669732",
+						displayName: "color",
+						values: [
+							{
+								label: "gray",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::35180690702500",
+				name: "L / gray",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::35180690702500",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::35180690702500",
+						displayName: "color",
+						values: [
+							{
+								label: "gray",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::35180690735268",
+				name: "XL / gray",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::35180690735268",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::35180690735268",
+						displayName: "color",
+						values: [
+							{
+								label: "gray",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046203437220",
+				name: "M / beige",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046203437220",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046203437220",
+						displayName: "color",
+						values: [
+							{
+								label: "beige",
+								hexColors: [
+									"#F5F5DC"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046207369380",
+				name: "L / beige",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046207369380",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046207369380",
+						displayName: "color",
+						values: [
+							{
+								label: "beige",
+								hexColors: [
+									"#F5F5DC"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046207729828",
+				name: "XL / beige",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046207729828",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046207729828",
+						displayName: "color",
+						values: [
+							{
+								label: "beige",
+								hexColors: [
+									"#F5F5DC"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046212612260",
+				name: "M / white",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046212612260",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046212612260",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046212907172",
+				name: "L / white",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046212907172",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046212907172",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046213300388",
+				name: "XL / white",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046213300388",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046213300388",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046214742180",
+				name: "M / DarkTurquoise",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046214742180",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046214742180",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046218346660",
+				name: "L / DarkTurquoise",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046218346660",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046218346660",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046220214436",
+				name: "XL / DarkTurquoise",
+				sku: "",
+				price: 35,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046220214436",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046220214436",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			}
+		],
+		options: [
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940503474340",
+				displayName: "size",
+				values: [
+					{
+						label: "M"
+					},
+					{
+						label: "L"
+					},
+					{
+						label: "XL"
+					}
+				]
+			},
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::8655761178788",
+				displayName: "color",
+				values: [
+					{
+						label: "gray",
+						hexColors: [
+							"#808080"
+						]
+					},
+					{
+						label: "beige",
+						hexColors: [
+							"#F5F5DC"
+						]
+					},
+					{
+						label: "white",
+						hexColors: [
+							"#FFFFFF"
+						]
+					},
+					{
+						label: "DarkTurquoise",
+						hexColors: [
+							"#00CED1"
+						]
+					}
+				]
+			}
+		],
+		description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.",
+		descriptionHtml: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</p>"
+	},
+	{
+		id: "id::5447325024420",
+		name: "New Short Sleeve T-Shirt",
+		vendor: "Next.js",
+		path: "/new-short-sleeve-t-shirt",
+		slug: "new-short-sleeve-t-shirt",
+		price: {
+			value: 25,
+			currencyCode: "USD"
+		},
+		images: [
+			{
+				url: "https://static1.plasmic.app/commerce/new-short-sleeve-t-shirt-0.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/new-short-sleeve-t-shirt-1.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/new-short-sleeve-t-shirt-2.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/new-short-sleeve-t-shirt-3.png",
+				altText: null,
+				width: 1000,
+				height: 1000
+			}
+		],
+		variants: [
+			{
+				id: "id::40046230962340",
+				name: "XS / white",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046230962340",
+						displayName: "size",
+						values: [
+							{
+								label: "XS"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046230962340",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046230995108",
+				name: "XS / grey",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046230995108",
+						displayName: "size",
+						values: [
+							{
+								label: "XS"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046230995108",
+						displayName: "color",
+						values: [
+							{
+								label: "grey",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231027876",
+				name: "XS / DarkTurquoise",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231027876",
+						displayName: "size",
+						values: [
+							{
+								label: "XS"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231027876",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231060644",
+				name: "XS / LightSalmon",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231060644",
+						displayName: "size",
+						values: [
+							{
+								label: "XS"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231060644",
+						displayName: "color",
+						values: [
+							{
+								label: "LightSalmon",
+								hexColors: [
+									"#FFA07A"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231093412",
+				name: "S / white",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231093412",
+						displayName: "size",
+						values: [
+							{
+								label: "S"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231093412",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231126180",
+				name: "S / grey",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231126180",
+						displayName: "size",
+						values: [
+							{
+								label: "S"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231126180",
+						displayName: "color",
+						values: [
+							{
+								label: "grey",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231158948",
+				name: "S / DarkTurquoise",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231158948",
+						displayName: "size",
+						values: [
+							{
+								label: "S"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231158948",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231191716",
+				name: "S / LightSalmon",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231191716",
+						displayName: "size",
+						values: [
+							{
+								label: "S"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231191716",
+						displayName: "color",
+						values: [
+							{
+								label: "LightSalmon",
+								hexColors: [
+									"#FFA07A"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231224484",
+				name: "M / white",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231224484",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231224484",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231257252",
+				name: "M / grey",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231257252",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231257252",
+						displayName: "color",
+						values: [
+							{
+								label: "grey",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231290020",
+				name: "M / DarkTurquoise",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231290020",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231290020",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231322788",
+				name: "M / LightSalmon",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231322788",
+						displayName: "size",
+						values: [
+							{
+								label: "M"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231322788",
+						displayName: "color",
+						values: [
+							{
+								label: "LightSalmon",
+								hexColors: [
+									"#FFA07A"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231355556",
+				name: "L / white",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231355556",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231355556",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231388324",
+				name: "L / grey",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231388324",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231388324",
+						displayName: "color",
+						values: [
+							{
+								label: "grey",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231421092",
+				name: "L / DarkTurquoise",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231421092",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231421092",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231453860",
+				name: "L / LightSalmon",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231453860",
+						displayName: "size",
+						values: [
+							{
+								label: "L"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231453860",
+						displayName: "color",
+						values: [
+							{
+								label: "LightSalmon",
+								hexColors: [
+									"#FFA07A"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231486628",
+				name: "XL / white",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231486628",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231486628",
+						displayName: "color",
+						values: [
+							{
+								label: "white",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231519396",
+				name: "XL / grey",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231519396",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231519396",
+						displayName: "color",
+						values: [
+							{
+								label: "grey",
+								hexColors: [
+									"#808080"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231552164",
+				name: "XL / DarkTurquoise",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231552164",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231552164",
+						displayName: "color",
+						values: [
+							{
+								label: "DarkTurquoise",
+								hexColors: [
+									"#00CED1"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40046231584932",
+				name: "XL / LightSalmon",
+				sku: "",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231584932",
+						displayName: "size",
+						values: [
+							{
+								label: "XL"
+							}
+						]
+					},
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40046231584932",
+						displayName: "color",
+						values: [
+							{
+								label: "LightSalmon",
+								hexColors: [
+									"#FFA07A"
+								]
+							}
+						]
+					}
+				]
+			}
+		],
+		options: [
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::6940503769252",
+				displayName: "size",
+				values: [
+					{
+						label: "XS"
+					},
+					{
+						label: "S"
+					},
+					{
+						label: "M"
+					},
+					{
+						label: "L"
+					},
+					{
+						label: "XL"
+					}
+				]
+			},
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::8655765471396",
+				displayName: "color",
+				values: [
+					{
+						label: "white",
+						hexColors: [
+							"#FFFFFF"
+						]
+					},
+					{
+						label: "grey",
+						hexColors: [
+							"#808080"
+						]
+					},
+					{
+						label: "DarkTurquoise",
+						hexColors: [
+							"#00CED1"
+						]
+					},
+					{
+						label: "LightSalmon",
+						hexColors: [
+							"#FFA07A"
+						]
+					}
+				]
+			}
+		],
+		description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.",
+		descriptionHtml: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.<br></p>"
+	},
+	{
+		id: "id::6621772644516",
+		name: "ACME Cup",
+		vendor: "ACME",
+		path: "/acme-cup",
+		slug: "acme-cup",
+		price: {
+			value: 25,
+			currencyCode: "USD"
+		},
+		images: [
+			{
+				url: "https://static1.plasmic.app/commerce/acme-cup-0.png",
+				altText: null,
+				width: 2048,
+				height: 2048
+			},
+			{
+				url: "https://static1.plasmic.app/commerce/acme-cup-1.png",
+				altText: null,
+				width: 2048,
+				height: 2048
+			}
+		],
+		variants: [
+			{
+				id: "id::40064679805092",
+				name: "White",
+				sku: "200",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: true,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40064679805092",
+						displayName: "color",
+						values: [
+							{
+								label: "White",
+								hexColors: [
+									"#FFFFFF"
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				id: "id::40064679837860",
+				name: "Black",
+				sku: "201",
+				price: 25,
+				listPrice: null,
+				requiresShipping: true,
+				availableForSale: false,
+				options: [
+					{
+						__typename: "MultipleChoiceOption",
+						id: "id::40064679837860",
+						displayName: "color",
+						values: [
+							{
+								label: "Black",
+								hexColors: [
+									"#000000"
+								]
+							}
+						]
+					}
+				]
+			}
+		],
+		options: [
+			{
+				__typename: "MultipleChoiceOption",
+				id: "id::8505918849188",
+				displayName: "color",
+				values: [
+					{
+						label: "White",
+						hexColors: [
+							"#FFFFFF"
+						]
+					},
+					{
+						label: "Black",
+						hexColors: [
+							"#000000"
+						]
+					}
+				]
+			}
+		],
+		description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.",
+		descriptionHtml: "<meta charset=\"utf-8\"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</span>"
+	}
+];
+var data = {
+	categories: categories,
+	products: products
+};
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -716,465 +2940,173 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
           }
         }
 
-        if (finallyEntry && (type === "break" || type === "continue") && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc) {
-          // Ignore the finally entry if control is not jumping to a
-          // location outside the try/catch block.
-          finallyEntry = null;
-        }
-
-        var record = finallyEntry ? finallyEntry.completion : {};
-        record.type = type;
-        record.arg = arg;
-
-        if (finallyEntry) {
-          this.method = "next";
-          this.next = finallyEntry.finallyLoc;
-          return ContinueSentinel;
-        }
-
-        return this.complete(record);
-      },
-      complete: function complete(record, afterLoc) {
-        if (record.type === "throw") {
-          throw record.arg;
-        }
-
-        if (record.type === "break" || record.type === "continue") {
-          this.next = record.arg;
-        } else if (record.type === "return") {
-          this.rval = this.arg = record.arg;
-          this.method = "return";
-          this.next = "end";
-        } else if (record.type === "normal" && afterLoc) {
-          this.next = afterLoc;
-        }
-
-        return ContinueSentinel;
-      },
-      finish: function finish(finallyLoc) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-
-          if (entry.finallyLoc === finallyLoc) {
-            this.complete(entry.completion, entry.afterLoc);
-            resetTryEntry(entry);
-            return ContinueSentinel;
-          }
-        }
-      },
-      "catch": function _catch(tryLoc) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-
-          if (entry.tryLoc === tryLoc) {
-            var record = entry.completion;
-
-            if (record.type === "throw") {
-              var thrown = record.arg;
-              resetTryEntry(entry);
-            }
-
-            return thrown;
-          }
-        } // The context.catch method must only be called with a location
-        // argument that corresponds to a known catch block.
-
-
-        throw new Error("illegal catch attempt");
-      },
-      delegateYield: function delegateYield(iterable, resultName, nextLoc) {
-        this.delegate = {
-          iterator: values(iterable),
-          resultName: resultName,
-          nextLoc: nextLoc
-        };
-
-        if (this.method === "next") {
-          // Deliberately forget the last sent value so that we don't
-          // accidentally pass it on to the delegate.
-          this.arg = undefined$1;
-        }
-
-        return ContinueSentinel;
-      }
-    }; // Regardless of whether this script is executing as a CommonJS module
-    // or not, return the runtime object so that we can declare the variable
-    // regeneratorRuntime in the outer scope, which allows this module to be
-    // injected easily by `bin/regenerator --include-runtime script.js`.
-
-    return exports;
-  }( // If this script is executing as a CommonJS module, use module.exports
-  // as the regeneratorRuntime namespace. Otherwise create a new empty
-  // object. Either way, the resulting object will be used to initialize
-  // the regeneratorRuntime variable at the top of this file.
-   module.exports );
-
-  try {
-    regeneratorRuntime = runtime;
-  } catch (accidentalStrictMode) {
-    // This module should not be running in strict mode, so the above
-    // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, in modern engines
-    // we can explicitly access globalThis. In older engines we can escape
-    // strict mode using a global Function call. This could conceivably fail
-    // if a Content Security Policy forbids using Function, but in that case
-    // the proper solution is to fix the accidental strict mode problem. If
-    // you've misconfigured your bundler to force strict mode and applied a
-    // CSP to forbid Function, and you're not willing to fix either of those
-    // problems, please detail your unique predicament in a GitHub issue.
-    if (typeof globalThis === "object") {
-      globalThis.regeneratorRuntime = runtime;
-    } else {
-      Function("r", "regeneratorRuntime = r")(runtime);
-    }
-  }
-});
-
-var fetcher = /*#__PURE__*/function () {
-  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-    var res, _yield$res$json, data;
-
-    return runtime_1.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            console.log('FETCHER');
-            _context.next = 3;
-            return fetch('./data.json');
-
-          case 3:
-            res = _context.sent;
-
-            if (!res.ok) {
-              _context.next = 10;
-              break;
-            }
-
-            _context.next = 7;
-            return res.json();
-
-          case 7:
-            _yield$res$json = _context.sent;
-            data = _yield$res$json.data;
-            return _context.abrupt("return", data);
-
-          case 10:
-            throw res;
-
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-
-  return function fetcher() {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-var LOCAL_CART_URL = 'localCartUrl';
-
-var handler = {
-  fetchOptions: {
-    query: ''
-  },
-  fetcher: function fetcher(_ref) {
-    return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var _localStorage$getItem;
+        if (finallyEntry && (type === "break" || type === "continue") && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc) {
+          // Ignore the finally entry if control is not jumping to a
+          // location outside the try/catch block.
+          finallyEntry = null;
+        }
 
-      var cartId, fetch;
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              cartId = _ref.input.cartId, fetch = _ref.fetch;
+        var record = finallyEntry ? finallyEntry.completion : {};
+        record.type = type;
+        record.arg = arg;
 
-              if (!cartId) {
-                cartId = LOCAL_CART_URL;
-              }
+        if (finallyEntry) {
+          this.method = "next";
+          this.next = finallyEntry.finallyLoc;
+          return ContinueSentinel;
+        }
 
-              return _context.abrupt("return", JSON.parse((_localStorage$getItem = localStorage.getItem(cartId)) != null ? _localStorage$getItem : "null"));
+        return this.complete(record);
+      },
+      complete: function complete(record, afterLoc) {
+        if (record.type === "throw") {
+          throw record.arg;
+        }
 
-            case 3:
-            case "end":
-              return _context.stop();
-          }
+        if (record.type === "break" || record.type === "continue") {
+          this.next = record.arg;
+        } else if (record.type === "return") {
+          this.rval = this.arg = record.arg;
+          this.method = "return";
+          this.next = "end";
+        } else if (record.type === "normal" && afterLoc) {
+          this.next = afterLoc;
         }
-      }, _callee);
-    }))();
-  },
-  useHook: function useHook(_ref2) {
-    var useData = _ref2.useData;
-    return function (input) {
-      return useData({
-        swrOptions: _extends({
-          revalidateOnFocus: false
-        }, input == null ? void 0 : input.swrOptions)
-      });
-    };
-  }
-};
 
-var products = [
-	{
-		id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
-		name: "New Short Sleeve T-Shirt",
-		vendor: "Next.js",
-		path: "/new-short-sleeve-t-shirt",
-		slug: "new-short-sleeve-t-shirt",
-		price: {
-			value: 25,
-			currencyCode: "USD"
-		},
-		descriptionHtml: "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
-		images: [
-			{
-				url: "https://static1.plasmic.app/commerce/drop-shirt-0.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/drop-shirt-1.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/drop-shirt-2.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			}
-		],
-		variants: [
-			{
-				id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
-				options: [
-					{
-						__typename: "MultipleChoiceOption",
-						id: "asd",
-						displayName: "Size",
-						values: [
-							{
-								label: "XL"
-							}
-						]
-					}
-				]
-			}
-		],
-		options: [
-			{
-				id: "option-color",
-				displayName: "Color",
-				values: [
-					{
-						label: "color",
-						hexColors: [
-							"#222"
-						]
-					}
-				]
-			},
-			{
-				id: "option-size",
-				displayName: "Size",
-				values: [
-					{
-						label: "S"
-					},
-					{
-						label: "M"
-					},
-					{
-						label: "L"
-					}
-				]
-			}
-		]
-	},
-	{
-		id: "Z2lkOi8vc2hvcGlmeS9Qcm9ksdWN0LzU0NDczMjUwMjQ0MjA=",
-		name: "Lightweight Jacket",
-		vendor: "Next.js",
-		path: "/lightweight-jacket",
-		slug: "lightweight-jacket",
-		price: {
-			value: 249.99,
-			currencyCode: "USD"
-		},
-		descriptionHtml: "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
-		images: [
-			{
-				url: "https://static1.plasmic.app/commerce/lightweight-jacket-0.png",
-				altText: "Lightweight Jacket",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/lightweight-jacket-1.png",
-				altText: "Lightweight Jacket",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/lightweight-jacket-2.png",
-				altText: "Lightweight Jacket",
-				width: 1000,
-				height: 1000
-			}
-		],
-		variants: [
-			{
-				id: "Z2lkOid8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
-				options: [
-					{
-						__typename: "MultipleChoiceOption",
-						id: "asd",
-						displayName: "Size",
-						values: [
-							{
-								label: "XL"
-							}
-						]
-					}
-				]
-			}
-		],
-		options: [
-			{
-				id: "option-color",
-				displayName: "Color",
-				values: [
-					{
-						label: "color",
-						hexColors: [
-							"#222"
-						]
-					}
-				]
-			},
-			{
-				id: "option-size",
-				displayName: "Size",
-				values: [
-					{
-						label: "S"
-					},
-					{
-						label: "M"
-					},
-					{
-						label: "L"
-					}
-				]
-			}
-		]
-	},
-	{
-		id: "Z2lkOis8vc2hvcGlmsddeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
-		name: "Shirt",
-		vendor: "Next.js",
-		path: "/shirt",
-		slug: "shirt",
-		price: {
-			value: 25,
-			currencyCode: "USD"
-		},
-		descriptionHtml: "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
-		images: [
-			{
-				url: "https://static1.plasmic.app/commerce/t-shirt-0.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/t-shirt-1.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/t-shirt-2.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/t-shirt-3.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			},
-			{
-				url: "https://static1.plasmic.app/commerce/t-shirt-4.png",
-				altText: "Shirt",
-				width: 1000,
-				height: 1000
-			}
-		],
-		variants: [
-			{
-				id: "Z2lkOi8vc2hvcGlmeS9Qcms9kdWN0LzU0NDczMjUwMjQ0MjAss=",
-				options: [
-					{
-						__typename: "MultipleChoiceOption",
-						id: "asd",
-						displayName: "Size",
-						values: [
-							{
-								label: "XL"
-							}
-						]
-					}
-				]
-			}
-		],
-		options: [
-			{
-				id: "option-color",
-				displayName: "Color",
-				values: [
-					{
-						label: "color",
-						hexColors: [
-							"#222"
-						]
-					}
-				]
-			},
-			{
-				id: "option-size",
-				displayName: "Size",
-				values: [
-					{
-						label: "S"
-					},
-					{
-						label: "M"
-					},
-					{
-						label: "L"
-					}
-				]
-			}
-		]
-	}
-];
-var data = {
-	products: products
-};
+        return ContinueSentinel;
+      },
+      finish: function finish(finallyLoc) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
+
+          if (entry.finallyLoc === finallyLoc) {
+            this.complete(entry.completion, entry.afterLoc);
+            resetTryEntry(entry);
+            return ContinueSentinel;
+          }
+        }
+      },
+      "catch": function _catch(tryLoc) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
+
+          if (entry.tryLoc === tryLoc) {
+            var record = entry.completion;
+
+            if (record.type === "throw") {
+              var thrown = record.arg;
+              resetTryEntry(entry);
+            }
+
+            return thrown;
+          }
+        } // The context.catch method must only be called with a location
+        // argument that corresponds to a known catch block.
+
+
+        throw new Error("illegal catch attempt");
+      },
+      delegateYield: function delegateYield(iterable, resultName, nextLoc) {
+        this.delegate = {
+          iterator: values(iterable),
+          resultName: resultName,
+          nextLoc: nextLoc
+        };
+
+        if (this.method === "next") {
+          // Deliberately forget the last sent value so that we don't
+          // accidentally pass it on to the delegate.
+          this.arg = undefined$1;
+        }
+
+        return ContinueSentinel;
+      }
+    }; // Regardless of whether this script is executing as a CommonJS module
+    // or not, return the runtime object so that we can declare the variable
+    // regeneratorRuntime in the outer scope, which allows this module to be
+    // injected easily by `bin/regenerator --include-runtime script.js`.
+
+    return exports;
+  }( // If this script is executing as a CommonJS module, use module.exports
+  // as the regeneratorRuntime namespace. Otherwise create a new empty
+  // object. Either way, the resulting object will be used to initialize
+  // the regeneratorRuntime variable at the top of this file.
+   module.exports );
+
+  try {
+    regeneratorRuntime = runtime;
+  } catch (accidentalStrictMode) {
+    // This module should not be running in strict mode, so the above
+    // assignment should always work unless something is misconfigured. Just
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
+    // strict mode using a global Function call. This could conceivably fail
+    // if a Content Security Policy forbids using Function, but in that case
+    // the proper solution is to fix the accidental strict mode problem. If
+    // you've misconfigured your bundler to force strict mode and applied a
+    // CSP to forbid Function, and you're not willing to fix either of those
+    // problems, please detail your unique predicament in a GitHub issue.
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
+  }
+});
+
+var fetcher = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+    var res, _yield$res$json, data;
+
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            console.log('FETCHER');
+            _context.next = 3;
+            return fetch('./data.json');
+
+          case 3:
+            res = _context.sent;
+
+            if (!res.ok) {
+              _context.next = 10;
+              break;
+            }
+
+            _context.next = 7;
+            return res.json();
+
+          case 7:
+            _yield$res$json = _context.sent;
+            data = _yield$res$json.data;
+            return _context.abrupt("return", data);
+
+          case 10:
+            throw res;
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function fetcher() {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var LOCAL_CART_OBJ = "localCartObj";
+var LOCAL_CART_ID = "localCartId";
 
 var createCart = function createCart() {
-  return {
-    id: '',
-    createdAt: '',
+  var cart = {
+    id: "",
+    createdAt: "",
     currency: {
-      code: ''
+      code: "USD"
     },
     taxesIncluded: false,
     lineItems: [],
@@ -1182,17 +3114,90 @@ var createCart = function createCart() {
     subtotalPrice: 0,
     totalPrice: 0
   };
+  var cartId = Date.now().toString();
+  Cookies.set(LOCAL_CART_ID, cartId);
+  Cookies.set(LOCAL_CART_OBJ, JSON.stringify({
+    id: cartId,
+    cart: cart
+  }));
+  return cart;
+};
+var getCart = function getCart(cartId) {
+  var _cartId;
+
+  cartId = (_cartId = cartId) != null ? _cartId : Cookies.get(LOCAL_CART_ID);
+  var cartStr = Cookies.get(LOCAL_CART_OBJ);
+  var cart = cartStr ? JSON.parse(cartStr) : undefined;
+
+  if (!cart || cart.id !== cartId) {
+    return createCart();
+  } else {
+    return cart.cart;
+  }
+};
+var cartUpdate = function cartUpdate(newCart) {
+  Cookies.set(LOCAL_CART_OBJ, JSON.stringify({
+    id: Cookies.get(LOCAL_CART_ID),
+    cart: newCart
+  }));
+  return newCart;
+};
+
+var handler = {
+  fetchOptions: {
+    query: "use-cart"
+  },
+  fetcher: function fetcher(_ref) {
+    return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var input, fetch;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              input = _ref.input, fetch = _ref.fetch;
+              return _context.abrupt("return", getCart(input.cartId));
+
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  },
+  useHook: function useHook(_ref2) {
+    var useData = _ref2.useData;
+    return function (input) {
+      var response = useData({
+        swrOptions: _extends({
+          revalidateOnFocus: false
+        }, input == null ? void 0 : input.swrOptions)
+      });
+      return React__default.useMemo(function () {
+        return Object.create(response, {
+          isEmpty: {
+            get: function get() {
+              var _response$data$lineIt, _response$data;
+
+              return ((_response$data$lineIt = (_response$data = response.data) == null ? void 0 : _response$data.lineItems.length) != null ? _response$data$lineIt : 0) <= 0;
+            },
+            enumerable: true
+          }
+        });
+      }, [response]);
+    };
+  }
 };
 
 var handler$1 = {
   fetchOptions: {
-    query: ''
+    query: "use-add-item"
   },
   fetcher: function fetcher(_ref) {
     return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       var _item$quantity;
 
-      var item, fetch, lineItem, cart, _iterator, _step, product, _item$quantity2;
+      var item, fetch, lineItem, cart, _iterator, _step, product, variant, _item$quantity2, currentLineItem;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -1206,7 +3211,7 @@ var handler$1 = {
               }
 
               throw new commerce.CommerceError({
-                message: 'The item quantity has to be a valid integer greater than 0'
+                message: "The item quantity has to be a valid integer greater than 0"
               });
 
             case 3:
@@ -1214,29 +3219,32 @@ var handler$1 = {
                 variantId: item.variantId,
                 quantity: (_item$quantity = item.quantity) != null ? _item$quantity : 1
               };
-
-              if (!localStorage.getItem(LOCAL_CART_URL)) {
-                cart = createCart();
-              } else {
-                cart = JSON.parse(localStorage.getItem(LOCAL_CART_URL));
-              }
+              cart = getCart();
 
               for (_iterator = _createForOfIteratorHelperLoose(data.products); !(_step = _iterator()).done;) {
                 product = _step.value;
+                variant = product.variants.find(function (variant) {
+                  return variant.id === item.variantId;
+                });
 
-                if (product.id === item.variantId || product.variants.some(function (productVariant) {
-                  return productVariant.id === item.variantId;
-                })) {
-                  cart.lineItems.push(lineItem);
-                  cart.totalPrice += product.price.value * ((_item$quantity2 = item.quantity) != null ? _item$quantity2 : 1);
+                if (variant) {
+                  cart.totalPrice += variant.price * ((_item$quantity2 = item.quantity) != null ? _item$quantity2 : 1);
                   cart.currency.code = product.price.currencyCode;
+                  currentLineItem = cart.lineItems.find(function (item) {
+                    return item.variantId === lineItem.variantId;
+                  });
+
+                  if (!currentLineItem) {
+                    cart.lineItems.push(lineItem);
+                  } else {
+                    currentLineItem.quantity += lineItem.quantity;
+                  }
                 }
               }
 
-              localStorage.setItem(LOCAL_CART_URL, JSON.stringify(cart));
-              return _context.abrupt("return", cart);
+              return _context.abrupt("return", cartUpdate(cart));
 
-            case 8:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -1382,23 +3390,75 @@ var handler$3 = {
   }
 };
 
+var sortProduct = function sortProduct(a, b, sortKey) {
+  switch (sortKey) {
+    case "price-asc":
+      return a.price.value < b.price.value ? -1 : 1;
+
+    case "price-desc":
+      return a.price.value < b.price.value ? 1 : -1;
+
+    case "trending-desc":
+      return a.id.localeCompare(b.id);
+
+    case "latest-desc":
+      return a.id.localeCompare(b.id) * -1;
+
+    default:
+      return 0;
+  }
+};
+
 var handler$4 = {
   fetchOptions: {
-    query: ''
+    query: "use-search"
   },
   fetcher: function fetcher(_ref) {
     return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var input, fetch, search, categoryId, brandId, sort, count, products, category;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              input = _ref.input, fetch = _ref.fetch;
+              search = input.search, categoryId = input.categoryId, brandId = input.brandId, sort = input.sort, count = input.count;
+              products = data.products;
+
+              if (categoryId) {
+                category = data.categories.find(function (category) {
+                  return category.id === categoryId;
+                });
+                products = data.products.filter(function (product) {
+                  var _category$products;
+
+                  return category == null ? void 0 : (_category$products = category.products) == null ? void 0 : _category$products.includes(product.id);
+                });
+              }
+
+              if (brandId) {
+                products = products.filter(function (product) {
+                  return product.vendor.replace(/\s+/g, "-").toLowerCase() === ("" + brandId).toLowerCase();
+                });
+              }
+
+              if (search) {
+                products = products.filter(function (product) {
+                  return product.name.toLowerCase().includes(("" + search).toLowerCase()) || product.slug.toLowerCase().includes(("" + search).toLowerCase());
+                });
+              }
+
+              if (sort) {
+                products = products.sort(function (a, b) {
+                  return sortProduct(a, b, sort);
+                });
+              }
+
               return _context.abrupt("return", {
-                data: {
-                  products: data.products
-                }
+                products: products.slice(0, count),
+                found: products.length > 0
               });
 
-            case 2:
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -1406,30 +3466,43 @@ var handler$4 = {
       }, _callee);
     }))();
   },
-  useHook: function useHook() {
-    return function () {
-      return {
-        data: {
-          products: data.products
-        }
-      };
+  useHook: function useHook(_ref2) {
+    var useData = _ref2.useData;
+    return function (input) {
+      if (input === void 0) {
+        input = {};
+      }
+
+      return useData({
+        input: [["search", input.search], ["prefixSearch", input.prefixSearch], ["categoryId", input.categoryId], ["brandId", input.brandId], ["sort", input.sort], ["locale", input.locale], ["count", input.count]],
+        swrOptions: _extends({
+          revalidateOnFocus: false
+        }, input.swrOptions)
+      });
     };
   }
 };
 
 var handler$5 = {
   fetchOptions: {
-    query: ''
+    query: "use-product"
   },
   fetcher: function fetcher(_ref) {
     return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var _data$products$find;
+
+      var input, fetch, id;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              return _context.abrupt("return", []);
+              input = _ref.input, fetch = _ref.fetch;
+              id = input.id;
+              return _context.abrupt("return", (_data$products$find = data.products.find(function (product) {
+                return [product.id, product.slug].includes(id);
+              })) != null ? _data$products$find : null);
 
-            case 2:
+            case 3:
             case "end":
               return _context.stop();
           }
@@ -1437,26 +3510,51 @@ var handler$5 = {
       }, _callee);
     }))();
   },
-  useHook: function useHook() {
-    return function () {
-      return [];
+  useHook: function useHook(_ref2) {
+    var useData = _ref2.useData;
+    return function (input) {
+      if (input === void 0) {
+        input = {};
+      }
+
+      return useData({
+        input: [["id", input.id]],
+        swrOptions: _extends({
+          revalidateOnFocus: false
+        }, input.swrOptions)
+      });
     };
   }
 };
 
 var handler$6 = {
   fetchOptions: {
-    query: ''
+    query: "use-categories"
   },
   fetcher: function fetcher(_ref) {
     return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var input, fetch, categoryId, category;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              return _context.abrupt("return", []);
+              input = _ref.input, fetch = _ref.fetch;
+              categoryId = input.categoryId;
 
-            case 2:
+              if (categoryId) {
+                _context.next = 4;
+                break;
+              }
+
+              return _context.abrupt("return", data.categories);
+
+            case 4:
+              category = data.categories.find(function (category) {
+                return category.id === categoryId;
+              });
+              return _context.abrupt("return", category ? [category] : []);
+
+            case 6:
             case "end":
               return _context.stop();
           }
@@ -1464,9 +3562,82 @@ var handler$6 = {
       }, _callee);
     }))();
   },
-  useHook: function useHook() {
-    return function () {
-      return [];
+  useHook: function useHook(_ref2) {
+    var useData = _ref2.useData;
+    return function (input) {
+      var response = useData({
+        input: [["categoryId", input == null ? void 0 : input.categoryId]],
+        swrOptions: _extends({
+          revalidateOnFocus: false
+        }, input == null ? void 0 : input.swrOptions)
+      });
+      return React__default.useMemo(function () {
+        return Object.create(response, {
+          isEmpty: {
+            get: function get() {
+              var _response$data$length, _response$data;
+
+              return ((_response$data$length = (_response$data = response.data) == null ? void 0 : _response$data.length) != null ? _response$data$length : 0) <= 0;
+            },
+            enumerable: true
+          }
+        });
+      }, [response]);
+    };
+  }
+};
+
+var handler$7 = {
+  fetchOptions: {
+    query: "use-brands"
+  },
+  fetcher: function fetcher(_ref) {
+    return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var vendorsStrings;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              vendorsStrings = data.products.map(function (product) {
+                return product.vendor;
+              });
+              return _context.abrupt("return", Array.from(new Set(vendorsStrings).values()).map(function (v) {
+                var id = v.replace(/\s+/g, "-").toLowerCase();
+                return {
+                  entityId: id,
+                  name: v,
+                  path: "brands/" + id
+                };
+              }));
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  },
+  useHook: function useHook(_ref2) {
+    var useData = _ref2.useData;
+    return function (input) {
+      var response = useData({
+        swrOptions: _extends({
+          revalidateOnFocus: false
+        }, input == null ? void 0 : input.swrOptions)
+      });
+      return React__default.useMemo(function () {
+        return Object.create(response, {
+          isEmpty: {
+            get: function get() {
+              var _response$data$length, _response$data;
+
+              return ((_response$data$length = (_response$data = response.data) == null ? void 0 : _response$data.length) != null ? _response$data$length : 0) <= 0;
+            },
+            enumerable: true
+          }
+        });
+      }, [response]);
     };
   }
 };
@@ -1477,7 +3648,7 @@ var handler$6 = {
 */
 var localProvider = {
   locale: 'en-us',
-  cartCookie: 'LOCAL_CART',
+  cartCookie: LOCAL_CART_ID,
   fetcher: fetcher,
   cart: {
     useCart: handler,
@@ -1486,17 +3657,18 @@ var localProvider = {
     useRemoveItem: handler$3
   },
   products: {
-    useSearch: handler$4
+    useSearch: handler$4,
+    useProduct: handler$5
   },
   site: {
-    useCategories: handler$5,
-    useBrands: handler$6
+    useCategories: handler$6,
+    useBrands: handler$7
   }
 };
 
 /*
   Forked from https://github.com/vercel/commerce/tree/main/packages/local/src
-  Changes: None
+  Changes: Add export data
 */
 var CommerceProvider = /*#__PURE__*/commerce.getCommerceProvider(localProvider);
 var useCommerce = function useCommerce() {
@@ -1506,13 +3678,9 @@ var useCommerce = function useCommerce() {
 var commerceProviderMeta = {
   name: "plasmic-commerce-local-provider",
   displayName: "Local Provider",
-  props: {
-    children: {
-      type: "slot"
-    }
-  },
-  importPath: "commerce-providers/local",
-  importName: "LocalProvider"
+  props: {},
+  importPath: "@plasmicpkgs/commerce-local",
+  importName: "CommerceProviderComponent"
 };
 
 function CommerceProviderComponent(props) {
@@ -1521,7 +3689,7 @@ function CommerceProviderComponent(props) {
 
 function registerCommerceProvider(loader, customCommerceProviderMeta) {
   var doRegisterComponent = function doRegisterComponent() {
-    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+    return loader ? loader.registerGlobalContext.apply(loader, arguments) : registerGlobalContext.apply(void 0, arguments);
   };
 
   doRegisterComponent(CommerceProviderComponent, customCommerceProviderMeta != null ? customCommerceProviderMeta : commerceProviderMeta);
@@ -1532,6 +3700,7 @@ function registerAll(loader) {
 }
 
 exports.CommerceProvider = CommerceProvider;
+exports.data = data;
 exports.localProvider = localProvider;
 exports.registerAll = registerAll;
 exports.registerCommerceProvider = registerCommerceProvider;