@rebuy/rebuy-hydrogen 3.0.0-beta.15 → 3.0.0-beta.16

package/README.md

@@ -272,6 +272,33 @@ Dynamic widget that can be set up to display a widget that you have created in t
 | `variant`           | The selected variant object.                                                                                                                  |
 | `variantId`         | The selected variant ID.                                                                                                                      |
 
+### RebuyProductViewed
+
+Place this component on any page or element where you would like to record that a customer has viewed one of your products. You will need to pass in either the entire product object, productID, or just the productHandle. This component will generate a UUID for registering the viewed products if a customerId is not passed along as well. To record a customer viewing a product and have that record attached to their customerID you will need to pass in the customerId as a sting.
+
+**Properties:**
+
+| Property | Description |
+| :---- | :---- |
+| `productId` | The Shopify product ID |
+| `product` | The entire product object |
+| `productHandle` | The product’s handle |
+| `customerId` | The ID of the customer viewing the product. If no customerId is passed a UUID will be used locally instead. |                                                                                                                    |
+
+### RebuyRecentlyViewedProducts
+
+Component returns a list of the products that a customer has recently viewed based on either their customerId or the generated UUID
+
+**Properties:**
+
+| `customTitleLevel` | Sets the initial title level (e.g., if set to `h2`, other titles in the component will adjust to `h3` accordingly) |
+| :---- | :---- |
+| `customTitleStyle` | An object of custom styles for the title (e.g., text color, text align) |
+| `addToCartCallBack` | A callback function for custom functionality when items are added to the cart |
+| `addToCartBtnText` | Custom text for the Add To Cart button |
+| `productId` | If you pass in a shopify productId, then that product will be excluded from the list of returned products. Use case would be if on a product page and you do not want the product on that page also displaying in the recently viewed products component. |                                                                                                                   |
+
+
 ---
 
 # 🛒 Smart Cart Guide
@@ -295,6 +322,136 @@ Welcome to the Rebuy Smart Cart! This powerful suite of features is designed to
 >
 > If you are using a non-Remix Hydrogen setup or a different React framework, you will need to adapt these instructions. While the core GraphQL fragments for the cart query are reusable, your project's methods for fetching data and handling cart mutations will be different.
 
+## Enabling Smart Cart Toggle
+
+To replace Hydrogen's native cart drawer with Rebuy's Smart Cart, follow these steps:
+
+### 1. Enable Smart Cart in the Provider
+
+In your root layout file (`app/root.tsx`), add the `enableSmartCart` prop to your context provider and include the `RebuySmartCart` component:
+
+**For Hydrogen-only Applications:**
+```typescript
+<RebuyHydrogenContextProvider 
+  cart={data.cart} 
+  shop="example.com" 
+  publicStoreDomain="example.myshopify.com"
+  enableSmartCart={true}
+>
+  {/* Your app content */}
+  <RebuySmartCart />
+</RebuyHydrogenContextProvider>
+```
+
+**For Hydrogen React Applications:**
+```typescript
+<RebuyHydrogenReactContextProvider 
+  publicPrimaryDomain="example.com" 
+  publicStoreDomain="example.myshopify.com" 
+  publicStorefrontToken="1233456" 
+  publicStorefrontId="12345678"
+  enableSmartCart={true}
+>
+  {/* Your app content */}
+  <RebuySmartCart />
+</RebuyHydrogenReactContextProvider>
+```
+
+### 2. Disable the Native Cart Aside
+
+Comment out or remove the native `CartAside` component in your layout file (typically in `PageLayout.tsx` or similar):
+
+```typescript
+// Before
+<CartAside cart={cart} />
+
+// After - Comment out or remove
+{/* <CartAside cart={cart} /> */}
+```
+
+### 3. Update Cart Toggle Interactions
+
+Replace the native cart toggle functionality with Rebuy's Smart Cart:
+
+**In your Header component:**
+```typescript
+import { useSmartCart } from '@rebuy/rebuy-hydrogen';
+
+export function Header() {
+  const { toggleCart } = useSmartCart();
+  
+  // In your cart button/icon
+  return (
+    <button 
+      onClick={(e) => {
+        e.preventDefault();
+        toggleCart();
+      }}
+    >
+      Cart ({itemCount})
+    </button>
+  );
+}
+```
+
+### 4. Update Add to Cart Actions
+
+After successful add to cart actions, open the Smart Cart:
+
+```typescript
+import { useSmartCart } from '@rebuy/rebuy-hydrogen';
+
+export function ProductForm() {
+  const { toggleCart } = useSmartCart();
+  
+  // After successful add to cart
+  const handleAddToCart = async () => {
+    // ... add to cart logic
+    toggleCart(); // Opens Smart Cart after adding item
+  };
+}
+```
+
+### Complete Example
+
+Here's a complete example of converting a cart badge component:
+
+**Before (Native Hydrogen):**
+```typescript
+function CartBadge() {
+  const { open } = useAside();
+  
+  return (
+    <a href="/cart" onClick={(e) => {
+      e.preventDefault();
+      open('cart');
+    }}>
+      Cart
+    </a>
+  );
+}
+```
+
+**After (Rebuy Smart Cart):**
+```typescript
+import { useSmartCart } from '@rebuy/rebuy-hydrogen';
+
+function CartBadge() {
+  const { toggleCart } = useSmartCart();
+  
+  return (
+    <a href="/cart" onClick={(e) => {
+      e.preventDefault();
+      toggleCart();
+    }}>
+      Cart
+    </a>
+  );
+}
+```
+
+> **Note:** The `useSmartCart` hook provides `toggleCart()` to toggle the cart open/closed, along with other cart state management functions.
+
 ## Prerequisites
 
 Before implementing Smart Cart features, ensure your cart route can handle JSON payloads and your GraphQL queries include the necessary fields for discount and subscription functionality.

package/dist/constants/debug.d.ts

@@ -22,6 +22,7 @@ export declare enum DebugKey {
     WIDGET_COMPLETE_THE_LOOK = "widget-complete-the-look",
     WIDGET_DYNAMIC_BUNDLE_PRODUCTS = "widget-dynamic-bundle-products",
     WIDGET_PRODUCT_ADD_ONS = "widget-product-add-ons",
-    WIDGET_PRODUCT_RECOMMENDATIONS = "widget-product-recommendations"
+    WIDGET_PRODUCT_RECOMMENDATIONS = "widget-product-recommendations",
+    WIDGET_RECENTLY_VIEWED_PRODUCTS = "widget-recently-viewed-products"
 }
 //# sourceMappingURL=debug.d.ts.map

package/dist/constants/debug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/constants/debug.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAChB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,oBAAoB,yBAAyB;IAC7C,6BAA6B,kCAAkC;IAC/D,cAAc,2BAA2B;IACzC,eAAe,4BAA4B;IAC3C,qBAAqB,kCAAkC;IACvD,YAAY,yBAAyB;IACrC,MAAM,mBAAmB;IACzB,cAAc,2BAA2B;IACzC,mBAAmB,gCAAgC;IACnD,eAAe,4BAA4B;IAC3C,oBAAoB,iCAAiC;IACrD,mBAAmB,gCAAgC;IACnD,eAAe,4BAA4B;IAC3C,eAAe,4BAA4B;IAC3C,MAAM,mBAAmB;IACzB,YAAY,yBAAyB;IACrC,oBAAoB,iCAAiC;IACrD,MAAM,iBAAiB;IACvB,wBAAwB,6BAA6B;IACrD,8BAA8B,mCAAmC;IACjE,sBAAsB,2BAA2B;IACjD,8BAA8B,mCAAmC;CACpE"}
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/constants/debug.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAChB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,oBAAoB,yBAAyB;IAC7C,6BAA6B,kCAAkC;IAC/D,cAAc,2BAA2B;IACzC,eAAe,4BAA4B;IAC3C,qBAAqB,kCAAkC;IACvD,YAAY,yBAAyB;IACrC,MAAM,mBAAmB;IACzB,cAAc,2BAA2B;IACzC,mBAAmB,gCAAgC;IACnD,eAAe,4BAA4B;IAC3C,oBAAoB,iCAAiC;IACrD,mBAAmB,gCAAgC;IACnD,eAAe,4BAA4B;IAC3C,eAAe,4BAA4B;IAC3C,MAAM,mBAAmB;IACzB,YAAY,yBAAyB;IACrC,oBAAoB,iCAAiC;IACrD,MAAM,iBAAiB;IACvB,wBAAwB,6BAA6B;IACrD,8BAA8B,mCAAmC;IACjE,sBAAsB,2BAA2B;IACjD,8BAA8B,mCAAmC;IACjE,+BAA+B,oCAAoC;CACtE"}

package/dist/index.css

@@ -11,7 +11,7 @@
   clip: rect(0, 0, 0, 0);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/AnnouncementBar/AnnouncementBar.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/AnnouncementBar/AnnouncementBar.css */
 .AnnouncementBar_rebuy-announcement-bar__container {
   position: relative;
   background-color: var(--rb-color-banner-background);
@@ -47,7 +47,7 @@
   overflow-wrap: break-word;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItem/CartItem.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItem/CartItem.css */
 .CartItem_rebuy-cart-item {
   display: flex;
   position: relative;
@@ -562,7 +562,7 @@
   opacity: 0.5;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/EmptyCart/EmptyCart.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/EmptyCart/EmptyCart.css */
 .EmptyCart_rebuy-empty-cart-message {
   flex: 0 0 auto;
   margin: 0;
@@ -583,7 +583,7 @@
   text-decoration: var(--rb-empty-cart-message-link-text-decoration-hover);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItemList/CartItemList.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItemList/CartItemList.css */
 .CartItemList_rebuy-cart-item-list__container {
   display: flex;
   flex-flow: column nowrap;
@@ -605,7 +605,7 @@
   min-height: var(--rb-cart-item-list-min-height);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartNoteInput/CartNoteInput.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartNoteInput/CartNoteInput.css */
 .CartNoteInput_rebuy-cart-note-input {
   display: flex;
   flex-direction: column;
@@ -815,7 +815,7 @@
   gap: var(--rb-cart-note-input-gap);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartSubtotal/CartSubtotal.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartSubtotal/CartSubtotal.css */
 .CartSubtotal_rebuy-cart-subtotal {
   display: flex;
   margin: 0;
@@ -931,7 +931,7 @@
   font-weight: var(--rb-cart-subtotal-discount-summary-item-amount-font-weight);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartTitleBar/CartTitleBar.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartTitleBar/CartTitleBar.css */
 .CartTitleBar_rebuy-cart-title-bar {
   flex-grow: var(--rb-cart-title-bar-flex-grow);
   margin: 0;
@@ -947,7 +947,7 @@
   font-weight: var(--rb-cart-title-bar-font-weight);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CheckoutArea/CheckoutArea.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CheckoutArea/CheckoutArea.css */
 .CheckoutArea_rebuy-checkout-area {
   display: flex;
   flex-flow: column nowrap;
@@ -1138,7 +1138,7 @@
   text-decoration: none;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/AddToCartBtn/AddToCartBtn.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/AddToCartBtn/AddToCartBtn.css */
 .AddToCartBtn_rebuy-cart-button {
   padding: var(--rb-spacing-unit-2x, 8px) var(--rb-spacing-unit-4x, 16px);
   border-radius: var(--rb-border-radius-button, 4px);
@@ -1190,7 +1190,7 @@
   max-width: 100%;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/ProductPrice/ProductPrice.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/ProductPrice/ProductPrice.css */
 .ProductPrice_rebuy-product-price {
   display: flex;
   align-items: baseline;
@@ -1212,7 +1212,7 @@
   font-size: var(--rb-font-size-small, 0.875em);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/QuantityInput/QuantityInput.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/QuantityInput/QuantityInput.css */
 .QuantityInput_rebuy-quantity__container {
   display: flex;
   align-items: center;
@@ -1230,7 +1230,7 @@
   appearance: auto;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/Title/Title.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/Title/Title.css */
 .Title_rebuy-title {
   font-family: var(--rb-font-family-base);
   font-weight: var(--rb-font-weight-bold);
@@ -1240,7 +1240,7 @@
   padding: 0;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/VariantSelect/VariantSelect.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/VariantSelect/VariantSelect.css */
 .VariantSelect_rebuy-variant__container {
   position: relative;
 }
@@ -1306,7 +1306,7 @@
   border-color: #999;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/ProductCard/ProductCard.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/ProductCard/ProductCard.css */
 :root {
   --rb-product-card-gap: var(--rb-spacing-unit-2x, 8px);
   --rb-product-card-padding: var(--rb-spacing-unit-3x, 12px);
@@ -1546,7 +1546,7 @@
   margin-top: var(--rb-spacing-unit-1x, 0.5em);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/ProductCarousel/ProductCarousel.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/ProductCarousel/ProductCarousel.css */
 .ProductCarousel_rebuy-carousel {
   position: relative;
   overflow: hidden;
@@ -1629,7 +1629,7 @@
   flex: 0 0 calc(16.66% - 1.25em);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/components/Timer/Timer.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/components/Timer/Timer.css */
 .Timer_rebuy-timer__container {
   margin: 0 auto;
   padding: 10px;
@@ -1690,7 +1690,7 @@
   }
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/widgets/RebuyWidget/RebuyWidget.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/widgets/RebuyWidget/RebuyWidget.css */
 .RebuyWidget_rebuy-widget__container {
   width: 100%;
   padding: 0;
@@ -1792,7 +1792,7 @@
   align-items: flex-start;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/DiscountCodeInput/DiscountCodeInput.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/DiscountCodeInput/DiscountCodeInput.css */
 .DiscountCodeInput_rebuy-discount-code-input {
   display: flex;
   flex-flow: row wrap;
@@ -2006,7 +2006,7 @@
   font-weight: var(--rb-discount-code-input-total-discount-amount-font-weight);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/LoginButton/LoginButton.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/LoginButton/LoginButton.css */
 .LoginButton_rebuy-login-button {
   appearance: none;
   box-sizing: border-box;
@@ -2048,7 +2048,7 @@
   color: var(--rb-login-button-text-color-active);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/TieredProgressBar/TieredProgressBar.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/TieredProgressBar/TieredProgressBar.css */
 .TieredProgressBar_rebuy-tiered-progress-bar {
   display: flex;
   flex-direction: column;
@@ -2323,7 +2323,7 @@
   border-color: var(--rb-tiered-progress-bar-gift-item-select-border-color-hover);
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/_Layouts/LayoutStyles.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/_Layouts/LayoutStyles.css */
 .LayoutStyles_rebuy-smart-cart-layout__anchor-goal-box {
   display: flex;
   flex-flow: column nowrap;
@@ -2450,7 +2450,7 @@
   box-sizing: border-box !important;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/smart-cart/components/SmartCartContainer/SmartCartContainer.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/smart-cart/components/SmartCartContainer/SmartCartContainer.css */
 .SmartCartContainer_rebuy-smart-cart,
 .SmartCartContainer_rebuy-smart-cart *,
 .SmartCartContainer_rebuy-smart-cart *::before,
@@ -2604,7 +2604,7 @@
   }
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.css */
 .RebuyCompleteTheLook_container {
   padding: 32px 1em;
   margin: 1em 0;
@@ -2630,7 +2630,7 @@
   width: 100%;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.css */
 .RebuyDynamicBundleProducts_container {
   padding: 32px 16px;
   background-color: #f0f4f8;
@@ -2718,7 +2718,7 @@
   opacity: 0.5;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductAddOns/RebuyProductAddOns.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductAddOns/RebuyProductAddOns.css */
 .RebuyProductAddOns_container {
   display: flex;
   flex-direction: column;
@@ -2827,7 +2827,7 @@
   justify-content: center;
 }
 
-/* ../../../../../tmp/tmp-185-ZlCKjNsAw7YW/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.css */
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.css */
 .RebuyProductRecommendations_container {
   padding: 32px 16px;
   background-color: #f0f4f8;
@@ -2843,6 +2843,21 @@
   gap: 32px;
   list-style: none;
 }
-.RebuyProductRecommendations_productItem {
+
+/* ../../../../../tmp/tmp-165-ANnZixNQysaG/opt/atlassian/pipelines/agent/build/src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.css */
+.RebuyRecentlyViewedProducts_rebuy-recently-viewed-products-container {
+  padding: 32px 16px;
+  background-color: #f0f4f8;
+  border-radius: 16px;
+  margin: 16px 0;
+  @media (width >= 768px) {
+    padding: 64px;
+  }
+}
+.RebuyRecentlyViewedProducts_product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 32px;
+  list-style: none;
 }
 /*# sourceMappingURL=index.css.map */