From adad825611a4bda25fc2e8202afb514f4640dc8a Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Mon, 29 Jan 2024 14:52:51 +0100
Subject: [PATCH 001/160] Add urlKey parameter to route config

---
 dev-template.html                          | 2 +-
 src/components/ProductItem/MockData.ts     | 3 +++
 src/components/ProductItem/ProductItem.tsx | 2 +-
 src/components/ProductList/MockData.ts     | 2 ++
 src/types/interface.ts                     | 3 ++-
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index ef62690e..bb0bab1c 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -75,7 +75,7 @@
       apiKey: '',
       environmentType: '',
       // searchQuery: 'search_query', // Optional: providing searchQuery will override 'q' query param
-      // route: ({ sku }) => {
+      // route: ({ sku, urlKey }) => {
       //   const storeConfig = JSON.parse(
       //     document
       //       .querySelector("meta[name='store-config']")
diff --git a/src/components/ProductItem/MockData.ts b/src/components/ProductItem/MockData.ts
index 3deacd69..2d6dbb78 100644
--- a/src/components/ProductItem/MockData.ts
+++ b/src/components/ProductItem/MockData.ts
@@ -123,6 +123,7 @@ export const sampleProductNoImage: Product = {
     },
     gift_message_available: null,
     url: 'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+    urlKey: 'sprite-foam-yoga-brick',
     media_gallery: null,
     custom_attributes: null,
     add_to_cart_allowed: null,
@@ -294,6 +295,7 @@ export const sampleProductDiscounted: Product = {
     },
     gift_message_available: null,
     url: 'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+    urlKey: 'sprite-foam-yoga-brick',
     media_gallery: null,
     custom_attributes: null,
     add_to_cart_allowed: null,
@@ -465,6 +467,7 @@ export const sampleProductNotDiscounted: Product = {
     },
     gift_message_available: null,
     url: 'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+    urlKey: 'sprite-foam-yoga-brick',
     media_gallery: null,
     custom_attributes: null,
     add_to_cart_allowed: null,
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 036cb839..ed54538e 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -82,7 +82,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   };
 
   const productUrl = setRoute
-    ? setRoute({ sku: productView?.sku })
+    ? setRoute({ sku: productView?.sku, urlKey: productView?.urlKey })
     : product?.canonical_url;
 
   return (
diff --git a/src/components/ProductList/MockData.ts b/src/components/ProductList/MockData.ts
index be450c8b..1793aa13 100644
--- a/src/components/ProductList/MockData.ts
+++ b/src/components/ProductList/MockData.ts
@@ -13,6 +13,7 @@ const SimpleProduct = {
     sku: '24-WG088',
     name: 'Sprite Foam Roller',
     url: 'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/sprite-foam-roller.html',
+    urlKey: 'sprite-foam-roller',
     images: [
       {
         label: 'Image',
@@ -49,6 +50,7 @@ const ComplexProduct = {
     sku: 'MSH06',
     name: 'Lono Yoga Short',
     url: 'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/lono-yoga-short.html',
+    urlKey: 'lono-yoga-short',
     images: [
       {
         label: '',
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 70d2e0c3..ced39b53 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -50,7 +50,7 @@ export type BucketTypename =
   | 'StatsBucket'
   | 'CategoryView';
 
-export type RedirectRouteFunc = ({ sku }: { sku: string }) => string;
+export type RedirectRouteFunc = ({ sku, urlKey }: { sku: string, urlKey: null | string }) => string;
 
 export interface MagentoHeaders {
   environmentId: string;
@@ -212,6 +212,7 @@ export interface Product {
     };
     gift_message_available: null | string;
     url: null | string;
+    urlKey: null | string;
     media_gallery: null | ProductViewMedia;
     custom_attributes: null | CustomAttribute;
     add_to_cart_allowed: null | boolean;

From e3ce857d481a4b053e73ec2e52d554a630029f18 Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:39:14 +0100
Subject: [PATCH 002/160] Add image optimization feature

---
 README.md                                     |  2 +
 dev-template.html                             |  2 +
 .../ProductItem/ProductItem.test.tsx          | 34 +++++++++++----
 src/components/ProductItem/ProductItem.tsx    | 22 +++++-----
 src/types/interface.ts                        |  2 +
 src/utils/getProductImage.ts                  | 42 ++++++++++++++++++-
 6 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 87b96ef8..64234ce0 100644
--- a/README.md
+++ b/README.md
@@ -122,6 +122,8 @@ const storeDetails = {
         displaySearchBox: true,
         displayOutOfStock: true,
         allowAllProducts: false,
+        optimizeImages: true,
+        imageBaseWidth: 200,
       },
       context: {
         customerGroup: 'CUSTOMER_GROUP_CODE',
diff --git a/dev-template.html b/dev-template.html
index ef62690e..55109cb2 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -68,6 +68,8 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
+        optimizeImages: true,
+        imageBaseWidth: 200,
       },
       context: {
         customerGroup: '',
diff --git a/src/components/ProductItem/ProductItem.test.tsx b/src/components/ProductItem/ProductItem.test.tsx
index b7272f0b..2532cfd1 100644
--- a/src/components/ProductItem/ProductItem.test.tsx
+++ b/src/components/ProductItem/ProductItem.test.tsx
@@ -9,19 +9,39 @@ it.
 
 import { render } from '@testing-library/preact';
 
+import { StoreContextProvider } from '../../context';
 import { sampleProductNotDiscounted } from './MockData';
 import ProductItem from './ProductItem';
 
 describe('WidgetSDK - UIKit/ProductItem', () => {
   test('renders', () => {
+    const context = {
+      environmentId: '',
+      environmentType: '',
+      websiteCode: '',
+      storeCode: '',
+      storeViewCode: '',
+      apiUrl: '',
+      apiKey: '',
+      config: {
+        optimizeImages: true,
+        imageBaseWidth: 200,
+      },
+      context: {},
+      route: undefined,
+      searchQuery: 'q',
+    };
+
     const { container } = render(
-      <ProductItem
-        item={sampleProductNotDiscounted}
-        currencySymbol="$"
-        currencyRate="USD"
-        setRoute={undefined}
-        refineProduct={() => {}}
-      />
+      <StoreContextProvider {...context}>
+        <ProductItem
+          item={sampleProductNotDiscounted}
+          currencySymbol="$"
+          currencyRate="USD"
+          setRoute={undefined}
+          refineProduct={() => {}}
+        />
+      </StoreContextProvider>
     );
 
     const elem = container.querySelector('.ds-sdk-product-item');
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 036cb839..9a39a748 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -10,6 +10,7 @@ it.
 import { FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 
+import { useStore } from '../../context';
 import NoImage from '../../icons/NoImage.svg';
 import {
   Product,
@@ -18,7 +19,7 @@ import {
   RefinedProduct,
 } from '../../types/interface';
 import { SEARCH_UNIT_ID } from '../../utils/constants';
-import { getProductImageURL } from '../../utils/getProductImage';
+import { generateOptimizedImages, getProductImageURL } from '../../utils/getProductImage';
 import { htmlStringDecode } from '../../utils/htmlStringDecode';
 import { SwatchButtonGroup } from '../SwatchButtonGroup';
 import ProductPrice from './ProductPrice';
@@ -42,6 +43,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const [selectedSwatch, setSelectedSwatch] = useState('');
   const [productImages, setImages] = useState<ProductViewMedia[] | null>();
   const [refinedProduct, setRefinedProduct] = useState<RefinedProduct>();
+  const { config: { optimizeImages, imageBaseWidth } } = useStore();
 
   const handleSelection = async (optionIds: string[], sku: string) => {
     const data = await refineProduct(optionIds, sku);
@@ -55,9 +57,14 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     return selected;
   };
 
-  const productImage = getProductImageURL(
+  let productImageSrc = getProductImageURL(
     productImages ? productImages ?? [] : productView.images ?? []
   ); // get image for PLP
+  let productImageSrcset : string[] = [];
+
+  if (optimizeImages) {
+    [productImageSrc, productImageSrcset] = generateOptimizedImages(productImageSrc, imageBaseWidth ?? 200);
+  };
 
   // will have to figure out discount logic for amount_off and percent_off still
   const discount: boolean = refinedProduct
@@ -94,16 +101,11 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       >
         <div className="ds-sdk-product-item__main relative flex flex-col justify-between h-full">
           <div className="ds-sdk-product-item__image relative w-full h-full rounded-md overflow-hidden">
-            {/*
-                  NOTE:
-                  we could use <picture> <source...
-                  or srcset in <img /> for  breakpoint based img file
-                  in future for better performance
-                 */}
-            {productImage ? (
+            {productImageSrc ? (
               <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none">
                 <img
-                  src={productImage}
+                  src={productImageSrc}
+                  srcSet={productImageSrcset.join(', ')}
                   alt={productView.name}
                   loading="eager"
                   className="max-h-[45rem] h-full w-full object-cover object-center lg:h-full lg:w-full"
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 70d2e0c3..046c8c54 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -41,6 +41,8 @@ export interface StoreDetailsConfig {
   displayOutOfStock?: string;
   displayMode?: string;
   locale?: string;
+  optimizeImages?: boolean; // Using Fastly Image Optimizer
+  imageBaseWidth?: number;
 }
 
 // Types
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index cca8a278..1f0e07a6 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -43,6 +43,44 @@ const getProductImageURL = (images: ProductViewMedia[]): string => {
     '';
 
   return imageUrl ? `${protocol}//${imageUrl}` : '';
-};
+}
+
+export interface ResolveImageUrlOptions {
+  width: number;
+  height?: number;
+  auto?: string;
+  quality?: number;
+  crop?: boolean;
+  fit?: string;
+}
+
+const resolveImageUrl = (url: string, opts: ResolveImageUrlOptions) : string => {
+  const [base, query] = url.split('?');
+  const params = new URLSearchParams(query);
+
+  Object.entries(opts).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      params.set(key, String(value));
+    }
+  });
+
+  return `${base}?${params.toString()}`;
+}
+
+const generateOptimizedImages = (imageUrl: string, baseImageWidth: number): [string, string[]] => {
+  const baseOptions = {
+    fit: 'cover',
+    crop: false,
+    dpi: 1,
+  };
+
+  const src = resolveImageUrl(imageUrl, { ...baseOptions, width: baseImageWidth });
+  const dpiSet = [1, 2, 3];
+  const srcset = dpiSet.map((dpi) => {
+    return `${resolveImageUrl(imageUrl, { ...baseOptions, auto: 'webp', quality: 80, width: baseImageWidth * dpi })} ${dpi}x`;
+  });
+
+  return [src, srcset];
+}
 
-export { getProductImageURL };
+export { getProductImageURL, generateOptimizedImages };

From 862a0291925244f334babf72453b874917c16a64 Mon Sep 17 00:00:00 2001
From: Kathleen Tynan <ktynan@adobe.com>
Date: Wed, 7 Feb 2024 22:39:01 -0600
Subject: [PATCH 003/160] new plp features

---
 src/styles/index.css | 37 ++++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index 5222881b..dbb452bf 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,7 +1,7 @@
 /* Tokens */
 
 .ds-widgets {
-  /* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */
+  /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */
   /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -29,8 +29,10 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
-  html {
+  html,
+:host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,12 +42,14 @@
     -o-tab-size: 4;
        tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
     font-variation-settings: normal;
     /* 6 */
+    -webkit-tap-highlight-color: transparent;
+    /* 7 */
   }
   /*
 1. Remove the margin in all browsers.
@@ -104,8 +108,10 @@ strong {
     font-weight: bolder;
   }
   /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
   code,
 kbd,
@@ -113,8 +119,12 @@ samp,
 pre {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
-    font-size: 1em;
+    font-feature-settings: normal;
     /* 2 */
+    font-variation-settings: normal;
+    /* 3 */
+    font-size: 1em;
+    /* 4 */
   }
   /*
 Add the correct font size in all browsers.
@@ -1050,9 +1060,6 @@ video {
   .pb-6 {
     padding-bottom: 1.5rem;
   }
-  .pb-8 {
-    padding-bottom: 2rem;
-  }
   .pl-3 {
     padding-left: 0.75rem;
   }
@@ -1490,12 +1497,6 @@ video {
   opacity: 1;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-gray-700 {
-    background-color: var(--color-gray-7);
-  }
-}
-
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;
@@ -1567,3 +1568,9 @@ video {
          column-gap: 2rem;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-gray-700 {
+    background-color: var(--color-gray-7);
+  }
+}

From 930fad2f165e8a3bb71b3f44a81dea68a2b78d65 Mon Sep 17 00:00:00 2001
From: Kathleen Tynan <ktynan@adobe.com>
Date: Wed, 7 Feb 2024 23:33:50 -0600
Subject: [PATCH 004/160] new features plp

---
 src/components/ProductItem/ProductItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 185c4a56..469d1c82 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -298,7 +298,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
         className="!text-primary hover:no-underline hover:text-primary"
       >
         <div className="ds-sdk-product-item__main relative flex flex-col justify-between h-full">
-          <div className="ds-sdk-product-item__image relative w-full h-full rounded-md overflow-hidden">
+          <div className="ds-sdk-product-item__image relative w-full h-full rounded-2 overflow-hidden">
             {productImageArray.length ? (
               <ImageCarousel
                 images={
@@ -318,7 +318,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
           </div>
           <div className="flex flex-row">
             <div className="flex flex-col">
-              <div className="ds-sdk-product-item__product-name mt-md text-sm text-primary">
+              <div className="ds-sdk-product-item__product-name font-headline-2-strong">
                 {product.name !== null && htmlStringDecode(product.name)}
               </div>
               <ProductPrice

From 2420917743c9559e2b93a6a40ff53dfa10ca5ce3 Mon Sep 17 00:00:00 2001
From: Kathleen Tynan <ktynan@adobe.com>
Date: Wed, 7 Feb 2024 23:33:22 -0600
Subject: [PATCH 005/160] elsie base design

---
 .../AddToCartButton/AddToCartButton.tsx       |   7 +-
 src/components/Alert/Alert.tsx                |  10 +-
 src/components/Breadcrumbs/Breadcrumbs.tsx    |   6 +-
 .../CategoryFilters/CategoryFilters.tsx       |  10 +-
 src/components/Facets/Facets.tsx              |   2 +-
 src/components/Facets/SelectedFilters.tsx     |   4 +-
 .../FacetsShimmer/FacetsShimmer.tsx           |   2 +-
 src/components/FilterButton/FilterButton.tsx  |   8 +-
 .../InputButtonGroup/InputButtonGroup.tsx     |  14 +-
 .../LabelledInput/LabelledInput.tsx           |   6 +-
 src/components/Loading/Loading.tsx            |   2 +-
 src/components/NoResults/NoResults.tsx        |   8 +-
 src/components/Pagination/Pagination.tsx      |  14 +-
 .../PerPagePicker/PerPagePicker.tsx           |  22 +-
 src/components/Pill/Pill.tsx                  |   4 +-
 src/components/ProductItem/ProductPrice.tsx   |  49 ++-
 src/components/SearchBar/SearchBar.tsx        |   2 +-
 src/components/Shimmer/Shimmer.tsx            |   4 +-
 src/components/Slider/Slider.tsx              |   4 +-
 src/components/SortDropdown/SortDropdown.tsx  |  24 +-
 src/containers/App.tsx                        |   4 +-
 src/containers/ProductsContainer.tsx          |   4 +-
 .../inputGroupTitleSlot/TextWithTooltip.tsx   |   6 +-
 src/styles/index.css                          | 402 ++++++++++++++----
 src/styles/tokens.css                         | 206 ++++++++-
 tailwind.config.js                            |  75 +++-
 26 files changed, 679 insertions(+), 220 deletions(-)

diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
index d68b6945..b711899c 100644
--- a/src/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -20,13 +20,10 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   return (
     <div className="ds-sdk-add-to-cart-button">
       <button
-        className="flex items-center justify-center text-white text-sm rounded-full h-[32px] w-full p-sm"
-        style={{
-          'background-color': `#464646`,
-        }}
+        className="flex items-center justify-center text-white font-button-2 bg-brand-500 rounded-full h-[32px] w-full p-sm"
         onClick={onClick}
       >
-        <CartIcon className="w-[24px] pr-4" />
+        <CartIcon className="w-[24px] pr-4 stroke-2" />
         Add To Cart
       </button>
     </div>
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index df0c5053..7b3e6ed2 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -37,7 +37,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
         switch (type) {
           case 'error':
             return (
-              <div className="rounded-md bg-red-50 p-4">
+              <div className="rounded-2 bg-red-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Error
@@ -60,7 +60,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
             );
           case 'warning':
             return (
-              <div className="rounded-md bg-yellow-50 p-4">
+              <div className="rounded-2 bg-yellow-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Warning
@@ -83,7 +83,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
             );
           case 'info':
             return (
-              <div className="rounded-md bg-blue-50 p-4">
+              <div className="rounded-2 bg-blue-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Info
@@ -117,7 +117,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
             );
           case 'success':
             return (
-              <div className="rounded-md bg-green-50 p-4">
+              <div className="rounded-2 bg-green-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Checkmark
@@ -139,7 +139,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
                     <div className="md:ml-6">
                       <button
                         type="button"
-                        className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 ring-off hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                        className="inline-flex rounded-2 bg-green-50 p-1.5 text-green-500 ring-off hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
                       >
                         <span className="sr-only">Dismiss</span>
                         <X
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index 37ce7d37..0e9556c3 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -30,14 +30,14 @@ export const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({
           <li key={page.name} className="ds-sdk-breadcrumbs__item">
             <div className="flex items-center">
               {index > 0 && (
-                <Chevron className="h-sm w-sm transform -rotate-90 stroke-gray-400" />
+                <Chevron className="h-sm w-sm transform -rotate-90 stroke-neutral-600" />
               )}
 
               <a
                 href={page.href}
-                className={`ml-2 text-sm font-normal hover:text-gray-900 first:ml-0 ${
+                className={`ml-2 text-sm font-normal hover:text-neutral-900 first:ml-0 ${
                   page.current
-                    ? 'ds-sdk-breadcrumbs__item--current text-gray-500 font-light'
+                    ? 'ds-sdk-breadcrumbs__item--current text-brand-300 font-light'
                     : 'text-black'
                 }`}
                 aria-current={page.current ? 'page' : undefined}
diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index c956da7c..b0a3fa02 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -46,15 +46,17 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
   const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);
 
   return (
-    <div class="sm:flex ds-widgets-_actions relative max-w-[21rem] w-full h-full px-2 flex-col overflow-y-auto">
+    <div class="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col overflow-y-auto top-[6.4rem] right-0 bottom-[48px] left-0 box-content">
       <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
-        {title && <span> {title}</span>}
-        {!loading && <span className="text-primary text-sm">{results}</span>}
+        {title && <span className="font-display-3"> {title}</span>}
+        {!loading && (
+          <span className="text-primary font-button-2">{results}</span>
+        )}
       </div>
 
       {!pageLoading && facets.length > 0 && (
         <>
-          <div className="flex pb-4 w-full h-full">
+          <div className="flex pb-4">
             <FilterButton
               displayFilter={() => setShowFilters(false)}
               type="desktop"
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 88c747cf..a0f9de29 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -27,7 +27,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   } = useStore();
   return (
     <div className="ds-plp-facets flex flex-col">
-      <form className="ds-plp-facets__list border-t border-gray-200">
+      <form className="ds-plp-facets__list border-t border-neutral-500">
         {searchFacets?.map((facet) => {
           const bucketType = facet?.buckets[0]?.__typename;
           switch (bucketType) {
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index c73485f4..75a012ac 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -63,7 +63,9 @@ export const SelectedFilters: FunctionComponent = ({}) => {
               focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none text-sm px-4"
               onClick={() => searchCtx.clearFilters()}
             >
-              {translation.Filter.clearAll}
+              <span className="font-button-2">
+                {translation.Filter.clearAll}
+              </span>
             </button>
           </div>
         </div>
diff --git a/src/components/FacetsShimmer/FacetsShimmer.tsx b/src/components/FacetsShimmer/FacetsShimmer.tsx
index 7b7e255d..8dc35eb6 100644
--- a/src/components/FacetsShimmer/FacetsShimmer.tsx
+++ b/src/components/FacetsShimmer/FacetsShimmer.tsx
@@ -27,7 +27,7 @@ export const FacetsShimmer: FunctionComponent = () => {
           </div>
         </div>
       </div>
-      <div className="ds-sdk-input__border border-t mt-md border-gray-200" />
+      <div className="ds-sdk-input__border border-t mt-md border-neutral-200" />
     </>
   );
 };
diff --git a/src/components/FilterButton/FilterButton.tsx b/src/components/FilterButton/FilterButton.tsx
index f9a40f24..c4747d58 100644
--- a/src/components/FilterButton/FilterButton.tsx
+++ b/src/components/FilterButton/FilterButton.tsx
@@ -27,20 +27,20 @@ export const FilterButton: FunctionComponent<FilterButtonProps> = ({
   return type == 'mobile' ? (
     <div className="ds-sdk-filter-button">
       <button
-        className="flex items-center bg-gray-100 ring-black ring-opacity-5 rounded-md p-sm  outline outline-gray-200 hover:outline-gray-800 h-[32px]"
+        className="flex items-center bg-background ring-black ring-opacity-5 rounded-2 p-sm font-button-2 outline outline-brand-700 h-[32px]"
         onClick={displayFilter}
       >
         <AdjustmentsIcon className="w-md" />
-        {translation.Filter.title}
+        <span className="font-button-2">{translation.Filter.title}</span>
       </button>
     </div>
   ) : (
     <div className="ds-sdk-filter-button-desktop">
       <button
-        className="flex items-center bg-gray-100 ring-black ring-opacity-5 rounded-md p-sm text-sm h-[32px]"
+        className="flex items-center bg-background ring-black ring-opacity-5 rounded-3 p-sm outline outline-brand-700 h-[32px]"
         onClick={displayFilter}
       >
-        {title}
+        <span className="font-button-2">{title}</span>
       </button>
     </div>
   );
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 1c319df6..19bad082 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -116,7 +116,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
       {inputGroupTitleSlot ? (
         inputGroupTitleSlot(title)
       ) : (
-        <label className="ds-sdk-input__label text-base font-normal text-gray-900">
+        <label className="ds-sdk-input__label text-neutral-900 font-headline-1">
           {title}
         </label>
       )}
@@ -143,21 +143,23 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
           })}
           {!showMore && buckets.length > numberOfOptionsShown && (
             <div
-              className="ds-sdk-input__fieldset__show-more flex items-center text-gray-700 cursor-pointer"
+              className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
               onClick={() => setShowMore(true)}
             >
-              <PlusIcon className="h-md w-md fill-gray-500" />
+              <PlusIcon className="h-md w-md fill-neutral-800" />
               <button
                 type="button"
-                className="ml-sm font-light cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none text-sm"
+                className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
               >
-                {translation.InputButtonGroup.showmore}
+                <span className="font-button-2">
+                  {translation.InputButtonGroup.showmore}
+                </span>
               </button>
             </div>
           )}
         </div>
       </fieldset>
-      <div className="ds-sdk-input__border border-t mt-md border-gray-200" />
+      <div className="ds-sdk-input__border border-t mt-md border-neutral-500" />
     </div>
   );
 };
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 5473c14a..2a1d7bcd 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -42,7 +42,7 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
             : `radio-group-${attribute}`
         }
         type={type}
-        className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-gray-600 min-w-[16px]"
+        className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
         checked={checked}
         aria-checked={checked}
         onInput={onChange}
@@ -50,11 +50,11 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
       />
       <label
         htmlFor={name}
-        className="ds-sdk-labelled-input__label ml-sm block-display text-sm font-light text-gray-700 cursor-pointer"
+        className="ds-sdk-labelled-input__label ml-sm block-display text-neutral-800 font-body-1-default cursor-pointer"
       >
         {label}
         {count && (
-          <span className="text-[12px] font-light text-gray-700 ml-1">
+          <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
             {`(${count})`}
           </span>
         )}
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
index ab9ac657..02876c9c 100644
--- a/src/components/Loading/Loading.tsx
+++ b/src/components/Loading/Loading.tsx
@@ -25,7 +25,7 @@ export const Loading: FunctionComponent<LoadingProps> = ({ label }) => {
         isMobile ? 'loading-spinner-on-mobile' : ''
       }`}
     >
-      <div className="ds-sdk-loading__spinner bg-gray-100 rounded-full p-xs flex w-fit my-lg outline-gray-200">
+      <div className="ds-sdk-loading__spinner bg-neutral-200 rounded-full p-xs flex w-fit my-lg outline-neutral-300">
         <LoadingIcon className="inline-block mr-xs ml-xs w-md animate-spin fill-primary" />
         <span className="ds-sdk-loading__spinner-label p-xs">{label}</span>
       </div>
diff --git a/src/components/NoResults/NoResults.tsx b/src/components/NoResults/NoResults.tsx
index e0d88e98..17dffff6 100644
--- a/src/components/NoResults/NoResults.tsx
+++ b/src/components/NoResults/NoResults.tsx
@@ -25,7 +25,7 @@ export const NoResults: FunctionComponent<NoResultsProps> = ({
       {isError ? (
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          className="h-28 w-28 my-0 mx-auto stroke-gray-400"
+          className="h-28 w-28 my-0 mx-auto stroke-neutral-600"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -40,7 +40,7 @@ export const NoResults: FunctionComponent<NoResultsProps> = ({
       ) : (
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          className="h-28 w-28 my-0 mx-auto stroke-gray-400"
+          className="h-28 w-28 my-0 mx-auto stroke-neutral-600"
           fill="none"
           viewBox="0 0 24 24"
           strokeWidth={1.5}
@@ -53,10 +53,10 @@ export const NoResults: FunctionComponent<NoResultsProps> = ({
         </svg>
       )}
 
-      <h1 className="ds-sdk-no-results__page__heading text-2xl text-center text-gray-600">
+      <h1 className="ds-sdk-no-results__page__heading text-2xl text-center text-neutral-700">
         {heading}
       </h1>
-      <h3 className="ds-sdk-no-results__page__subheading text-lg text-center text-gray-500">
+      <h3 className="ds-sdk-no-results__page__subheading text-lg text-center text-brand-300">
         {subheading}
       </h3>
     </div>
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 23d4d30a..e30402bd 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -56,8 +56,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
       <Chevron
         className={`h-sm w-sm transform rotate-90 ${
           currentPage === 1
-            ? 'stroke-gray-400 cursor-not-allowed'
-            : 'stroke-gray-600 cursor-pointer'
+            ? 'stroke-neutral-600 cursor-not-allowed'
+            : 'stroke-brand-700 cursor-pointer'
         }`}
         onClick={onPrevious}
       />
@@ -67,7 +67,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
           return (
             <li
               key={page}
-              className="ds-plp-pagination__dots text-gray-500 mx-sm my-auto"
+              className="ds-plp-pagination__dots text-brand-300 mx-sm my-auto"
             >
               ...
             </li>
@@ -77,9 +77,9 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
         return (
           <li
             key={page}
-            className={`ds-plp-pagination__item flex items-center cursor-pointer text-center text-gray-500 my-auto mx-sm ${
+            className={`ds-plp-pagination__item flex items-center cursor-pointer text-center font-body-2-default text-brand-700 my-auto mx-sm ${
               currentPage === page
-                ? 'ds-plp-pagination__item--current text-black font-medium underline underline-offset-4 decoration-black'
+                ? 'ds-plp-pagination__item--current text-brand-700 font-body-1-strong underline underline-offset-4 decoration-brand-700'
                 : ''
             }`}
             onClick={() => onPageChange(page)}
@@ -92,8 +92,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
       <Chevron
         className={`h-sm w-sm transform -rotate-90 ${
           currentPage === totalPages
-            ? 'stroke-gray-400 cursor-not-allowed'
-            : 'stroke-gray-600 cursor-pointer'
+            ? 'stroke-neutral-600 cursor-not-allowed'
+            : 'stroke-brand-700 cursor-pointer'
         }`}
         onClick={onNext}
       />
diff --git a/src/components/PerPagePicker/PerPagePicker.tsx b/src/components/PerPagePicker/PerPagePicker.tsx
index 5acdf663..9ebf69a6 100644
--- a/src/components/PerPagePicker/PerPagePicker.tsx
+++ b/src/components/PerPagePicker/PerPagePicker.tsx
@@ -73,18 +73,20 @@ export const PerPagePicker: FunctionalComponent<PerPagePickerProps> = ({
     <>
       <div
         ref={pageSizeMenu}
-        className="ds-sdk-per-page-picker ml-2 mr-2 relative inline-block text-left bg-gray-100 rounded-md outline outline-1 outline-gray-200 hover:outline-gray-600 h-[32px]"
+        className="ds-sdk-per-page-picker ml-2 mr-2 relative inline-block text-left h-[32px] bg-neutral-50 border-brand-700 outline-brand-700 rounded-3 border-3"
       >
         <button
-          className="group flex justify-center items-center font-normal text-sm text-gray-700 rounded-md hover:cursor-pointer border-none bg-transparent hover:border-none hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none h-full w-full px-sm"
+          className="group flex justify-center items-center text-brand-700 hover:cursor-pointer border-none bg-background h-full w-full px-sm"
           ref={pageSizeButton}
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
           onFocus={() => setIsFocus(false)}
           onBlur={() => setIsFocus(false)}
         >
-          {selectedOption ? `${selectedOption.label}` : '24'}
+          <span className="font-button-2">
+            {selectedOption ? `${selectedOption.label}` : '24'}
+          </span>
           <Chevron
-            className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-gray-600 ${
+            className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-brand-700 ${
               isDropdownOpen ? '' : 'rotate-180'
             }`}
           />
@@ -92,24 +94,24 @@ export const PerPagePicker: FunctionalComponent<PerPagePickerProps> = ({
         {isDropdownOpen && (
           <ul
             ref={listRef}
-            className="ds-sdk-per-page-picker__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
+            className="ds-sdk-per-page-picker__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
           >
             {pageSizeOptions.map((option, i) => (
               <li
                 key={i}
                 aria-selected={option.value === selectedOption?.value}
                 onMouseOver={() => setActiveIndex(i)}
-                className={`py-xs hover:bg-gray-100 hover:text-gray-900 ${
-                  i === activeIndex ? 'bg-gray-100 text-gray-900' : ''
+                className={`py-xs hover:bg-neutral-200 hover:text-neutral-900 ${
+                  i === activeIndex ? 'bg-neutral-200 text-neutral-900' : ''
                 }}`}
               >
                 <a
                   className={`ds-sdk-per-page-picker__items--item block-display px-md py-sm text-sm mb-0
               no-underline active:no-underline focus:no-underline hover:no-underline
-              hover:text-gray-900 ${
+              hover:text-neutral-900 ${
                 option.value === selectedOption?.value
-                  ? 'ds-sdk-per-page-picker__items--item-selected font-semibold text-gray-900'
-                  : 'font-normal text-gray-800'
+                  ? 'ds-sdk-per-page-picker__items--item-selected font-semibold text-neutral-900'
+                  : 'font-normal text-neutral-800'
               }`}
                   onClick={() => select(option.value)}
                 >
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 23f1ee1e..8ae87912 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -20,7 +20,7 @@ export interface PillProps {
 }
 
 const defaultIcon = (
-  <CloseIcon className="h-[12px] w-[12px] rotate-45 inline-block ml-sm cursor-pointer  fill-gray-700" />
+  <CloseIcon className="h-[12px] w-[12px] rotate-45 inline-block ml-sm cursor-pointer  fill-neutral-800" />
 );
 
 // TODO: add support later to pass classes to the container div
@@ -43,7 +43,7 @@ export const Pill: FunctionComponent<PillProps> = ({
   ) : (
     <div
       key={label}
-      className="ds-sdk-pill inline-flex justify-content items-center bg-gray-100 rounded-full w-fit outline outline-gray-200 min-h-[32px] px-4 py-1"
+      className="ds-sdk-pill inline-flex justify-content items-center bg-neutral-200 rounded-full w-fit outline outline-neutral-300 min-h-[32px] px-4 py-1"
     >
       <span className="ds-sdk-pill__label font-normal text-sm">{label}</span>
       <span className="ds-sdk-pill__cta" onClick={onClick}>
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index 74649e54..dc1e5154 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -58,11 +58,24 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
       translation.ProductCard.bundlePrice.split(' ');
     return bundlePriceTranslationOrder.map((word: string, index: any) =>
       word === '{fromBundlePrice}' ? (
-        `${getProductPrice(item, currencySymbol, currencyRate, false, true)} `
+        <span
+          className="text-brand-600 font-headline-2-default mr-xs"
+          key={index}
+        >
+          {getProductPrice(item, currencySymbol, currencyRate, false, true)}
+        </span>
       ) : word === '{toBundlePrice}' ? (
-        getProductPrice(item, currencySymbol, currencyRate, true, true)
+        <span
+          className="text-brand-600 font-headline-2-default mr-xs"
+          key={index}
+        >
+          {getProductPrice(item, currencySymbol, currencyRate, true, true)}
+        </span>
       ) : (
-        <span className="text-gray-500 text-xs font-normal mr-xs" key={index}>
+        <span
+          className="text-brand-300 font-headline-2-default mr-xs"
+          key={index}
+        >
           {word}
         </span>
       )
@@ -83,7 +96,10 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
       word === '' ? (
         getProductPrice(item, currencySymbol, currencyRate, false, true)
       ) : (
-        <span className="text-gray-500 text-xs font-normal mr-xs" key={index}>
+        <span
+          className="text-brand-300 font-details-caption-3 mr-xs"
+          key={index}
+        >
           {word}
         </span>
       )
@@ -93,10 +109,10 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   const getDiscountedPrice = (discount: boolean | undefined) => {
     const discountPrice = discount ? (
       <>
-        <span className="line-through pr-2">
+        <span className="line-through pr-2 text-brand-300">
           {getProductPrice(item, currencySymbol, currencyRate, false, false)}
         </span>
-        <span className="text-secondary">
+        <span className="font-headline-2-strong">
           {getProductPrice(item, currencySymbol, currencyRate, false, true)}
         </span>
       </>
@@ -110,7 +126,10 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
       word === '' ? (
         discountPrice
       ) : (
-        <span className="text-gray-500 text-xs font-normal mr-xs" key={index}>
+        <span
+          className="text-brand-300 font-headline-2-default mr-xs"
+          key={index}
+        >
           {word}
         </span>
       )
@@ -126,8 +145,8 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
             !isConfigurable &&
             !isComplexProductView &&
             discount && (
-              <p className="ds-sdk-product-price--discount mt-xs text-sm font-medium text-gray-900 my-auto">
-                <span className="line-through pr-2">
+              <p className="ds-sdk-product-price--discount mt-xs font-headline-2-strong">
+                <span className="line-through pr-2 text-brand-300">
                   {getProductPrice(
                     item,
                     currencySymbol,
@@ -136,7 +155,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
                     false
                   )}
                 </span>
-                <span className="text-secondary">
+                <span className="text-brand-600">
                   {getProductPrice(
                     item,
                     currencySymbol,
@@ -154,7 +173,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
             !isConfigurable &&
             !isComplexProductView &&
             !discount && (
-              <p className="ds-sdk-product-price--no-discount mt-xs text-sm font-medium text-gray-900 my-auto">
+              <p className="ds-sdk-product-price--no-discount mt-xs font-headline-2-strong">
                 {getProductPrice(
                   item,
                   currencySymbol,
@@ -167,20 +186,20 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
 
           {isBundle && (
             <div className="ds-sdk-product-price--bundle">
-              <p className="mt-xs text-sm font-medium text-gray-900 my-auto">
+              <p className="mt-xs font-headline-2-default">
                 {getBundledPrice(item, currencySymbol, currencyRate)}
               </p>
             </div>
           )}
 
           {isGrouped && (
-            <p className="ds-sdk-product-price--grouped mt-xs text-sm font-medium text-gray-900 my-auto">
+            <p className="ds-sdk-product-price--grouped mt-xs font-headline-2-strong">
               {getPriceFormat(item, currencySymbol, currencyRate, false)}
             </p>
           )}
 
           {isGiftCard && (
-            <p className="ds-sdk-product-price--gift-card mt-xs text-sm font-medium text-gray-900 my-auto">
+            <p className="ds-sdk-product-price--gift-card mt-xs font-headline-2-strong">
               {getPriceFormat(item, currencySymbol, currencyRate, true)}
             </p>
           )}
@@ -188,7 +207,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
           {!isGrouped &&
             !isBundle &&
             (isConfigurable || isComplexProductView) && (
-              <p className="ds-sdk-product-price--configurable mt-xs text-sm font-medium text-gray-900 my-auto">
+              <p className="ds-sdk-product-price--configurable mt-xs font-headline-2-strong">
                 {getDiscountedPrice(discount)}
               </p>
             )}
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index aaaa614a..ca7c6bb9 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -29,7 +29,7 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({
         type="text"
         value={phrase}
         onKeyPress={onKeyPress}
-        className="border border-gray-300 text-gray-800 text-sm block-display p-xs pr-lg ds-sdk-search-bar__input"
+        className="border border-neutral-300 text-neutral-900 text-sm block-display p-xs pr-lg ds-sdk-search-bar__input"
         placeholder={placeholder}
         autocomplete="off"
       />
diff --git a/src/components/Shimmer/Shimmer.tsx b/src/components/Shimmer/Shimmer.tsx
index 7c6da0cb..ab59d55e 100644
--- a/src/components/Shimmer/Shimmer.tsx
+++ b/src/components/Shimmer/Shimmer.tsx
@@ -27,13 +27,13 @@ export const Shimmer: FunctionComponent = () => {
           <div className="ds-widgets_actions_header flex justify-between items-center mb-md" />
           <div className="flex pb-4 w-full h-full">
             <div className="ds-sdk-filter-button-desktop">
-              <button className="flex items-center bg-gray-100 ring-black ring-opacity-5 rounded-md p-sm text-sm h-[32px]">
+              <button className="flex items-center bg-neutral-200 ring-black ring-opacity-5 rounded-2 p-sm text-sm h-[32px]">
                 <ButtonShimmer />
               </button>
             </div>
           </div>
           <div className="ds-plp-facets flex flex-col">
-            <form className="ds-plp-facets__list border-t border-gray-200">
+            <form className="ds-plp-facets__list border-t border-neutral-300">
               {facetsArray.map((_, index) => (
                 <FacetsShimmer key={index} />
               ))}
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index b2787da2..5a2dd4fa 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -92,7 +92,7 @@ export const Slider: FunctionComponent<SliderProps> = ({ filterData }) => {
         <input
           type="range"
           id="price-range"
-          class="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg dark:bg-gray-700"
+          class="w-full h-3 bg-neutral-300 rounded-lg appearance-none cursor-pointer range-lg dark:bg-neutral-800"
           min={filterData.buckets[0].from}
           max={filterData.buckets[filterData.buckets.length - 1].to}
           value={selectedPrice}
@@ -111,7 +111,7 @@ export const Slider: FunctionComponent<SliderProps> = ({ filterData }) => {
           </span>
         </div>
       </div>
-      <div className="ds-sdk-input__border border-t mt-md border-gray-200" />
+      <div className="ds-sdk-input__border border-t mt-md border-neutral-300" />
     </>
   );
 };
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 3f135842..a366b9df 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -82,19 +82,21 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     <>
       <div
         ref={sortOptionMenu}
-        class="ds-sdk-sort-dropdown relative inline-block text-left bg-gray-100 rounded-md outline outline-1 outline-gray-200 hover:outline-gray-600 h-[32px] z-9"
+        class="ds-sdk-sort-dropdown relative inline-block text-left bg-neutral-50 h-[32px] z-9"
       >
         <button
-          className="group flex justify-center items-center font-normal text-sm text-gray-700 rounded-md hover:cursor-pointer border-none bg-transparent hover:border-none hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none h-full w-full px-sm"
+          className="group flex justify-center items-center hover:cursor-pointer text-brand-700 border-brand-700 outline-brand-700 rounded-3 border-3 bg-background h-full w-full px-sm font-button-2"
           ref={sortOptionButton}
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
           onFocus={() => setIsFocus(false)}
           onBlur={() => setIsFocus(false)}
         >
-          <SortIcon className="h-md w-md mr-sm stroke-gray-600 m-auto" />
-          {selectedOption ? sortOption : translation.SortDropdown.title}
+          <SortIcon className="h-md w-md mr-sm stroke-brand-700 m-auto" />
+          <span className="font-button-2">
+            {selectedOption ? sortOption : translation.SortDropdown.title}
+          </span>
           <Chevron
-            className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-gray-600 ${
+            className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-brand-700 ${
               isDropdownOpen ? '' : 'rotate-180'
             }`}
           />
@@ -103,24 +105,24 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
           <ul
             ref={listRef}
             tabIndex={-1}
-            className="ds-sdk-sort-dropdown__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
+            className="ds-sdk-sort-dropdown__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
           >
             {sortOptions.map((option, i) => (
               <li
                 key={i}
                 aria-selected={option.value === selectedOption?.value}
                 onMouseOver={() => setActiveIndex(i)}
-                className={`py-xs hover:bg-gray-100 hover:text-gray-900 ${
-                  i === activeIndex ? 'bg-gray-100 text-gray-900' : ''
+                className={`py-xs hover:bg-neutral-200 hover:text-neutral-900 ${
+                  i === activeIndex ? 'bg-neutral-200 text-neutral-900' : ''
                 }}`}
               >
                 <a
                   className={`ds-sdk-sort-dropdown__items--item block-display px-md py-sm text-sm mb-0
               no-underline active:no-underline focus:no-underline hover:no-underline
-              hover:text-gray-900 ${
+              hover:text-neutral-900 ${
                 option.value === selectedOption?.value
-                  ? 'ds-sdk-sort-dropdown__items--item-selected font-semibold text-gray-900'
-                  : 'font-normal text-gray-800'
+                  ? 'ds-sdk-sort-dropdown__items--item-selected font-semibold text-neutral-900'
+                  : 'font-normal text-neutral-800'
               }`}
                   onClick={() => select(option.value)}
                 >
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index cb49bb38..2ab25175 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -66,7 +66,7 @@ export const App: FunctionComponent = () => {
               <div
                 className={`ds-widgets_results flex flex-col items-center ${
                   productsCtx.categoryName ? 'pt-16' : 'pt-28'
-                } w-full h-full`}
+                } flex-[75]`}
               >
                 <ProductsHeader
                   facets={productsCtx.facets}
@@ -96,7 +96,7 @@ export const App: FunctionComponent = () => {
                   </div>
                 </div>
               </div>
-              <div className="ds-widgets_results flex flex-col items-center w-full h-full">
+              <div className="ds-widgets_results flex flex-col items-center flex-[75]">
                 <div className="flex w-full h-full">
                   {!screenSize.mobile &&
                     !productsCtx.loading &&
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index a2507a7a..087dd921 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -84,7 +84,9 @@ export const ProductsContainer: FunctionComponent<Props> = ({
           key={index}
         />
       ) : (
-        `${word} `
+        <span className="font-body-1-default" key={index}>
+          {word}{' '}
+        </span>
       )
     );
   };
diff --git a/src/examples/inputGroupTitleSlot/TextWithTooltip.tsx b/src/examples/inputGroupTitleSlot/TextWithTooltip.tsx
index df5a03f9..31a9781e 100644
--- a/src/examples/inputGroupTitleSlot/TextWithTooltip.tsx
+++ b/src/examples/inputGroupTitleSlot/TextWithTooltip.tsx
@@ -8,13 +8,13 @@ export const TextWithTooltip: FunctionComponent<{
 }> = ({ text, tooltipText }) => {
   return (
     <div class="group">
-      <label className="ds-sdk-input__label text-base font-normal text-gray-900">
+      <label className="ds-sdk-input__label text-base font-normal text-neutral-900">
         {text}
       </label>
       <button>
-        <TooltipIcon className="ds-sdk-input__info h-[15px] w-[15px] inline-block ml-sm cursor-pointer fill-gray-500" />
+        <TooltipIcon className="ds-sdk-input__info h-[15px] w-[15px] inline-block ml-sm cursor-pointer fill-brand-300" />
       </button>
-      <span class="group-hover:opacity-100 min-w-[32px] transition-opacity bg-gray-200 px-1 text-sm text-gray-900 rounded-md opacity-0 m-4">
+      <span class="group-hover:opacity-100 min-w-[32px] transition-opacity bg-neutral-400 px-1 text-sm text-neutral-900 rounded-2 opacity-0 m-4">
         {tooltipText}
       </span>
     </div>
diff --git a/src/styles/index.css b/src/styles/index.css
index dbb452bf..a5dfbaa7 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -15,7 +15,7 @@
     /* 2 */
     border-style: solid;
     /* 2 */
-    border-color: var(--color-gray-2);
+    border-color: #e5e7eb;
     /* 2 */
   }
   ::before,
@@ -320,14 +320,14 @@ Prevent resizing textareas horizontally by default.
   input::-moz-placeholder, textarea::-moz-placeholder {
     opacity: 1;
     /* 1 */
-    color: var(--color-gray-4);
+    color: #9ca3af;
     /* 2 */
   }
   input::placeholder,
 textarea::placeholder {
     opacity: 1;
     /* 1 */
-    color: var(--color-gray-4);
+    color: #9ca3af;
     /* 2 */
   }
   /*
@@ -525,12 +525,21 @@ video {
   .bottom-0 {
     bottom: 0px;
   }
+  .bottom-\[48px\] {
+    bottom: 48px;
+  }
+  .left-0 {
+    left: 0px;
+  }
   .left-1\/2 {
     left: 50%;
   }
   .right-0 {
     right: 0px;
   }
+  .top-\[6\.4rem\] {
+    top: 6.4rem;
+  }
   .z-20 {
     z-index: 20;
   }
@@ -623,6 +632,9 @@ video {
   .mt-xs {
     margin-top: var(--spacing-xs);
   }
+  .box-content {
+    box-sizing: content-box;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -756,6 +768,12 @@ video {
   .flex-1 {
     flex: 1 1 0%;
   }
+  .flex-\[25\] {
+    flex: 25;
+  }
+  .flex-\[75\] {
+    flex: 75;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -889,6 +907,12 @@ video {
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .rounded-2 {
+    border-radius: var(--shape-border-radius-2);
+  }
+  .rounded-3 {
+    border-radius: var(--shape-border-radius-3);
+  }
   .rounded-full {
     border-radius: 9999px;
   }
@@ -904,6 +928,9 @@ video {
   .border-0 {
     border-width: 0px;
   }
+  .border-3 {
+    border-width: var(--shape-border-width-3);
+  }
   .border-\[1\.5px\] {
     border-width: 1.5px;
   }
@@ -920,32 +947,59 @@ video {
     --tw-border-opacity: 1;
     border-color: rgb(0 0 0 / var(--tw-border-opacity));
   }
+  .border-brand-700 {
+    border-color: var(--color-brand-700);
+  }
   .border-gray-200 {
-    border-color: var(--color-gray-2);
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity));
   }
   .border-gray-300 {
-    border-color: var(--color-gray-3);
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  }
+  .border-neutral-200 {
+    border-color: var(--color-neutral-200);
+  }
+  .border-neutral-300 {
+    border-color: var(--color-neutral-300);
+  }
+  .border-neutral-500 {
+    border-color: var(--color-neutral-500);
   }
   .border-transparent {
     border-color: transparent;
   }
+  .bg-background {
+    background-color: var(--background-color);
+  }
   .bg-blue-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(239 246 255 / var(--tw-bg-opacity));
   }
-  .bg-body {
-    background-color: var(--color-body);
+  .bg-brand-500 {
+    background-color: var(--color-brand-500);
   }
   .bg-gray-100 {
-    background-color: var(--color-gray-1);
-  }
-  .bg-gray-200 {
-    background-color: var(--color-gray-2);
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   }
   .bg-green-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(240 253 244 / var(--tw-bg-opacity));
   }
+  .bg-neutral-200 {
+    background-color: var(--color-neutral-200);
+  }
+  .bg-neutral-300 {
+    background-color: var(--color-neutral-300);
+  }
+  .bg-neutral-400 {
+    background-color: var(--color-neutral-400);
+  }
+  .bg-neutral-50 {
+    background-color: var(--color-neutral-50);
+  }
   .bg-red-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 242 242 / var(--tw-bg-opacity));
@@ -961,23 +1015,23 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(254 252 232 / var(--tw-bg-opacity));
   }
-  .fill-gray-500 {
-    fill: var(--color-gray-5);
-  }
-  .fill-gray-700 {
-    fill: var(--color-gray-7);
+  .fill-brand-300 {
+    fill: var(--color-brand-300);
   }
-  .fill-primary {
-    fill: var(--color-primary);
+  .fill-neutral-800 {
+    fill: var(--color-neutral-800);
   }
-  .stroke-gray-400 {
-    stroke: var(--color-gray-4);
+  .stroke-brand-700 {
+    stroke: var(--color-brand-700);
   }
-  .stroke-gray-600 {
-    stroke: var(--color-gray-6);
+  .stroke-neutral-600 {
+    stroke: var(--color-neutral-600);
   }
   .stroke-1 {
-    stroke-width: 1;
+    stroke-width: var(--shape-icon-stroke-1);
+  }
+  .stroke-2 {
+    stroke-width: var(--shape-icon-stroke-2);
   }
   .object-cover {
     -o-object-fit: cover;
@@ -1115,10 +1169,6 @@ video {
     font-size: var(--font-sm);
     line-height: var(--leading-tight);
   }
-  .text-xs {
-    font-size: var(--font-xs);
-    line-height: var(--leading-none);
-  }
   .font-light {
     font-weight: var(--font-light);
   }
@@ -1131,9 +1181,6 @@ video {
   .font-semibold {
     font-weight: var(--font-semibold);
   }
-  .\!text-primary {
-    color: var(--color-primary) !important;
-  }
   .text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1150,20 +1197,22 @@ video {
     --tw-text-opacity: 1;
     color: rgb(30 64 175 / var(--tw-text-opacity));
   }
-  .text-gray-500 {
-    color: var(--color-gray-5);
+  .text-brand-300 {
+    color: var(--color-brand-300);
   }
-  .text-gray-600 {
-    color: var(--color-gray-6);
+  .text-brand-600 {
+    color: var(--color-brand-600);
   }
-  .text-gray-700 {
-    color: var(--color-gray-7);
+  .text-brand-700 {
+    color: var(--color-brand-700);
   }
-  .text-gray-800 {
-    color: var(--color-gray-8);
+  .text-gray-700 {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity));
   }
   .text-gray-900 {
-    color: var(--color-gray-9);
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
   }
   .text-green-400 {
     --tw-text-opacity: 1;
@@ -1181,8 +1230,14 @@ video {
     --tw-text-opacity: 1;
     color: rgb(22 101 52 / var(--tw-text-opacity));
   }
-  .text-primary {
-    color: var(--color-primary);
+  .text-neutral-700 {
+    color: var(--color-neutral-700);
+  }
+  .text-neutral-800 {
+    color: var(--color-neutral-800);
+  }
+  .text-neutral-900 {
+    color: var(--color-neutral-900);
   }
   .text-red-400 {
     --tw-text-opacity: 1;
@@ -1196,9 +1251,6 @@ video {
     --tw-text-opacity: 1;
     color: rgb(153 27 27 / var(--tw-text-opacity));
   }
-  .text-secondary {
-    color: var(--color-secondary);
-  }
   .text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1224,14 +1276,14 @@ video {
   .no-underline {
     text-decoration-line: none;
   }
-  .decoration-black {
-    text-decoration-color: #000;
+  .decoration-brand-700 {
+    text-decoration-color: var(--color-brand-700);
   }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
-  .accent-gray-600 {
-    accent-color: var(--color-gray-6);
+  .accent-neutral-800 {
+    accent-color: var(--color-neutral-800);
   }
   .opacity-0 {
     opacity: 0;
@@ -1244,11 +1296,11 @@ video {
   .outline {
     outline-style: solid;
   }
-  .outline-1 {
-    outline-width: 1px;
+  .outline-brand-700 {
+    outline-color: var(--color-brand-700);
   }
-  .outline-gray-200 {
-    outline-color: var(--color-gray-2);
+  .outline-neutral-300 {
+    outline-color: var(--color-neutral-300);
   }
   .outline-transparent {
     outline-color: transparent;
@@ -1290,24 +1342,121 @@ video {
   .ease-out {
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
-  /* Colors */
-  --color-body: #fff;
-  --color-on-body: #222;
-  --color-surface: #e6e6e6;
-  --color-on-surface: #222;
-  --color-primary: #222;
-  --color-on-primary: #fff;
-  --color-secondary: #ff0000;
-  --color-on-secondary: #fff;
-  --color-gray-1: #f3f4f6;
-  --color-gray-2: #e5e7eb;
-  --color-gray-3: #d1d5db;
-  --color-gray-4: #9ca3af;
-  --color-gray-5: #6b7280;
-  --color-gray-6: #4b5563;
-  --color-gray-7: #374151;
-  --color-gray-8: #1f2937;
-  --color-gray-9: #111827;
+  /* font-size: 1.6rem; */
+  /* Elsie base design */
+  --color-brand-300: #6d6d6d;
+  --color-brand-500: #454545;
+  --color-brand-600: #383838;
+  --color-brand-700: #2b2b2b;
+  --color-neutral-50: #fff;
+  --color-neutral-100: #fafafa;
+  --color-neutral-200: #f5f5f5;
+  --color-neutral-300: #e8e8e8;
+  --color-neutral-400: #d6d6d6;
+  --color-neutral-500: #b8b8b8;
+  --color-neutral-600: #8f8f8f;
+  --color-neutral-700: #666;
+  --color-neutral-800: #3d3d3d;
+  --color-neutral-900: #292929;
+  --grid-1-columns: 4;
+  --grid-1-margins: 0;
+  --grid-1-gutters: 16px;
+  --grid-2-columns: 12;
+  --grid-2-margins: 0;
+  --grid-2-gutters: 16px;
+  --grid-3-columns: 12;
+  --grid-3-margins: 0;
+  --grid-3-gutters: 24px;
+  --grid-4-columns: 12;
+  --grid-4-margins: 0;
+  --grid-4-gutters: 24px;
+  --grid-5-columns: 12;
+  --grid-5-margins: 0;
+  --grid-5-gutters: 24px;
+  --shape-border-radius-1: 3px;
+  --shape-border-radius-2: 8px;
+  --shape-border-radius-3: 24px;
+  --shape-border-width-1: 1px;
+  --shape-border-width-2: 1.5px;
+  --shape-border-width-3: 2px;
+  --shape-border-width-4: 4px;
+  --type-base-font-family: 'Roboto', sans-serif;
+  --type-display-1-font: normal normal 300 6rem/7.2rem
+    var(--type-base-font-family);
+  --type-display-1-letter-spacing: 0.04em;
+  --type-display-2-font: normal normal 300 4.8rem/5.6rem
+    var(--type-base-font-family);
+  --type-display-2-letter-spacing: 0.04em;
+  --type-display-3-font: normal normal 300 3.4rem/4rem
+    var(--type-base-font-family);
+  --type-display-3-letter-spacing: 0.04em;
+  --type-headline-1-font: normal normal 400 2.4rem/3.2rem
+    var(--type-base-font-family);
+  --type-headline-1-letter-spacing: 0.04em;
+  --type-headline-2-default-font: normal normal 300 2rem/2.4rem
+    var(--type-base-font-family);
+  --type-headline-2-default-letter-spacing: 0.04em;
+  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem
+    var(--type-base-font-family);
+  --type-headline-2-strong-letter-spacing: 0.04em;
+  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-body-1-default-letter-spacing: 0.04em;
+  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-body-1-strong-letter-spacing: 0.04em;
+  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-body-1-emphasized-letter-spacing: 0.04em;
+  --type-body-2-default-font: normal normal 300 1.4rem/2rem
+    var(--type-base-font-family);
+  --type-body-2-default-letter-spacing: 0.04em;
+  --type-body-2-strong-font: normal normal 400 1.4rem/2rem
+    var(--type-base-font-family);
+  --type-body-2-strong-letter-spacing: 0.04em;
+  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem
+    var(--type-base-font-family);
+  --type-body-2-emphasized-letter-spacing: 0.04em;
+  --type-button-1-font: normal normal 400 2rem/2.6rem
+    var(--type-base-font-family);
+  --type-button-1-letter-spacing: 0.08em;
+  --type-button-2-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-button-2-letter-spacing: 0.08em;
+  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem
+    var(--type-base-font-family);
+  --type-details-caption-1-letter-spacing: 0.08em;
+  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem
+    var(--type-base-font-family);
+  --type-details-caption-2-letter-spacing: 0.08em;
+  --type-details-overline-font: normal normal 400 1.2rem/2rem
+    var(--type-base-font-family);
+  --type-details-overline-letter-spacing: 0.16em;
+  /* Additional tokens */
+  --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono',
+    monospace;
+  --background-color: var(--color-neutral-50);
+  --nav-height: 6.4rem;
+  --spacing-xxsmall: 4px;
+  --spacing-xsmall: 8px;
+  --spacing-small: 16px;
+  --spacing-medium: 24px;
+  --spacing-big: 32px;
+  --spacing-xbig: 40px;
+  --spacing-xxbig: 48px;
+  --spacing-large: 64px;
+  --spacing-xlarge: 72px;
+  --spacing-xxlarge: 96px;
+  --spacing-huge: 120px;
+  --spacing-xhuge: 144px;
+  --spacing-xxhuge: 192px;
+  --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
+  --shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%);
+  --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
+  --shape-icon-stroke-1: 1px;
+  --shape-icon-stroke-2: 1.5px;
+  --shape-icon-stroke-3: 2px;
+  --shape-icon-stroke-4: 4px;
   /* Spacing: gaps, margin, padding, etc. */
   --spacing-xxs: 0.15625em;
   --spacing-xs: 0.3125em;
@@ -1356,6 +1505,91 @@ video {
   --leading-10: '2.5em';
 }
 
+.font-display-1 {
+  font: var(--type-display-1-font);
+  letter-spacing: var(--type-display-1-letter-spacing);
+}
+
+.font-display-2 {
+  font: var(--type-display-2-font);
+  letter-spacing: var(--type-display-2-letter-spacing);
+}
+
+.font-display-3 {
+  font: var(--type-display-3-font);
+  letter-spacing: var(---type-display-3-letter-spacing);
+}
+
+.font-headline-1 {
+  font: var(--type-headline-1-font);
+  letter-spacing: var(--type-headline-1-letter-spacing);
+}
+
+.font-headline-2-default {
+  font: var(--type-headline-2-default-font);
+  letter-spacing: var(--type-headline-2-default-letter-spacing);
+}
+
+.font-headline-2-strong {
+  font: var(--type-headline-2-strong-font);
+  letter-spacing: var(--type-headline-2-strong-letter-spacing);
+}
+
+.font-body-1-default {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.font-body-1-strong {
+  font: var(--type-body-1-strong-font);
+  letter-spacing: var(--type-body-1-strong-letter-spacing);
+}
+
+.font-body-1-emphasized {
+  font: var(--type-body-1-emphasized-font);
+  letter-spacing: var(--type-body-1-emphasized-letter-spacing);
+}
+
+.font-body-2-default {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+
+.font-body-2-strong {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+}
+
+.font-body-2-emphasized {
+  font: var(--type-body-2-emphasized-font);
+  letter-spacing: var(--type-body-2-emphasized-letter-spacing);
+}
+
+.font-button-1 {
+  font: var(--type-button-1-font);
+  letter-spacing: var(--type-button-1-letter-spacing);
+}
+
+.font-button-2 {
+  font: var(--type-button-2-font);
+  letter-spacing: var(--type-button-2-letter-spacing);
+}
+
+.font-details-caption-1 {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+}
+
+.font-details-caption-2 {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+}
+
+.font-details-overline {
+  font: var(--type-details-overline-font);
+  letter-spacing: var(--type-details-overline-letter-spacing);
+}
+
 .ds-widgets input[type='checkbox'] {
   font-size: 80%;
   margin: 0;
@@ -1389,15 +1623,15 @@ video {
   border-style: none;
 }
 
-.hover\:bg-gray-100:hover {
-  background-color: var(--color-gray-1);
-}
-
 .hover\:bg-green-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-neutral-200:hover {
+  background-color: var(--color-neutral-200);
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
@@ -1407,12 +1641,8 @@ video {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-900:hover {
-  color: var(--color-gray-9);
-}
-
-.hover\:text-primary:hover {
-  color: var(--color-primary);
+.hover\:text-neutral-900:hover {
+  color: var(--color-neutral-900);
 }
 
 .hover\:no-underline:hover {
@@ -1425,14 +1655,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:outline-gray-600:hover {
-  outline-color: var(--color-gray-6);
-}
-
-.hover\:outline-gray-800:hover {
-  outline-color: var(--color-gray-8);
-}
-
 .focus\:border-none:focus {
   border-style: none;
 }
@@ -1570,7 +1792,7 @@ video {
 }
 
 @media (prefers-color-scheme: dark) {
-  .dark\:bg-gray-700 {
-    background-color: var(--color-gray-7);
+  .dark\:bg-neutral-800 {
+    background-color: var(--color-neutral-800);
   }
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 61023b35..c05fb943 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -4,28 +4,129 @@
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
 
-  /* Colors */
-  --color-body: #fff;
-  --color-on-body: #222;
+  /* font-size: 1.6rem; */
 
-  --color-surface: #e6e6e6;
-  --color-on-surface: #222;
+  /* Elsie base design */
+  --color-brand-300: #6d6d6d;
+  --color-brand-500: #454545;
+  --color-brand-600: #383838;
+  --color-brand-700: #2b2b2b;
+  --color-neutral-50: #fff;
+  --color-neutral-100: #fafafa;
+  --color-neutral-200: #f5f5f5;
+  --color-neutral-300: #e8e8e8;
+  --color-neutral-400: #d6d6d6;
+  --color-neutral-500: #b8b8b8;
+  --color-neutral-600: #8f8f8f;
+  --color-neutral-700: #666;
+  --color-neutral-800: #3d3d3d;
+  --color-neutral-900: #292929;
 
-  --color-primary: #222;
-  --color-on-primary: #fff;
+  --grid-1-columns: 4;
+  --grid-1-margins: 0;
+  --grid-1-gutters: 16px;
+  --grid-2-columns: 12;
+  --grid-2-margins: 0;
+  --grid-2-gutters: 16px;
+  --grid-3-columns: 12;
+  --grid-3-margins: 0;
+  --grid-3-gutters: 24px;
+  --grid-4-columns: 12;
+  --grid-4-margins: 0;
+  --grid-4-gutters: 24px;
+  --grid-5-columns: 12;
+  --grid-5-margins: 0;
+  --grid-5-gutters: 24px;
 
-  --color-secondary: #ff0000;
-  --color-on-secondary: #fff;
+  --shape-border-radius-1: 3px;
+  --shape-border-radius-2: 8px;
+  --shape-border-radius-3: 24px;
 
-  --color-gray-1: #f3f4f6;
-  --color-gray-2: #e5e7eb;
-  --color-gray-3: #d1d5db;
-  --color-gray-4: #9ca3af;
-  --color-gray-5: #6b7280;
-  --color-gray-6: #4b5563;
-  --color-gray-7: #374151;
-  --color-gray-8: #1f2937;
-  --color-gray-9: #111827;
+  --shape-border-width-1: 1px;
+  --shape-border-width-2: 1.5px;
+  --shape-border-width-3: 2px;
+  --shape-border-width-4: 4px;
+
+  --type-base-font-family: 'Roboto', sans-serif;
+  --type-display-1-font: normal normal 300 6rem/7.2rem
+    var(--type-base-font-family);
+  --type-display-1-letter-spacing: 0.04em;
+  --type-display-2-font: normal normal 300 4.8rem/5.6rem
+    var(--type-base-font-family);
+  --type-display-2-letter-spacing: 0.04em;
+  --type-display-3-font: normal normal 300 3.4rem/4rem
+    var(--type-base-font-family);
+  --type-display-3-letter-spacing: 0.04em;
+  --type-headline-1-font: normal normal 400 2.4rem/3.2rem
+    var(--type-base-font-family);
+  --type-headline-1-letter-spacing: 0.04em;
+  --type-headline-2-default-font: normal normal 300 2rem/2.4rem
+    var(--type-base-font-family);
+  --type-headline-2-default-letter-spacing: 0.04em;
+  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem
+    var(--type-base-font-family);
+  --type-headline-2-strong-letter-spacing: 0.04em;
+  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-body-1-default-letter-spacing: 0.04em;
+  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-body-1-strong-letter-spacing: 0.04em;
+  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-body-1-emphasized-letter-spacing: 0.04em;
+  --type-body-2-default-font: normal normal 300 1.4rem/2rem
+    var(--type-base-font-family);
+  --type-body-2-default-letter-spacing: 0.04em;
+  --type-body-2-strong-font: normal normal 400 1.4rem/2rem
+    var(--type-base-font-family);
+  --type-body-2-strong-letter-spacing: 0.04em;
+  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem
+    var(--type-base-font-family);
+  --type-body-2-emphasized-letter-spacing: 0.04em;
+  --type-button-1-font: normal normal 400 2rem/2.6rem
+    var(--type-base-font-family);
+  --type-button-1-letter-spacing: 0.08em;
+  --type-button-2-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
+  --type-button-2-letter-spacing: 0.08em;
+  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem
+    var(--type-base-font-family);
+  --type-details-caption-1-letter-spacing: 0.08em;
+  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem
+    var(--type-base-font-family);
+  --type-details-caption-2-letter-spacing: 0.08em;
+  --type-details-overline-font: normal normal 400 1.2rem/2rem
+    var(--type-base-font-family);
+  --type-details-overline-letter-spacing: 0.16em;
+
+  /* Additional tokens */
+  --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono',
+    monospace;
+  --background-color: var(--color-neutral-50);
+  --nav-height: 6.4rem;
+
+  --spacing-xxsmall: 4px;
+  --spacing-xsmall: 8px;
+  --spacing-small: 16px;
+  --spacing-medium: 24px;
+  --spacing-big: 32px;
+  --spacing-xbig: 40px;
+  --spacing-xxbig: 48px;
+  --spacing-large: 64px;
+  --spacing-xlarge: 72px;
+  --spacing-xxlarge: 96px;
+  --spacing-huge: 120px;
+  --spacing-xhuge: 144px;
+  --spacing-xxhuge: 192px;
+
+  --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
+  --shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%);
+  --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
+  --shape-icon-stroke-1: 1px;
+  --shape-icon-stroke-2: 1.5px;
+  --shape-icon-stroke-3: 2px;
+  --shape-icon-stroke-4: 4px;
 
   /* Spacing: gaps, margin, padding, etc. */
   --spacing-xxs: 0.15625em;
@@ -79,6 +180,75 @@
   --leading-10: '2.5em';
 }
 
+.font-display-1 {
+  font: var(--type-display-1-font);
+  letter-spacing: var(--type-display-1-letter-spacing);
+}
+.font-display-2 {
+  font: var(--type-display-2-font);
+  letter-spacing: var(--type-display-2-letter-spacing);
+}
+.font-display-3 {
+  font: var(--type-display-3-font);
+  letter-spacing: var(---type-display-3-letter-spacing);
+}
+.font-headline-1 {
+  font: var(--type-headline-1-font);
+  letter-spacing: var(--type-headline-1-letter-spacing);
+}
+.font-headline-2-default {
+  font: var(--type-headline-2-default-font);
+  letter-spacing: var(--type-headline-2-default-letter-spacing);
+}
+.font-headline-2-strong {
+  font: var(--type-headline-2-strong-font);
+  letter-spacing: var(--type-headline-2-strong-letter-spacing);
+}
+.font-body-1-default {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+.font-body-1-strong {
+  font: var(--type-body-1-strong-font);
+  letter-spacing: var(--type-body-1-strong-letter-spacing);
+}
+.font-body-1-emphasized {
+  font: var(--type-body-1-emphasized-font);
+  letter-spacing: var(--type-body-1-emphasized-letter-spacing);
+}
+.font-body-2-default {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+.font-body-2-strong {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+}
+.font-body-2-emphasized {
+  font: var(--type-body-2-emphasized-font);
+  letter-spacing: var(--type-body-2-emphasized-letter-spacing);
+}
+.font-button-1 {
+  font: var(--type-button-1-font);
+  letter-spacing: var(--type-button-1-letter-spacing);
+}
+.font-button-2 {
+  font: var(--type-button-2-font);
+  letter-spacing: var(--type-button-2-letter-spacing);
+}
+.font-details-caption-1 {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+}
+.font-details-caption-2 {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+}
+.font-details-overline {
+  font: var(--type-details-overline-font);
+  letter-spacing: var(--type-details-overline-letter-spacing);
+}
+
 .ds-widgets input[type='checkbox'] {
   font-size: 80%;
   margin: 0;
diff --git a/tailwind.config.js b/tailwind.config.js
index c435c645..75cc352b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,27 +4,40 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: 'var(--color-primary)',
-        secondary: 'var(--color-secondary)',
-        body: 'var(--color-body)',
-        surface: 'var(--color-surface)',
-        'on-primary': 'var(--color-on-primary)',
-        'on-secondary': 'var(--color--on-secondary)',
-        'on-body': 'var(--color-on-body)',
-        'on-surface': 'var(--color-on-surface)',
-        gray: {
-          100: 'var(--color-gray-1)',
-          200: 'var(--color-gray-2)',
-          300: 'var(--color-gray-3)',
-          400: 'var(--color-gray-4)',
-          500: 'var(--color-gray-5)',
-          600: 'var(--color-gray-6)',
-          700: 'var(--color-gray-7)',
-          800: 'var(--color-gray-8)',
-          900: 'var(--color-gray-9)',
+        background: 'var(--background-color)',
+        neutral: {
+          50: 'var(--color-neutral-50)',
+          100: 'var(--color-neutral-100)',
+          200: 'var(--color-neutral-200)',
+          300: 'var(--color-neutral-300)',
+          400: 'var(--color-neutral-400)',
+          500: 'var(--color-neutral-500)',
+          600: 'var(--color-neutral-600)',
+          700: 'var(--color-neutral-700)',
+          800: 'var(--color-neutral-800)',
+          900: 'var(--color-neutral-900)',
+        },
+        brand: {
+          300: 'var(--color-brand-300)',
+          500: 'var(--color-brand-500)',
+          600: 'var(--color-brand-600)',
+          700: 'var(--color-brand-700)',
         },
       },
       spacing: {
+        xxsmall: 'var(--spacing-xxsmall)',
+        xsmall: 'var(--spacing-xsmall)',
+        small: 'var(--spacing-small)',
+        medium: 'var(--spacing-medium)',
+        big: 'var(--spacing-big)',
+        xbig: 'var(--spacing-xbig)',
+        xxbig: 'var(--spacing-xxbig)',
+        large: 'var(--spacing-large)',
+        xlarge: 'var(--spacing-xlarge)',
+        xxlarge: 'var(--spacing-xxlarge)',
+        huge: 'var(--spacing-huge)',
+        xhuge: 'var(--spacing-xhuge)',
+        xxhuge: 'var(--spacing-xxhuge)',
         xss: 'var(--spacing-xxs)',
         xs: 'var(--spacing-xs)',
         sm: 'var(--spacing-sm)',
@@ -34,6 +47,10 @@ module.exports = {
         '2xl': 'var(--spacing-2xl)',
         '3xl': 'var(--spacing-3xl)',
       },
+      letterSpacing: {
+        display1: 'var(--type-display-1-letter-spacing)',
+        headline2: 'var(--type-headline-2-strong-letter-spacing)',
+      },
       fontFamily: {
         'font-body': 'var(--font-body)',
       },
@@ -75,6 +92,28 @@ module.exports = {
         9: 'var(--leading-9)',
         10: 'var(--leading-10)',
       },
+      borderWidth: {
+        1: 'var(--shape-border-width-1)',
+        2: 'var(--shape-border-width-2)',
+        3: 'var(--shape-border-width-3)',
+        4: 'var(--shape-border-width-4)',
+      },
+      borderRadius: {
+        1: 'var(--shape-border-radius-1)',
+        2: 'var(--shape-border-radius-2)',
+        3: 'var(--shape-border-radius-3)',
+      },
+      dropShadow: {
+        1: 'var(--shape-shadow-1)',
+        2: 'var(--shape-shadow-2)',
+        3: 'var(--shape-shadow-3)',
+      },
+      strokeWidth: {
+        1: 'var(--shape-icon-stroke-1)',
+        2: 'var(--shape-icon-stroke-2)',
+        3: 'var(--shape-icon-stroke-3)',
+        4: 'var(--shape-icon-stroke-4)',
+      },
     },
 
     plugins: [],

From c5c227df2d02be7b642ef6f37fb1a545f0bbc94d Mon Sep 17 00:00:00 2001
From: Kathleen Tynan <ktynan@adobe.com>
Date: Mon, 12 Feb 2024 11:26:20 -0700
Subject: [PATCH 006/160] add elsie base design

---
 README.md                                     |  6 +++---
 .../CategoryFilters/CategoryFilters.tsx       |  2 +-
 src/components/ProductItem/ProductItem.tsx    | 20 +++++++++----------
 .../SliderDoubleControl.tsx                   |  8 ++++----
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   |  6 +++---
 src/containers/App.tsx                        | 12 +++++------
 src/styles/index.css                          | 15 +++++++-------
 7 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index a48c7a53..94b47156 100644
--- a/README.md
+++ b/README.md
@@ -187,8 +187,8 @@ Let's say as if I want to style an element with the theme's primary color. Norma
 Using Tailwind the following produces the exact same result:
 
 ```
-<div class="text-primary">
-  Yippee I am a primary color!
+<div class="text-brand-700">
+  Yippee I am a brand color!
 </div>
 
 ```
@@ -266,7 +266,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     <div className="ds-sdk-product-item group relative flex flex-col max-w-sm justify-between h-full">
         ...
           <div className="flex flex-col">
-            <div className="ds-sdk-product-item__product-name mt-md text-sm text-primary">
+            <div className="ds-sdk-product-item__product-name mt-md text-sm text-brand-700">
               {htmlStringDecode(productView.name)}
             </div>
             <ProductPrice
diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index b0a3fa02..1be7bb6d 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -50,7 +50,7 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
       <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
         {title && <span className="font-display-3"> {title}</span>}
         {!loading && (
-          <span className="text-primary font-button-2">{results}</span>
+          <span className="text-brand-700 font-button-2">{results}</span>
         )}
       </div>
 
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 469d1c82..3a4363e2 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -175,7 +175,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             <a
               href={productUrl as string}
               onClick={onProductClick}
-              className="!text-primary hover:no-underline hover:text-primary"
+              className="!text-brand-700 hover:no-underline hover:text-brand-700"
             >
               {/* Image */}
               {productImageArray.length ? (
@@ -202,19 +202,19 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               <a
                 href={productUrl as string}
                 onClick={onProductClick}
-                className="!text-primary hover:no-underline hover:text-primary"
+                className="!text-brand-700 hover:no-underline hover:text-brand-700"
               >
-                <div className="ds-sdk-product-item__product-name mt-xs text-sm text-primary">
+                <div className="ds-sdk-product-item__product-name mt-xs text-sm text-brand-700">
                   {product.name !== null && htmlStringDecode(product.name)}
                 </div>
-                <div className="ds-sdk-product-item__product-sku mt-xs text-sm text-primary">
+                <div className="ds-sdk-product-item__product-sku mt-xs text-sm text-brand-700">
                   SKU:
                   {product.sku !== null && htmlStringDecode(product.sku)}
                 </div>
               </a>
 
               {/* Swatch */}
-              <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-primary pb-6">
+              <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-brand-700 pb-6">
                 {productView?.options?.map(
                   (swatches) =>
                     swatches.id === 'color' && (
@@ -236,7 +236,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             <a
               href={productUrl as string}
               onClick={onProductClick}
-              className="!text-primary hover:no-underline hover:text-primary"
+              className="!text-brand-700 hover:no-underline hover:text-brand-700"
             >
               <ProductPrice
                 item={refinedProduct ?? item}
@@ -251,11 +251,11 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               />
             </a>
           </div>
-          <div className="product-description text-sm text-primary mt-xs">
+          <div className="product-description text-sm text-brand-700 mt-xs">
             <a
               href={productUrl as string}
               onClick={onProductClick}
-              className="!text-primary hover:no-underline hover:text-primary"
+              className="!text-brand-700 hover:no-underline hover:text-brand-700"
             >
               {product.short_description?.html ? (
                 <>
@@ -295,7 +295,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       <a
         href={productUrl as string}
         onClick={onProductClick}
-        className="!text-primary hover:no-underline hover:text-primary"
+        className="!text-brand-700 hover:no-underline hover:text-brand-700"
       >
         <div className="ds-sdk-product-item__main relative flex flex-col justify-between h-full">
           <div className="ds-sdk-product-item__image relative w-full h-full rounded-2 overflow-hidden">
@@ -350,7 +350,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       </a>
 
       {productView?.options && productView.options?.length > 0 && (
-        <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-primary">
+        <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-brand-700">
           {productView?.options?.map(
             (swatches) =>
               swatches.id == 'color' && (
diff --git a/src/components/SliderDoubleControl/SliderDoubleControl.tsx b/src/components/SliderDoubleControl/SliderDoubleControl.tsx
index ed34da73..d2a7acae 100644
--- a/src/components/SliderDoubleControl/SliderDoubleControl.tsx
+++ b/src/components/SliderDoubleControl/SliderDoubleControl.tsx
@@ -198,7 +198,7 @@ export const SliderDoubleControl: FunctionComponent<SliderProps> = ({
 
   return (
     <div className="ds-sdk-input pt-md">
-      <label className="ds-sdk-input__label text-base font-normal text-gray-900">
+      <label className="ds-sdk-input__label text-base font-normal text-neutral-800">
         {filterData.title}
       </label>
 
@@ -304,13 +304,13 @@ export const SliderDoubleControl: FunctionComponent<SliderProps> = ({
       </div>
 
       <div className={`price-range-display__${filterData.attribute} pb-3`}>
-        <span className="ml-sm block-display text-sm font-light text-gray-700">
+        <span className="ml-sm block-display text-sm font-light text-neutral-700">
           Between{' '}
-          <span className="min-price text-gray-900 font-semibold">
+          <span className="min-price text-neutral-800 font-semibold">
             {formatLabel(minVal)}
           </span>{' '}
           and{' '}
-          <span className="max-price text-gray-900 font-semibold">
+          <span className="max-price text-neutral-800 font-semibold">
             {formatLabel(maxVal)}
           </span>
         </span>
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index a5a31d89..957a841f 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -42,7 +42,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
             return (
               swatch &&
               swatch.type == 'COLOR_HEX' && (
-                <div className="ds-sdk-product-item__product-swatch-item mr-2 text-sm text-primary">
+                <div className="ds-sdk-product-item__product-swatch-item mr-2 text-sm text-brand-700">
                   <SwatchButton
                     id={swatch.id}
                     value={swatch.value}
@@ -55,7 +55,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
             );
           })}
           <a href={productUrl as string} className="hover:no-underline">
-            <div className="ds-sdk-product-item__product-swatch-item text-sm text-primary">
+            <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
               <SwatchButton
                 id={'show-more'}
                 value={`+${swatches.length - numberOfOptions}`}
@@ -72,7 +72,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
           return (
             swatch &&
             swatch.type == 'COLOR_HEX' && (
-              <div className="ds-sdk-product-item__product-swatch-item text-sm text-primary">
+              <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
                 <SwatchButton
                   id={swatch.id}
                   value={swatch.value}
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 2ab25175..fed857eb 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -16,11 +16,11 @@ import Shimmer from 'src/components/Shimmer';
 import { CategoryFilters } from '../components/CategoryFilters';
 import { SelectedFilters } from '../components/Facets';
 import {
-  useProducts,
-  useSearch,
-  useSensor,
-  useStore,
-  useTranslation,
+    useProducts,
+    useSearch,
+    useSensor,
+    useStore,
+    useTranslation,
 } from '../context';
 import { ProductsContainer } from './ProductsContainer';
 import { ProductsHeader } from './ProductsHeader';
@@ -88,7 +88,7 @@ export const App: FunctionComponent = () => {
                     <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
                       {title && <span> {title}</span>}
                       {!productsCtx.loading && (
-                        <span className="text-primary text-sm">
+                        <span className="text-brand-700 text-sm">
                           {getResults(productsCtx.totalCount)}
                         </span>
                       )}
diff --git a/src/styles/index.css b/src/styles/index.css
index a5dfbaa7..c0515503 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1181,6 +1181,9 @@ video {
   .font-semibold {
     font-weight: var(--font-semibold);
   }
+  .\!text-brand-700 {
+    color: var(--color-brand-700) !important;
+  }
   .text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1206,14 +1209,6 @@ video {
   .text-brand-700 {
     color: var(--color-brand-700);
   }
-  .text-gray-700 {
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81 / var(--tw-text-opacity));
-  }
-  .text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39 / var(--tw-text-opacity));
-  }
   .text-green-400 {
     --tw-text-opacity: 1;
     color: rgb(74 222 128 / var(--tw-text-opacity));
@@ -1641,6 +1636,10 @@ video {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.hover\:text-brand-700:hover {
+  color: var(--color-brand-700);
+}
+
 .hover\:text-neutral-900:hover {
   color: var(--color-neutral-900);
 }

From 719a2d6fe11b6277790e006cf6db80a9d956d6c3 Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Mon, 11 Mar 2024 17:43:08 +0100
Subject: [PATCH 007/160] Replace MSE SDK with direct access to ACDL

---
 dev-template.html                          |  70 ++++++------
 src/api/search.ts                          |  22 ++--
 src/components/ProductItem/ProductItem.tsx |  14 ++-
 src/context/events.tsx                     | 123 ++++++++++-----------
 src/types/globals.d.ts                     |   4 +-
 5 files changed, 113 insertions(+), 120 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 93a5f19b..adba2697 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -13,6 +13,11 @@
     referrerpolicy="no-referrer"
   />
 
+  <script
+    type="text/javascript"
+    src="https://unpkg.com/@adobe/adobe-client-data-layer@2.0.2/dist/adobe-client-data-layer.min.js"
+  ></script>
+  
   <script
     type="text/javascript"
     src="https://unpkg.com/@adobe/magento-storefront-events-sdk@qa/dist/index.js"
@@ -102,44 +107,33 @@
       // Will result to `http://localhost:8081/v1/MT11`
     };
 
-    const mse = window.magentoStorefrontEvents;
-
-    mse.context.setMagentoExtension({
-      magentoExtensionVersion: '1.0.0',
-    });
-    mse.context.setSearchExtension({
-      version: '2.0.3',
-    });
-    mse.context.setShopper({ shopperId: 'logged-in' });
-
-    mse.context.setPage({
-      pageType: 'plp',
-      maxXOffset: 0,
-      maxYOffset: 0,
-      minXOffset: 0,
-      minYOffset: 0,
-      ping_interval: 5,
-      pings: 1,
-    });
-
-    mse.context.setStorefrontInstance({
-      environmentId: '',
-      instanceId: 'bbbbbb',
-      environment: 'ccccccc',
-      storeUrl: '',
-      websiteId: 123456,
-      websiteCode: '',
-      storeId: 123456,
-      storeCode: '',
-      storeViewId: 123456,
-      storeViewCode: '',
-      websiteName: '',
-      storeName: '',
-      storeViewName: '',
-      baseCurrencyCode: 'USD',
-      storeViewCurrencyCode: 'USD',
-      catalogExtensionVersion: '1.0.0',
-    });
+    window.adobeDataLayer = window.adobeDataLayer || [];
+    window.adobeDataLayer.push(
+      { 'magentoExtensionContext': { magentoExtensionVersion: '1.0.0' } },
+      { 'searchExtensionContext': { version: '2.0.3'} },
+      { 'shopperContext': { shopperId: 'logged-in' } },
+      { 'pageContext': { pageType: 'plp', maxXOffset: 0, maxYOffset: 0, minXOffset: 0, minYOffset: 0, ping_interval: 5, pings: 1 } },
+      {
+        'storefrontInstanceContext': {
+          environmentId: '',
+          instanceId: 'bbbbbb',
+          environment: 'ccccccc',
+          storeUrl: '',
+          websiteId: 123456,
+          websiteCode: '',
+          storeId: 123456,
+          storeCode: '',
+          storeViewId: 123456,
+          storeViewCode: '',
+          websiteName: '',
+          storeName: '',
+          storeViewName: '',
+          baseCurrencyCode: 'USD',
+          storeViewCurrencyCode: 'USD',
+          catalogExtensionVersion: '1.0.0',
+        }
+      }
+    );
 
     setTimeout(async () => {
       while (typeof window.LiveSearchPLP !== 'function') {
diff --git a/src/api/search.ts b/src/api/search.ts
index c2216480..82f6a406 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -113,10 +113,9 @@ const getProductSearch = async ({
     sort
   );
 
-  const magentoStorefrontEvtPublish = window.magentoStorefrontEvents?.publish;
-
-  magentoStorefrontEvtPublish?.searchRequestSent &&
-    magentoStorefrontEvtPublish.searchRequestSent(SEARCH_UNIT_ID);
+  window.adobeDataLayer.push((dl : any) => {
+    dl.push({ event: 'search-request-sent', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+  })
   // ======  end of data collection =====
 
   const response = await fetch(apiUrl, {
@@ -136,15 +135,18 @@ const getProductSearch = async ({
     results?.data?.productSearch
   );
 
-  magentoStorefrontEvtPublish?.searchResponseReceived &&
-    magentoStorefrontEvtPublish.searchResponseReceived(SEARCH_UNIT_ID);
+  window.adobeDataLayer.push((dl : any) => {
+    dl.push({ event: 'search-response-received', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+  });
 
   if (categorySearch) {
-    magentoStorefrontEvtPublish?.categoryResultsView &&
-      magentoStorefrontEvtPublish.categoryResultsView(SEARCH_UNIT_ID);
+    window.adobeDataLayer.push((dl : any) => {
+      dl.push({ event: 'category-results-view', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+    });
   } else {
-    magentoStorefrontEvtPublish?.searchResultsView &&
-      magentoStorefrontEvtPublish.searchResultsView(SEARCH_UNIT_ID);
+    window.adobeDataLayer.push((dl : any) => {
+      dl.push({ event: 'search-results-view', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+    });
   }
   // ======  end of data collection =====
 
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 3a4363e2..64126ba6 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -128,10 +128,16 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const isConfigurable = product?.__typename === 'ConfigurableProduct';
 
   const onProductClick = () => {
-    window.magentoStorefrontEvents?.publish.searchProductClick(
-      SEARCH_UNIT_ID,
-      product?.sku
-    );
+    window.adobeDataLayer.push((dl: any) => {
+      dl.push({
+        event: 'search-product-click',
+        eventInfo: {
+          ...dl.getState(),
+          sku: product?.sku,
+          searchUnitId: SEARCH_UNIT_ID,
+        },
+      });
+    });
   };
 
   const productUrl = setRoute
diff --git a/src/context/events.tsx b/src/context/events.tsx
index 921e6296..83022dba 100644
--- a/src/context/events.tsx
+++ b/src/context/events.tsx
@@ -29,39 +29,35 @@ const updateSearchInputCtx = (
   currentPage: number,
   sort: Array<SearchSort>
 ): void => {
-  const mse = window.magentoStorefrontEvents;
-  if (!mse) {
-    // don't break search if events are broken/not loading
-    return;
-  }
-
-  const searchInputCtx = mse.context.getSearchInput() ?? { units: [] };
-
-  // create search input unit
-  const searchInputUnit: SearchInputUnit = {
-    searchUnitId,
-    searchRequestId,
-    queryTypes: ['products', 'suggestions'],
-    phrase,
-    pageSize,
-    currentPage,
-    filter: filters,
-    sort,
-  };
-
-  // find search input unit index
-  const searchInputUnitIndex = searchInputCtx.units.findIndex(
-    (unit) => unit.searchUnitId === searchUnitId
-  );
-
-  // update search input unit
-  if (searchInputUnitIndex < 0) {
-    searchInputCtx.units.push(searchInputUnit);
-  } else {
-    searchInputCtx.units[searchInputUnitIndex] = searchInputUnit;
-  }
-
-  mse.context.setSearchInput(searchInputCtx);
+  window.adobeDataLayer.push((dl : any) => {
+    const searchInputCtx = dl.getState('searchInputContext') ?? { units: [] };
+
+    // create search input unit
+    const searchInputUnit: SearchInputUnit = {
+      searchUnitId,
+      searchRequestId,
+      queryTypes: ['products', 'suggestions'],
+      phrase,
+      pageSize,
+      currentPage,
+      filter: filters,
+      sort,
+    };
+
+    // find search input unit index
+    const searchInputUnitIndex = searchInputCtx.units.findIndex(
+      (unit : any) => unit.searchUnitId === searchUnitId
+    );
+
+    // update search input unit
+    if (searchInputUnitIndex < 0) {
+      searchInputCtx.units.push(searchInputUnit);
+    } else {
+      searchInputCtx.units[searchInputUnitIndex] = searchInputUnit;
+    }
+
+    dl.push({ searchInputContext: searchInputCtx });
+  });
 };
 
 const updateSearchResultsCtx = (
@@ -69,38 +65,35 @@ const updateSearchResultsCtx = (
   searchRequestId: string,
   results: ProductSearchResponse['data']['productSearch']
 ): void => {
-  const mse = window.magentoStorefrontEvents;
-  if (!mse) {
-    // don't break search if events are broken/not loading
-    return;
-  }
-  const searchResultsCtx = mse.context.getSearchResults() ?? { units: [] };
-
-  // find search result unit index
-  const searchResultUnitIndex = searchResultsCtx.units.findIndex(
-    (unit) => unit.searchUnitId === searchUnitId
-  );
-
-  // create search result unit
-  const searchResultUnit: SearchResultUnit = {
-    searchUnitId,
-    searchRequestId,
-    products: createProducts(results.items),
-    categories: [],
-    suggestions: createSuggestions(results.suggestions),
-    page: results?.page_info?.current_page || 1,
-    perPage: results?.page_info?.page_size || 20,
-    facets: createFacets(results.facets),
-  };
-
-  // update search result unit
-  if (searchResultUnitIndex < 0) {
-    searchResultsCtx.units.push(searchResultUnit);
-  } else {
-    searchResultsCtx.units[searchResultUnitIndex] = searchResultUnit;
-  }
-
-  mse.context.setSearchResults(searchResultsCtx);
+  window.adobeDataLayer.push((dl : any) => {
+    const searchResultsCtx = dl.getState('searchResultsContext') ?? { units: [] };
+
+    // find search result unit index
+    const searchResultUnitIndex = searchResultsCtx.units.findIndex(
+      (unit : any) => unit.searchUnitId === searchUnitId
+    );
+
+    // create search result unit
+    const searchResultUnit: SearchResultUnit = {
+      searchUnitId,
+      searchRequestId,
+      products: createProducts(results.items),
+      categories: [],
+      suggestions: createSuggestions(results.suggestions),
+      page: results?.page_info?.current_page || 1,
+      perPage: results?.page_info?.page_size || 20,
+      facets: createFacets(results.facets),
+    };
+
+    // update search result unit
+    if (searchResultUnitIndex < 0) {
+      searchResultsCtx.units.push(searchResultUnit);
+    } else {
+      searchResultsCtx.units[searchResultUnitIndex] = searchResultUnit;
+    }
+
+    dl.push({ searchResultsContext: searchResultsCtx });
+  });
 };
 
 const createProducts = (
diff --git a/src/types/globals.d.ts b/src/types/globals.d.ts
index 396d152e..640abead 100644
--- a/src/types/globals.d.ts
+++ b/src/types/globals.d.ts
@@ -7,14 +7,12 @@ accordance with the terms of the Adobe license agreement accompanying
 it.
 */
 
-import { MagentoStorefrontEvents } from '@adobe/magento-storefront-events-sdk';
-
 export {};
 
 declare global {
   interface Window {
     LiveSearchPLP: typeof import('../index');
-    magentoStorefrontEvents: MagentoStorefrontEvents;
+    adobeDataLayer: any;
   }
   const Sentry: any;
   const API_URL: string;

From 54b9f345bdbe29d940dc06976c90b41175af4dce Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:16:45 +0100
Subject: [PATCH 008/160] Add missing categoryContext

---
 README.md                |  1 +
 dev-template.html        |  3 ++-
 src/api/queries.ts       | 49 ++++++++++++++++++++++++++++++++--------
 src/api/search.ts        | 14 ++++++++----
 src/context/products.tsx |  5 +++-
 src/types/interface.ts   |  2 ++
 6 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 94b47156..859eb342 100644
--- a/README.md
+++ b/README.md
@@ -123,6 +123,7 @@ const storeDetails = {
         displayOutOfStock: true,
         allowAllProducts: false,
         currentCategoryUrlPath?: string;
+        currentCategoryId?: string;
         categoryName: '', // name of category to display
         displaySearchBox: false, // display search box
         displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
diff --git a/dev-template.html b/dev-template.html
index adba2697..386456df 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -73,7 +73,8 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        // currentCategoryUrlPath?: '', // current category url path
+        // currentCategoryUrlPath?: '', // current category url path, please prefer using currentCategoryId
+        // currentCategoryId?: '', // current category id
         // categoryName: '', // name of category to display
         // displaySearchBox: false, // display search box
         // displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
diff --git a/src/api/queries.ts b/src/api/queries.ts
index 05993673..e0678277 100644
--- a/src/api/queries.ts
+++ b/src/api/queries.ts
@@ -57,15 +57,8 @@ const QUICK_SEARCH_QUERY = `
     ${Product}
 `;
 
-const PRODUCT_SEARCH_QUERY = `
-    query productSearch(
-        $phrase: String!
-        $pageSize: Int
-        $currentPage: Int = 1
-        $filter: [SearchClauseInput!]
-        $sort: [ProductSearchSortInput!]
-        $context: QueryContextInput
-    ) {
+const ProductSearchQueryFragment = `
+    fragment PRODUCT_SEARCH on Query {
         productSearch(
             phrase: $phrase
             page_size: $pageSize
@@ -96,9 +89,46 @@ const PRODUCT_SEARCH_QUERY = `
             }
         }
     }
+`;
+
+const PRODUCT_SEARCH_QUERY = `
+    query productSearch(
+        $phrase: String!
+        $pageSize: Int
+        $currentPage: Int = 1
+        $filter: [SearchClauseInput!]
+        $sort: [ProductSearchSortInput!]
+        $context: QueryContextInput
+    ) {
+        ...PRODUCT_SEARCH
+    }
+    ${Product}
+    ${ProductView}
+    ${Facet}
+    ${ProductSearchQueryFragment}
+`;
+
+const CATEGORY_QUERY = `
+    query categoryQuery(
+        $categoryId: String!
+        $phrase: String!
+        $pageSize: Int
+        $currentPage: Int = 1
+        $filter: [SearchClauseInput!]
+        $sort: [ProductSearchSortInput!]
+        $context: QueryContextInput
+    ) {
+        categories(ids: [$categoryId]) {
+            name
+            urlKey
+            urlPath
+        }
+        ...PRODUCT_SEARCH
+    }
     ${Product}
     ${ProductView}
     ${Facet}
+    ${ProductSearchQueryFragment}
 `;
 
 const REFINE_PRODUCT_QUERY = `
@@ -199,4 +229,5 @@ export {
   PRODUCT_SEARCH_QUERY,
   QUICK_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
+  CATEGORY_QUERY,
 };
diff --git a/src/api/search.ts b/src/api/search.ts
index 82f6a406..29ef1871 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -22,6 +22,7 @@ import {
 import { SEARCH_UNIT_ID } from '../utils/constants';
 import {
   ATTRIBUTE_METADATA_QUERY,
+  CATEGORY_QUERY,
   PRODUCT_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
 } from './queries';
@@ -55,6 +56,7 @@ const getProductSearch = async ({
   sort = [],
   context,
   categorySearch = false,
+  categoryId,
 }: ProductSearchQuery & ClientProps): Promise<
   ProductSearchResponse['data']
 > => {
@@ -64,6 +66,7 @@ const getProductSearch = async ({
     currentPage,
     filter,
     sort,
+    categoryId,
     context,
   };
 
@@ -118,16 +121,16 @@ const getProductSearch = async ({
   })
   // ======  end of data collection =====
 
-  const response = await fetch(apiUrl, {
+  const query = categorySearch && categoryId ? CATEGORY_QUERY : PRODUCT_SEARCH_QUERY;
+  const results = await fetch(apiUrl, {
     method: 'POST',
     headers,
     body: JSON.stringify({
-      query: PRODUCT_SEARCH_QUERY,
+      query: query.replace(/(?:\r\n|\r|\n|\t|[\s]{4})/g, ' ').replace(/\s\s+/g, ' '),
       variables: { ...variables },
     }),
-  });
+  }).then((res) => res.json());
 
-  const results = await response.json();
   // ======  initialize data collection =====
   updateSearchResultsCtx(
     SEARCH_UNIT_ID,
@@ -139,8 +142,9 @@ const getProductSearch = async ({
     dl.push({ event: 'search-response-received', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
   });
 
-  if (categorySearch) {
+  if (categorySearch && categoryId) {
     window.adobeDataLayer.push((dl : any) => {
+      dl.push({ categoryContext: results?.data?.categories?.[0] });
       dl.push({ event: 'category-results-view', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
     });
   } else {
diff --git a/src/context/products.tsx b/src/context/products.tsx
index a7c8fbcd..3fb60081 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -167,6 +167,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     return storeCtx?.config?.minQueryLength || DEFAULT_MIN_QUERY_LENGTH;
   }, [storeCtx?.config.minQueryLength]);
   const categoryPath = storeCtx.config?.currentCategoryUrlPath;
+  const categoryId = storeCtx.config?.currentCategoryId;
 
   const viewTypeFromUrl = getValueFromUrl('view_type');
   const [viewType, setViewType] = useState<string>(
@@ -232,6 +233,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     pageLoading,
     setPageLoading,
     categoryPath,
+    categoryId,
     viewType,
     setViewType,
     listViewType,
@@ -256,7 +258,8 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
           ...storeCtx,
           apiUrl: storeCtx.apiUrl,
           filter: filters,
-          categorySearch: !!categoryPath,
+          categorySearch: !!categoryPath || !!categoryId,
+          categoryId,
         });
 
         setItems(data?.productSearch?.items || []);
diff --git a/src/types/interface.ts b/src/types/interface.ts
index d956ccf1..b3283a56 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -36,6 +36,7 @@ export interface StoreDetailsConfig {
   currencySymbol?: string;
   currencyRate?: string;
   currentCategoryUrlPath?: string;
+  currentCategoryId?: string;
   categoryName?: string;
   displaySearchBox?: boolean;
   displayOutOfStock?: string | boolean; // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
@@ -91,6 +92,7 @@ export interface ProductSearchQuery {
   context?: QueryContextInput;
   data?: QueryData;
   categorySearch?: boolean;
+  categoryId?: string;
 }
 
 export interface RefineProductQuery {

From 5fd944dfa1d0f8d19fed239162d948fdfff6340e Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:32:20 +0100
Subject: [PATCH 009/160] Add categoryIds filter

---
 src/context/products.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/context/products.tsx b/src/context/products.tsx
index 3fb60081..d813c389 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -251,7 +251,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
       if (checkMinQueryLength()) {
         const filters = [...variables.filter];
 
-        handleCategorySearch(categoryPath, filters);
+        handleCategorySearch(categoryPath, categoryId, filters);
 
         const data = await getProductSearch({
           ...variables,
@@ -335,20 +335,32 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
 
   const handleCategorySearch = (
     categoryPath: string | undefined,
+    categoryId: string | undefined,
     filters: FacetFilter[]
   ) => {
+    if (!categoryPath || !categoryId) {
+      return;
+    }
+
     if (categoryPath) {
-      //add category filter
       const categoryFilter = {
         attribute: 'categoryPath',
         eq: categoryPath,
       };
       filters.push(categoryFilter);
+    }
 
-      //add default category sort
-      if (variables.sort.length < 1 || variables.sort === SEARCH_SORT_DEFAULT) {
-        variables.sort = CATEGORY_SORT_DEFAULT;
-      }
+    if (categoryId) {
+      const categoryIdFilter = {
+        attribute: 'categoryIds',
+        eq: categoryId,
+      };
+      filters.push(categoryIdFilter);
+    }
+
+    //add default category sort
+    if (variables.sort.length < 1 || variables.sort === SEARCH_SORT_DEFAULT) {
+      variables.sort = CATEGORY_SORT_DEFAULT;
     }
   };
 

From b15d5dee219f0a221cbbbadfbd86bb701b34beab Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Thu, 14 Mar 2024 14:02:43 +0100
Subject: [PATCH 010/160] Add categoryContext to PLP

---
 src/containers/ProductsHeader.tsx | 5 +++--
 src/context/products.tsx          | 3 ++-
 src/utils/sort.ts                 | 5 +++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/containers/ProductsHeader.tsx b/src/containers/ProductsHeader.tsx
index f5a64712..54df787e 100644
--- a/src/containers/ProductsHeader.tsx
+++ b/src/containers/ProductsHeader.tsx
@@ -62,7 +62,8 @@ export const ProductsHeader: FunctionComponent<Props> = ({
         translation,
         attributeMetadata?.sortable,
         storeCtx?.config?.displayOutOfStock,
-        storeCtx?.config?.currentCategoryUrlPath
+        storeCtx?.config?.currentCategoryUrlPath,
+        storeCtx?.config?.currentCategoryId
       )
     );
   }, [storeCtx, translation, attributeMetadata]);
@@ -71,7 +72,7 @@ export const ProductsHeader: FunctionComponent<Props> = ({
     getSortOptions();
   }, [getSortOptions]);
 
-  const defaultSortOption = storeCtx.config?.currentCategoryUrlPath
+  const defaultSortOption = (storeCtx.config?.currentCategoryUrlPath || storeCtx.config?.currentCategoryId)
     ? 'position_ASC'
     : 'relevance_DESC';
   const sortFromUrl = getValueFromUrl('product_list_order');
diff --git a/src/context/products.tsx b/src/context/products.tsx
index d813c389..ac14c643 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -286,6 +286,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
   const checkMinQueryLength = () => {
     if (
       !storeCtx.config?.currentCategoryUrlPath &&
+      !storeCtx.config?.currentCategoryId &&
       searchCtx.phrase.trim().length <
         (Number(storeCtx.config.minQueryLength) || DEFAULT_MIN_QUERY_LENGTH)
     ) {
@@ -338,7 +339,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     categoryId: string | undefined,
     filters: FacetFilter[]
   ) => {
-    if (!categoryPath || !categoryId) {
+    if (!categoryPath && !categoryId) {
       return;
     }
 
diff --git a/src/utils/sort.ts b/src/utils/sort.ts
index ad10ac84..9ba5c01f 100644
--- a/src/utils/sort.ts
+++ b/src/utils/sort.ts
@@ -22,9 +22,10 @@ const getSortOptionsfromMetadata = (
   translation: Language,
   sortMetadata: SortMetadata[],
   displayOutOfStock?: string | boolean,
-  categoryPath?: string
+  categoryPath?: string,
+  categoryId?: string,
 ): SortOption[] => {
-  const sortOptions = categoryPath
+  const sortOptions = categoryPath || categoryId
     ? [
         {
           label: translation.SortDropdown.positionLabel,

From c4b7cbd785777a8ece27c1f19219aded3fb42ee0 Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Fri, 22 Mar 2024 14:36:21 +0100
Subject: [PATCH 011/160] set wilson connection details. Temp fix for images

---
 dev-template.html                          | 12 ++++++------
 src/components/ProductItem/ProductItem.tsx | 14 +++++++++++++-
 webpack.dev.js                             |  2 +-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 386456df..955136a3 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -17,7 +17,7 @@
     type="text/javascript"
     src="https://unpkg.com/@adobe/adobe-client-data-layer@2.0.2/dist/adobe-client-data-layer.min.js"
   ></script>
-  
+
   <script
     type="text/javascript"
     src="https://unpkg.com/@adobe/magento-storefront-events-sdk@qa/dist/index.js"
@@ -57,10 +57,10 @@
   <script type="text/javascript">
     const root = document.querySelector('div.search-plp-root');
     const storeDetails = {
-      environmentId: '',
-      websiteCode: '',
-      storeCode: '',
-      storeViewCode: '',
+      environmentId: '331e4848-1413-4428-8e26-75924f47a8b8',
+      websiteCode: 'wil_us',
+      storeCode: 'wil_us',
+      storeViewCode: 'wil_us_en',
       config: {
         minQueryLength: '2',
         pageSize: 8,
@@ -90,7 +90,7 @@
         // addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
       },
       context: {
-        customerGroup: '',
+        customerGroup: '0',
       },
       apiKey: '',
       environmentType: '',
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 64126ba6..0578909d 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -90,6 +90,18 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     setCarouselIndex(0);
   };
 
+  /** TEMP FIX to show image of the first variant per product */
+  const loadProductImagesFromRefinedProduct = async (optionIds: string[], sku: string) => {
+    const data = await refineProduct(optionIds, sku);
+    setImagesFromRefinedProduct(data.refineProduct.images);
+  };
+
+  if (!productView.images?.length && !imagesFromRefinedProduct){
+    const optionId = productView.options?.[0]?.values?.[0]?.id || '';
+    loadProductImagesFromRefinedProduct([optionId], productView.sku);
+  }
+  /** END TEMP FIX to show image of the first variant per product */
+
   const isSelected = (id: string) => {
     const selected = selectedSwatch ? selectedSwatch === id : false;
     return selected;
@@ -340,7 +352,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               />
             </div>
 
-            {/* 
+            {/*
             //TODO: Wishlist button to be added later
             {flags.addToWishlist && widgetConfig.addToWishlist.enabled && (
               // TODO: Remove flag during phase 3 MSRCH-4278
diff --git a/webpack.dev.js b/webpack.dev.js
index 99ea9265..aca9a2dd 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -12,7 +12,7 @@ module.exports = merge(commonConfig, {
   },
   plugins: [
     new webpack.DefinePlugin({
-      API_URL: JSON.stringify('https://catalog-service.adobe.io/graphql'),
+      API_URL: JSON.stringify('https://catalog-service-sandbox.adobe.io/graphql'),
       TEST_URL: JSON.stringify(
         'https://catalog-service-sandbox.adobe.io/graphql'
       ),

From be8ff6d6410229deaac1b22850a8d751e1b0760b Mon Sep 17 00:00:00 2001
From: david catalan <catalan@adobe.com>
Date: Thu, 28 Mar 2024 15:32:46 +0100
Subject: [PATCH 012/160] feat: plp implementation wip

---
 dev-template.html                             |   4 +-
 package.json                                  |   3 +-
 .../CategoryFilters/CategoryFilters.tsx       |  28 +--
 src/components/ImageHover/ImageHover.css      |   7 +
 .../ImageHover/ImageHover.stories.mdx         |  32 ++++
 src/components/ImageHover/ImageHover.test.tsx |  26 +++
 src/components/ImageHover/ImageHover.tsx      |  35 ++++
 src/components/ImageHover/index.ts            |  11 ++
 .../ProductCardShimmer/ProductCardShimmer.css |   4 +
 src/components/ProductItem/ProductItem.tsx    | 174 +++++++++++-------
 src/components/ProductItem/ProductPrice.tsx   |  46 ++---
 src/components/ProductList/ProductList.tsx    |   2 +-
 src/components/SortDropdown/SortDropdown.tsx  |   5 +-
 src/components/SwatchButton/SwatchButton.tsx  |  24 +++
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   |  27 ++-
 src/containers/App.tsx                        |   2 +-
 src/containers/ProductsHeader.tsx             |  41 +++--
 src/i18n/en_US.ts                             |   2 +-
 src/index.tsx                                 |   1 +
 src/styles/index.css                          |  59 +++---
 src/styles/tokens.css                         |   7 +
 21 files changed, 389 insertions(+), 151 deletions(-)
 create mode 100644 src/components/ImageHover/ImageHover.css
 create mode 100644 src/components/ImageHover/ImageHover.stories.mdx
 create mode 100644 src/components/ImageHover/ImageHover.test.tsx
 create mode 100644 src/components/ImageHover/ImageHover.tsx
 create mode 100644 src/components/ImageHover/index.ts

diff --git a/dev-template.html b/dev-template.html
index 955136a3..03fdf03b 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -47,9 +47,9 @@
       --color-primary: black;
     }
 
-    .ds-sdk-product-item__product-name {
+    /* .ds-sdk-product-item__product-name {
       text-transform: uppercase;
-    }
+    } */
   </style>
 
   <script type="text/javascript" src="search.js"></script>
diff --git a/package.json b/package.json
index 3daf47c3..dcbde6aa 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "lint:fix": "eslint '*/**/*.{ts,tsx}' --fix",
     "prettier:fix": "prettier 'src/**/*.{ts,tsx,json,md}' --write",
     "test": "jest --passWithNoTests --color --silent",
-    "cleanup": "rimraf dist"
+    "cleanup": "rimraf dist",
+    "copy-build-search": "cp -r dist/search.js"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 1be7bb6d..ac6bcbc2 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -27,21 +27,21 @@ interface CategoryFiltersProps {
 }
 
 export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
-  loading,
+  // loading,
   pageLoading,
   totalCount,
   facets,
-  categoryName,
-  phrase,
-  setShowFilters,
-  filterCount,
+  // categoryName,
+  // phrase,
+  // setShowFilters,
+  // filterCount,
 }) => {
   const translation = useTranslation();
-  let title = categoryName || '';
-  if (phrase) {
-    const text = translation.CategoryFilters.results;
-    title = text.replace('{phrase}', `"${phrase}"`);
-  }
+  const title = translation.Filter.title; // categoryName || '';
+  // if (phrase) {
+  //   const text = translation.CategoryFilters.results;
+  //   title = text.replace('{phrase}', `"${phrase}"`);
+  // }
   const resultsTranslation = translation.CategoryFilters.products;
   const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);
 
@@ -49,21 +49,21 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
     <div class="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col overflow-y-auto top-[6.4rem] right-0 bottom-[48px] left-0 box-content">
       <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
         {title && <span className="font-display-3"> {title}</span>}
-        {!loading && (
+        {/* {!loading && (
           <span className="text-brand-700 font-button-2">{results}</span>
-        )}
+        )} */}
       </div>
 
       {!pageLoading && facets.length > 0 && (
         <>
           <div className="flex pb-4">
-            <FilterButton
+            {/* <FilterButton
               displayFilter={() => setShowFilters(false)}
               type="desktop"
               title={`${translation.Filter.hideTitle}${
                 filterCount > 0 ? ` (${filterCount})` : ''
               }`}
-            />
+            /> */}
           </div>
           <Facets searchFacets={facets} />
         </>
diff --git a/src/components/ImageHover/ImageHover.css b/src/components/ImageHover/ImageHover.css
new file mode 100644
index 00000000..4cef2885
--- /dev/null
+++ b/src/components/ImageHover/ImageHover.css
@@ -0,0 +1,7 @@
+.ds-sdk-product-image-hover {
+  background-image: var(--image-url);
+}
+
+.ds-sdk-product-image-hover:hover {
+  background-image: var(--hover-url);
+}
\ No newline at end of file
diff --git a/src/components/ImageHover/ImageHover.stories.mdx b/src/components/ImageHover/ImageHover.stories.mdx
new file mode 100644
index 00000000..a6ef09f3
--- /dev/null
+++ b/src/components/ImageHover/ImageHover.stories.mdx
@@ -0,0 +1,32 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { ImageHover } from '../ImageHover';
+
+<Meta
+  title="PLP/ImageHover"
+  component={ImageHover}
+  parameters={{
+    layout: 'centered',
+  }}
+/>
+
+export const Template = (args) => <ImageHover {...args} />;
+
+# ImageHover
+
+```
+import { ImageHover } from '../ImageHover'
+```
+
+<Canvas>
+  <Story
+    name="Block"
+    args={{
+      images: [
+        'https://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+        'http://master-7rqtwti-grxawiljl6f4y.us-4.magentosite.cloud/media/catalog/product/l/u/luma-foam-roller.jpg',
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/ImageHover/ImageHover.test.tsx b/src/components/ImageHover/ImageHover.test.tsx
new file mode 100644
index 00000000..6654c887
--- /dev/null
+++ b/src/components/ImageHover/ImageHover.test.tsx
@@ -0,0 +1,26 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { render } from '@testing-library/preact';
+
+import { ImageHover } from './ImageHover';
+
+describe('WidgetSDK - UIKit/ImageCarousel', () => {
+  test('renders', () => {
+    const { container } = render(
+      <ImageHover
+        images={[]}
+      />
+    );
+
+    const elem = container.querySelector('.ds-sdk-product-image-hover');
+
+    expect(!!elem).toEqual(true);
+  });
+});
diff --git a/src/components/ImageHover/ImageHover.tsx b/src/components/ImageHover/ImageHover.tsx
new file mode 100644
index 00000000..a5882056
--- /dev/null
+++ b/src/components/ImageHover/ImageHover.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+import './ImageHover.css';
+
+export interface ImageCarouselProps {
+  images: string[] | { src: string; srcset: any }[];
+}
+
+export const ImageHover: FunctionComponent<ImageCarouselProps> = ({
+  images,
+}) => {
+
+    return (
+      <>
+        {images.length > 1 && (
+          <link rel="preload" as="image" href={typeof images[1] === 'object' ? images[1].src : images[1]} />
+        )}
+        <div class="ds-sdk-product-image-hover h-[250px] max-w-2xl m-auto bg-contain bg-no-repeat bg-position-center"
+            style={{
+              '--image-url': `url('${typeof images[0] === 'object' ? images[0].src : images[0]}')`,
+              '--hover-url': `url('${typeof images[1] === 'object' ? images[1].src : images[1]}')`,
+            }}
+          />
+      </>
+    );
+};
diff --git a/src/components/ImageHover/index.ts b/src/components/ImageHover/index.ts
new file mode 100644
index 00000000..8b8dac04
--- /dev/null
+++ b/src/components/ImageHover/index.ts
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './ImageHover';
+export { ImageHover as default } from './ImageHover';
diff --git a/src/components/ProductCardShimmer/ProductCardShimmer.css b/src/components/ProductCardShimmer/ProductCardShimmer.css
index 822645a0..1c4e82f6 100644
--- a/src/components/ProductCardShimmer/ProductCardShimmer.css
+++ b/src/components/ProductCardShimmer/ProductCardShimmer.css
@@ -1,3 +1,7 @@
+/* .ds-sdk-product-item {
+  border: 1px solid #e5e7eb;
+} */
+
 .ds-sdk-product-item--shimmer {
   margin: 0.625rem auto;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 0.5rem 1.5rem;
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 0578909d..59fb0e7f 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -12,7 +12,7 @@ import { useState } from 'preact/hooks';
 
 import '../ProductItem/ProductItem.css';
 
-import { useCart, useProducts, useSensor, useStore } from '../../context';
+import { useCart, useProducts, useStore } from '../../context';
 import NoImage from '../../icons/NoImage.svg';
 import {
   Product,
@@ -27,7 +27,7 @@ import {
 } from '../../utils/getProductImage';
 import { htmlStringDecode } from '../../utils/htmlStringDecode';
 import { AddToCartButton } from '../AddToCartButton';
-import { ImageCarousel } from '../ImageCarousel';
+import ImageHover from '../ImageHover';
 import { SwatchButtonGroup } from '../SwatchButtonGroup';
 import ProductPrice from './ProductPrice';
 
@@ -47,6 +47,10 @@ export interface ProductProps {
   ) => Promise<void | undefined>;
 }
 
+const SWATCH_COLORS = 'Colors';
+const SWATCH_COLORS_TEAM = 'Colors / Team';
+const SWATCH_COLORS_TEAM_NAME = 'Colors / Team name';
+
 export const ProductItem: FunctionComponent<ProductProps> = ({
   item,
   currencySymbol,
@@ -59,39 +63,40 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   addToCart,
 }: ProductProps) => {
   const { product, productView } = item;
-  const [carouselIndex, setCarouselIndex] = useState(0);
   const [selectedSwatch, setSelectedSwatch] = useState('');
   const [imagesFromRefinedProduct, setImagesFromRefinedProduct] = useState<
     ProductViewMedia[] | null
   >();
   const [refinedProduct, setRefinedProduct] = useState<RefinedProduct>();
-  const [isHovering, setIsHovering] = useState(false);
+  // const [isHovering, setIsHovering] = useState(false);
   const { addToCartGraphQL, refreshCart } = useCart();
   const { viewType } = useProducts();
   const {
-    config: { optimizeImages, imageBaseWidth, imageCarousel, listview },
+    config: { optimizeImages, imageBaseWidth, listview },
   } = useStore();
 
-  const { screenSize } = useSensor();
+  console.log('BIM!!');
 
-  const handleMouseOver = () => {
-    setIsHovering(true);
-  };
+  // const { screenSize } = useSensor();
 
-  const handleMouseOut = () => {
-    setIsHovering(false);
-  };
+  // const handleMouseOver = () => {
+  //   setIsHovering(true);
+  // };
+
+  // const handleMouseOut = () => {
+  //   setIsHovering(false);
+  // };
 
   const handleSelection = async (optionIds: string[], sku: string) => {
     const data = await refineProduct(optionIds, sku);
     setSelectedSwatch(optionIds[0]);
     setImagesFromRefinedProduct(data.refineProduct.images);
     setRefinedProduct(data);
-    setCarouselIndex(0);
   };
-
+  
   /** TEMP FIX to show image of the first variant per product */
   const loadProductImagesFromRefinedProduct = async (optionIds: string[], sku: string) => {
+    console.log('loadProductImagesFromRefinedProduct', optionIds, sku);
     const data = await refineProduct(optionIds, sku);
     setImagesFromRefinedProduct(data.refineProduct.images);
   };
@@ -107,11 +112,14 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     return selected;
   };
 
+  console.log('imagesFromRefinedProduct', imagesFromRefinedProduct);
+  console.log('productView.images', productView.images);
+
   const productImageArray = imagesFromRefinedProduct
-    ? getProductImageURLs(imagesFromRefinedProduct ?? [], imageCarousel ? 3 : 1)
+    ? getProductImageURLs(imagesFromRefinedProduct ?? [], 2)
     : getProductImageURLs(
         productView.images ?? [],
-        imageCarousel ? 3 : 1, // number of images to display in carousel
+        2,
         product.image?.url ?? undefined
       );
   let optimizedImageArray: { src: string; srcset: any }[] = [];
@@ -123,6 +131,10 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     );
   }
 
+  console.log('optimizedImageArray', optimizedImageArray);
+  console.log('optimizedImageArray.length', optimizedImageArray.length);
+  console.log('productImageArray', productImageArray);
+
   // will have to figure out discount logic for amount_off and percent_off still
   const discount: boolean = refinedProduct
     ? refinedProduct.refineProduct?.priceRange?.minimum?.regular?.amount
@@ -188,7 +200,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       <>
         <div className="grid-container">
           <div
-            className={`product-image ds-sdk-product-item__image relative rounded-md overflow-hidden}`}
+            className={`product-image ds-sdk-product-item__image relative overflow-hidden}`}
           >
             <a
               href={productUrl as string}
@@ -197,15 +209,13 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             >
               {/* Image */}
               {productImageArray.length ? (
-                <ImageCarousel
+                <ImageHover
                   images={
                     optimizedImageArray.length
                       ? optimizedImageArray
                       : productImageArray
                   }
-                  productName={product.name}
-                  carouselIndex={carouselIndex}
-                  setCarouselIndex={setCarouselIndex}
+                  // productName={product.name}
                 />
               ) : (
                 <NoImage
@@ -215,7 +225,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             </a>
           </div>
           <div className="product-details">
-            <div className="flex flex-col w-1/3">
+            <div className="flex flex-col w-1/3 p-2">
               {/* Product name */}
               <a
                 href={productUrl as string}
@@ -234,18 +244,20 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               {/* Swatch */}
               <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-brand-700 pb-6">
                 {productView?.options?.map(
-                  (swatches) =>
-                    swatches.id === 'color' && (
-                      <SwatchButtonGroup
-                        key={productView?.sku}
-                        isSelected={isSelected}
-                        swatches={swatches.values ?? []}
-                        showMore={onProductClick}
-                        productUrl={productUrl as string}
-                        onClick={handleSelection}
-                        sku={productView?.sku}
-                      />
-                    )
+                  (swatches) => {
+                      // swatches.id === 'color' && (
+                     return swatches.title === SWATCH_COLORS && (
+                        <SwatchButtonGroup
+                          key={productView?.sku}
+                          isSelected={isSelected}
+                          swatches={swatches.values ?? []}
+                          showMore={onProductClick}
+                          productUrl={productUrl as string}
+                          onClick={handleSelection}
+                          sku={productView?.sku}
+                        />
+                      )
+                  }
                 )}
               </div>
             </div>
@@ -303,12 +315,12 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   return (
     <div
-      className="ds-sdk-product-item group relative flex flex-col max-w-sm justify-between h-full hover:border-[1.5px] border-solid hover:shadow-lg border-offset-2 p-2"
+      className="ds-sdk-product-item group relative flex flex-col w-full justify-between h-full"
       style={{
         'border-color': '#D5D5D5',
       }}
-      onMouseEnter={handleMouseOver}
-      onMouseLeave={handleMouseOut}
+      // onMouseEnter={handleMouseOver}
+      // onMouseLeave={handleMouseOut}
     >
       <a
         href={productUrl as string}
@@ -316,17 +328,15 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
         className="!text-brand-700 hover:no-underline hover:text-brand-700"
       >
         <div className="ds-sdk-product-item__main relative flex flex-col justify-between h-full">
-          <div className="ds-sdk-product-item__image relative w-full h-full rounded-2 overflow-hidden">
+          <div className="ds-sdk-product-item__image relative w-full h-full h-[445px] overflow-hidden">
             {productImageArray.length ? (
-              <ImageCarousel
+              <ImageHover
                 images={
                   optimizedImageArray.length
                     ? optimizedImageArray
                     : productImageArray
                 }
-                productName={product.name}
-                carouselIndex={carouselIndex}
-                setCarouselIndex={setCarouselIndex}
+                // productName={product.name}
               />
             ) : (
               <NoImage
@@ -334,9 +344,63 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               />
             )}
           </div>
-          <div className="flex flex-row">
+
+      {productView?.options && productView.options?.length > 0 && (
+        <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-brand-700 p-2">
+          {productView?.options?.map(
+            (swatches) => {
+              if (swatches.title === SWATCH_COLORS) {
+                // // console.log('v', v);
+                // swatches.values?.forEach((v) => {
+                //   console.log('productView', productView.name);
+                //   console.log('v', v);
+                // });
+
+                return (
+                  <SwatchButtonGroup
+                    key={product?.sku}
+                    isSelected={isSelected}
+                    swatches={swatches.values ?? []}
+                    showMore={onProductClick}
+                    productUrl={productUrl as string}
+                    onClick={handleSelection}
+                    sku={product?.sku}
+                  />
+                );
+              } else if ([SWATCH_COLORS_TEAM, SWATCH_COLORS_TEAM_NAME].includes(swatches.title || '')) {
+                console.log('swatches', swatches);
+                // console.log(swatches.values?.map((s) => s.id))
+                // console.log('product?.sku', refinedProduct?.refineProduct.sku);
+                  // const ddd = await refineProduct(swatches.values?.map((s) => s.id) || [], "WF40035$");
+                  // console.log('refineProduct data', ddd);
+
+                // swatches.values?.forEach((v) => {
+                //   console.log('productView', productView.name);
+                //   console.log('v', v);
+                // });
+
+                return (
+                  <SwatchButtonGroup
+                    key={product?.sku}
+                    isSelected={isSelected}
+                    swatches={swatches.values ?? []}
+                    showMore={onProductClick}
+                    productUrl={productUrl as string}
+                    onClick={handleSelection}
+                    sku={product?.sku}
+                  />
+                );
+              }
+
+
+            }
+          )}
+        </div>
+      )}
+
+          <div className="flex flex-row p-2">
             <div className="flex flex-col">
-              <div className="ds-sdk-product-item__product-name font-headline-2-strong">
+              <div className="ds-sdk-product-item__product-name font-medium text-lg">
                 {product.name !== null && htmlStringDecode(product.name)}
               </div>
               <ProductPrice
@@ -367,30 +431,12 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
         </div>
       </a>
 
-      {productView?.options && productView.options?.length > 0 && (
-        <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-brand-700">
-          {productView?.options?.map(
-            (swatches) =>
-              swatches.id == 'color' && (
-                <SwatchButtonGroup
-                  key={product?.sku}
-                  isSelected={isSelected}
-                  swatches={swatches.values ?? []}
-                  showMore={onProductClick}
-                  productUrl={productUrl as string}
-                  onClick={handleSelection}
-                  sku={product?.sku}
-                />
-              )
-          )}
-        </div>
-      )}
-        <div className="pb-4 mt-sm">
+        {/* <div className="pb-4 mt-sm">
           {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
           {isHovering && screenSize.desktop && (
             <AddToCartButton onClick={handleAddToCart} />
           )}
-        </div>
+        </div> */}
     </div>
   );
 };
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index dc1e5154..6de241bb 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -37,6 +37,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   currencySymbol,
   currencyRate,
 }: ProductPriceProps) => {
+  console.log('discount', discount);
   const translation = useContext(TranslationContext);
   let price;
 
@@ -59,21 +60,21 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
     return bundlePriceTranslationOrder.map((word: string, index: any) =>
       word === '{fromBundlePrice}' ? (
         <span
-          className="text-brand-600 font-headline-2-default mr-xs"
+          className="text-brand-600 font-headline-4-default mr-xs"
           key={index}
         >
           {getProductPrice(item, currencySymbol, currencyRate, false, true)}
         </span>
       ) : word === '{toBundlePrice}' ? (
         <span
-          className="text-brand-600 font-headline-2-default mr-xs"
+          className="text-brand-600 font-headline-4-default mr-xs"
           key={index}
         >
           {getProductPrice(item, currencySymbol, currencyRate, true, true)}
         </span>
       ) : (
         <span
-          className="text-brand-300 font-headline-2-default mr-xs"
+          className="text-brand-300 font-headline-4-default mr-xs"
           key={index}
         >
           {word}
@@ -112,7 +113,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
         <span className="line-through pr-2 text-brand-300">
           {getProductPrice(item, currencySymbol, currencyRate, false, false)}
         </span>
-        <span className="font-headline-2-strong">
+        <span className="font-headline-4-strong">
           {getProductPrice(item, currencySymbol, currencyRate, false, true)}
         </span>
       </>
@@ -122,18 +123,19 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
     const discountedPriceTranslation = translation.ProductCard.asLowAs;
     const discountedPriceTranslationOrder =
       discountedPriceTranslation.split('{discountPrice}');
-    return discountedPriceTranslationOrder.map((word: string, index: any) =>
-      word === '' ? (
-        discountPrice
-      ) : (
-        <span
-          className="text-brand-300 font-headline-2-default mr-xs"
-          key={index}
-        >
-          {word}
-        </span>
-      )
-    );
+    return discountPrice;
+    // return discountedPriceTranslationOrder.map((word: string, index: any) =>
+    //   word === '' ? (
+    //     discountPrice
+    //   ) : (
+    //     <span
+    //       className="text-brand-300 font-headline-4-default mr-xs"
+    //       key={index}
+    //     >
+    //       {word}
+    //     </span>
+    //   )
+    // );
   };
 
   return (
@@ -145,7 +147,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
             !isConfigurable &&
             !isComplexProductView &&
             discount && (
-              <p className="ds-sdk-product-price--discount mt-xs font-headline-2-strong">
+              <p className="ds-sdk-product-price--discount mt-xs font-headline-4-strong">
                 <span className="line-through pr-2 text-brand-300">
                   {getProductPrice(
                     item,
@@ -173,7 +175,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
             !isConfigurable &&
             !isComplexProductView &&
             !discount && (
-              <p className="ds-sdk-product-price--no-discount mt-xs font-headline-2-strong">
+              <p className="ds-sdk-product-price--no-discount mt-xs font-headline-4-strong">
                 {getProductPrice(
                   item,
                   currencySymbol,
@@ -186,20 +188,20 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
 
           {isBundle && (
             <div className="ds-sdk-product-price--bundle">
-              <p className="mt-xs font-headline-2-default">
+              <p className="mt-xs font-headline-4-default">
                 {getBundledPrice(item, currencySymbol, currencyRate)}
               </p>
             </div>
           )}
 
           {isGrouped && (
-            <p className="ds-sdk-product-price--grouped mt-xs font-headline-2-strong">
+            <p className="ds-sdk-product-price--grouped mt-xs font-headline-4-strong">
               {getPriceFormat(item, currencySymbol, currencyRate, false)}
             </p>
           )}
 
           {isGiftCard && (
-            <p className="ds-sdk-product-price--gift-card mt-xs font-headline-2-strong">
+            <p className="ds-sdk-product-price--gift-card mt-xs font-headline-4-strong">
               {getPriceFormat(item, currencySymbol, currencyRate, true)}
             </p>
           )}
@@ -207,7 +209,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
           {!isGrouped &&
             !isBundle &&
             (isConfigurable || isComplexProductView) && (
-              <p className="ds-sdk-product-price--configurable mt-xs font-headline-2-strong">
+              <p className="ds-sdk-product-price--configurable mt-xs font-headline-4-strong">
                 {getDiscountedPrice(discount)}
               </p>
             )}
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 57a06794..2e5ef47d 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -107,7 +107,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
           style={{
             gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
           }}
-          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-2xl xl:gap-x-8"
+          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-md xl:gap-x-6"
         >
           {products?.map((product) => (
             <ProductItem
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index a366b9df..02b2e258 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -82,8 +82,11 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     <>
       <div
         ref={sortOptionMenu}
-        class="ds-sdk-sort-dropdown relative inline-block text-left bg-neutral-50 h-[32px] z-9"
+        class="flex shrink-0 ds-sdk-sort-dropdown relative inline-block text-left bg-neutral-50 h-[32px] z-9"
       >
+        <label className="ds-sdk-input__label w-32 shrink-0 text-base font-normal text-neutral-900">
+          {translation.SortDropdown.title}:
+        </label>
         <button
           className="group flex justify-center items-center hover:cursor-pointer text-brand-700 border-brand-700 outline-brand-700 rounded-3 border-3 bg-background h-full w-full px-sm font-button-2"
           ref={sortOptionButton}
diff --git a/src/components/SwatchButton/SwatchButton.tsx b/src/components/SwatchButton/SwatchButton.tsx
index e38219d3..5c7a2d28 100644
--- a/src/components/SwatchButton/SwatchButton.tsx
+++ b/src/components/SwatchButton/SwatchButton.tsx
@@ -29,6 +29,29 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
     ? 'border-transparent'
     : 'border-gray';
 
+  if (type === 'TEXT') {
+    // const color = `swatch-color-${value.toLowerCase().replaceAll(' ', '-')}`; // tokenize the text value
+    const color = value.toLowerCase();
+    const mockColor = value.split(' ')[0].toLowerCase();
+    const className = `min-w-[44px] p-sm border border-[1.5px] ${outlineColor} h-[44px] outline-transparent`;
+    const isWhite = color === '#ffffff' || color === '#fff';
+    return (
+      <div className={`ds-sdk-swatch-button_${id}`}>
+        <button
+          title={value}
+          key={id}
+          className={className}
+          style={{
+            backgroundColor: id === 'show-more' ? null : mockColor,
+            border: !checked && isWhite ? '1px solid #ccc' : undefined,
+          }}
+          onClick={onClick}
+          checked={checked}
+        >{id === 'show-more' ? '+' : ''}</button>
+      </div>
+    );
+  }
+  
   if (type === 'COLOR_HEX') {
     const color = value.toLowerCase();
     const className = `min-w-[32px] rounded-full p-sm border border-[1.5px] ${outlineColor} h-[32px] outline-transparent`;
@@ -36,6 +59,7 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
     return (
       <div className={`ds-sdk-swatch-button_${id}`}>
         <button
+          title={value}
           key={id}
           className={className}
           style={{
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index 957a841f..8aaf470a 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -21,7 +21,7 @@ export interface SwatchButtonGroupProps {
   sku: string;
 }
 
-const MAX_SWATCHES = 5;
+const MAX_SWATCHES = 4;
 
 export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   isSelected,
@@ -33,6 +33,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
 }: SwatchButtonGroupProps) => {
   const moreSwatches = swatches.length > MAX_SWATCHES;
   const numberOfOptions = moreSwatches ? MAX_SWATCHES - 1 : swatches.length;
+  console.log('SwatchButtonGroup', swatches, numberOfOptions, moreSwatches);
   return (
     <div className="ds-sdk-product-item__product-swatch-group flex column items-center space-x-2">
       {moreSwatches ? (
@@ -41,7 +42,18 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
             const checked = isSelected(swatch.id);
             return (
               swatch &&
-              swatch.type == 'COLOR_HEX' && (
+              swatch.type == 'TEXT' && (
+                <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
+                  <SwatchButton
+                    id={swatch.id}
+                    value={swatch.value}
+                    type={swatch.type}
+                    checked={!!checked}
+                    onClick={() => onClick([swatch.id], sku)}
+                  />
+                </div>
+              ) ||
+                swatch.type == 'COLOR_HEX' && (
                 <div className="ds-sdk-product-item__product-swatch-item mr-2 text-sm text-brand-700">
                   <SwatchButton
                     id={swatch.id}
@@ -71,6 +83,17 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
           const checked = isSelected(swatch.id);
           return (
             swatch &&
+            swatch.type == 'TEXT' && (
+              <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
+                <SwatchButton
+                  id={swatch.id}
+                  value={swatch.value}
+                  type={swatch.type}
+                  checked={!!checked}
+                  onClick={() => onClick([swatch.id], sku)}
+                />
+              </div>
+            ) ||
             swatch.type == 'COLOR_HEX' && (
               <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
                 <SwatchButton
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index fed857eb..1c4085e2 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -73,7 +73,7 @@ export const App: FunctionComponent = () => {
                   totalCount={productsCtx.totalCount}
                   screenSize={screenSize}
                 />
-                <SelectedFilters />
+                {/* <SelectedFilters /> */}
 
                 <ProductsContainer showFilters={showFilters} />
               </div>
diff --git a/src/containers/ProductsHeader.tsx b/src/containers/ProductsHeader.tsx
index 54df787e..1487fc36 100644
--- a/src/containers/ProductsHeader.tsx
+++ b/src/containers/ProductsHeader.tsx
@@ -88,34 +88,43 @@ export const ProductsHeader: FunctionComponent<Props> = ({
     <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
       <div
         className={`flex gap-x-2.5 mb-[1px] ${
-          screenSize.mobile ? 'justify-between' : 'justify-end'
+          screenSize.mobile ? 'justify-between' : 'justify-between'
         }`}
       >
-        <div>
+        {/* <div> */}
           {screenSize.mobile
-            ? totalCount > 0 && (
+            && totalCount > 0 && (
                 <div className="pb-4">
                   <FilterButton
                     displayFilter={() => setShowMobileFacet(!showMobileFacet)}
                     type="mobile"
                   />
                 </div>
+              
               )
-            : storeCtx.config.displaySearchBox && (
-                <SearchBar
-                  phrase={searchCtx.phrase}
-                  onKeyPress={(e: any) => {
-                    if (e.key === 'Enter') {
-                      searchCtx.setPhrase(e?.target?.value);
-                    }
-                  }}
-                  onClear={() => searchCtx.setPhrase('')}
-                  placeholder={translation.SearchBar.placeholder}
-                />
-              )}
-        </div>
+            
+            // storeCtx.config.displaySearchBox && (
+              //     <SearchBar
+            //       phrase={searchCtx.phrase}
+            //       onKeyPress={(e: any) => {
+              //         if (e.key === 'Enter') {
+                //           searchCtx.setPhrase(e?.target?.value);
+            //         }
+            //       }}
+            //       onClear={() => searchCtx.setPhrase('')}
+            //       placeholder={translation.SearchBar.placeholder}
+            //     />
+            //   )}
+          }
+        {/* </div> */}
         {totalCount > 0 && (
           <>
+            <div>
+            {`${
+                totalCount > 0 ? `${totalCount}` : ''
+              } ${translation.CategoryFilters.results}`}
+            </div>
+
             {storeCtx?.config?.listview && <ViewSwitcher />}
 
             <SortDropdown
diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts
index d750f3db..f5b92af4 100644
--- a/src/i18n/en_US.ts
+++ b/src/i18n/en_US.ts
@@ -33,7 +33,7 @@ export const en_US = {
   },
   SortDropdown: {
     title: 'Sort by',
-    option: 'Sort by: {selectedOption}',
+    option: '{selectedOption}',
     relevanceLabel: 'Most Relevant',
     positionLabel: 'Position',
     sortAttributeASC: '{label}: Low to High',
diff --git a/src/index.tsx b/src/index.tsx
index 930a5943..7bfffd6b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,7 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
 accordance with the terms of the Adobe license agreement accompanying
 it.
 */
+// import 'preact/debug';
 
 import { render } from 'preact';
 
diff --git a/src/styles/index.css b/src/styles/index.css
index c0515503..f3bf3577 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -674,12 +674,21 @@ video {
   .h-\[20px\] {
     height: 20px;
   }
+  .h-\[250px\] {
+    height: 250px;
+  }
   .h-\[32px\] {
     height: 32px;
   }
   .h-\[38px\] {
     height: 38px;
   }
+  .h-\[445px\] {
+    height: 445px;
+  }
+  .h-\[44px\] {
+    height: 44px;
+  }
   .h-auto {
     height: auto;
   }
@@ -710,6 +719,9 @@ video {
   .w-28 {
     width: 7rem;
   }
+  .w-32 {
+    width: 8rem;
+  }
   .w-5 {
     width: 1.25rem;
   }
@@ -747,6 +759,9 @@ video {
   .min-w-\[32px\] {
     min-width: 32px;
   }
+  .min-w-\[44px\] {
+    min-width: 44px;
+  }
   .max-w-2xl {
     max-width: 42rem;
   }
@@ -762,9 +777,6 @@ video {
   .max-w-full {
     max-width: 100%;
   }
-  .max-w-sm {
-    max-width: 24rem;
-  }
   .flex-1 {
     flex: 1 1 0%;
   }
@@ -777,6 +789,9 @@ video {
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .origin-top-right {
     transform-origin: top right;
   }
@@ -872,10 +887,6 @@ video {
     -moz-column-gap: 0.625rem;
          column-gap: 0.625rem;
   }
-  .gap-x-2xl {
-    -moz-column-gap: var(--spacing-2xl);
-         column-gap: var(--spacing-2xl);
-  }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
          column-gap: var(--spacing-md);
@@ -919,9 +930,6 @@ video {
   .rounded-lg {
     border-radius: 0.5rem;
   }
-  .rounded-md {
-    border-radius: 0.375rem;
-  }
   .border {
     border-width: 1px;
   }
@@ -937,9 +945,6 @@ video {
   .border-t {
     border-top-width: 1px;
   }
-  .border-solid {
-    border-style: solid;
-  }
   .border-none {
     border-style: none;
   }
@@ -1015,6 +1020,12 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(254 252 232 / var(--tw-bg-opacity));
   }
+  .bg-contain {
+    background-size: contain;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
   .fill-brand-300 {
     fill: var(--color-brand-300);
   }
@@ -1498,6 +1509,8 @@ video {
   --leading-8: '2em';
   --leading-9: '2.25em';
   --leading-10: '2.5em';
+  /* Colors Swatches Text */
+  --color-port-royale: #5128b1;
 }
 
 .font-display-1 {
@@ -1602,6 +1615,10 @@ video {
   transform: translate(-50%, -50%);
 }
 
+.ds-sdk-product-item__product-swatch-item .swatch-color-port-royale {
+  background-color: var(--color-port-royale);
+}
+
 .first\:ml-0:first-child {
   margin-left: 0px;
 }
@@ -1610,10 +1627,6 @@ video {
   cursor: pointer;
 }
 
-.hover\:border-\[1\.5px\]:hover {
-  border-width: 1.5px;
-}
-
 .hover\:border-none:hover {
   border-style: none;
 }
@@ -1648,12 +1661,6 @@ video {
   text-decoration-line: none;
 }
 
-.hover\:shadow-lg:hover {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .focus\:border-none:focus {
   border-style: none;
 }
@@ -1784,9 +1791,9 @@ video {
          column-gap: 1rem;
   }
 
-  .xl\:gap-x-8 {
-    -moz-column-gap: 2rem;
-         column-gap: 2rem;
+  .xl\:gap-x-6 {
+    -moz-column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
 }
 
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index c05fb943..e8a0b58c 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -178,6 +178,9 @@
   --leading-8: '2em';
   --leading-9: '2.25em';
   --leading-10: '2.5em';
+
+  /* Colors Swatches Text */
+  --color-port-royale: #5128b1;
 }
 
 .font-display-1 {
@@ -265,3 +268,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.ds-sdk-product-item__product-swatch-item .swatch-color-port-royale {
+  background-color: var(--color-port-royale);
+}

From 12bbcb8290a5dbaec748f54d6b3bc105f58aa17c Mon Sep 17 00:00:00 2001
From: david catalan <catalan@adobe.com>
Date: Fri, 5 Apr 2024 13:55:40 +0200
Subject: [PATCH 013/160] fix: background image in product item tile

---
 src/components/ImageHover/ImageHover.tsx   |  2 +-
 src/components/ProductItem/ProductItem.tsx | 30 +++++++++++++---------
 src/styles/index.css                       | 13 ++++++++--
 src/styles/tokens.css                      |  8 ++++++
 src/utils/getProductImage.ts               |  6 ++++-
 5 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/ImageHover/ImageHover.tsx b/src/components/ImageHover/ImageHover.tsx
index a5882056..803e7861 100644
--- a/src/components/ImageHover/ImageHover.tsx
+++ b/src/components/ImageHover/ImageHover.tsx
@@ -24,7 +24,7 @@ export const ImageHover: FunctionComponent<ImageCarouselProps> = ({
         {images.length > 1 && (
           <link rel="preload" as="image" href={typeof images[1] === 'object' ? images[1].src : images[1]} />
         )}
-        <div class="ds-sdk-product-image-hover h-[250px] max-w-2xl m-auto bg-contain bg-no-repeat bg-position-center"
+        <div class="ds-sdk-product-image-hover h-[250px] max-w-2xl m-auto bg-cover bg-no-repeat bg-position-center"
             style={{
               '--image-url': `url('${typeof images[0] === 'object' ? images[0].src : images[0]}')`,
               '--hover-url': `url('${typeof images[1] === 'object' ? images[1].src : images[1]}')`,
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 59fb0e7f..a676e2fb 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -12,7 +12,7 @@ import { useState } from 'preact/hooks';
 
 import '../ProductItem/ProductItem.css';
 
-import { useCart, useProducts, useStore } from '../../context';
+import { useCart, useProducts, useSensor, useStore } from '../../context';
 import NoImage from '../../icons/NoImage.svg';
 import {
   Product,
@@ -68,7 +68,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     ProductViewMedia[] | null
   >();
   const [refinedProduct, setRefinedProduct] = useState<RefinedProduct>();
-  // const [isHovering, setIsHovering] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
   const { addToCartGraphQL, refreshCart } = useCart();
   const { viewType } = useProducts();
   const {
@@ -76,16 +76,15 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   } = useStore();
 
   console.log('BIM!!');
+  const { screenSize } = useSensor();
 
-  // const { screenSize } = useSensor();
-
-  // const handleMouseOver = () => {
-  //   setIsHovering(true);
-  // };
+  const handleMouseOver = () => {
+    setIsHovering(true);
+  };
 
-  // const handleMouseOut = () => {
-  //   setIsHovering(false);
-  // };
+  const handleMouseOut = () => {
+    setIsHovering(false);
+  };
 
   const handleSelection = async (optionIds: string[], sku: string) => {
     const data = await refineProduct(optionIds, sku);
@@ -319,8 +318,8 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       style={{
         'border-color': '#D5D5D5',
       }}
-      // onMouseEnter={handleMouseOver}
-      // onMouseLeave={handleMouseOut}
+      onMouseEnter={handleMouseOver}
+      onMouseLeave={handleMouseOut}
     >
       <a
         href={productUrl as string}
@@ -343,6 +342,13 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                 className={`max-h-[45rem] w-full object-cover object-center lg:w-full`}
               />
             )}
+            {<div className="absolute left-0 right-0 bottom-0 p-xs">
+          {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
+          {isHovering && screenSize.desktop && (
+            <AddToCartButton onClick={handleAddToCart} />
+          )}
+        </div>}
+
           </div>
 
       {productView?.options && productView.options?.length > 0 && (
diff --git a/src/styles/index.css b/src/styles/index.css
index f3bf3577..3d6dc8a8 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1020,8 +1020,8 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(254 252 232 / var(--tw-bg-opacity));
   }
-  .bg-contain {
-    background-size: contain;
+  .bg-cover {
+    background-size: cover;
   }
   .bg-no-repeat {
     background-repeat: no-repeat;
@@ -1513,6 +1513,10 @@ video {
   --color-port-royale: #5128b1;
 }
 
+.bg-position-center {
+  background-position: center;
+}
+
 .font-display-1 {
   font: var(--type-display-1-font);
   letter-spacing: var(--type-display-1-letter-spacing);
@@ -1619,6 +1623,11 @@ video {
   background-color: var(--color-port-royale);
 }
 
+
+.ds-sdk-product-image-hover {
+  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
+}
+
 .first\:ml-0:first-child {
   margin-left: 0px;
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index e8a0b58c..41a4efec 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -183,6 +183,10 @@
   --color-port-royale: #5128b1;
 }
 
+.bg-position-center {
+  background-position: center;
+}
+
 .font-display-1 {
   font: var(--type-display-1-font);
   letter-spacing: var(--type-display-1-letter-spacing);
@@ -272,3 +276,7 @@
 .ds-sdk-product-item__product-swatch-item .swatch-color-port-royale {
   background-color: var(--color-port-royale);
 }
+
+.ds-sdk-product-image-hover {
+  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
+}
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 9ffa31b4..a9876a0a 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -22,7 +22,11 @@ const getProductImageURLs = (
   for (const image of images) {
     const imageUrl = image.url?.replace(/^https?:\/\//, '');
     if (imageUrl) {
-      imageUrlArray.push(`${protocol}//${imageUrl}`);
+      if (image.roles?.includes('image')) {
+        topImageUrl = imageUrl;
+      } else {
+        imageUrlArray.push(`${protocol}//${imageUrl}`);
+      }
     }
   }
 

From f5fb75b4ced49046e413e2df0e1dadca5daa1f83 Mon Sep 17 00:00:00 2001
From: david catalan <catalan@adobe.com>
Date: Fri, 5 Apr 2024 13:59:53 +0200
Subject: [PATCH 014/160] style: column gap between product item tiles

---
 src/components/ProductList/ProductList.tsx | 2 +-
 src/styles/index.css                       | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 2e5ef47d..3a8a1876 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -107,7 +107,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
           style={{
             gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
           }}
-          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-md xl:gap-x-6"
+          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6"
         >
           {products?.map((product) => (
             <ProductItem
diff --git a/src/styles/index.css b/src/styles/index.css
index 3d6dc8a8..5b2b6d5c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -891,6 +891,10 @@ video {
     -moz-column-gap: var(--spacing-md);
          column-gap: var(--spacing-md);
   }
+  .gap-x-sm {
+    -moz-column-gap: var(--spacing-sm);
+         column-gap: var(--spacing-sm);
+  }
   .gap-y-8 {
     row-gap: 2rem;
   }

From f80944f7b6d114e30fe74b353ad985da08826b40 Mon Sep 17 00:00:00 2001
From: david catalan <catalan@adobe.com>
Date: Fri, 5 Apr 2024 14:00:21 +0200
Subject: [PATCH 015/160] feat: add "add to cart" button on product item tile

---
 .../AddToCartButton/AddToCartButton.tsx       |  8 +++---
 src/styles/index.css                          | 27 ++++++++-----------
 src/styles/tokens.css                         |  9 +++++++
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
index b711899c..6607a41f 100644
--- a/src/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -9,7 +9,7 @@ it.
 
 import { FunctionComponent } from 'preact';
 
-import CartIcon from '../../icons/cart.svg';
+import PlusIcon from '../../icons/plus.svg';
 
 export interface AddToCartButtonProps {
   onClick: (e: any) => any;
@@ -20,11 +20,11 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   return (
     <div className="ds-sdk-add-to-cart-button">
       <button
-        className="flex items-center justify-center text-white font-button-2 bg-brand-500 rounded-full h-[32px] w-full p-sm"
+        className="flex items-center justify-center h-[32px] w-full p-sm"
         onClick={onClick}
       >
-        <CartIcon className="w-[24px] pr-4 stroke-2" />
-        Add To Cart
+        <PlusIcon className="w-[14px] mr-xs" />
+        Quick Add
       </button>
     </div>
   );
diff --git a/src/styles/index.css b/src/styles/index.css
index 5b2b6d5c..9c49262b 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -731,15 +731,15 @@ video {
   .w-\[12px\] {
     width: 12px;
   }
+  .w-\[14px\] {
+    width: 14px;
+  }
   .w-\[15px\] {
     width: 15px;
   }
   .w-\[20px\] {
     width: 20px;
   }
-  .w-\[24px\] {
-    width: 24px;
-  }
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -986,9 +986,6 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(239 246 255 / var(--tw-bg-opacity));
   }
-  .bg-brand-500 {
-    background-color: var(--color-brand-500);
-  }
   .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1045,9 +1042,6 @@ video {
   .stroke-1 {
     stroke-width: var(--shape-icon-stroke-1);
   }
-  .stroke-2 {
-    stroke-width: var(--shape-icon-stroke-2);
-  }
   .object-cover {
     -o-object-fit: cover;
        object-fit: cover;
@@ -1138,9 +1132,6 @@ video {
   .pr-2 {
     padding-right: 0.5rem;
   }
-  .pr-4 {
-    padding-right: 1rem;
-  }
   .pr-5 {
     padding-right: 1.25rem;
   }
@@ -1261,10 +1252,6 @@ video {
     --tw-text-opacity: 1;
     color: rgb(153 27 27 / var(--tw-text-opacity));
   }
-  .text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
   .text-yellow-400 {
     --tw-text-opacity: 1;
     color: rgb(250 204 21 / var(--tw-text-opacity));
@@ -1627,6 +1614,14 @@ video {
   background-color: var(--color-port-royale);
 }
 
+.ds-sdk-add-to-cart-button {
+  background-color: var(--color-neutral-50);
+  color: var(--color-brand-700);
+  padding: var(--spacing-xs);
+  font-size: var(--font-sm);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+}
 
 .ds-sdk-product-image-hover {
   transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 41a4efec..58f4406e 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -277,6 +277,15 @@
   background-color: var(--color-port-royale);
 }
 
+.ds-sdk-add-to-cart-button {
+  background-color: var(--color-neutral-50);
+  color: var(--color-brand-700);
+  padding: var(--spacing-xs);
+  font-size: var(--font-sm);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+}
+
 .ds-sdk-product-image-hover {
   transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }

From 625c343da81498a67190517fb3cb0bd329918fa1 Mon Sep 17 00:00:00 2001
From: david catalan <catalan@adobe.com>
Date: Fri, 5 Apr 2024 14:04:04 +0200
Subject: [PATCH 016/160] chore: cleanup

---
 src/components/ProductItem/ProductItem.tsx | 37 +---------------------
 1 file changed, 1 insertion(+), 36 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index a676e2fb..b5a43256 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -75,7 +75,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     config: { optimizeImages, imageBaseWidth, listview },
   } = useStore();
 
-  console.log('BIM!!');
   const { screenSize } = useSensor();
 
   const handleMouseOver = () => {
@@ -95,9 +94,8 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   
   /** TEMP FIX to show image of the first variant per product */
   const loadProductImagesFromRefinedProduct = async (optionIds: string[], sku: string) => {
-    console.log('loadProductImagesFromRefinedProduct', optionIds, sku);
     const data = await refineProduct(optionIds, sku);
-    setImagesFromRefinedProduct(data.refineProduct.images);
+    setImagesFromRefinedProduct(data.refineProduct?.images);
   };
 
   if (!productView.images?.length && !imagesFromRefinedProduct){
@@ -111,9 +109,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     return selected;
   };
 
-  console.log('imagesFromRefinedProduct', imagesFromRefinedProduct);
-  console.log('productView.images', productView.images);
-
   const productImageArray = imagesFromRefinedProduct
     ? getProductImageURLs(imagesFromRefinedProduct ?? [], 2)
     : getProductImageURLs(
@@ -130,10 +125,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     );
   }
 
-  console.log('optimizedImageArray', optimizedImageArray);
-  console.log('optimizedImageArray.length', optimizedImageArray.length);
-  console.log('productImageArray', productImageArray);
-
   // will have to figure out discount logic for amount_off and percent_off still
   const discount: boolean = refinedProduct
     ? refinedProduct.refineProduct?.priceRange?.minimum?.regular?.amount
@@ -356,12 +347,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
           {productView?.options?.map(
             (swatches) => {
               if (swatches.title === SWATCH_COLORS) {
-                // // console.log('v', v);
-                // swatches.values?.forEach((v) => {
-                //   console.log('productView', productView.name);
-                //   console.log('v', v);
-                // });
-
                 return (
                   <SwatchButtonGroup
                     key={product?.sku}
@@ -374,17 +359,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                   />
                 );
               } else if ([SWATCH_COLORS_TEAM, SWATCH_COLORS_TEAM_NAME].includes(swatches.title || '')) {
-                console.log('swatches', swatches);
-                // console.log(swatches.values?.map((s) => s.id))
-                // console.log('product?.sku', refinedProduct?.refineProduct.sku);
-                  // const ddd = await refineProduct(swatches.values?.map((s) => s.id) || [], "WF40035$");
-                  // console.log('refineProduct data', ddd);
-
-                // swatches.values?.forEach((v) => {
-                //   console.log('productView', productView.name);
-                //   console.log('v', v);
-                // });
-
                 return (
                   <SwatchButtonGroup
                     key={product?.sku}
@@ -397,8 +371,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                   />
                 );
               }
-
-
             }
           )}
         </div>
@@ -436,13 +408,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
           </div>
         </div>
       </a>
-
-        {/* <div className="pb-4 mt-sm">
-          {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
-          {isHovering && screenSize.desktop && (
-            <AddToCartButton onClick={handleAddToCart} />
-          )}
-        </div> */}
     </div>
   );
 };

From 949ca52610820b51539f11d500e4950f86dd55ee Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Thu, 16 May 2024 14:55:24 +0200
Subject: [PATCH 017/160] Use categoryPath for filtering

---
 src/context/products.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/context/products.tsx b/src/context/products.tsx
index ac14c643..473897e3 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -349,9 +349,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
         eq: categoryPath,
       };
       filters.push(categoryFilter);
-    }
-
-    if (categoryId) {
+    } else if (categoryId) {
       const categoryIdFilter = {
         attribute: 'categoryIds',
         eq: categoryId,

From caed3de477a6e995c24e2d5ee3f2d50453ecf1f7 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Mon, 10 Jun 2024 11:15:54 -0700
Subject: [PATCH 018/160] WIP filters

---
 dev-template.html                             |  8 +-
 .../CategoryFilters/CategoryFilters.tsx       |  4 +-
 src/components/Facets/Facets.tsx              |  7 +-
 src/components/Facets/Scalar/ScalarFacet.tsx  | 19 ++--
 src/components/Facets/SelectedFilters.tsx     |  2 +
 src/components/Facets/format.ts               |  1 +
 .../InputButtonGroup/InputButtonGroup.tsx     | 93 +++++++++++--------
 .../LabelledInput/LabelledInput.tsx           |  2 +-
 src/components/ProductItem/ProductPrice.tsx   |  1 -
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   |  1 -
 src/containers/App.tsx                        |  2 +-
 src/styles/index.css                          |  7 ++
 12 files changed, 88 insertions(+), 59 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 03fdf03b..10fd18be 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -73,9 +73,9 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        // currentCategoryUrlPath?: '', // current category url path, please prefer using currentCategoryId
-        // currentCategoryId?: '', // current category id
-        // categoryName: '', // name of category to display
+        currentCategoryUrlPath: 'baseball', // current category url path, please prefer using currentCategoryId
+        currentCategoryId: '107', // current category id
+        categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
         // displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
         // displayMode: '', // "" for search || "PAGE" for category search
@@ -92,7 +92,7 @@
       context: {
         customerGroup: '0',
       },
-      apiKey: '',
+      apiKey: '95689dc242b0433da022462d27547b30',
       environmentType: '',
       // searchQuery: 'search_query', // Optional: providing searchQuery will override 'q' query param
       // route: ({ sku, urlKey  }) => {
diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index ac6bcbc2..81b5debb 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -45,8 +45,10 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
   const resultsTranslation = translation.CategoryFilters.products;
   const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);
 
+  // sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col overflow-y-auto top-[6.4rem] right-0 bottom-[48px] left-0 box-content
+
   return (
-    <div class="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col overflow-y-auto top-[6.4rem] right-0 bottom-[48px] left-0 box-content">
+    <div className="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col">
       <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
         {title && <span className="font-display-3"> {title}</span>}
         {/* {!loading && (
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index a0f9de29..5af05e95 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -14,6 +14,7 @@ import { Facet as FacetType, PriceFacet } from '../../types/interface';
 import SliderDoubleControl from '../SliderDoubleControl';
 import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
+import { SelectedFilters } from './SelectedFilters';
 
 interface FacetsProps {
   searchFacets: FacetType[];
@@ -25,9 +26,12 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   const {
     config: { priceSlider },
   } = useStore();
+
+  console.log('this is searchFacets', searchFacets);
+
   return (
     <div className="ds-plp-facets flex flex-col">
-      <form className="ds-plp-facets__list border-t border-neutral-500">
+      <form className="ds-plp-facets__list border-t border-b border-neutral-500 flex gap-x-2">
         {searchFacets?.map((facet) => {
           const bucketType = facet?.buckets[0]?.__typename;
           switch (bucketType) {
@@ -49,6 +53,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           }
         })}
       </form>
+      <SelectedFilters />
     </div>
   );
 };
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 1233a6ed..cae16c90 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -8,6 +8,7 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
+import { useState } from 'preact/compat';
 
 import useScalarFacet from '../../../hooks/useScalarFacet';
 import { Facet as FacetType, PriceFacet } from '../../../types/interface';
@@ -23,13 +24,15 @@ export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   const { isSelected, onChange } = useScalarFacet(filterData);
 
   return (
-    <InputButtonGroup
-      title={filterData.title}
-      attribute={filterData.attribute}
-      buckets={filterData.buckets as any}
-      type={'checkbox'}
-      isSelected={isSelected}
-      onChange={(args) => onChange(args.value, args.selected)}
-    />
+    <>
+      <InputButtonGroup
+        title={filterData.title}
+        attribute={filterData.attribute}
+        buckets={filterData.buckets as any}
+        type={'checkbox'}
+        isSelected={isSelected}
+        onChange={(args) => onChange(args.value, args.selected)}
+      />
+    </>
   );
 };
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 75a012ac..db721540 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -18,6 +18,8 @@ export const SelectedFilters: FunctionComponent = ({}) => {
   const productsCtx = useProducts();
   const translation = useTranslation();
 
+  console.log('productCtx', productsCtx)
+
   return (
     <div className="w-full h-full">
       {searchCtx.filters?.length > 0 && (
diff --git a/src/components/Facets/format.ts b/src/components/Facets/format.ts
index a102371c..fb645e28 100644
--- a/src/components/Facets/format.ts
+++ b/src/components/Facets/format.ts
@@ -40,6 +40,7 @@ const formatBinaryLabel = (
   categoryPath?: string
 ) => {
   if (categoryPath && categoryNames) {
+    console.log('working2')
     const category = categoryNames.find(
       (facet) => facet.attribute === filter.attribute && facet.value === option
     );
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 19bad082..cc78fe0b 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -60,6 +60,12 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
     buckets.length < numberOfOptionsShown
   );
 
+  const [showOptions, setShowOptions] = useState(false);
+
+  const handleOptions = () => {
+    setShowOptions(!showOptions)
+  }
+
   const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
 
   const onInputChange = (title: string, e: ChangeEvent<HTMLInputElement>) => {
@@ -112,54 +118,59 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   };
 
   return (
-    <div className="ds-sdk-input pt-md">
+    <div className="ds-sdk-input py-md">
       {inputGroupTitleSlot ? (
         inputGroupTitleSlot(title)
       ) : (
-        <label className="ds-sdk-input__label text-neutral-900 font-headline-1">
+        <label
+          className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold"
+          onClick={handleOptions}
+        >
           {title}
         </label>
       )}
-      <fieldset className="ds-sdk-input__options mt-md">
-        <div className="space-y-4">
-          {buckets.slice(0, numberOfOptions).map((option) => {
-            const checked = isSelected(option.title);
-            const noShowPriceBucketCount = option.__typename === 'RangeBucket';
-            return (
-              <LabelledInput
-                key={formatLabel(title, option)}
-                name={`${option.title}-${attribute}`}
-                attribute={attribute}
-                label={formatLabel(title, option)}
-                checked={!!checked}
-                value={option.title}
-                count={noShowPriceBucketCount ? null : option.count}
-                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  onInputChange(option.title, e)
-                }
-                type={type}
-              />
-            );
-          })}
-          {!showMore && buckets.length > numberOfOptionsShown && (
-            <div
-              className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
-              onClick={() => setShowMore(true)}
-            >
-              <PlusIcon className="h-md w-md fill-neutral-800" />
-              <button
-                type="button"
-                className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
+      {showOptions && (
+        <fieldset className="ds-sdk-input__options mt-md">
+          <div className="space-y-1">
+            {buckets.slice(0, numberOfOptions).map((option) => {
+              const checked = isSelected(option.title);
+              const noShowPriceBucketCount =
+                option.__typename === 'RangeBucket';
+              return (
+                <LabelledInput
+                  key={formatLabel(title, option)}
+                  name={`${option.title}-${attribute}`}
+                  attribute={attribute}
+                  label={formatLabel(title, option)}
+                  checked={!!checked}
+                  value={option.title}
+                  count={noShowPriceBucketCount ? null : option.count}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    onInputChange(option.title, e)
+                  }
+                  type={type}
+                />
+              );
+            })}
+            {!showMore && buckets.length > numberOfOptionsShown && (
+              <div
+                className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
+                onClick={() => setShowMore(true)}
               >
-                <span className="font-button-2">
-                  {translation.InputButtonGroup.showmore}
-                </span>
-              </button>
-            </div>
-          )}
-        </div>
-      </fieldset>
-      <div className="ds-sdk-input__border border-t mt-md border-neutral-500" />
+                <PlusIcon className="h-md w-md fill-neutral-800" />
+                <button
+                  type="button"
+                  className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
+                >
+                  <span className="font-button-2">
+                    {translation.InputButtonGroup.showmore}
+                  </span>
+                </button>
+              </div>
+            )}
+          </div>
+        </fieldset>
+      )}
     </div>
   );
 };
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 2a1d7bcd..70d26885 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -50,7 +50,7 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
       />
       <label
         htmlFor={name}
-        className="ds-sdk-labelled-input__label ml-sm block-display text-neutral-800 font-body-1-default cursor-pointer"
+        className="ds-sdk-labelled-input__label ml-sm block-display text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
       >
         {label}
         {count && (
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index 6de241bb..6d1c1db4 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -37,7 +37,6 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   currencySymbol,
   currencyRate,
 }: ProductPriceProps) => {
-  console.log('discount', discount);
   const translation = useContext(TranslationContext);
   let price;
 
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index 8aaf470a..5b3fe240 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -33,7 +33,6 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
 }: SwatchButtonGroupProps) => {
   const moreSwatches = swatches.length > MAX_SWATCHES;
   const numberOfOptions = moreSwatches ? MAX_SWATCHES - 1 : swatches.length;
-  console.log('SwatchButtonGroup', swatches, numberOfOptions, moreSwatches);
   return (
     <div className="ds-sdk-product-item__product-swatch-group flex column items-center space-x-2">
       {moreSwatches ? (
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 1c4085e2..4238ec28 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -51,7 +51,7 @@ export const App: FunctionComponent = () => {
       {!(displayMode === 'PAGE') &&
         (!screenSize.mobile && showFilters && productsCtx.facets.length > 0 ? (
           <div className="ds-widgets bg-body py-2">
-            <div className="flex">
+            <div className="flex flex-col">
               <CategoryFilters
                 loading={productsCtx.loading}
                 pageLoading={productsCtx.pageLoading}
diff --git a/src/styles/index.css b/src/styles/index.css
index 9c49262b..3c8b72af 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -949,6 +949,9 @@ video {
   .border-t {
     border-top-width: 1px;
   }
+  .border-b {
+    border-bottom-width: 1px;
+  }
   .border-none {
     border-style: none;
   }
@@ -1108,6 +1111,10 @@ video {
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
   }
+  .py-md {
+    padding-top: var(--spacing-md);
+    padding-bottom: var(--spacing-md);
+  }
   .pb-2 {
     padding-bottom: 0.5rem;
   }

From 1fcaecc9c7a08fc3e19af17f69e3afcf0e26c50d Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 11 Jun 2024 06:13:15 -0700
Subject: [PATCH 019/160] WIP styling filters

---
 src/components/Facets/Facets.tsx              |   2 -
 src/components/Facets/SelectedFilters.tsx     |  13 +-
 .../InputButtonGroup/InputButtonGroup.tsx     |   2 +-
 src/components/Pill/Pill.tsx                  |  31 +-
 src/styles/index.css                          | 353 ++++++++++--------
 5 files changed, 225 insertions(+), 176 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 5af05e95..df4fa347 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -27,8 +27,6 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     config: { priceSlider },
   } = useStore();
 
-  console.log('this is searchFacets', searchFacets);
-
   return (
     <div className="ds-plp-facets flex flex-col">
       <form className="ds-plp-facets__list border-t border-b border-neutral-500 flex gap-x-2">
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index db721540..d2550762 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -18,14 +18,15 @@ export const SelectedFilters: FunctionComponent = ({}) => {
   const productsCtx = useProducts();
   const translation = useTranslation();
 
-  console.log('productCtx', productsCtx)
-
   return (
     <div className="w-full h-full">
       {searchCtx.filters?.length > 0 && (
         <div className="ds-plp-facets__pills pb-6 sm:pb-6 flex flex-wrap mt-8 justify-start">
           {searchCtx.filters.map((filter) => (
-            <div key={filter.attribute}>
+            <div
+              key={filter.attribute}
+              className="flex items-center gap-[16px]"
+            >
               {filter.in?.map((option) => (
                 <Pill
                   key={formatBinaryLabel(
@@ -40,7 +41,7 @@ export const SelectedFilters: FunctionComponent = ({}) => {
                     searchCtx.categoryNames,
                     productsCtx.categoryPath
                   )}
-                  type="transparent"
+                  type="filter"
                   onClick={() => searchCtx.updateFilterOptions(filter, option)}
                 />
               ))}
@@ -62,10 +63,10 @@ export const SelectedFilters: FunctionComponent = ({}) => {
           <div className="py-1">
             <button
               className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
-              focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none text-sm px-4"
+              focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none px-4"
               onClick={() => searchCtx.clearFilters()}
             >
-              <span className="font-button-2">
+              <span className="font-button-2 text-md underline hover:no-underline">
                 {translation.Filter.clearAll}
               </span>
             </button>
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index cc78fe0b..3cc9c15f 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -162,7 +162,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
                   type="button"
                   className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
                 >
-                  <span className="font-button-2">
+                  <span className="font-button-2 text-[12px]">
                     {translation.InputButtonGroup.showmore}
                   </span>
                 </button>
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 8ae87912..b43baf1c 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -20,7 +20,7 @@ export interface PillProps {
 }
 
 const defaultIcon = (
-  <CloseIcon className="h-[12px] w-[12px] rotate-45 inline-block ml-sm cursor-pointer  fill-neutral-800" />
+  <CloseIcon className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer  fill-neutral-800" />
 );
 
 // TODO: add support later to pass classes to the container div
@@ -30,21 +30,20 @@ export const Pill: FunctionComponent<PillProps> = ({
   CTA = defaultIcon,
   type,
 }) => {
-  return type === 'transparent' ? (
-    <div
-      key={label}
-      className="ds-sdk-pill inline-flex justify-content items-center rounded-full w-fit min-h-[32px] px-4 py-1"
-    >
-      <span className="ds-sdk-pill__label font-normal text-sm">{label}</span>
-      <span className="ds-sdk-pill__cta" onClick={onClick}>
-        {CTA}
-      </span>
-    </div>
-  ) : (
-    <div
-      key={label}
-      className="ds-sdk-pill inline-flex justify-content items-center bg-neutral-200 rounded-full w-fit outline outline-neutral-300 min-h-[32px] px-4 py-1"
-    >
+  const typeStyles: { [key in NonNullable<PillProps['type']>]: string } = {
+    transparent: 'rounded-full px-4 py-1',
+    filter: 'border border-black-50 px-2 py-1',
+  };
+
+  const baseStyles =
+    'ds-sdk-pill inline-flex justify-content items-center w-fit min-h-[32px]';
+
+  const typeClass = type
+    ? typeStyles[type]
+    : 'rounded-full outline outline-gray-200 px-4 py-1';
+
+  return (
+    <div key={label} className={`${baseStyles} ${typeClass}`}>
       <span className="ds-sdk-pill__label font-normal text-sm">{label}</span>
       <span className="ds-sdk-pill__cta" onClick={onClick}>
         {CTA}
diff --git a/src/styles/index.css b/src/styles/index.css
index 3c8b72af..936a60e5 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-::before,
-::after {
+  ::before,
+  ::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -19,7 +19,7 @@
     /* 2 */
   }
   ::before,
-::after {
+  ::after {
     --tw-content: '';
   }
   /*
@@ -32,7 +32,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-:host {
+  :host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,9 +40,10 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-       tab-size: 4;
+    tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -79,17 +80,17 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-            text-decoration: underline dotted;
+    text-decoration: underline dotted;
   }
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-size: inherit;
     font-weight: inherit;
   }
@@ -104,7 +105,7 @@ Reset links to optimize for opt-in styling instead of opt-out.
 Add the correct font weight in Edge and Safari.
 */
   b,
-strong {
+  strong {
     font-weight: bolder;
   }
   /*
@@ -114,10 +115,11 @@ strong {
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-kbd,
-samp,
-pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  kbd,
+  samp,
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
     /* 1 */
     font-feature-settings: normal;
     /* 2 */
@@ -136,7 +138,7 @@ Add the correct font size in all browsers.
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-sup {
+  sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
@@ -167,10 +169,10 @@ sup {
 3. Remove default padding in all browsers.
 */
   button,
-input,
-optgroup,
-select,
-textarea {
+  input,
+  optgroup,
+  select,
+  textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -194,7 +196,7 @@ textarea {
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-select {
+  select {
     text-transform: none;
   }
   /*
@@ -202,9 +204,9 @@ select {
 2. Remove default button styles.
 */
   button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -234,7 +236,7 @@ Add the correct vertical alignment in Chrome and Firefox.
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
+  ::-webkit-outer-spin-button {
     height: auto;
   }
   /*
@@ -273,18 +275,18 @@ Add the correct display in Chrome and Safari.
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
     margin: 0;
   }
   fieldset {
@@ -295,8 +297,8 @@ pre {
     padding: 0;
   }
   ol,
-ul,
-menu {
+  ul,
+  menu {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -317,14 +319,15 @@ Prevent resizing textareas horizontally by default.
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-  input::-moz-placeholder, textarea::-moz-placeholder {
+  input::-moz-placeholder,
+  textarea::-moz-placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
   input::placeholder,
-textarea::placeholder {
+  textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
@@ -334,7 +337,7 @@ textarea::placeholder {
 Set the default cursor for buttons.
 */
   button,
-[role="button"] {
+  [role='button'] {
     cursor: pointer;
   }
   /*
@@ -349,13 +352,13 @@ Make sure disabled buttons don't get the pointer cursor.
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
     display: block;
     /* 1 */
     vertical-align: middle;
@@ -365,7 +368,7 @@ object {
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-video {
+  video {
     max-width: 100%;
     height: auto;
   }
@@ -373,7 +376,9 @@ video {
   [hidden] {
     display: none;
   }
-  *, ::before, ::after {
+  *,
+  ::before,
+  ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -383,19 +388,19 @@ video {
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -403,24 +408,24 @@ video {
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
   }
   ::backdrop {
     --tw-border-spacing-x: 0;
@@ -432,19 +437,19 @@ video {
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -452,24 +457,24 @@ video {
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
   }
   .container {
     width: 100%;
@@ -797,26 +802,38 @@ video {
   }
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .-rotate-90 {
     --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-180 {
     --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-45 {
     --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-90 {
     --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   @keyframes spin {
     to {
@@ -840,8 +857,8 @@ video {
   }
   .appearance-none {
     -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -879,21 +896,24 @@ video {
   .gap-\[10px\] {
     gap: 10px;
   }
+  .gap-\[16px\] {
+    gap: 16px;
+  }
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-         column-gap: 0.5rem;
+    column-gap: 0.5rem;
   }
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-         column-gap: 0.625rem;
+    column-gap: 0.625rem;
   }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-         column-gap: var(--spacing-md);
+    column-gap: var(--spacing-md);
   }
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-         column-gap: var(--spacing-sm);
+    column-gap: var(--spacing-sm);
   }
   .gap-y-8 {
     row-gap: 2rem;
@@ -959,6 +979,10 @@ video {
     --tw-border-opacity: 1;
     border-color: rgb(0 0 0 / var(--tw-border-opacity));
   }
+  .border-black-50 {
+    --tw-border-opacity: 0.16;
+    border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  }
   .border-brand-700 {
     border-color: var(--color-brand-700);
   }
@@ -1047,11 +1071,11 @@ video {
   }
   .object-cover {
     -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
   .object-center {
     -o-object-position: center;
-       object-position: center;
+    object-position: center;
   }
   .p-1 {
     padding: 0.25rem;
@@ -1174,14 +1198,18 @@ video {
     font-size: var(--font-md);
     line-height: var(--leading-snug);
   }
-  .text-lg {
-    font-size: var(--font-lg);
-    line-height: var(--leading-normal);
-  }
   .text-sm {
     font-size: var(--font-sm);
     line-height: var(--leading-tight);
   }
+  .text-md {
+    font-size: var(--font-md);
+    line-height: var(--leading-tight);
+  }
+  .text-lg {
+    font-size: var(--font-lg);
+    line-height: var(--leading-normal);
+  }
   .font-light {
     font-weight: var(--font-light);
   }
@@ -1295,7 +1323,8 @@ video {
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .outline {
     outline-style: solid;
@@ -1310,9 +1339,12 @@ video {
     outline-color: transparent;
   }
   .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow, 0 0 #0000);
   }
   .ring-black {
     --tw-ring-opacity: 1;
@@ -1323,18 +1355,30 @@ video {
   }
   .blur {
     --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .\!filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
   .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .transition {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+      filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+      filter, backdrop-filter;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+      filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -1631,7 +1675,7 @@ video {
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
+  transition: background-image 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
 }
 
 .first\:ml-0:first-child {
@@ -1694,15 +1738,21 @@ video {
 }
 
 .focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-green-600:focus {
@@ -1733,7 +1783,8 @@ video {
 .active\:shadow-none:active {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .group:hover .group-hover\:opacity-100 {
@@ -1803,12 +1854,12 @@ video {
 @media (min-width: 1280px) {
   .xl\:gap-x-4 {
     -moz-column-gap: 1rem;
-         column-gap: 1rem;
+    column-gap: 1rem;
   }
 
   .xl\:gap-x-6 {
     -moz-column-gap: 1.5rem;
-         column-gap: 1.5rem;
+    column-gap: 1.5rem;
   }
 }
 

From de3d4d27120eda769c24d8047df5c373b3f7d9e6 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 11 Jun 2024 06:31:17 -0700
Subject: [PATCH 020/160] style changes

---
 src/styles/index.css | 379 +++++++++++++++++++------------------------
 1 file changed, 164 insertions(+), 215 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index 936a60e5..69bfde66 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-  ::before,
-  ::after {
+::before,
+::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -19,7 +19,7 @@
     /* 2 */
   }
   ::before,
-  ::after {
+::after {
     --tw-content: '';
   }
   /*
@@ -32,7 +32,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-  :host {
+:host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,10 +40,9 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-    tab-size: 4;
+       tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -80,17 +79,17 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
+            text-decoration: underline dotted;
   }
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-size: inherit;
     font-weight: inherit;
   }
@@ -105,7 +104,7 @@ Reset links to optimize for opt-in styling instead of opt-out.
 Add the correct font weight in Edge and Safari.
 */
   b,
-  strong {
+strong {
     font-weight: bolder;
   }
   /*
@@ -115,11 +114,10 @@ Add the correct font weight in Edge and Safari.
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
+kbd,
+samp,
+pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
     font-feature-settings: normal;
     /* 2 */
@@ -138,7 +136,7 @@ Add the correct font size in all browsers.
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-  sup {
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
@@ -169,10 +167,10 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 3. Remove default padding in all browsers.
 */
   button,
-  input,
-  optgroup,
-  select,
-  textarea {
+input,
+optgroup,
+select,
+textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -196,7 +194,7 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-  select {
+select {
     text-transform: none;
   }
   /*
@@ -204,9 +202,9 @@ Remove the inheritance of text transform in Edge and Firefox.
 2. Remove default button styles.
 */
   button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -236,7 +234,7 @@ Add the correct vertical alignment in Chrome and Firefox.
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+::-webkit-outer-spin-button {
     height: auto;
   }
   /*
@@ -275,18 +273,18 @@ Add the correct display in Chrome and Safari.
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
     margin: 0;
   }
   fieldset {
@@ -297,8 +295,8 @@ Removes the default spacing and border for appropriate elements.
     padding: 0;
   }
   ol,
-  ul,
-  menu {
+ul,
+menu {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -319,15 +317,14 @@ Prevent resizing textareas horizontally by default.
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-  input::-moz-placeholder,
-  textarea::-moz-placeholder {
+  input::-moz-placeholder, textarea::-moz-placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
   input::placeholder,
-  textarea::placeholder {
+textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
@@ -337,7 +334,7 @@ Prevent resizing textareas horizontally by default.
 Set the default cursor for buttons.
 */
   button,
-  [role='button'] {
+[role="button"] {
     cursor: pointer;
   }
   /*
@@ -352,13 +349,13 @@ Make sure disabled buttons don't get the pointer cursor.
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
     display: block;
     /* 1 */
     vertical-align: middle;
@@ -368,7 +365,7 @@ Make sure disabled buttons don't get the pointer cursor.
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-  video {
+video {
     max-width: 100%;
     height: auto;
   }
@@ -376,9 +373,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   [hidden] {
     display: none;
   }
-  *,
-  ::before,
-  ::after {
+  *, ::before, ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -388,19 +383,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -408,24 +403,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   ::backdrop {
     --tw-border-spacing-x: 0;
@@ -437,19 +432,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -457,24 +452,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   .container {
     width: 100%;
@@ -670,9 +665,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-5 {
     height: 1.25rem;
   }
-  .h-\[12px\] {
-    height: 12px;
-  }
   .h-\[15px\] {
     height: 15px;
   }
@@ -733,9 +725,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .w-96 {
     width: 24rem;
   }
-  .w-\[12px\] {
-    width: 12px;
-  }
   .w-\[14px\] {
     width: 14px;
   }
@@ -802,38 +791,26 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .-rotate-90 {
     --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-180 {
     --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-45 {
     --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-90 {
     --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   @keyframes spin {
     to {
@@ -857,8 +834,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .appearance-none {
     -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+       -moz-appearance: none;
+            appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -901,19 +878,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-    column-gap: 0.5rem;
+         column-gap: 0.5rem;
   }
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-    column-gap: 0.625rem;
+         column-gap: 0.625rem;
   }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-    column-gap: var(--spacing-md);
+         column-gap: var(--spacing-md);
   }
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-    column-gap: var(--spacing-sm);
+         column-gap: var(--spacing-sm);
   }
   .gap-y-8 {
     row-gap: 2rem;
@@ -928,10 +905,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));
     margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
   }
-  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  .space-y-1 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
   }
   .overflow-hidden {
     overflow: hidden;
@@ -966,12 +943,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .border-\[1\.5px\] {
     border-width: 1.5px;
   }
-  .border-t {
-    border-top-width: 1px;
-  }
   .border-b {
     border-bottom-width: 1px;
   }
+  .border-t {
+    border-top-width: 1px;
+  }
   .border-none {
     border-style: none;
   }
@@ -979,10 +956,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-border-opacity: 1;
     border-color: rgb(0 0 0 / var(--tw-border-opacity));
   }
-  .border-black-50 {
-    --tw-border-opacity: 0.16;
-    border-color: rgb(0 0 0 / var(--tw-border-opacity));
-  }
   .border-brand-700 {
     border-color: var(--color-brand-700);
   }
@@ -1071,11 +1044,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .object-cover {
     -o-object-fit: cover;
-    object-fit: cover;
+       object-fit: cover;
   }
   .object-center {
     -o-object-position: center;
-    object-position: center;
+       object-position: center;
   }
   .p-1 {
     padding: 0.25rem;
@@ -1127,6 +1100,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+  .py-md {
+    padding-top: var(--spacing-md);
+    padding-bottom: var(--spacing-md);
+  }
   .py-sm {
     padding-top: var(--spacing-sm);
     padding-bottom: var(--spacing-sm);
@@ -1135,10 +1112,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
   }
-  .py-md {
-    padding-top: var(--spacing-md);
-    padding-bottom: var(--spacing-md);
-  }
   .pb-2 {
     padding-bottom: 0.5rem;
   }
@@ -1198,18 +1171,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     font-size: var(--font-md);
     line-height: var(--leading-snug);
   }
-  .text-sm {
-    font-size: var(--font-sm);
-    line-height: var(--leading-tight);
-  }
-  .text-md {
-    font-size: var(--font-md);
-    line-height: var(--leading-tight);
-  }
   .text-lg {
     font-size: var(--font-lg);
     line-height: var(--leading-normal);
   }
+  .text-sm {
+    font-size: var(--font-sm);
+    line-height: var(--leading-tight);
+  }
   .font-light {
     font-weight: var(--font-light);
   }
@@ -1323,8 +1292,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .outline {
     outline-style: solid;
@@ -1332,6 +1300,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .outline-brand-700 {
     outline-color: var(--color-brand-700);
   }
+  .outline-gray-200 {
+    outline-color: #e5e7eb;
+  }
   .outline-neutral-300 {
     outline-color: var(--color-neutral-300);
   }
@@ -1339,12 +1310,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     outline-color: transparent;
   }
   .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
   .ring-black {
     --tw-ring-opacity: 1;
@@ -1355,30 +1323,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .blur {
     --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .\!filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
   .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .transition {
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -1675,7 +1631,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
+  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
 
 .first\:ml-0:first-child {
@@ -1738,21 +1694,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-green-600:focus {
@@ -1783,8 +1733,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 .active\:shadow-none:active {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .group:hover .group-hover\:opacity-100 {
@@ -1854,12 +1803,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 @media (min-width: 1280px) {
   .xl\:gap-x-4 {
     -moz-column-gap: 1rem;
-    column-gap: 1rem;
+         column-gap: 1rem;
   }
 
   .xl\:gap-x-6 {
     -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
 }
 

From 3b0d48b3a7a9f8d4aefe1dcec2c657f631820425 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 18 Jun 2024 12:11:37 -0700
Subject: [PATCH 021/160] extracted filter selections

---
 dev-template.html                             |   6 +-
 .../CategoryFilters/CategoryFilters.tsx       |  10 +-
 src/components/Facets/Facets.tsx              |  44 +++++-
 src/components/Facets/Scalar/ScalarFacet.tsx  |   7 +-
 src/components/Facets/SelectedFilters.tsx     |   4 +-
 .../FilterSelectionGroup.tsx                  | 145 ++++++++++++++++++
 src/components/FilterSelectionGroup/index.ts  |  11 ++
 .../InputButtonGroup/InputButtonGroup.tsx     |  13 +-
 src/hooks/useScalarFacet.ts                   |  10 +-
 src/styles/index.css                          |   9 --
 src/types/interface.ts                        |  10 ++
 11 files changed, 240 insertions(+), 29 deletions(-)
 create mode 100644 src/components/FilterSelectionGroup/FilterSelectionGroup.tsx
 create mode 100644 src/components/FilterSelectionGroup/index.ts

diff --git a/dev-template.html b/dev-template.html
index 10fd18be..915d4e48 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -73,9 +73,9 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        currentCategoryUrlPath: 'baseball', // current category url path, please prefer using currentCategoryId
-        currentCategoryId: '107', // current category id
-        categoryName: 'Baseball', // name of category to display
+        // currentCategoryUrlPath: 'baseball', // current category url path, please prefer using currentCategoryId
+        // currentCategoryId: '107', // current category id
+        // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
         // displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
         // displayMode: '', // "" for search || "PAGE" for category search
diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 81b5debb..9d4fd992 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -45,16 +45,14 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
   const resultsTranslation = translation.CategoryFilters.products;
   const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);
 
-  // sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col overflow-y-auto top-[6.4rem] right-0 bottom-[48px] left-0 box-content
-
   return (
     <div className="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col">
-      <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
+      {/* <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
         {title && <span className="font-display-3"> {title}</span>}
-        {/* {!loading && (
+        {!loading && (
           <span className="text-brand-700 font-button-2">{results}</span>
-        )} */}
-      </div>
+        )}
+      </div> */}
 
       {!pageLoading && facets.length > 0 && (
         <>
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index df4fa347..8ac8bf74 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -8,9 +8,12 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
+import { useState } from 'react';
+import useScalarFacet from 'src/hooks/useScalarFacet';
 
 import { useStore } from '../../context';
 import { Facet as FacetType, PriceFacet } from '../../types/interface';
+import FilterSelectionGroup from '../FilterSelectionGroup';
 import SliderDoubleControl from '../SliderDoubleControl';
 import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
@@ -27,6 +30,19 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     config: { priceSlider },
   } = useStore();
 
+  const [selectedFacet, setSelectedFacet] = useState<FacetType | null>(null);
+
+  const handleTesting = (facet: FacetType) => {
+    setSelectedFacet((prevFacet) => {
+      if (!prevFacet || prevFacet.title !== facet.title) {
+        return facet;
+      }
+      return null;
+    });
+  };
+
+  const { isSelected, onChange } = useScalarFacet(selectedFacet);
+
   return (
     <div className="ds-plp-facets flex flex-col">
       <form className="ds-plp-facets__list border-t border-b border-neutral-500 flex gap-x-2">
@@ -34,7 +50,13 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           const bucketType = facet?.buckets[0]?.__typename;
           switch (bucketType) {
             case 'ScalarBucket':
-              return <ScalarFacet key={facet.attribute} filterData={facet} />;
+              return (
+                <ScalarFacet
+                  key={facet.attribute}
+                  filterData={facet}
+                  handleFilter={() => handleTesting(facet)}
+                />
+              );
             case 'RangeBucket':
               return priceSlider ? (
                 <SliderDoubleControl filterData={facet as PriceFacet} />
@@ -45,12 +67,30 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                 />
               );
             case 'CategoryView':
-              return <ScalarFacet key={facet.attribute} filterData={facet} />;
+              return (
+                <ScalarFacet
+                  key={facet.attribute}
+                  filterData={facet}
+                  handleFilter={() => handleTesting(facet)}
+                />
+              );
             default:
               return null;
           }
         })}
       </form>
+      {selectedFacet && (
+        <div>
+          <FilterSelectionGroup
+            title={selectedFacet.title}
+            attribute={selectedFacet.attribute}
+            buckets={selectedFacet.buckets as any}
+            isSelected={isSelected}
+            onChange={(args) => onChange(args.value, args.selected)}
+            type={'checkbox'}
+          />
+        </div>
+      )}
       <SelectedFilters />
     </div>
   );
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index cae16c90..0ecb994f 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -6,20 +6,22 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
 accordance with the terms of the Adobe license agreement accompanying
 it.
 */
-
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/compat';
 
 import useScalarFacet from '../../../hooks/useScalarFacet';
 import { Facet as FacetType, PriceFacet } from '../../../types/interface';
 import { InputButtonGroup } from '../../InputButtonGroup';
 
+export type HandleFilterType = () => void;
+
 interface ScalarFacetProps {
   filterData: FacetType | PriceFacet;
+  handleFilter?: any;
 }
 
 export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   filterData,
+  handleFilter
 }) => {
   const { isSelected, onChange } = useScalarFacet(filterData);
 
@@ -32,6 +34,7 @@ export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
         type={'checkbox'}
         isSelected={isSelected}
         onChange={(args) => onChange(args.value, args.selected)}
+        handleFilter={handleFilter}
       />
     </>
   );
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index d2550762..818b55d8 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -21,7 +21,7 @@ export const SelectedFilters: FunctionComponent = ({}) => {
   return (
     <div className="w-full h-full">
       {searchCtx.filters?.length > 0 && (
-        <div className="ds-plp-facets__pills pb-6 sm:pb-6 flex flex-wrap mt-8 justify-start">
+        <div className="ds-plp-facets__pills sm:pb-6 py-md flex flex-wrap justify-start items-center">
           {searchCtx.filters.map((filter) => (
             <div
               key={filter.attribute}
@@ -66,7 +66,7 @@ export const SelectedFilters: FunctionComponent = ({}) => {
               focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none px-4"
               onClick={() => searchCtx.clearFilters()}
             >
-              <span className="font-button-2 text-md underline hover:no-underline">
+              <span className="font-button-2 text-sm underline hover:no-underline">
                 {translation.Filter.clearAll}
               </span>
             </button>
diff --git a/src/components/FilterSelectionGroup/FilterSelectionGroup.tsx b/src/components/FilterSelectionGroup/FilterSelectionGroup.tsx
new file mode 100644
index 00000000..5f512ae8
--- /dev/null
+++ b/src/components/FilterSelectionGroup/FilterSelectionGroup.tsx
@@ -0,0 +1,145 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+import { ChangeEvent, useState } from 'preact/compat';
+import { Bucket } from 'src/types/interface';
+
+import { useProducts, useTranslation } from '../../context';
+import PlusIcon from '../../icons/plus.svg';
+import { BOOLEAN_NO, BOOLEAN_YES } from '../../utils/constants';
+import { LabelledInput } from '../LabelledInput';
+
+export type FilterSelectionGroupOnChangeProps = {
+  value: string;
+  selected?: boolean;
+};
+
+export type FilterSelectionGroupOnChange = (
+  arg0: FilterSelectionGroupOnChangeProps
+) => void;
+
+export interface FilterSelectionGroupProps {
+  title: string;
+  attribute: string;
+  buckets: Bucket[];
+  isSelected: (title: string) => boolean | undefined;
+  onChange: FilterSelectionGroupOnChange;
+  type: 'radio' | 'checkbox';
+}
+
+const numberOfOptionsShown = 5;
+
+export const FilterSelectionGroup: FunctionComponent<
+  FilterSelectionGroupProps
+> = ({ title, attribute, buckets, isSelected, onChange, type }) => {
+  const translation = useTranslation();
+  const productsCtx = useProducts();
+
+  const [showMore, setShowMore] = useState(
+    buckets.length < numberOfOptionsShown
+  );
+
+  const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
+
+  const onInputChange = (title: string, e: ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      value: title,
+      selected: (e?.target as HTMLInputElement)?.checked,
+    });
+  };
+
+  const formatLabel = (title: string, bucket: Bucket) => {
+    const {
+      currencyRate = '1',
+      currencySymbol = '$',
+      categoryPath,
+    } = productsCtx;
+
+    const formatPrice = (value: number) =>
+      (parseFloat(currencyRate) * value).toFixed(2);
+
+    if (bucket.__typename === 'RangeBucket') {
+      const fromPrice = bucket.from
+        ? `${currencySymbol}${formatPrice(
+            parseInt(bucket.from.toFixed(0), 10)
+          )}`
+        : '0';
+      const toPrice = bucket.to
+        ? ` - ${currencySymbol}${formatPrice(
+            parseInt(bucket.to.toFixed(0), 10)
+          )}`
+        : translation.InputButtonGroup.priceRange;
+      return `${fromPrice}${toPrice}`;
+    }
+
+    if (bucket.__typename === 'CategoryView') {
+      return categoryPath ? bucket.name ?? bucket.title : bucket.title;
+    }
+
+    if (bucket.title === BOOLEAN_YES) {
+      return title;
+    }
+
+    if (bucket.title === BOOLEAN_NO) {
+      return translation.InputButtonGroup.priceExcludedMessage.replace(
+        '{title}',
+        title
+      );
+    }
+
+    return bucket.title;
+  };
+
+  return (
+    <div className="ds-sdk-input py-md">
+      {/* {numberOfOptionsShown}
+      {JSON.stringify(buckets)} */}
+      <fieldset className="ds-sdk-input__options mt-md">
+        <div className="space-y-1">
+          {buckets.slice(0, numberOfOptions).map((option) => {
+            const checked = isSelected(option.title);
+            const noShowPriceBucketCount = option.__typename === 'RangeBucket';
+            return (
+              <LabelledInput
+                key={formatLabel(title, option)}
+                name={`${option.title}-${attribute}`}
+                attribute={attribute}
+                label={formatLabel(title, option)}
+                checked={!!checked}
+                value={option.title}
+                count={noShowPriceBucketCount ? null : option.count}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  onInputChange(option.title, e)
+                }
+                type={type}
+              />
+            );
+          })}
+          {!showMore && buckets.length > numberOfOptionsShown && (
+            <div
+              className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
+              onClick={() => setShowMore(true)}
+            >
+              <PlusIcon className="h-md w-md fill-neutral-800" />
+              <button
+                type="button"
+                className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
+              >
+                <span className="font-button-2 text-[12px]">
+                  {translation.InputButtonGroup.showmore}
+                </span>
+              </button>
+            </div>
+          )}
+        </div>
+      </fieldset>
+    </div>
+  );
+};
diff --git a/src/components/FilterSelectionGroup/index.ts b/src/components/FilterSelectionGroup/index.ts
new file mode 100644
index 00000000..a33a3039
--- /dev/null
+++ b/src/components/FilterSelectionGroup/index.ts
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './FilterSelectionGroup';
+export { FilterSelectionGroup as default } from './FilterSelectionGroup';
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 3cc9c15f..5a6472b2 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* tslint:disable:no-unused-variable */
 /*
 Copyright 2024 Adobe
 All Rights Reserved.
@@ -41,6 +43,7 @@ export interface InputButtonGroupProps {
   onChange: InputButtonGroupOnChange;
   type: 'radio' | 'checkbox';
   inputGroupTitleSlot?: InputButtonGroupTitleSlot;
+  handleFilter?: () => void;
 }
 
 const numberOfOptionsShown = 5;
@@ -52,6 +55,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   onChange,
   type,
   inputGroupTitleSlot,
+  handleFilter,
 }) => {
   const translation = useTranslation();
   const productsCtx = useProducts();
@@ -63,8 +67,9 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   const [showOptions, setShowOptions] = useState(false);
 
   const handleOptions = () => {
-    setShowOptions(!showOptions)
-  }
+    setShowOptions(!showOptions);
+    handleFilter?.();
+  };
 
   const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
 
@@ -129,7 +134,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
           {title}
         </label>
       )}
-      {showOptions && (
+      {/* {showOptions && (
         <fieldset className="ds-sdk-input__options mt-md">
           <div className="space-y-1">
             {buckets.slice(0, numberOfOptions).map((option) => {
@@ -170,7 +175,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
             )}
           </div>
         </fieldset>
-      )}
+      )} */}
     </div>
   );
 };
diff --git a/src/hooks/useScalarFacet.ts b/src/hooks/useScalarFacet.ts
index c749e826..c60791f1 100644
--- a/src/hooks/useScalarFacet.ts
+++ b/src/hooks/useScalarFacet.ts
@@ -14,8 +14,16 @@ import {
   PriceFacet,
 } from '../types/interface';
 
-export const useScalarFacet = (facet: FacetType | PriceFacet) => {
+export const useScalarFacet = (facet: FacetType | PriceFacet | null) => {
   const searchCtx = useSearch();
+
+  if (!facet) {
+    return {
+      isSelected: () => false,
+      onChange: () => {},
+    };
+  }
+
   const filter = searchCtx?.filters?.find(
     (e: FacetFilter) => e.attribute === facet.attribute
   );
diff --git a/src/styles/index.css b/src/styles/index.css
index 69bfde66..e8eb426a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -525,9 +525,6 @@ video {
   .bottom-0 {
     bottom: 0px;
   }
-  .bottom-\[48px\] {
-    bottom: 48px;
-  }
   .left-0 {
     left: 0px;
   }
@@ -537,9 +534,6 @@ video {
   .right-0 {
     right: 0px;
   }
-  .top-\[6\.4rem\] {
-    top: 6.4rem;
-  }
   .z-20 {
     z-index: 20;
   }
@@ -632,9 +626,6 @@ video {
   .mt-xs {
     margin-top: var(--spacing-xs);
   }
-  .box-content {
-    box-sizing: content-box;
-  }
   .inline-block {
     display: inline-block;
   }
diff --git a/src/types/interface.ts b/src/types/interface.ts
index b3283a56..8a82db85 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -364,6 +364,16 @@ export interface Facet {
   buckets: Array<RangeBucket | ScalarBucket | StatsBucket | CategoryView>;
 }
 
+export type Bucket = {
+  title: string;
+  id?: string;
+  count: number;
+  to?: number;
+  from?: number;
+  name?: string;
+  __typename: 'ScalarBucket' | 'RangeBucket' | 'CategoryView';
+};
+
 export interface RangeBucket {
   __typename: 'RangeBucket';
   title: string;

From f26d9eeea5e62a4705810d35b1fc709e43d29c09 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 20 Jun 2024 18:19:20 +0530
Subject: [PATCH 022/160] Add fatsly image optimiser settings

---
 src/components/ImageHover/ImageHover.tsx | 14 ++++++++------
 src/styles/index.css                     |  6 +++---
 src/utils/getProductImage.ts             | 11 +++++++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/ImageHover/ImageHover.tsx b/src/components/ImageHover/ImageHover.tsx
index 803e7861..8c231e34 100644
--- a/src/components/ImageHover/ImageHover.tsx
+++ b/src/components/ImageHover/ImageHover.tsx
@@ -24,12 +24,14 @@ export const ImageHover: FunctionComponent<ImageCarouselProps> = ({
         {images.length > 1 && (
           <link rel="preload" as="image" href={typeof images[1] === 'object' ? images[1].src : images[1]} />
         )}
-        <div class="ds-sdk-product-image-hover h-[250px] max-w-2xl m-auto bg-cover bg-no-repeat bg-position-center"
-            style={{
-              '--image-url': `url('${typeof images[0] === 'object' ? images[0].src : images[0]}')`,
-              '--hover-url': `url('${typeof images[1] === 'object' ? images[1].src : images[1]}')`,
-            }}
-          />
+        <div class="relative w-full pb-[122.22%]">
+          <div class="ds-sdk-product-image-hover absolute h-full w-full m-auto bg-cover bg-no-repeat bg-position-center"
+              style={{
+                '--image-url': `url('${typeof images[0] === 'object' ? images[0].src : images[0]}')`,
+                '--hover-url': `url('${typeof images[1] === 'object' ? images[1].src : images[1]}')`,
+              }}
+            />
+        </div>
       </>
     );
 };
diff --git a/src/styles/index.css b/src/styles/index.css
index 9c49262b..432c2333 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -674,9 +674,6 @@ video {
   .h-\[20px\] {
     height: 20px;
   }
-  .h-\[250px\] {
-    height: 250px;
-  }
   .h-\[32px\] {
     height: 32px;
   }
@@ -1123,6 +1120,9 @@ video {
   .pb-6 {
     padding-bottom: 1.5rem;
   }
+  .pb-\[122\.22\%\] {
+    padding-bottom: 122.22%;
+  }
   .pl-3 {
     padding-left: 0.75rem;
   }
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index a9876a0a..764591ac 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -73,9 +73,16 @@ const generateOptimizedImages = (
   baseImageWidth: number
 ): { src: string; srcset: any }[] => {
   const baseOptions = {
-    fit: 'cover',
-    crop: false,
+    fit: 'bounds',
     dpi: 1,
+    orient: 1,
+    quality: 95,
+    optimize: 'high',
+    format: 'pjpeg',
+    auto: 'webp',
+    enable: 'upscale',
+    canvas: '9:11',
+    'bg-color': 'E8E4DA'
   };
 
   const imageUrlArray: Array<{ src: string; srcset: any }> = [];

From 83b1699db93f3258b90dd487d92ee2512f5870e2 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Thu, 20 Jun 2024 08:56:00 -0700
Subject: [PATCH 023/160] extracted title from filter selections

---
 src/components/Facets/Facets.tsx              |   4 +-
 src/components/Facets/Scalar/ScalarFacet.tsx  |  15 +-
 .../FilterSelection/FilterSelection.tsx       |  40 ++
 .../FilterSelectionGroup.tsx                  |   6 +-
 .../index.ts                                  |   1 +
 .../InputButtonGroup/InputButtonGroup.tsx     | 107 ++----
 .../LabelledInput/LabelledInput.tsx           |   2 +-
 src/styles/index.css                          | 352 ++++++++++--------
 8 files changed, 295 insertions(+), 232 deletions(-)
 create mode 100644 src/components/FilterSelection/FilterSelection.tsx
 rename src/components/{FilterSelectionGroup => FilterSelection}/FilterSelectionGroup.tsx (96%)
 rename src/components/{FilterSelectionGroup => FilterSelection}/index.ts (89%)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 8ac8bf74..c9e24cde 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -13,7 +13,7 @@ import useScalarFacet from 'src/hooks/useScalarFacet';
 
 import { useStore } from '../../context';
 import { Facet as FacetType, PriceFacet } from '../../types/interface';
-import FilterSelectionGroup from '../FilterSelectionGroup';
+import FilterSelectionGroup from '../FilterSelection';
 import SliderDoubleControl from '../SliderDoubleControl';
 import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
@@ -45,7 +45,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
 
   return (
     <div className="ds-plp-facets flex flex-col">
-      <form className="ds-plp-facets__list border-t border-b border-neutral-500 flex gap-x-2">
+      <form className="ds-plp-facets__list border-t border-b border-neutral-500 flex gap-x-6">
         {searchFacets?.map((facet) => {
           const bucketType = facet?.buckets[0]?.__typename;
           switch (bucketType) {
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 0ecb994f..413d264c 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -7,33 +7,24 @@ accordance with the terms of the Adobe license agreement accompanying
 it.
 */
 import { FunctionComponent } from 'preact';
+import { FilterSelection } from 'src/components/FilterSelection';
 
-import useScalarFacet from '../../../hooks/useScalarFacet';
 import { Facet as FacetType, PriceFacet } from '../../../types/interface';
-import { InputButtonGroup } from '../../InputButtonGroup';
-
 export type HandleFilterType = () => void;
 
 interface ScalarFacetProps {
   filterData: FacetType | PriceFacet;
-  handleFilter?: any;
+  handleFilter?: HandleFilterType;
 }
 
 export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   filterData,
   handleFilter
 }) => {
-  const { isSelected, onChange } = useScalarFacet(filterData);
-
   return (
     <>
-      <InputButtonGroup
+      <FilterSelection
         title={filterData.title}
-        attribute={filterData.attribute}
-        buckets={filterData.buckets as any}
-        type={'checkbox'}
-        isSelected={isSelected}
-        onChange={(args) => onChange(args.value, args.selected)}
         handleFilter={handleFilter}
       />
     </>
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
new file mode 100644
index 00000000..f6264586
--- /dev/null
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -0,0 +1,40 @@
+import { FunctionComponent } from 'preact';
+
+import PlusIcon from '../../icons/plus.svg';
+
+
+export type InputButtonGroupTitleSlot = (label: string) => FunctionComponent;
+
+export interface FilterSelectionProps {
+  title: string;
+  inputGroupTitleSlot?: InputButtonGroupTitleSlot;
+  handleFilter?: () => void;
+}
+
+export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
+  title,
+  inputGroupTitleSlot,
+  handleFilter,
+}) => {
+  const handleOptions = () => {
+    handleFilter?.();
+  };
+
+  return (
+    <div className="ds-sdk-input py-md">
+      {inputGroupTitleSlot ? (
+        inputGroupTitleSlot(title)
+      ) : (
+        <div
+          className="flex items-center gap-x-1 cursor-pointer"
+          onClick={handleOptions}
+        >
+          <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer">
+            {title}
+          </label>
+          <PlusIcon className="h-sm w-sm fill-neutral-800" />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/FilterSelectionGroup/FilterSelectionGroup.tsx b/src/components/FilterSelection/FilterSelectionGroup.tsx
similarity index 96%
rename from src/components/FilterSelectionGroup/FilterSelectionGroup.tsx
rename to src/components/FilterSelection/FilterSelectionGroup.tsx
index 5f512ae8..99c17ddf 100644
--- a/src/components/FilterSelectionGroup/FilterSelectionGroup.tsx
+++ b/src/components/FilterSelection/FilterSelectionGroup.tsx
@@ -99,10 +99,8 @@ export const FilterSelectionGroup: FunctionComponent<
 
   return (
     <div className="ds-sdk-input py-md">
-      {/* {numberOfOptionsShown}
-      {JSON.stringify(buckets)} */}
-      <fieldset className="ds-sdk-input__options mt-md">
-        <div className="space-y-1">
+      <fieldset className="ds-sdk-input__options">
+        <div className="">
           {buckets.slice(0, numberOfOptions).map((option) => {
             const checked = isSelected(option.title);
             const noShowPriceBucketCount = option.__typename === 'RangeBucket';
diff --git a/src/components/FilterSelectionGroup/index.ts b/src/components/FilterSelection/index.ts
similarity index 89%
rename from src/components/FilterSelectionGroup/index.ts
rename to src/components/FilterSelection/index.ts
index a33a3039..23953b8d 100644
--- a/src/components/FilterSelectionGroup/index.ts
+++ b/src/components/FilterSelection/index.ts
@@ -8,4 +8,5 @@ it.
 */
 
 export * from './FilterSelectionGroup';
+export * from './FilterSelection';
 export { FilterSelectionGroup as default } from './FilterSelectionGroup';
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 5a6472b2..8fc0acd4 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -1,14 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* tslint:disable:no-unused-variable */
-/*
-Copyright 2024 Adobe
-All Rights Reserved.
-
-NOTICE: Adobe permits you to use, modify, and distribute this file in
-accordance with the terms of the Adobe license agreement accompanying
-it.
-*/
-
 import { FunctionComponent } from 'preact';
 import { ChangeEvent, useState } from 'preact/compat';
 
@@ -43,7 +32,6 @@ export interface InputButtonGroupProps {
   onChange: InputButtonGroupOnChange;
   type: 'radio' | 'checkbox';
   inputGroupTitleSlot?: InputButtonGroupTitleSlot;
-  handleFilter?: () => void;
 }
 
 const numberOfOptionsShown = 5;
@@ -55,7 +43,6 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   onChange,
   type,
   inputGroupTitleSlot,
-  handleFilter,
 }) => {
   const translation = useTranslation();
   const productsCtx = useProducts();
@@ -64,13 +51,6 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
     buckets.length < numberOfOptionsShown
   );
 
-  const [showOptions, setShowOptions] = useState(false);
-
-  const handleOptions = () => {
-    setShowOptions(!showOptions);
-    handleFilter?.();
-  };
-
   const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
 
   const onInputChange = (title: string, e: ChangeEvent<HTMLInputElement>) => {
@@ -123,59 +103,54 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   };
 
   return (
-    <div className="ds-sdk-input py-md">
+    <div className="ds-sdk-input pt-md">
       {inputGroupTitleSlot ? (
         inputGroupTitleSlot(title)
       ) : (
-        <label
-          className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold"
-          onClick={handleOptions}
-        >
+        <label className="ds-sdk-input__label text-neutral-900 font-headline-1">
           {title}
         </label>
       )}
-      {/* {showOptions && (
-        <fieldset className="ds-sdk-input__options mt-md">
-          <div className="space-y-1">
-            {buckets.slice(0, numberOfOptions).map((option) => {
-              const checked = isSelected(option.title);
-              const noShowPriceBucketCount =
-                option.__typename === 'RangeBucket';
-              return (
-                <LabelledInput
-                  key={formatLabel(title, option)}
-                  name={`${option.title}-${attribute}`}
-                  attribute={attribute}
-                  label={formatLabel(title, option)}
-                  checked={!!checked}
-                  value={option.title}
-                  count={noShowPriceBucketCount ? null : option.count}
-                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                    onInputChange(option.title, e)
-                  }
-                  type={type}
-                />
-              );
-            })}
-            {!showMore && buckets.length > numberOfOptionsShown && (
-              <div
-                className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
-                onClick={() => setShowMore(true)}
+      <fieldset className="ds-sdk-input__options mt-md">
+        <div className="space-y-4">
+          {buckets.slice(0, numberOfOptions).map((option) => {
+            const checked = isSelected(option.title);
+            const noShowPriceBucketCount = option.__typename === 'RangeBucket';
+            return (
+              <LabelledInput
+                key={formatLabel(title, option)}
+                name={`${option.title}-${attribute}`}
+                attribute={attribute}
+                label={formatLabel(title, option)}
+                checked={!!checked}
+                value={option.title}
+                count={noShowPriceBucketCount ? null : option.count}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  onInputChange(option.title, e)
+                }
+                type={type}
+              />
+            );
+          })}
+          {!showMore && buckets.length > numberOfOptionsShown && (
+            <div
+              className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
+              onClick={() => setShowMore(true)}
+            >
+              <PlusIcon className="h-md w-md fill-neutral-800" />
+              <button
+                type="button"
+                className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
               >
-                <PlusIcon className="h-md w-md fill-neutral-800" />
-                <button
-                  type="button"
-                  className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
-                >
-                  <span className="font-button-2 text-[12px]">
-                    {translation.InputButtonGroup.showmore}
-                  </span>
-                </button>
-              </div>
-            )}
-          </div>
-        </fieldset>
-      )} */}
+                <span className="font-button-2">
+                  {translation.InputButtonGroup.showmore}
+                </span>
+              </button>
+            </div>
+          )}
+        </div>
+      </fieldset>
+      <div className="ds-sdk-input__border border-t mt-md border-neutral-500" />
     </div>
   );
 };
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 70d26885..f9f53be9 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -50,7 +50,7 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
       />
       <label
         htmlFor={name}
-        className="ds-sdk-labelled-input__label ml-sm block-display text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
+        className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
       >
         {label}
         {count && (
diff --git a/src/styles/index.css b/src/styles/index.css
index e8eb426a..57ca952e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-::before,
-::after {
+  ::before,
+  ::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -19,7 +19,7 @@
     /* 2 */
   }
   ::before,
-::after {
+  ::after {
     --tw-content: '';
   }
   /*
@@ -32,7 +32,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-:host {
+  :host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,9 +40,10 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-       tab-size: 4;
+    tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -79,17 +80,17 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-            text-decoration: underline dotted;
+    text-decoration: underline dotted;
   }
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-size: inherit;
     font-weight: inherit;
   }
@@ -104,7 +105,7 @@ Reset links to optimize for opt-in styling instead of opt-out.
 Add the correct font weight in Edge and Safari.
 */
   b,
-strong {
+  strong {
     font-weight: bolder;
   }
   /*
@@ -114,10 +115,11 @@ strong {
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-kbd,
-samp,
-pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  kbd,
+  samp,
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
     /* 1 */
     font-feature-settings: normal;
     /* 2 */
@@ -136,7 +138,7 @@ Add the correct font size in all browsers.
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-sup {
+  sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
@@ -167,10 +169,10 @@ sup {
 3. Remove default padding in all browsers.
 */
   button,
-input,
-optgroup,
-select,
-textarea {
+  input,
+  optgroup,
+  select,
+  textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -194,7 +196,7 @@ textarea {
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-select {
+  select {
     text-transform: none;
   }
   /*
@@ -202,9 +204,9 @@ select {
 2. Remove default button styles.
 */
   button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -234,7 +236,7 @@ Add the correct vertical alignment in Chrome and Firefox.
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
+  ::-webkit-outer-spin-button {
     height: auto;
   }
   /*
@@ -273,18 +275,18 @@ Add the correct display in Chrome and Safari.
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
     margin: 0;
   }
   fieldset {
@@ -295,8 +297,8 @@ pre {
     padding: 0;
   }
   ol,
-ul,
-menu {
+  ul,
+  menu {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -317,14 +319,15 @@ Prevent resizing textareas horizontally by default.
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-  input::-moz-placeholder, textarea::-moz-placeholder {
+  input::-moz-placeholder,
+  textarea::-moz-placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
   input::placeholder,
-textarea::placeholder {
+  textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
@@ -334,7 +337,7 @@ textarea::placeholder {
 Set the default cursor for buttons.
 */
   button,
-[role="button"] {
+  [role='button'] {
     cursor: pointer;
   }
   /*
@@ -349,13 +352,13 @@ Make sure disabled buttons don't get the pointer cursor.
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
     display: block;
     /* 1 */
     vertical-align: middle;
@@ -365,7 +368,7 @@ object {
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-video {
+  video {
     max-width: 100%;
     height: auto;
   }
@@ -373,7 +376,9 @@ video {
   [hidden] {
     display: none;
   }
-  *, ::before, ::after {
+  *,
+  ::before,
+  ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -383,19 +388,19 @@ video {
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -403,24 +408,24 @@ video {
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
   }
   ::backdrop {
     --tw-border-spacing-x: 0;
@@ -432,19 +437,19 @@ video {
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -452,24 +457,24 @@ video {
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
   }
   .container {
     width: 100%;
@@ -692,6 +697,9 @@ video {
   .h-sm {
     height: var(--spacing-sm);
   }
+  .h-max-content {
+    height: max-content;
+  }
   .max-h-\[250px\] {
     max-height: 250px;
   }
@@ -782,26 +790,38 @@ video {
   }
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .-rotate-90 {
     --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-180 {
     --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-45 {
     --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-90 {
     --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   @keyframes spin {
     to {
@@ -825,8 +845,8 @@ video {
   }
   .appearance-none {
     -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -867,21 +887,36 @@ video {
   .gap-\[16px\] {
     gap: 16px;
   }
+  .gap-\[24px\] {
+    gap: 24px;
+  }
+  .gap-x-1 {
+    -moz-column-gap: 0.25rem;
+    column-gap: 0.25rem;
+  }
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-         column-gap: 0.5rem;
+    column-gap: 0.5rem;
   }
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-         column-gap: 0.625rem;
+    column-gap: 0.625rem;
+  }
+  .gap-x-4 {
+    -moz-column-gap: 1rem;
+    column-gap: 1rem;
+  }
+  .gap-x-6 {
+    -moz-column-gap: 1.5rem;
+    column-gap: 1.5rem;
   }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-         column-gap: var(--spacing-md);
+    column-gap: var(--spacing-md);
   }
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-         column-gap: var(--spacing-sm);
+    column-gap: var(--spacing-sm);
   }
   .gap-y-8 {
     row-gap: 2rem;
@@ -1035,11 +1070,11 @@ video {
   }
   .object-cover {
     -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
   .object-center {
     -o-object-position: center;
-       object-position: center;
+    object-position: center;
   }
   .p-1 {
     padding: 0.25rem;
@@ -1283,7 +1318,8 @@ video {
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .outline {
     outline-style: solid;
@@ -1301,9 +1337,12 @@ video {
     outline-color: transparent;
   }
   .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow, 0 0 #0000);
   }
   .ring-black {
     --tw-ring-opacity: 1;
@@ -1314,18 +1353,30 @@ video {
   }
   .blur {
     --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .\!filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
   .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .transition {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+      filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+      filter, backdrop-filter;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+      filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -1622,7 +1673,7 @@ video {
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
+  transition: background-image 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
 }
 
 .first\:ml-0:first-child {
@@ -1685,15 +1736,21 @@ video {
 }
 
 .focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-green-600:focus {
@@ -1724,7 +1781,8 @@ video {
 .active\:shadow-none:active {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .group:hover .group-hover\:opacity-100 {
@@ -1794,12 +1852,12 @@ video {
 @media (min-width: 1280px) {
   .xl\:gap-x-4 {
     -moz-column-gap: 1rem;
-         column-gap: 1rem;
+    column-gap: 1rem;
   }
 
   .xl\:gap-x-6 {
     -moz-column-gap: 1.5rem;
-         column-gap: 1.5rem;
+    column-gap: 1.5rem;
   }
 }
 

From dbbda280ee62ff59233d99e7db425f7838451eb4 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Thu, 20 Jun 2024 13:05:44 -0700
Subject: [PATCH 024/160] rearranged filtered results

---
 .../CategoryFilters/CategoryFilters.tsx       |  2 +-
 src/components/Facets/Facets.tsx              | 16 ++++++++++++++--
 src/components/Facets/Scalar/ScalarFacet.tsx  |  7 ++++++-
 src/components/Facets/SelectedFilters.tsx     | 15 +++++++++++----
 .../FilterSelection/FilterSelection.tsx       | 19 ++++++++++++-------
 src/containers/App.tsx                        | 18 ++++++------------
 src/containers/ProductsHeader.tsx             |  8 ++++----
 7 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 9d4fd992..10435491 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -65,7 +65,7 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
               }`}
             /> */}
           </div>
-          <Facets searchFacets={facets} />
+          <Facets searchFacets={facets} totalCount={totalCount}/>
         </>
       )}
     </div>
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index c9e24cde..9f8a36e5 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -11,7 +11,7 @@ import { FunctionComponent } from 'preact';
 import { useState } from 'react';
 import useScalarFacet from 'src/hooks/useScalarFacet';
 
-import { useStore } from '../../context';
+import { useSearch, useStore } from '../../context';
 import { Facet as FacetType, PriceFacet } from '../../types/interface';
 import FilterSelectionGroup from '../FilterSelection';
 import SliderDoubleControl from '../SliderDoubleControl';
@@ -21,15 +21,19 @@ import { SelectedFilters } from './SelectedFilters';
 
 interface FacetsProps {
   searchFacets: FacetType[];
+  totalCount?: number;
 }
 
 export const Facets: FunctionComponent<FacetsProps> = ({
   searchFacets,
+  totalCount
 }: FacetsProps) => {
   const {
     config: { priceSlider },
   } = useStore();
 
+  const searchCtx = useSearch();
+
   const [selectedFacet, setSelectedFacet] = useState<FacetType | null>(null);
 
   const handleTesting = (facet: FacetType) => {
@@ -41,6 +45,12 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     });
   };
 
+  const getSelectedFilters = (facet: FacetType) => {
+    const { attribute } = facet;
+    const categoryFiltered = searchCtx.filters.find(item => item.attribute === attribute);
+    return categoryFiltered?.in?.length ?? 0;
+  };
+
   const { isSelected, onChange } = useScalarFacet(selectedFacet);
 
   return (
@@ -55,6 +65,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                   key={facet.attribute}
                   filterData={facet}
                   handleFilter={() => handleTesting(facet)}
+                  selectedNumber={getSelectedFilters(facet)}
                 />
               );
             case 'RangeBucket':
@@ -72,6 +83,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                   key={facet.attribute}
                   filterData={facet}
                   handleFilter={() => handleTesting(facet)}
+                  selectedNumber={getSelectedFilters(facet)}
                 />
               );
             default:
@@ -91,7 +103,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           />
         </div>
       )}
-      <SelectedFilters />
+      <SelectedFilters totalCount={totalCount}/>
     </div>
   );
 };
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 413d264c..1e3feac1 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -15,17 +15,22 @@ export type HandleFilterType = () => void;
 interface ScalarFacetProps {
   filterData: FacetType | PriceFacet;
   handleFilter?: HandleFilterType;
+  selectedNumber?: number;
 }
 
 export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   filterData,
-  handleFilter
+  handleFilter,
+  selectedNumber
 }) => {
+
   return (
     <>
       <FilterSelection
         title={filterData.title}
+        attribute={filterData.attribute}
         handleFilter={handleFilter}
+        selectedNumber={selectedNumber}
       />
     </>
   );
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 818b55d8..5d016879 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -13,15 +13,21 @@ import { useProducts, useSearch, useTranslation } from '../../context';
 import Pill from '../Pill';
 import { formatBinaryLabel, formatRangeLabel } from './format';
 
-export const SelectedFilters: FunctionComponent = ({}) => {
+interface SelectedFiltersProps {
+  totalCount?: number;
+}
+
+export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
+  totalCount,
+}) => {
   const searchCtx = useSearch();
   const productsCtx = useProducts();
   const translation = useTranslation();
 
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full flex justify-between items-center sm:pb-6 py-md">
       {searchCtx.filters?.length > 0 && (
-        <div className="ds-plp-facets__pills sm:pb-6 py-md flex flex-wrap justify-start items-center">
+        <div className="ds-plp-facets__pills flex flex-wrap justify-start items-center gap-[16px]">
           {searchCtx.filters.map((filter) => (
             <div
               key={filter.attribute}
@@ -63,7 +69,7 @@ export const SelectedFilters: FunctionComponent = ({}) => {
           <div className="py-1">
             <button
               className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
-              focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none px-4"
+              focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
               onClick={() => searchCtx.clearFilters()}
             >
               <span className="font-button-2 text-sm underline hover:no-underline">
@@ -73,6 +79,7 @@ export const SelectedFilters: FunctionComponent = ({}) => {
           </div>
         </div>
       )}
+      {searchCtx.filters?.length > 0 && <p>{totalCount} Results</p>}
     </div>
   );
 };
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index f6264586..3cc06185 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -2,19 +2,21 @@ import { FunctionComponent } from 'preact';
 
 import PlusIcon from '../../icons/plus.svg';
 
-
-export type InputButtonGroupTitleSlot = (label: string) => FunctionComponent;
+export type FilterSelectionTitleSlot = (label: string) => FunctionComponent;
 
 export interface FilterSelectionProps {
   title: string;
-  inputGroupTitleSlot?: InputButtonGroupTitleSlot;
+  attribute?: string;
+  filterSelectionTitleSlot?: FilterSelectionTitleSlot;
   handleFilter?: () => void;
+  selectedNumber?: number;
 }
 
 export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
   title,
-  inputGroupTitleSlot,
+  filterSelectionTitleSlot,
   handleFilter,
+  selectedNumber,
 }) => {
   const handleOptions = () => {
     handleFilter?.();
@@ -22,15 +24,18 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
 
   return (
     <div className="ds-sdk-input py-md">
-      {inputGroupTitleSlot ? (
-        inputGroupTitleSlot(title)
+      {filterSelectionTitleSlot ? (
+        filterSelectionTitleSlot(title)
       ) : (
         <div
           className="flex items-center gap-x-1 cursor-pointer"
           onClick={handleOptions}
         >
           <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer">
-            {title}
+            {title}{' '}
+            {!!selectedNumber && (
+              <span className="font-normal text-neutral-700">{`${selectedNumber} Selected`}</span>
+            )}
           </label>
           <PlusIcon className="h-sm w-sm fill-neutral-800" />
         </div>
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 4238ec28..a0a095dc 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -16,11 +16,11 @@ import Shimmer from 'src/components/Shimmer';
 import { CategoryFilters } from '../components/CategoryFilters';
 import { SelectedFilters } from '../components/Facets';
 import {
-    useProducts,
-    useSearch,
-    useSensor,
-    useStore,
-    useTranslation,
+  useProducts,
+  useSearch,
+  useSensor,
+  useStore,
+  useTranslation,
 } from '../context';
 import { ProductsContainer } from './ProductsContainer';
 import { ProductsHeader } from './ProductsHeader';
@@ -63,18 +63,12 @@ export const App: FunctionComponent = () => {
                 setShowFilters={setShowFilters}
                 filterCount={searchCtx.filterCount}
               />
-              <div
-                className={`ds-widgets_results flex flex-col items-center ${
-                  productsCtx.categoryName ? 'pt-16' : 'pt-28'
-                } flex-[75]`}
-              >
+              <div className={`ds-widgets_results flex flex-col items-center flex-[75] `}>
                 <ProductsHeader
                   facets={productsCtx.facets}
                   totalCount={productsCtx.totalCount}
                   screenSize={screenSize}
                 />
-                {/* <SelectedFilters /> */}
-
                 <ProductsContainer showFilters={showFilters} />
               </div>
             </div>
diff --git a/src/containers/ProductsHeader.tsx b/src/containers/ProductsHeader.tsx
index 1487fc36..ae177b63 100644
--- a/src/containers/ProductsHeader.tsx
+++ b/src/containers/ProductsHeader.tsx
@@ -100,9 +100,9 @@ export const ProductsHeader: FunctionComponent<Props> = ({
                     type="mobile"
                   />
                 </div>
-              
+
               )
-            
+
             // storeCtx.config.displaySearchBox && (
               //     <SearchBar
             //       phrase={searchCtx.phrase}
@@ -119,11 +119,11 @@ export const ProductsHeader: FunctionComponent<Props> = ({
         {/* </div> */}
         {totalCount > 0 && (
           <>
-            <div>
+            {/* <div>
             {`${
                 totalCount > 0 ? `${totalCount}` : ''
               } ${translation.CategoryFilters.results}`}
-            </div>
+            </div> */}
 
             {storeCtx?.config?.listview && <ViewSwitcher />}
 

From f8592ba2168cd2b92d1d4e23d76a1667090713e7 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Fri, 21 Jun 2024 07:05:45 -0700
Subject: [PATCH 025/160] relocated sort

---
 .../CategoryFilters/CategoryFilters.tsx       |  28 +---
 src/components/Facets/Facets.tsx              | 140 ++++++++++++------
 src/containers/App.tsx                        |   4 +-
 src/containers/ProductsHeader.tsx             |   1 -
 4 files changed, 98 insertions(+), 75 deletions(-)

diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 10435491..47b2a7b1 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -36,37 +36,11 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
   // setShowFilters,
   // filterCount,
 }) => {
-  const translation = useTranslation();
-  const title = translation.Filter.title; // categoryName || '';
-  // if (phrase) {
-  //   const text = translation.CategoryFilters.results;
-  //   title = text.replace('{phrase}', `"${phrase}"`);
-  // }
-  const resultsTranslation = translation.CategoryFilters.products;
-  const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);
 
   return (
     <div className="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col">
-      {/* <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
-        {title && <span className="font-display-3"> {title}</span>}
-        {!loading && (
-          <span className="text-brand-700 font-button-2">{results}</span>
-        )}
-      </div> */}
-
       {!pageLoading && facets.length > 0 && (
-        <>
-          <div className="flex pb-4">
-            {/* <FilterButton
-              displayFilter={() => setShowFilters(false)}
-              type="desktop"
-              title={`${translation.Filter.hideTitle}${
-                filterCount > 0 ? ` (${filterCount})` : ''
-              }`}
-            /> */}
-          </div>
-          <Facets searchFacets={facets} totalCount={totalCount}/>
-        </>
+        <Facets searchFacets={facets} totalCount={totalCount} />
       )}
     </div>
   );
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 9f8a36e5..e935c526 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -8,13 +8,25 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'preact/hooks';
 import useScalarFacet from 'src/hooks/useScalarFacet';
+import { getValueFromUrl, handleUrlSort } from 'src/utils/handleUrlFilters';
+import {
+  defaultSortOptions,
+  generateGQLSortInput,
+  getSortOptionsfromMetadata,
+} from 'src/utils/sort';
 
-import { useSearch, useStore } from '../../context';
+import {
+  useAttributeMetadata,
+  useSearch,
+  useStore,
+  useTranslation,
+} from '../../context';
 import { Facet as FacetType, PriceFacet } from '../../types/interface';
 import FilterSelectionGroup from '../FilterSelection';
 import SliderDoubleControl from '../SliderDoubleControl';
+import SortDropdown from '../SortDropdown';
 import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
 import { SelectedFilters } from './SelectedFilters';
@@ -26,15 +38,44 @@ interface FacetsProps {
 
 export const Facets: FunctionComponent<FacetsProps> = ({
   searchFacets,
-  totalCount
+  totalCount,
 }: FacetsProps) => {
-  const {
-    config: { priceSlider },
-  } = useStore();
-
+  const { config } = useStore();
   const searchCtx = useSearch();
+  const attributeMetadata = useAttributeMetadata();
+  const translation = useTranslation();
 
   const [selectedFacet, setSelectedFacet] = useState<FacetType | null>(null);
+  const [sortOptions, setSortOptions] = useState(defaultSortOptions());
+
+  const getSortOptions = useCallback(() => {
+    setSortOptions(
+      getSortOptionsfromMetadata(
+        translation,
+        attributeMetadata?.sortable,
+        config?.displayOutOfStock,
+        config?.currentCategoryUrlPath,
+        config?.currentCategoryId
+      )
+    );
+  }, [config, translation, attributeMetadata]);
+
+  useEffect(() => {
+    getSortOptions();
+  }, [getSortOptions]);
+
+  const defaultSortOption =
+    config?.currentCategoryUrlPath || config?.currentCategoryId
+      ? 'position_ASC'
+      : 'relevance_DESC';
+  const sortFromUrl = getValueFromUrl('product_list_order');
+  const sortByDefault = sortFromUrl ? sortFromUrl : defaultSortOption;
+  const [sortBy, setSortBy] = useState<string>(sortByDefault);
+  const onSortChange = (sortOption: string) => {
+    setSortBy(sortOption);
+    searchCtx.setSort(generateGQLSortInput(sortOption));
+    handleUrlSort(sortOption);
+  };
 
   const handleTesting = (facet: FacetType) => {
     setSelectedFacet((prevFacet) => {
@@ -47,7 +88,9 @@ export const Facets: FunctionComponent<FacetsProps> = ({
 
   const getSelectedFilters = (facet: FacetType) => {
     const { attribute } = facet;
-    const categoryFiltered = searchCtx.filters.find(item => item.attribute === attribute);
+    const categoryFiltered = searchCtx.filters.find(
+      (item) => item.attribute === attribute
+    );
     return categoryFiltered?.in?.length ?? 0;
   };
 
@@ -55,42 +98,49 @@ export const Facets: FunctionComponent<FacetsProps> = ({
 
   return (
     <div className="ds-plp-facets flex flex-col">
-      <form className="ds-plp-facets__list border-t border-b border-neutral-500 flex gap-x-6">
-        {searchFacets?.map((facet) => {
-          const bucketType = facet?.buckets[0]?.__typename;
-          switch (bucketType) {
-            case 'ScalarBucket':
-              return (
-                <ScalarFacet
-                  key={facet.attribute}
-                  filterData={facet}
-                  handleFilter={() => handleTesting(facet)}
-                  selectedNumber={getSelectedFilters(facet)}
-                />
-              );
-            case 'RangeBucket':
-              return priceSlider ? (
-                <SliderDoubleControl filterData={facet as PriceFacet} />
-              ) : (
-                <RangeFacet
-                  key={facet.attribute}
-                  filterData={facet as PriceFacet}
-                />
-              );
-            case 'CategoryView':
-              return (
-                <ScalarFacet
-                  key={facet.attribute}
-                  filterData={facet}
-                  handleFilter={() => handleTesting(facet)}
-                  selectedNumber={getSelectedFilters(facet)}
-                />
-              );
-            default:
-              return null;
-          }
-        })}
-      </form>
+      <div className="border-t border-b border-neutral-500 flex justify-between items-center">
+        <form className="ds-plp-facets__list flex gap-x-6">
+          {searchFacets?.map((facet) => {
+            const bucketType = facet?.buckets[0]?.__typename;
+            switch (bucketType) {
+              case 'ScalarBucket':
+                return (
+                  <ScalarFacet
+                    key={facet.attribute}
+                    filterData={facet}
+                    handleFilter={() => handleTesting(facet)}
+                    selectedNumber={getSelectedFilters(facet)}
+                  />
+                );
+              case 'RangeBucket':
+                return config?.priceSlider ? (
+                  <SliderDoubleControl filterData={facet as PriceFacet} />
+                ) : (
+                  <RangeFacet
+                    key={facet.attribute}
+                    filterData={facet as PriceFacet}
+                  />
+                );
+              case 'CategoryView':
+                return (
+                  <ScalarFacet
+                    key={facet.attribute}
+                    filterData={facet}
+                    handleFilter={() => handleTesting(facet)}
+                    selectedNumber={getSelectedFilters(facet)}
+                  />
+                );
+              default:
+                return null;
+            }
+          })}
+        </form>
+        <SortDropdown
+          sortOptions={sortOptions}
+          value={sortBy}
+          onChange={onSortChange}
+        />
+      </div>
       {selectedFacet && (
         <div>
           <FilterSelectionGroup
@@ -103,7 +153,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           />
         </div>
       )}
-      <SelectedFilters totalCount={totalCount}/>
+      <SelectedFilters totalCount={totalCount} />
     </div>
   );
 };
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index a0a095dc..36ab0eb6 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -64,11 +64,11 @@ export const App: FunctionComponent = () => {
                 filterCount={searchCtx.filterCount}
               />
               <div className={`ds-widgets_results flex flex-col items-center flex-[75] `}>
-                <ProductsHeader
+                {/* <ProductsHeader
                   facets={productsCtx.facets}
                   totalCount={productsCtx.totalCount}
                   screenSize={screenSize}
-                />
+                /> */}
                 <ProductsContainer showFilters={showFilters} />
               </div>
             </div>
diff --git a/src/containers/ProductsHeader.tsx b/src/containers/ProductsHeader.tsx
index ae177b63..67d06d9c 100644
--- a/src/containers/ProductsHeader.tsx
+++ b/src/containers/ProductsHeader.tsx
@@ -126,7 +126,6 @@ export const ProductsHeader: FunctionComponent<Props> = ({
             </div> */}
 
             {storeCtx?.config?.listview && <ViewSwitcher />}
-
             <SortDropdown
               sortOptions={sortOptions}
               value={sortBy}

From cb380118d7671bbabab5123a847f946af67cbc0e Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Fri, 21 Jun 2024 08:20:32 -0700
Subject: [PATCH 026/160] filter drop down styling

---
 src/components/SortDropdown/SortDropdown.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 02b2e258..4f544135 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -13,7 +13,6 @@ import { useEffect, useRef } from 'preact/hooks';
 import { useTranslation } from '../../context/translation';
 import { useAccessibleDropdown } from '../../hooks/useAccessibleDropdown';
 import Chevron from '../../icons/chevron.svg';
-import SortIcon from '../../icons/sort.svg';
 import { SortOption } from '../../types/interface';
 
 export interface SortDropdownProps {
@@ -82,25 +81,24 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     <>
       <div
         ref={sortOptionMenu}
-        class="flex shrink-0 ds-sdk-sort-dropdown relative inline-block text-left bg-neutral-50 h-[32px] z-9"
+        class="ds-sdk-sort-dropdown flex items-center gap-x-2 shrink-0 relative inline-block text-left bg-neutral-50 h-[32px] z-9"
       >
-        <label className="ds-sdk-input__label w-32 shrink-0 text-base font-normal text-neutral-900">
-          {translation.SortDropdown.title}:
+        <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold">
+          {translation.SortDropdown.title}
         </label>
         <button
-          className="group flex justify-center items-center hover:cursor-pointer text-brand-700 border-brand-700 outline-brand-700 rounded-3 border-3 bg-background h-full w-full px-sm font-button-2"
+          className="group flex justify-center items-center gap-x-1 hover:cursor-pointer bg-background h-full"
           ref={sortOptionButton}
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
           onFocus={() => setIsFocus(false)}
           onBlur={() => setIsFocus(false)}
         >
-          <SortIcon className="h-md w-md mr-sm stroke-brand-700 m-auto" />
-          <span className="font-button-2">
+          <span className="font-headline-1 text-sm text-neutral-700">
             {selectedOption ? sortOption : translation.SortDropdown.title}
           </span>
           <Chevron
-            className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-brand-700 ${
-              isDropdownOpen ? '' : 'rotate-180'
+            className={`flex-shrink-0 h-sm w-sm stroke-1 stroke-brand-700 ${
+              isDropdownOpen ? 'rotate-180' : ''
             }`}
           />
         </button>

From 3e91bfde64c9cf34bea8bed6938f471fe84e4c0f Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Fri, 21 Jun 2024 11:53:28 -0700
Subject: [PATCH 027/160] added test for new components

---
 .../FilterSelection/FilterSelection.test.tsx  | 25 ++++++++++++++
 .../FilterSelectionGroup.test.tsx             | 34 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/components/FilterSelection/FilterSelection.test.tsx
 create mode 100644 src/components/FilterSelection/FilterSelectionGroup.test.tsx

diff --git a/src/components/FilterSelection/FilterSelection.test.tsx b/src/components/FilterSelection/FilterSelection.test.tsx
new file mode 100644
index 00000000..cc232c82
--- /dev/null
+++ b/src/components/FilterSelection/FilterSelection.test.tsx
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/preact';
+
+import { FilterSelection, FilterSelectionProps } from './FilterSelection';
+
+const mockFilterSelectionProps: FilterSelectionProps = {
+  title: 'Filter Title',
+  handleFilter: () => {},
+  selectedNumber: 5,
+};
+
+describe('WidgetSDK - FilterSelection', () => {
+  test('renders', () => {
+    const { container } = render(
+      <FilterSelection
+        title={mockFilterSelectionProps.title}
+        handleFilter={mockFilterSelectionProps.handleFilter}
+        selectedNumber={mockFilterSelectionProps.selectedNumber}
+      />
+    );
+
+    const elem = container.querySelector('.ds-sdk-input');
+
+    expect(!!elem).toEqual(true);
+  });
+});
diff --git a/src/components/FilterSelection/FilterSelectionGroup.test.tsx b/src/components/FilterSelection/FilterSelectionGroup.test.tsx
new file mode 100644
index 00000000..30950846
--- /dev/null
+++ b/src/components/FilterSelection/FilterSelectionGroup.test.tsx
@@ -0,0 +1,34 @@
+import { render } from '@testing-library/preact';
+
+import {
+  FilterSelectionGroup,
+  FilterSelectionGroupProps,
+} from './FilterSelectionGroup';
+
+const mockFilterSelectionGroupProps: FilterSelectionGroupProps = {
+  title: 'Filter Group Title',
+  attribute: 'filterGroup',
+  buckets: [],
+  isSelected: () => true,
+  onChange: () => {},
+  type: 'checkbox',
+};
+
+describe('WidgetSDK - FilterSelectionGroup', () => {
+  test('renders', () => {
+    const { container } = render(
+      <FilterSelectionGroup
+        title={mockFilterSelectionGroupProps.title}
+        attribute={mockFilterSelectionGroupProps.attribute}
+        buckets={mockFilterSelectionGroupProps.buckets}
+        isSelected={mockFilterSelectionGroupProps.isSelected}
+        onChange={mockFilterSelectionGroupProps.onChange}
+        type={mockFilterSelectionGroupProps.type}
+      />
+    );
+
+    const elem = container.querySelector('.ds-sdk-input');
+
+    expect(!!elem).toEqual(true);
+  });
+});

From 902101717ce9c68f1f60f68756fa2de21dd93fe0 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Mon, 24 Jun 2024 06:21:17 -0700
Subject: [PATCH 028/160] commented out

---
 src/components/CategoryFilters/CategoryFilters.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 47b2a7b1..6ec72ad4 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -9,10 +9,10 @@ it.
 
 import { FunctionComponent } from 'preact';
 
-import { useTranslation } from '../../context/translation';
+// import { useTranslation } from '../../context/translation';
 import { Facet } from '../../types/interface';
 import { Facets } from '../Facets';
-import { FilterButton } from '../FilterButton';
+// import { FilterButton } from '../FilterButton';
 
 interface CategoryFiltersProps {
   loading: boolean;

From bd5deb84642abc8c84e7a400c0f2ef4ef91a1076 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Mon, 24 Jun 2024 10:49:30 -0700
Subject: [PATCH 029/160] added mobile filter button changes

---
 dev-template.html                            |   4 +-
 src/components/FilterButton/FilterButton.tsx |   6 +-
 src/containers/App.tsx                       |   9 +-
 src/containers/MobileFilterHeader.tsx        | 115 +++++++++++++++++++
 src/styles/index.css                         |   9 ++
 5 files changed, 135 insertions(+), 8 deletions(-)
 create mode 100644 src/containers/MobileFilterHeader.tsx

diff --git a/dev-template.html b/dev-template.html
index 915d4e48..187a3c2a 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -36,8 +36,8 @@
     body {
       margin: 0 auto;
       max-width: 1280px;
-      padding-left: 20px;
-      padding-right: 20px;
+      /* padding-left: 20px;
+      padding-right: 20px; */
       font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
       font-style: normal;
       font-weight: 400;
diff --git a/src/components/FilterButton/FilterButton.tsx b/src/components/FilterButton/FilterButton.tsx
index c4747d58..9f5b6243 100644
--- a/src/components/FilterButton/FilterButton.tsx
+++ b/src/components/FilterButton/FilterButton.tsx
@@ -25,13 +25,13 @@ export const FilterButton: FunctionComponent<FilterButtonProps> = ({
   const translation = useTranslation();
 
   return type == 'mobile' ? (
-    <div className="ds-sdk-filter-button">
+    <div className="ds-sdk-filter-button flex justify-center items-center ">
       <button
-        className="flex items-center bg-background ring-black ring-opacity-5 rounded-2 p-sm font-button-2 outline outline-brand-700 h-[32px]"
+        className="flex justify-center items-center gap-x-1 bg-background"
         onClick={displayFilter}
       >
         <AdjustmentsIcon className="w-md" />
-        <span className="font-button-2">{translation.Filter.title}</span>
+        <span className="font-button-2 text-sm">{translation.Filter.title}</span>
       </button>
     </div>
   ) : (
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 36ab0eb6..d6735df5 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -22,6 +22,7 @@ import {
   useStore,
   useTranslation,
 } from '../context';
+import { MobileFilterHeader } from './MobileFilterHeader';
 import { ProductsContainer } from './ProductsContainer';
 import { ProductsHeader } from './ProductsHeader';
 
@@ -63,7 +64,9 @@ export const App: FunctionComponent = () => {
                 setShowFilters={setShowFilters}
                 filterCount={searchCtx.filterCount}
               />
-              <div className={`ds-widgets_results flex flex-col items-center flex-[75] `}>
+              <div
+                className={`ds-widgets_results flex flex-col items-center flex-[75] `}
+              >
                 {/* <ProductsHeader
                   facets={productsCtx.facets}
                   totalCount={productsCtx.totalCount}
@@ -116,8 +119,8 @@ export const App: FunctionComponent = () => {
                   )
                 ) : (
                   <>
-                    <div className="flex w-full h-full">
-                      <ProductsHeader
+                    <div className="flex w-full h-full testing">
+                      <MobileFilterHeader
                         facets={productsCtx.facets}
                         totalCount={productsCtx.totalCount}
                         screenSize={screenSize}
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
new file mode 100644
index 00000000..ef69a0c1
--- /dev/null
+++ b/src/containers/MobileFilterHeader.tsx
@@ -0,0 +1,115 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import ViewSwitcher from 'src/components/ViewSwitcher';
+
+import Facets from '../components/Facets';
+import { FilterButton } from '../components/FilterButton';
+import { SearchBar } from '../components/SearchBar';
+import { SortDropdown } from '../components/SortDropdown';
+import {
+  useAttributeMetadata,
+  useProducts,
+  useSearch,
+  useStore,
+  useTranslation,
+} from '../context';
+import { Facet } from '../types/interface';
+import { getValueFromUrl, handleUrlSort } from '../utils/handleUrlFilters';
+import {
+  defaultSortOptions,
+  generateGQLSortInput,
+  getSortOptionsfromMetadata,
+} from '../utils/sort';
+
+interface Props {
+  facets: Facet[];
+  totalCount: number;
+  screenSize: {
+    mobile: boolean;
+    tablet: boolean;
+    desktop: boolean;
+    columns: number;
+  };
+}
+export const MobileFilterHeader: FunctionComponent<Props> = ({
+  facets,
+  totalCount,
+  screenSize,
+}) => {
+  const searchCtx = useSearch();
+  const storeCtx = useStore();
+  const attributeMetadata = useAttributeMetadata();
+  const productsCtx = useProducts();
+  const translation = useTranslation();
+
+  const [showMobileFacet, setShowMobileFacet] = useState(
+    !!productsCtx.variables.filter?.length
+  );
+  const [sortOptions, setSortOptions] = useState(defaultSortOptions());
+
+  const getSortOptions = useCallback(() => {
+    setSortOptions(
+      getSortOptionsfromMetadata(
+        translation,
+        attributeMetadata?.sortable,
+        storeCtx?.config?.displayOutOfStock,
+        storeCtx?.config?.currentCategoryUrlPath,
+        storeCtx?.config?.currentCategoryId
+      )
+    );
+  }, [storeCtx, translation, attributeMetadata]);
+
+  useEffect(() => {
+    getSortOptions();
+  }, [getSortOptions]);
+
+  const defaultSortOption =
+    storeCtx.config?.currentCategoryUrlPath ||
+    storeCtx.config?.currentCategoryId
+      ? 'position_ASC'
+      : 'relevance_DESC';
+  const sortFromUrl = getValueFromUrl('product_list_order');
+  const sortByDefault = sortFromUrl ? sortFromUrl : defaultSortOption;
+  const [sortBy, setSortBy] = useState<string>(sortByDefault);
+  const onSortChange = (sortOption: string) => {
+    setSortBy(sortOption);
+    searchCtx.setSort(generateGQLSortInput(sortOption));
+    handleUrlSort(sortOption);
+  };
+
+  return (
+    <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
+      <div className="flex border-t border-b border-neutral-400">
+        {screenSize.mobile && totalCount > 0 && (
+          <div className="flex justify-center w-1/2 py-md border-r border-neutral-400">
+            <FilterButton
+              displayFilter={() => setShowMobileFacet(!showMobileFacet)}
+              type="mobile"
+            />
+          </div>
+        )}
+
+        {totalCount > 0 && (
+          <div className="flex justify-center w-1/2">
+            {storeCtx?.config?.listview && <ViewSwitcher />}
+            <SortDropdown
+              sortOptions={sortOptions}
+              value={sortBy}
+              onChange={onSortChange}
+            />
+          </div>
+        )}
+      </div>
+      {screenSize.mobile && showMobileFacet && <Facets searchFacets={facets} />}
+    </div>
+  );
+};
diff --git a/src/styles/index.css b/src/styles/index.css
index 57ca952e..54f4f411 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -712,6 +712,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .w-1\/3 {
     width: 33.333333%;
   }
+  .w-1\/2 {
+    width: 50%;
+  }
   .w-28 {
     width: 7rem;
   }
@@ -975,6 +978,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .border-t {
     border-top-width: 1px;
   }
+  .border-r {
+    border-right-width: 1px;
+  }
   .border-none {
     border-style: none;
   }
@@ -999,6 +1005,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .border-neutral-300 {
     border-color: var(--color-neutral-300);
   }
+  .border-neutral-400 {
+    border-color: var(--color-neutral-400);
+  }
   .border-neutral-500 {
     border-color: var(--color-neutral-500);
   }

From fd6919c882e47e75241761dfdaab7c713f6fc389 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Mon, 24 Jun 2024 11:20:32 -0700
Subject: [PATCH 030/160] added uppercase class

---
 src/components/FilterButton/FilterButton.tsx | 2 +-
 src/styles/index.css                         | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/FilterButton/FilterButton.tsx b/src/components/FilterButton/FilterButton.tsx
index 9f5b6243..bab39d6d 100644
--- a/src/components/FilterButton/FilterButton.tsx
+++ b/src/components/FilterButton/FilterButton.tsx
@@ -31,7 +31,7 @@ export const FilterButton: FunctionComponent<FilterButtonProps> = ({
         onClick={displayFilter}
       >
         <AdjustmentsIcon className="w-md" />
-        <span className="font-button-2 text-sm">{translation.Filter.title}</span>
+        <span className="font-button-2 text-sm uppercase">{translation.Filter.title}</span>
       </button>
     </div>
   ) : (
diff --git a/src/styles/index.css b/src/styles/index.css
index 54f4f411..25503018 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1318,6 +1318,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .accent-neutral-800 {
     accent-color: var(--color-neutral-800);
   }

From e131e54ae9350b9736c2ebb70a81b54c45846e29 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Mon, 24 Jun 2024 19:06:49 +0530
Subject: [PATCH 031/160] Add size swatch support in product item

---
 .../AddToCartButton/AddToCartButton.tsx       |   2 +-
 src/components/ProductItem/ProductItem.tsx    | 176 +++++++++++-------
 src/components/ProductItem/ProductPrice.tsx   |  15 +-
 src/components/SwatchButton/SwatchButton.tsx  |   6 +-
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   |  60 ++----
 src/context/cart.tsx                          |   5 +-
 src/context/products.tsx                      |   2 +-
 src/styles/index.css                          |  31 ++-
 src/styles/tokens.css                         |   3 +-
 src/types/interface.ts                        |   6 +-
 10 files changed, 174 insertions(+), 132 deletions(-)

diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
index 6607a41f..87301cfe 100644
--- a/src/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -20,7 +20,7 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   return (
     <div className="ds-sdk-add-to-cart-button">
       <button
-        className="flex items-center justify-center h-[32px] w-full p-sm"
+        className="flex items-center justify-center h-[100%] w-full px-big py-[10px]"
         onClick={onClick}
       >
         <PlusIcon className="w-[14px] mr-xs" />
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index b5a43256..d99c481d 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -19,6 +19,7 @@ import {
   ProductViewMedia,
   RedirectRouteFunc,
   RefinedProduct,
+  SwatchValues
 } from '../../types/interface';
 import { SEARCH_UNIT_ID } from '../../utils/constants';
 import {
@@ -42,7 +43,7 @@ export interface ProductProps {
   setError: (error: boolean) => void;
   addToCart?: (
     sku: string,
-    options: [],
+    options: string[],
     quantity: number
   ) => Promise<void | undefined>;
 }
@@ -50,6 +51,7 @@ export interface ProductProps {
 const SWATCH_COLORS = 'Colors';
 const SWATCH_COLORS_TEAM = 'Colors / Team';
 const SWATCH_COLORS_TEAM_NAME = 'Colors / Team name';
+const SWATCH_SIZE = 'Size';
 
 export const ProductItem: FunctionComponent<ProductProps> = ({
   item,
@@ -69,6 +71,8 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   >();
   const [refinedProduct, setRefinedProduct] = useState<RefinedProduct>();
   const [isHovering, setIsHovering] = useState(false);
+  const [showSizes, setShowSizes] = useState(false);
+
   const { addToCartGraphQL, refreshCart } = useCart();
   const { viewType } = useProducts();
   const {
@@ -158,15 +162,15 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     ? setRoute({ sku: productView?.sku, urlKey: productView?.urlKey })
     : product?.canonical_url;
 
-  const handleAddToCart = async () => {
+  const updateCart = async (selectedVariants: string[] = []) => {
     setError(false);
     if (isSimple) {
       if (addToCart) {
         //Custom add to cart function passed in
-        await addToCart(productView.sku, [], 1);
+        await addToCart(productView.sku, selectedVariants, 1);
       } else {
         // Add to cart using GraphQL & Luma extension
-        const response = await addToCartGraphQL(productView.sku);
+        const response = await addToCartGraphQL(productView.sku, selectedVariants);
 
         if (
           response?.errors ||
@@ -183,6 +187,30 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     } else if (productUrl) {
       window.open(productUrl, '_self');
     }
+  }
+
+  const handleAddToCart = async (evt: any) => {
+    evt.preventDefault();
+
+    const hasSizeOptions = productView?.options?.some((swatches) => swatches.title === SWATCH_SIZE);
+    if ((!listview || viewType !== 'listview') && hasSizeOptions) {
+      setShowSizes(true);
+      return;
+    }
+
+    const selectedVariants = selectedSwatch ? [selectedSwatch] : [];
+    updateCart(selectedVariants);
+  };
+
+  const handleSizeSelection = async (optionIds: string[]) => {
+    setShowSizes(false);
+
+    let selectedVariants = selectedSwatch ? [selectedSwatch] : [];
+    if (optionIds) {
+      selectedVariants = [...selectedVariants, ...optionIds];
+    }
+
+    updateCart(selectedVariants);
   };
 
   if (listview && viewType === 'listview') {
@@ -333,78 +361,82 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                 className={`max-h-[45rem] w-full object-cover object-center lg:w-full`}
               />
             )}
-            {<div className="absolute left-0 right-0 bottom-0 p-xs">
-          {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
-          {isHovering && screenSize.desktop && (
-            <AddToCartButton onClick={handleAddToCart} />
-          )}
-        </div>}
+            <div className="add-to-cart-overlay absolute left-0 right-0 bottom-0 p-xsmall h-[56px]">
+              {!screenSize.desktop && !showSizes && <AddToCartButton onClick={handleAddToCart} />}
+              {isHovering && screenSize.desktop && !showSizes && (
+                <AddToCartButton onClick={handleAddToCart} />
+              )}
+              {showSizes && productView?.options?.map((swatches) => {
+                if (swatches.title === SWATCH_SIZE) {
+                  const swatchItems: SwatchValues[] = (swatches.values ?? []).map((swatch) => ({
+                    ...swatch,
+                    type: 'SIZE',
+                  }));
 
+                  return (
+                    <SwatchButtonGroup
+                      key={product?.sku}
+                      isSelected={isSelected}
+                      swatches={swatchItems}
+                      showMore={onProductClick}
+                      productUrl={productUrl as string}
+                      onClick={handleSizeSelection}
+                      sku={product?.sku}
+                      maxSwatches={swatchItems.length}
+                    />
+                  );
+                }
+              })}
+            </div>
           </div>
-
-      {productView?.options && productView.options?.length > 0 && (
-        <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-brand-700 p-2">
-          {productView?.options?.map(
-            (swatches) => {
-              if (swatches.title === SWATCH_COLORS) {
-                return (
-                  <SwatchButtonGroup
-                    key={product?.sku}
-                    isSelected={isSelected}
-                    swatches={swatches.values ?? []}
-                    showMore={onProductClick}
-                    productUrl={productUrl as string}
-                    onClick={handleSelection}
-                    sku={product?.sku}
-                  />
-                );
-              } else if ([SWATCH_COLORS_TEAM, SWATCH_COLORS_TEAM_NAME].includes(swatches.title || '')) {
-                return (
-                  <SwatchButtonGroup
-                    key={product?.sku}
-                    isSelected={isSelected}
-                    swatches={swatches.values ?? []}
-                    showMore={onProductClick}
-                    productUrl={productUrl as string}
-                    onClick={handleSelection}
-                    sku={product?.sku}
-                  />
-                );
-              }
-            }
-          )}
-        </div>
-      )}
-
-          <div className="flex flex-row p-2">
-            <div className="flex flex-col">
-              <div className="ds-sdk-product-item__product-name font-medium text-lg">
-                {product.name !== null && htmlStringDecode(product.name)}
+          <div className="flex flex-col px-xsmall py-small gap-2">
+            {productView?.options && productView.options?.length > 0 && (
+              <div className="ds-sdk-product-item__product-swatch flex flex-row text-sm text-brand-700">
+                {productView?.options?.map(
+                  (swatches) => {
+                    if (swatches.title === SWATCH_COLORS) {
+                      return (
+                        <SwatchButtonGroup
+                          key={product?.sku}
+                          isSelected={isSelected}
+                          swatches={swatches.values ?? []}
+                          showMore={onProductClick}
+                          productUrl={productUrl as string}
+                          onClick={handleSelection}
+                          sku={product?.sku}
+                        />
+                      );
+                    } else if ([SWATCH_COLORS_TEAM, SWATCH_COLORS_TEAM_NAME].includes(swatches.title || '')) {
+                      return (
+                        <SwatchButtonGroup
+                          key={product?.sku}
+                          isSelected={isSelected}
+                          swatches={swatches.values ?? []}
+                          showMore={onProductClick}
+                          productUrl={productUrl as string}
+                          onClick={handleSelection}
+                          sku={product?.sku}
+                        />
+                      );
+                    }
+                  }
+                )}
               </div>
-              <ProductPrice
-                item={refinedProduct ?? item}
-                isBundle={isBundle}
-                isGrouped={isGrouped}
-                isGiftCard={isGiftCard}
-                isConfigurable={isConfigurable}
-                isComplexProductView={isComplexProductView}
-                discount={discount}
-                currencySymbol={currencySymbol}
-                currencyRate={currencyRate}
-              />
+            )}
+            <div className="ds-sdk-product-item__product-name font-medium text-lg">
+              {product.name !== null && htmlStringDecode(product.name)}
             </div>
-
-            {/*
-            //TODO: Wishlist button to be added later
-            {flags.addToWishlist && widgetConfig.addToWishlist.enabled && (
-              // TODO: Remove flag during phase 3 MSRCH-4278
-              <div className="ds-sdk-wishlist ml-auto mt-md">
-                <WishlistButton
-                  productSku={item.product.sku}
-                  type={widgetConfig.addToWishlist.placement}
-                />
-              </div>
-            )} */}
+            <ProductPrice
+              item={refinedProduct ?? item}
+              isBundle={isBundle}
+              isGrouped={isGrouped}
+              isGiftCard={isGiftCard}
+              isConfigurable={isConfigurable}
+              isComplexProductView={isComplexProductView}
+              discount={discount}
+              currencySymbol={currencySymbol}
+              currencyRate={currencyRate}
+            />
           </div>
         </div>
       </a>
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index 6de241bb..bc46e409 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -37,7 +37,6 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   currencySymbol,
   currencyRate,
 }: ProductPriceProps) => {
-  console.log('discount', discount);
   const translation = useContext(TranslationContext);
   let price;
 
@@ -110,10 +109,10 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   const getDiscountedPrice = (discount: boolean | undefined) => {
     const discountPrice = discount ? (
       <>
-        <span className="line-through pr-2 text-brand-300">
+        <span className="line-through text-black">
           {getProductPrice(item, currencySymbol, currencyRate, false, false)}
         </span>
-        <span className="font-headline-4-strong">
+        <span className="font-headline-4-strong text-neutral-700 ml-2">
           {getProductPrice(item, currencySymbol, currencyRate, false, true)}
         </span>
       </>
@@ -147,7 +146,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
             !isConfigurable &&
             !isComplexProductView &&
             discount && (
-              <p className="ds-sdk-product-price--discount mt-xs font-headline-4-strong">
+              <p className="ds-sdk-product-price--discount font-headline-4-strong">
                 <span className="line-through pr-2 text-brand-300">
                   {getProductPrice(
                     item,
@@ -175,7 +174,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
             !isConfigurable &&
             !isComplexProductView &&
             !discount && (
-              <p className="ds-sdk-product-price--no-discount mt-xs font-headline-4-strong">
+              <p className="ds-sdk-product-price--no-discount font-headline-4-strong">
                 {getProductPrice(
                   item,
                   currencySymbol,
@@ -195,13 +194,13 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
           )}
 
           {isGrouped && (
-            <p className="ds-sdk-product-price--grouped mt-xs font-headline-4-strong">
+            <p className="ds-sdk-product-price--grouped font-headline-4-strong">
               {getPriceFormat(item, currencySymbol, currencyRate, false)}
             </p>
           )}
 
           {isGiftCard && (
-            <p className="ds-sdk-product-price--gift-card mt-xs font-headline-4-strong">
+            <p className="ds-sdk-product-price--gift-card font-headline-4-strong">
               {getPriceFormat(item, currencySymbol, currencyRate, true)}
             </p>
           )}
@@ -209,7 +208,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
           {!isGrouped &&
             !isBundle &&
             (isConfigurable || isComplexProductView) && (
-              <p className="ds-sdk-product-price--configurable mt-xs font-headline-4-strong">
+              <p className="ds-sdk-product-price--configurable font-headline-4-strong">
                 {getDiscountedPrice(discount)}
               </p>
             )}
diff --git a/src/components/SwatchButton/SwatchButton.tsx b/src/components/SwatchButton/SwatchButton.tsx
index 5c7a2d28..26b50fbd 100644
--- a/src/components/SwatchButton/SwatchButton.tsx
+++ b/src/components/SwatchButton/SwatchButton.tsx
@@ -9,10 +9,12 @@ it.
 
 import { FunctionComponent } from 'preact';
 
+import { SwatchType } from '../../types/interface';
+
 export interface SwatchButtonProps {
   id: string;
   value: string;
-  type: 'COLOR_HEX' | 'IMAGE' | 'TEXT';
+  type: SwatchType;
   checked: boolean;
   onClick: (e: any) => any;
 }
@@ -90,7 +92,7 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
   }
 
   // assume TEXT type
-  const className = `flex items-center bg-white rounded-full p-sm border border-[1.5px]h-[32px] ${outlineColor} outline-transparent`;
+  const className = `flex items-center bg-white p-sm border border-[1.5px]h-[32px] ${outlineColor} outline-transparent`;
   return (
     <div className={`ds-sdk-swatch-button_${value}`}>
       <button
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index 8aaf470a..fb72bf4e 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -19,6 +19,7 @@ export interface SwatchButtonGroupProps {
   productUrl: string;
   onClick: (optionIds: string[], sku: string) => any;
   sku: string;
+  maxSwatches?: number;
 }
 
 const MAX_SWATCHES = 4;
@@ -30,31 +31,21 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   productUrl,
   onClick,
   sku,
+  maxSwatches = MAX_SWATCHES,
 }: SwatchButtonGroupProps) => {
-  const moreSwatches = swatches.length > MAX_SWATCHES;
-  const numberOfOptions = moreSwatches ? MAX_SWATCHES - 1 : swatches.length;
-  console.log('SwatchButtonGroup', swatches, numberOfOptions, moreSwatches);
+  const moreSwatches = swatches.length > maxSwatches;
+  const numberOfOptions = moreSwatches ? maxSwatches - 1 : swatches.length;
+  
   return (
     <div className="ds-sdk-product-item__product-swatch-group flex column items-center space-x-2">
       {moreSwatches ? (
         <div className="flex">
           {swatches.slice(0, numberOfOptions).map((swatch) => {
             const checked = isSelected(swatch.id);
+            const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''}`;
+
             return (
-              swatch &&
-              swatch.type == 'TEXT' && (
-                <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
-                  <SwatchButton
-                    id={swatch.id}
-                    value={swatch.value}
-                    type={swatch.type}
-                    checked={!!checked}
-                    onClick={() => onClick([swatch.id], sku)}
-                  />
-                </div>
-              ) ||
-                swatch.type == 'COLOR_HEX' && (
-                <div className="ds-sdk-product-item__product-swatch-item mr-2 text-sm text-brand-700">
+              <div className={wrapperClasses} key={swatch.id}>
                   <SwatchButton
                     id={swatch.id}
                     value={swatch.value}
@@ -63,8 +54,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
                     onClick={() => onClick([swatch.id], sku)}
                   />
                 </div>
-              )
-            );
+              );
           })}
           <a href={productUrl as string} className="hover:no-underline">
             <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
@@ -82,29 +72,15 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
         swatches.slice(0, numberOfOptions).map((swatch) => {
           const checked = isSelected(swatch.id);
           return (
-            swatch &&
-            swatch.type == 'TEXT' && (
-              <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
-                <SwatchButton
-                  id={swatch.id}
-                  value={swatch.value}
-                  type={swatch.type}
-                  checked={!!checked}
-                  onClick={() => onClick([swatch.id], sku)}
-                />
-              </div>
-            ) ||
-            swatch.type == 'COLOR_HEX' && (
-              <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
-                <SwatchButton
-                  id={swatch.id}
-                  value={swatch.value}
-                  type={swatch.type}
-                  checked={!!checked}
-                  onClick={() => onClick([swatch.id], sku)}
-                />
-              </div>
-            )
+            <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700" key={swatch.id}>
+              <SwatchButton
+                id={swatch.id}
+                value={swatch.value}
+                type={swatch.type}
+                checked={!!checked}
+                onClick={() => onClick([swatch.id], sku)}
+              />
+            </div>
           );
         })
       )}
diff --git a/src/context/cart.tsx b/src/context/cart.tsx
index 644181c0..08e60855 100644
--- a/src/context/cart.tsx
+++ b/src/context/cart.tsx
@@ -19,7 +19,7 @@ import { useStore } from './store';
 export interface CartAttributesContext {
   cart: CartProps;
   initializeCustomerCart: () => Promise<string>;
-  addToCartGraphQL: (sku: string) => Promise<any>;
+  addToCartGraphQL: (sku: string, options: string[]) => Promise<any>;
   refreshCart?: () => void;
 }
 
@@ -50,7 +50,7 @@ const CartProvider: FunctionComponent = ({ children }) => {
     return cartId;
   };
 
-  const addToCartGraphQL = async (sku: string) => {
+  const addToCartGraphQL = async (sku: string, options: string[] ) => {
     let cartId = cart.cartId;
     if (!cartId) {
       cartId = await initializeCustomerCart();
@@ -59,6 +59,7 @@ const CartProvider: FunctionComponent = ({ children }) => {
       {
         quantity: 1,
         sku,
+        selected_options: options
       },
     ];
 
diff --git a/src/context/products.tsx b/src/context/products.tsx
index ac14c643..3ec344e6 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -79,7 +79,7 @@ const ProductsContext = createContext<{
   refreshCart?: () => void;
   addToCart?: (
     sku: string,
-    options: [],
+    options: string[],
     quantity: number
   ) => Promise<void | undefined>;
 }>({
diff --git a/src/styles/index.css b/src/styles/index.css
index 432c2333..e25d6947 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -665,6 +665,9 @@ video {
   .h-5 {
     height: 1.25rem;
   }
+  .h-\[100\%\] {
+    height: 100%;
+  }
   .h-\[12px\] {
     height: 12px;
   }
@@ -686,6 +689,9 @@ video {
   .h-\[44px\] {
     height: 44px;
   }
+  .h-\[56px\] {
+    height: 56px;
+  }
   .h-auto {
     height: auto;
   }
@@ -873,6 +879,9 @@ video {
   .justify-between {
     justify-content: space-between;
   }
+  .gap-2 {
+    gap: 0.5rem;
+  }
   .gap-\[10px\] {
     gap: 10px;
   }
@@ -1065,6 +1074,9 @@ video {
   .p-xs {
     padding: var(--spacing-xs);
   }
+  .p-xsmall {
+    padding: var(--spacing-xsmall);
+  }
   .px-1 {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
@@ -1077,6 +1089,10 @@ video {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+  .px-big {
+    padding-left: var(--spacing-big);
+    padding-right: var(--spacing-big);
+  }
   .px-md {
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-md);
@@ -1085,6 +1101,10 @@ video {
     padding-left: var(--spacing-sm);
     padding-right: var(--spacing-sm);
   }
+  .px-xsmall {
+    padding-left: var(--spacing-xsmall);
+    padding-right: var(--spacing-xsmall);
+  }
   .py-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -1097,10 +1117,18 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+  .py-\[10px\] {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
   .py-sm {
     padding-top: var(--spacing-sm);
     padding-bottom: var(--spacing-sm);
   }
+  .py-small {
+    padding-top: var(--spacing-small);
+    padding-bottom: var(--spacing-small);
+  }
   .py-xs {
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
@@ -1617,10 +1645,11 @@ video {
 .ds-sdk-add-to-cart-button {
   background-color: var(--color-neutral-50);
   color: var(--color-brand-700);
-  padding: var(--spacing-xs);
   font-size: var(--font-sm);
   font-weight: var(--font-medium);
   cursor: pointer;
+  padding: 0;
+  height: 100%;
 }
 
 .ds-sdk-product-image-hover {
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 58f4406e..59f527f7 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -280,10 +280,11 @@
 .ds-sdk-add-to-cart-button {
   background-color: var(--color-neutral-50);
   color: var(--color-brand-700);
-  padding: var(--spacing-xs);
   font-size: var(--font-sm);
   font-weight: var(--font-medium);
   cursor: pointer;
+  padding: 0;
+  height: 100%;
 }
 
 .ds-sdk-product-image-hover {
diff --git a/src/types/interface.ts b/src/types/interface.ts
index b3283a56..0dc0fd95 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -51,7 +51,7 @@ export interface StoreDetailsConfig {
   refreshCart?: () => void;
   addToCart?: (
     sku: string,
-    options: [],
+    options: string[],
     quantity: number
   ) => Promise<void | undefined>;
 }
@@ -332,10 +332,12 @@ export interface ProductViewMedia {
   roles: ImageRoles[];
 }
 
+export type SwatchType = 'COLOR_HEX' | 'IMAGE' | 'TEXT' | 'SIZE';
+
 export interface SwatchValues {
   title: string;
   id: string;
-  type: string;
+  type: SwatchType;
   value: string;
 }
 

From 5ed78f9ccc9abc5a78a413597cb19c406c26d7b5 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Tue, 25 Jun 2024 01:06:19 +0530
Subject: [PATCH 032/160] Add necessary meta tags

---
 dev-template.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/dev-template.html b/dev-template.html
index 03fdf03b..f9f5a0d8 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 
 <head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Live Search PLP</title>
 
   <!-- reset css -->

From c7c5aee04f40f0568f843ee42c7f363a1cf8224c Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Tue, 25 Jun 2024 01:37:47 +0530
Subject: [PATCH 033/160] Make image hover transition faster

---
 src/styles/index.css  | 2 +-
 src/styles/tokens.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index e25d6947..0589b038 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1653,7 +1653,7 @@ video {
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
+  transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
 
 .first\:ml-0:first-child {
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 59f527f7..16a9662e 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -288,5 +288,5 @@
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
+  transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }

From 7d98b8e9f485d70bc83ed5ca819e23d4cf6e003f Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Tue, 25 Jun 2024 15:24:03 +0530
Subject: [PATCH 034/160] Handle addToCart for complex product type and hide
 size swatches on mouse leave

---
 src/components/ProductItem/ProductItem.tsx | 53 ++++++++--------------
 1 file changed, 19 insertions(+), 34 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index d99c481d..d5ccbc1d 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -87,6 +87,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   const handleMouseOut = () => {
     setIsHovering(false);
+    setShowSizes(false);
   };
 
   const handleSelection = async (optionIds: string[], sku: string) => {
@@ -164,28 +165,24 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   const updateCart = async (selectedVariants: string[] = []) => {
     setError(false);
-    if (isSimple) {
-      if (addToCart) {
-        //Custom add to cart function passed in
-        await addToCart(productView.sku, selectedVariants, 1);
-      } else {
-        // Add to cart using GraphQL & Luma extension
-        const response = await addToCartGraphQL(productView.sku, selectedVariants);
-
-        if (
-          response?.errors ||
-          response?.data?.addProductsToCart?.user_errors.length > 0
-        ) {
-          setError(true);
-          return;
-        }
-
-        setItemAdded(product.name);
-        refreshCart && refreshCart();
-        setCartUpdated(true);
+    if (addToCart) {
+      //Custom add to cart function passed in
+      await addToCart(productView.sku, selectedVariants, 1);
+    } else {
+      // Add to cart using GraphQL & Luma extension
+      const response = await addToCartGraphQL(productView.sku, selectedVariants);
+
+      if (
+        response?.errors ||
+        response?.data?.addProductsToCart?.user_errors.length > 0
+      ) {
+        setError(true);
+        return;
       }
-    } else if (productUrl) {
-      window.open(productUrl, '_self');
+
+      setItemAdded(product.name);
+      refreshCart && refreshCart();
+      setCartUpdated(true);
     }
   }
 
@@ -394,19 +391,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               <div className="ds-sdk-product-item__product-swatch flex flex-row text-sm text-brand-700">
                 {productView?.options?.map(
                   (swatches) => {
-                    if (swatches.title === SWATCH_COLORS) {
-                      return (
-                        <SwatchButtonGroup
-                          key={product?.sku}
-                          isSelected={isSelected}
-                          swatches={swatches.values ?? []}
-                          showMore={onProductClick}
-                          productUrl={productUrl as string}
-                          onClick={handleSelection}
-                          sku={product?.sku}
-                        />
-                      );
-                    } else if ([SWATCH_COLORS_TEAM, SWATCH_COLORS_TEAM_NAME].includes(swatches.title || '')) {
+                    if ([SWATCH_COLORS, SWATCH_COLORS_TEAM, SWATCH_COLORS_TEAM_NAME].includes(swatches.title || '')) {
                       return (
                         <SwatchButtonGroup
                           key={product?.sku}

From 8e1d95ec4f319581ac0b98c729418f9478662266 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Tue, 25 Jun 2024 15:53:01 +0530
Subject: [PATCH 035/160] Prevent page navigation on swatch or quick add button
 click

---
 src/components/ProductItem/ProductItem.tsx        |  3 ++-
 .../SwatchButtonGroup/SwatchButtonGroup.tsx       | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index d5ccbc1d..bc11e452 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -139,7 +139,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
         product?.price_range?.minimum_price?.final_price?.value ||
       productView?.price?.regular?.amount?.value >
         productView?.price?.final?.amount?.value;
-  const isSimple = product?.__typename === 'SimpleProduct';
+
   const isComplexProductView = productView?.__typename === 'ComplexProductView';
   const isBundle = product?.__typename === 'BundleProduct';
   const isGrouped = product?.__typename === 'GroupedProduct';
@@ -188,6 +188,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   const handleAddToCart = async (evt: any) => {
     evt.preventDefault();
+    evt.stopPropagation();
 
     const hasSizeOptions = productView?.options?.some((swatches) => swatches.title === SWATCH_SIZE);
     if ((!listview || viewType !== 'listview') && hasSizeOptions) {
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index fb72bf4e..5d6da13d 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -43,6 +43,12 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
           {swatches.slice(0, numberOfOptions).map((swatch) => {
             const checked = isSelected(swatch.id);
             const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''}`;
+            const handleClick = (evt: Event) => {
+              evt.preventDefault();
+              evt.stopPropagation();
+
+              onClick([swatch.id], sku);
+            }
 
             return (
               <div className={wrapperClasses} key={swatch.id}>
@@ -51,7 +57,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
                     value={swatch.value}
                     type={swatch.type}
                     checked={!!checked}
-                    onClick={() => onClick([swatch.id], sku)}
+                    onClick={handleClick}
                   />
                 </div>
               );
@@ -78,7 +84,12 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
                 value={swatch.value}
                 type={swatch.type}
                 checked={!!checked}
-                onClick={() => onClick([swatch.id], sku)}
+                onClick={(evt: Event) => {
+                  evt.preventDefault();
+                  evt.stopPropagation();
+
+                  onClick([swatch.id], sku);
+                }}
               />
             </div>
           );

From 9156c8af002cfc45800c9b6f723d89349a979012 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 25 Jun 2024 09:54:02 -0700
Subject: [PATCH 036/160] mobile facet structure

---
 src/components/Drawer/Drawer.tsx              |   0
 .../FilterSelection/FilterSelectionGroup.tsx  |   2 +-
 .../InputButtonGroup/InputButtonGroup.tsx     |  70 +++++-----
 src/components/MobileFacets/MobileFacets.tsx  |  54 ++++++++
 .../MobileFacets/Range/RangeFacet.stories.mdx |  34 +++++
 .../MobileFacets/Range/RangeFacet.test.tsx    |  24 ++++
 .../MobileFacets/Range/RangeFacet.tsx         |  37 ++++++
 .../Scalar/ScalarFacet.stories.mdx            |  32 +++++
 .../MobileFacets/Scalar/ScalarFacet.test.tsx  |  24 ++++
 .../MobileFacets/Scalar/ScalarFacet.tsx       |  35 +++++
 .../MobileFacets/SelectedFilters.tsx          |  75 +++++++++++
 src/components/MobileFacets/format.ts         |  61 +++++++++
 src/components/MobileFacets/index.ts          |  14 ++
 src/components/MobileFacets/mocks.tsx         | 124 ++++++++++++++++++
 src/containers/MobileFilterHeader.tsx         |   5 +-
 15 files changed, 552 insertions(+), 39 deletions(-)
 create mode 100644 src/components/Drawer/Drawer.tsx
 create mode 100644 src/components/MobileFacets/MobileFacets.tsx
 create mode 100644 src/components/MobileFacets/Range/RangeFacet.stories.mdx
 create mode 100644 src/components/MobileFacets/Range/RangeFacet.test.tsx
 create mode 100644 src/components/MobileFacets/Range/RangeFacet.tsx
 create mode 100644 src/components/MobileFacets/Scalar/ScalarFacet.stories.mdx
 create mode 100644 src/components/MobileFacets/Scalar/ScalarFacet.test.tsx
 create mode 100644 src/components/MobileFacets/Scalar/ScalarFacet.tsx
 create mode 100644 src/components/MobileFacets/SelectedFilters.tsx
 create mode 100644 src/components/MobileFacets/format.ts
 create mode 100644 src/components/MobileFacets/index.ts
 create mode 100644 src/components/MobileFacets/mocks.tsx

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/FilterSelection/FilterSelectionGroup.tsx b/src/components/FilterSelection/FilterSelectionGroup.tsx
index 99c17ddf..bd215e45 100644
--- a/src/components/FilterSelection/FilterSelectionGroup.tsx
+++ b/src/components/FilterSelection/FilterSelectionGroup.tsx
@@ -100,7 +100,7 @@ export const FilterSelectionGroup: FunctionComponent<
   return (
     <div className="ds-sdk-input py-md">
       <fieldset className="ds-sdk-input__options">
-        <div className="">
+        <div>
           {buckets.slice(0, numberOfOptions).map((option) => {
             const checked = isSelected(option.title);
             const noShowPriceBucketCount = option.__typename === 'RangeBucket';
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 8fc0acd4..0e7dc192 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -61,44 +61,44 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   };
 
   const formatLabel = (title: string, bucket: Bucket) => {
+    const {
+      currencyRate = '1',
+      currencySymbol = '$',
+      categoryPath,
+    } = productsCtx;
+
+    const formatPrice = (value: number) =>
+      (parseFloat(currencyRate) * value).toFixed(2);
+
     if (bucket.__typename === 'RangeBucket') {
-      const currencyRate = productsCtx.currencyRate
-        ? productsCtx.currencyRate
-        : '1';
-      const currencySymbol = productsCtx.currencySymbol
-        ? productsCtx.currencySymbol
-        : '$';
-      const label = `${currencySymbol}${
-        bucket?.from &&
-        parseFloat(currencyRate) * parseInt(bucket.from.toFixed(0), 10)
-          ? (
-              parseFloat(currencyRate) * parseInt(bucket.from.toFixed(0), 10)
-            ).toFixed(2)
-          : 0
-      }${
-        bucket?.to &&
-        parseFloat(currencyRate) * parseInt(bucket.to.toFixed(0), 10)
-          ? ` - ${currencySymbol}${(
-              parseFloat(currencyRate) * parseInt(bucket.to.toFixed(0), 10)
-            ).toFixed(2)}`
-          : translation.InputButtonGroup.priceRange
-      }`;
-      return label;
-    } else if (bucket.__typename === 'CategoryView') {
-      return productsCtx.categoryPath
-        ? bucket.name ?? bucket.title
-        : bucket.title;
-    } else if (bucket.title === BOOLEAN_YES) {
+      const fromPrice = bucket.from
+        ? `${currencySymbol}${formatPrice(
+            parseInt(bucket.from.toFixed(0), 10)
+          )}`
+        : '0';
+      const toPrice = bucket.to
+        ? ` - ${currencySymbol}${formatPrice(
+            parseInt(bucket.to.toFixed(0), 10)
+          )}`
+        : translation.InputButtonGroup.priceRange;
+      return `${fromPrice}${toPrice}`;
+    }
+
+    if (bucket.__typename === 'CategoryView') {
+      return categoryPath ? bucket.name ?? bucket.title : bucket.title;
+    }
+
+    if (bucket.title === BOOLEAN_YES) {
       return title;
-    } else if (bucket.title === BOOLEAN_NO) {
-      const excludedMessageTranslation =
-        translation.InputButtonGroup.priceExcludedMessage;
-      const excludedMessage = excludedMessageTranslation.replace(
+    }
+
+    if (bucket.title === BOOLEAN_NO) {
+      return translation.InputButtonGroup.priceExcludedMessage.replace(
         '{title}',
-        `${title}`
+        title
       );
-      return excludedMessage;
     }
+
     return bucket.title;
   };
 
@@ -107,7 +107,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
       {inputGroupTitleSlot ? (
         inputGroupTitleSlot(title)
       ) : (
-        <label className="ds-sdk-input__label text-neutral-900 font-headline-1">
+        <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold">
           {title}
         </label>
       )}
@@ -142,7 +142,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
                 type="button"
                 className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
               >
-                <span className="font-button-2">
+                <span className="font-button-2 text-[12px]">
                   {translation.InputButtonGroup.showmore}
                 </span>
               </button>
diff --git a/src/components/MobileFacets/MobileFacets.tsx b/src/components/MobileFacets/MobileFacets.tsx
new file mode 100644
index 00000000..2f4bc3e9
--- /dev/null
+++ b/src/components/MobileFacets/MobileFacets.tsx
@@ -0,0 +1,54 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+import { useStore } from '../../context';
+import { Facet as FacetType, PriceFacet } from '../../types/interface';
+import SliderDoubleControl from '../SliderDoubleControl';
+import { RangeFacet } from './Range/RangeFacet';
+import { ScalarFacet } from './Scalar/ScalarFacet';
+
+interface FacetsProps {
+  searchFacets: FacetType[];
+}
+
+export const MobileFacets: FunctionComponent<FacetsProps> = ({
+  searchFacets,
+}: FacetsProps) => {
+  const {
+    config: { priceSlider },
+  } = useStore();
+  return (
+    <div className="ds-plp-facets flex flex-col">
+      <form className="ds-plp-facets__list border-t border-neutral-500">
+        {searchFacets?.map((facet) => {
+          const bucketType = facet?.buckets[0]?.__typename;
+          switch (bucketType) {
+            case 'ScalarBucket':
+              return <ScalarFacet key={facet.attribute} filterData={facet} />;
+            case 'RangeBucket':
+              return priceSlider ? (
+                <SliderDoubleControl filterData={facet as PriceFacet} />
+              ) : (
+                <RangeFacet
+                  key={facet.attribute}
+                  filterData={facet as PriceFacet}
+                />
+              );
+            case 'CategoryView':
+              return <ScalarFacet key={facet.attribute} filterData={facet} />;
+            default:
+              return null;
+          }
+        })}
+      </form>
+    </div>
+  );
+};
diff --git a/src/components/MobileFacets/Range/RangeFacet.stories.mdx b/src/components/MobileFacets/Range/RangeFacet.stories.mdx
new file mode 100644
index 00000000..c5548252
--- /dev/null
+++ b/src/components/MobileFacets/Range/RangeFacet.stories.mdx
@@ -0,0 +1,34 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { RangeFacet } from "../../../components";
+import { mockPriceFilter } from "../mocks.tsx";
+import { SearchDecorator } from "../../../../.storybook/decorators/SearchDecorator";
+
+<Meta
+    title="PLP/RangeFacet"
+    component={RangeFacet}
+    parameters={{
+        layout: "centered"
+    }}
+    decorators={[SearchDecorator]}
+/>
+
+export const Template = args => <RangeFacet {...args} />;
+
+# RangeFacet
+
+Range Facet display with radio buttons
+
+```
+import { RangeFacet } from './Facets'
+```
+
+<Canvas>
+    <Story
+        name="RangeFacet"
+        args={{
+            filterData: mockPriceFilter,
+        }}
+    >
+        {Template.bind({})}
+    </Story>
+</Canvas>
diff --git a/src/components/MobileFacets/Range/RangeFacet.test.tsx b/src/components/MobileFacets/Range/RangeFacet.test.tsx
new file mode 100644
index 00000000..629e0e49
--- /dev/null
+++ b/src/components/MobileFacets/Range/RangeFacet.test.tsx
@@ -0,0 +1,24 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+/// <reference types="@types/jest" />;
+import { render } from '@testing-library/preact';
+import { PriceFacet } from 'src/types/interface';
+
+import { RangeFacet } from './RangeFacet';
+
+describe('PLP widget/RangeFacet', () => {
+  it('renders', () => {
+    const { container } = render(<RangeFacet filterData={{} as PriceFacet} />);
+
+    const elem = container.querySelector('.ds-sdk-input');
+
+    expect(!!elem).toEqual(true);
+  });
+});
diff --git a/src/components/MobileFacets/Range/RangeFacet.tsx b/src/components/MobileFacets/Range/RangeFacet.tsx
new file mode 100644
index 00000000..4890fa87
--- /dev/null
+++ b/src/components/MobileFacets/Range/RangeFacet.tsx
@@ -0,0 +1,37 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+import useRangeFacet from '../../../hooks/useRangeFacet';
+import { PriceFacet } from '../../../types/interface';
+import { InputButtonGroup } from '../../InputButtonGroup';
+
+interface RangeFacetProps {
+  filterData: PriceFacet;
+}
+
+export const RangeFacet: FunctionComponent<RangeFacetProps> = ({
+  filterData,
+}) => {
+  const { isSelected, onChange } = useRangeFacet(filterData);
+
+  return (
+    <InputButtonGroup
+      title={filterData.title}
+      attribute={filterData.attribute}
+      buckets={filterData.buckets}
+      type={'radio'}
+      isSelected={isSelected}
+      onChange={(e) => {
+        onChange(e.value);
+      }}
+    />
+  );
+};
diff --git a/src/components/MobileFacets/Scalar/ScalarFacet.stories.mdx b/src/components/MobileFacets/Scalar/ScalarFacet.stories.mdx
new file mode 100644
index 00000000..3e18ce9c
--- /dev/null
+++ b/src/components/MobileFacets/Scalar/ScalarFacet.stories.mdx
@@ -0,0 +1,32 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { ScalarFacet } from "../../../components";
+import { mockColorFilter } from "../mocks.tsx";
+
+<Meta
+    title="PLP/ScalarFacet"
+    component={ScalarFacet}
+    parameters={{
+        layout: "centered"
+    }}
+/>
+
+export const Template = args => <ScalarFacet {...args} />;
+
+# Scalar Facet
+
+Scalar Facet display with checkboxes
+
+```
+import { ScalarFacet } from './Facets'
+```
+
+<Canvas>
+    <Story
+        name="ScalarFacet"
+        args={{
+            filterData: mockColorFilter,
+        }}
+    >
+        {Template.bind({})}
+    </Story>
+</Canvas>
diff --git a/src/components/MobileFacets/Scalar/ScalarFacet.test.tsx b/src/components/MobileFacets/Scalar/ScalarFacet.test.tsx
new file mode 100644
index 00000000..400e9b2f
--- /dev/null
+++ b/src/components/MobileFacets/Scalar/ScalarFacet.test.tsx
@@ -0,0 +1,24 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+/// <reference types="@types/jest" />;
+import { render } from '@testing-library/preact';
+
+import { PriceFacet } from '../../../types/interface';
+import { ScalarFacet } from './ScalarFacet';
+
+describe('PLP widget/RangeFacet', () => {
+  it('renders', () => {
+    const { container } = render(<ScalarFacet filterData={{} as PriceFacet} />);
+
+    const elem = container.querySelector('.ds-sdk-input');
+
+    expect(!!elem).toEqual(true);
+  });
+});
diff --git a/src/components/MobileFacets/Scalar/ScalarFacet.tsx b/src/components/MobileFacets/Scalar/ScalarFacet.tsx
new file mode 100644
index 00000000..1233a6ed
--- /dev/null
+++ b/src/components/MobileFacets/Scalar/ScalarFacet.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+import useScalarFacet from '../../../hooks/useScalarFacet';
+import { Facet as FacetType, PriceFacet } from '../../../types/interface';
+import { InputButtonGroup } from '../../InputButtonGroup';
+
+interface ScalarFacetProps {
+  filterData: FacetType | PriceFacet;
+}
+
+export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
+  filterData,
+}) => {
+  const { isSelected, onChange } = useScalarFacet(filterData);
+
+  return (
+    <InputButtonGroup
+      title={filterData.title}
+      attribute={filterData.attribute}
+      buckets={filterData.buckets as any}
+      type={'checkbox'}
+      isSelected={isSelected}
+      onChange={(args) => onChange(args.value, args.selected)}
+    />
+  );
+};
diff --git a/src/components/MobileFacets/SelectedFilters.tsx b/src/components/MobileFacets/SelectedFilters.tsx
new file mode 100644
index 00000000..75a012ac
--- /dev/null
+++ b/src/components/MobileFacets/SelectedFilters.tsx
@@ -0,0 +1,75 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+import { useProducts, useSearch, useTranslation } from '../../context';
+import Pill from '../Pill';
+import { formatBinaryLabel, formatRangeLabel } from './format';
+
+export const SelectedFilters: FunctionComponent = ({}) => {
+  const searchCtx = useSearch();
+  const productsCtx = useProducts();
+  const translation = useTranslation();
+
+  return (
+    <div className="w-full h-full">
+      {searchCtx.filters?.length > 0 && (
+        <div className="ds-plp-facets__pills pb-6 sm:pb-6 flex flex-wrap mt-8 justify-start">
+          {searchCtx.filters.map((filter) => (
+            <div key={filter.attribute}>
+              {filter.in?.map((option) => (
+                <Pill
+                  key={formatBinaryLabel(
+                    filter,
+                    option,
+                    searchCtx.categoryNames,
+                    productsCtx.categoryPath
+                  )}
+                  label={formatBinaryLabel(
+                    filter,
+                    option,
+                    searchCtx.categoryNames,
+                    productsCtx.categoryPath
+                  )}
+                  type="transparent"
+                  onClick={() => searchCtx.updateFilterOptions(filter, option)}
+                />
+              ))}
+              {filter.range && (
+                <Pill
+                  label={formatRangeLabel(
+                    filter,
+                    productsCtx.currencyRate,
+                    productsCtx.currencySymbol
+                  )}
+                  type="transparent"
+                  onClick={() => {
+                    searchCtx.removeFilter(filter.attribute);
+                  }}
+                />
+              )}
+            </div>
+          ))}
+          <div className="py-1">
+            <button
+              className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
+              focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none text-sm px-4"
+              onClick={() => searchCtx.clearFilters()}
+            >
+              <span className="font-button-2">
+                {translation.Filter.clearAll}
+              </span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/MobileFacets/format.ts b/src/components/MobileFacets/format.ts
new file mode 100644
index 00000000..a102371c
--- /dev/null
+++ b/src/components/MobileFacets/format.ts
@@ -0,0 +1,61 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FacetFilter } from '../../types/interface';
+
+// format range with null "to"
+const formatRangeLabel = (
+  filter: FacetFilter,
+  currencyRate: string,
+  currencySymbol: string
+) => {
+  const range = filter.range;
+
+  const rate = currencyRate ? currencyRate : '1';
+  const symbol = currencySymbol ? currencySymbol : '$';
+  const label = `${symbol}${
+    range?.from && parseFloat(rate) * parseInt(range.from.toFixed(0), 10)
+      ? (parseFloat(rate) * parseInt(range.from?.toFixed(0), 10))?.toFixed(2)
+      : 0
+  }${
+    range?.to && parseFloat(rate) * parseInt(range.to.toFixed(0), 10)
+      ? ` - ${symbol}${(
+          parseFloat(rate) * parseInt(range.to.toFixed(0), 10)
+        ).toFixed(2)}`
+      : ' and above'
+  }`;
+  return label;
+};
+
+const formatBinaryLabel = (
+  filter: FacetFilter,
+  option: string,
+  categoryNames?: { value: string; name: string; attribute: string }[],
+  categoryPath?: string
+) => {
+  if (categoryPath && categoryNames) {
+    const category = categoryNames.find(
+      (facet) => facet.attribute === filter.attribute && facet.value === option
+    );
+
+    if (category?.name) {
+      return category.name;
+    }
+  }
+
+  const title = filter.attribute?.split('_');
+  if (option === 'yes') {
+    return title.join(' ');
+  } else if (option === 'no') {
+    return `not ${title.join(' ')}`;
+  }
+  return option;
+};
+
+export { formatBinaryLabel, formatRangeLabel };
diff --git a/src/components/MobileFacets/index.ts b/src/components/MobileFacets/index.ts
new file mode 100644
index 00000000..1f843560
--- /dev/null
+++ b/src/components/MobileFacets/index.ts
@@ -0,0 +1,14 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './MobileFacets';
+export * from './SelectedFilters';
+export * from './Range/RangeFacet';
+export * from './Scalar/ScalarFacet';
+export { MobileFacets as default } from './MobileFacets';
diff --git a/src/components/MobileFacets/mocks.tsx b/src/components/MobileFacets/mocks.tsx
new file mode 100644
index 00000000..2b4c77de
--- /dev/null
+++ b/src/components/MobileFacets/mocks.tsx
@@ -0,0 +1,124 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import {
+  Facet,
+  PriceFacet,
+  RangeBucket,
+  ScalarBucket,
+} from '../../types/interface';
+
+const colorBuckets: ScalarBucket[] = [
+  {
+    count: 5,
+    title: 'Green',
+    __typename: 'ScalarBucket',
+  },
+  {
+    count: 4,
+    title: 'Black',
+    __typename: 'ScalarBucket',
+  },
+  {
+    count: 3,
+    title: 'Blue',
+    __typename: 'ScalarBucket',
+  },
+  {
+    count: 2,
+    title: 'Gray',
+    __typename: 'ScalarBucket',
+  },
+  {
+    count: 1,
+    title: 'Pink',
+    __typename: 'ScalarBucket',
+  },
+  {
+    count: 0,
+    title: 'Yellow',
+    __typename: 'ScalarBucket',
+  },
+];
+const sizeBuckets: ScalarBucket[] = [
+  {
+    count: 2,
+    title: '32',
+    __typename: 'ScalarBucket',
+  },
+  {
+    count: 2,
+    title: '33',
+    __typename: 'ScalarBucket',
+  },
+  {
+    count: 1,
+    title: 'L',
+    __typename: 'ScalarBucket',
+  },
+];
+const priceBuckets: RangeBucket[] = [
+  {
+    title: '0.0-25.0',
+    __typename: 'RangeBucket',
+    from: 0,
+    to: 25,
+    count: 45,
+  },
+  {
+    title: '25.0-50.0',
+    __typename: 'RangeBucket',
+    from: 25,
+    to: 50,
+    count: 105,
+  },
+  {
+    title: '75.0-100.0',
+    __typename: 'RangeBucket',
+    from: 75,
+    to: 100,
+    count: 6,
+  },
+  {
+    title: '200.0-225.0',
+    __typename: 'RangeBucket',
+    from: 200,
+    to: 225,
+    count: 2,
+  },
+];
+
+export const mockFilters: Facet[] = [
+  {
+    title: 'Color',
+    attribute: 'color',
+    buckets: colorBuckets,
+    __typename: 'ScalarBucket',
+  },
+  {
+    title: 'Size',
+    attribute: 'size',
+    buckets: sizeBuckets,
+    __typename: 'ScalarBucket',
+  },
+];
+
+export const mockColorFilter: Facet = {
+  title: 'Color',
+  attribute: 'color',
+  buckets: colorBuckets,
+  __typename: 'ScalarBucket',
+};
+
+export const mockPriceFilter: PriceFacet = {
+  title: 'Price',
+  attribute: 'price',
+  buckets: priceBuckets,
+  __typename: 'RangeBucket',
+};
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index ef69a0c1..3d635adb 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -9,11 +9,10 @@ it.
 
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
+import MobileFacets from 'src/components/MobileFacets';
 import ViewSwitcher from 'src/components/ViewSwitcher';
 
-import Facets from '../components/Facets';
 import { FilterButton } from '../components/FilterButton';
-import { SearchBar } from '../components/SearchBar';
 import { SortDropdown } from '../components/SortDropdown';
 import {
   useAttributeMetadata,
@@ -109,7 +108,7 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
           </div>
         )}
       </div>
-      {screenSize.mobile && showMobileFacet && <Facets searchFacets={facets} />}
+      {screenSize.mobile && showMobileFacet && <MobileFacets searchFacets={facets} />}
     </div>
   );
 };

From 1df11a7554f7c9408efe027b97719fbd7cc5cde9 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 25 Jun 2024 10:20:53 -0700
Subject: [PATCH 037/160] WIP mobile filters

---
 src/components/InputButtonGroup/InputButtonGroup.tsx | 2 +-
 src/containers/App.tsx                               | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 0e7dc192..69e4b46d 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -111,7 +111,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
           {title}
         </label>
       )}
-      <fieldset className="ds-sdk-input__options mt-md">
+      <fieldset className="ds-sdk-input__options">
         <div className="space-y-4">
           {buckets.slice(0, numberOfOptions).map((option) => {
             const checked = isSelected(option.title);
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index d6735df5..a9a5f9aa 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -126,7 +126,6 @@ export const App: FunctionComponent = () => {
                         screenSize={screenSize}
                       />
                     </div>
-                    <SelectedFilters />
                     <ProductsContainer
                       showFilters={showFilters && productsCtx.facets.length > 0}
                     />

From 69629ffdff9edc2e7efa215fd8e0f7039c706eb9 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 25 Jun 2024 12:29:33 -0700
Subject: [PATCH 038/160] working drawer

---
 src/components/Drawer/Drawer.tsx             | 32 ++++++++
 src/components/MobileFacets/MobileFacets.tsx |  2 +
 src/components/SortDropdown/SortDropdown.tsx | 12 ++-
 src/containers/MobileFilterHeader.tsx        | 13 +++-
 src/styles/index.css                         | 79 ++++++++++++++++++++
 5 files changed, 132 insertions(+), 6 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index e69de29b..35ac2104 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -0,0 +1,32 @@
+import { FunctionComponent } from 'preact';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const Drawer: FunctionComponent<DrawerProps> = ({
+  isOpen,
+  onClose,
+  children,
+}) => {
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex">
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50"
+            onClick={onClose}
+          />
+          <div className="relative mt-auto w-full bg-white h-80 shadow-lg overflow-auto slide-up">
+            <div className="flex items-center justify-between p-4">
+              <button onClick={onClose}>&times;</button>
+            </div>
+            <div className="p-4">{children}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/MobileFacets/MobileFacets.tsx b/src/components/MobileFacets/MobileFacets.tsx
index 2f4bc3e9..dfd7d2ed 100644
--- a/src/components/MobileFacets/MobileFacets.tsx
+++ b/src/components/MobileFacets/MobileFacets.tsx
@@ -25,8 +25,10 @@ export const MobileFacets: FunctionComponent<FacetsProps> = ({
   const {
     config: { priceSlider },
   } = useStore();
+
   return (
     <div className="ds-plp-facets flex flex-col">
+      <h1>Filter Products</h1>
       <form className="ds-plp-facets__list border-t border-neutral-500">
         {searchFacets?.map((facet) => {
           const bucketType = facet?.buckets[0]?.__typename;
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 4f544135..352024db 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -19,13 +19,17 @@ export interface SortDropdownProps {
   value: string;
   sortOptions: SortOption[];
   onChange: (sortBy: string) => void;
+  mobile?: boolean;
 }
 
 export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
   value,
   sortOptions,
   onChange,
+  mobile
 }: SortDropdownProps) => {
+  console.log(mobile)
+
   const sortOptionButton = useRef<HTMLButtonElement | null>(null);
   const sortOptionMenu = useRef<HTMLDivElement | null>(null);
 
@@ -81,11 +85,11 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     <>
       <div
         ref={sortOptionMenu}
-        class="ds-sdk-sort-dropdown flex items-center gap-x-2 shrink-0 relative inline-block text-left bg-neutral-50 h-[32px] z-9"
+        class="ds-sdk-sort-dropdown flex items-center gap-x-2 shrink-0 relative inline-block text-left bg-neutral-50 z-9"
       >
-        <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold">
+        {!mobile && <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold">
           {translation.SortDropdown.title}
-        </label>
+        </label>}
         <button
           className="group flex justify-center items-center gap-x-1 hover:cursor-pointer bg-background h-full"
           ref={sortOptionButton}
@@ -93,7 +97,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
           onFocus={() => setIsFocus(false)}
           onBlur={() => setIsFocus(false)}
         >
-          <span className="font-headline-1 text-sm text-neutral-700">
+          <span className={`font-headline-1 text-sm ${!mobile ? 'text-neutral-700' : ''}`}>
             {selectedOption ? sortOption : translation.SortDropdown.title}
           </span>
           <Chevron
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 3d635adb..db273277 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -9,6 +9,7 @@ it.
 
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
+import { Drawer } from 'src/components/Drawer/Drawer';
 import MobileFacets from 'src/components/MobileFacets';
 import ViewSwitcher from 'src/components/ViewSwitcher';
 
@@ -98,17 +99,25 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
         )}
 
         {totalCount > 0 && (
-          <div className="flex justify-center w-1/2">
+          <div className="flex justify-center w-1/2 py-md">
             {storeCtx?.config?.listview && <ViewSwitcher />}
             <SortDropdown
               sortOptions={sortOptions}
               value={sortBy}
               onChange={onSortChange}
+              mobile
             />
           </div>
         )}
       </div>
-      {screenSize.mobile && showMobileFacet && <MobileFacets searchFacets={facets} />}
+      {screenSize.mobile && (
+        <Drawer
+          isOpen={showMobileFacet}
+          onClose={() => setShowMobileFacet(!showMobileFacet)}
+        >
+          <MobileFacets searchFacets={facets} />
+        </Drawer>
+      )}
     </div>
   );
 };
diff --git a/src/styles/index.css b/src/styles/index.css
index 25503018..94a8d5c9 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1801,6 +1801,85 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   opacity: 1;
 }
 
+/* Testing Drawer Classes */
+.fixed {
+  position: fixed;
+}
+
+.inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.h-80 {
+  height: 80%; /* Adjust height as needed */
+}
+
+.shadow-lg {
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.text-white {
+  color: white;
+}
+
+.bg-black {
+  background-color: black;
+}
+
+.bg-opacity-50 {
+  opacity: 0.5;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.bg-gray-100 {
+  background-color: #f7fafc;
+}
+
+/* Slide transitions */
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.slide-up {
+  animation: slideUp 0.3s ease-out forwards;
+}
+
+.slide-down {
+  animation: slideDown 0.3s ease-out forwards;
+}
+
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;

From 31f47a657af81a4e1e28f0e0bd251413ba47a529 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 25 Jun 2024 15:22:06 -0700
Subject: [PATCH 039/160] remove scroll from body when drawer is open

---
 src/components/Drawer/Drawer.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 35ac2104..e013bd7e 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -1,4 +1,7 @@
 import { FunctionComponent } from 'preact';
+import { useEffect } from 'preact/hooks';
+
+import CloseIcon from '../../icons/plus.svg';
 
 interface DrawerProps {
   isOpen: boolean;
@@ -10,6 +13,13 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
   onClose,
   children,
 }) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.classList.add('no-scroll');
+    } else {
+      document.body.classList.remove('no-scroll');
+    }
+  }, [isOpen]);
 
   return (
     <>
@@ -21,7 +31,10 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
           />
           <div className="relative mt-auto w-full bg-white h-80 shadow-lg overflow-auto slide-up">
             <div className="flex items-center justify-between p-4">
-              <button onClick={onClose}>&times;</button>
+              <CloseIcon
+                className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer fill-neutral-800"
+                onClick={onClose}
+              />
             </div>
             <div className="p-4">{children}</div>
           </div>

From b80500020f4649ea5d680056a29cc3f6be2c3f10 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Tue, 25 Jun 2024 15:22:21 -0700
Subject: [PATCH 040/160] reorganized global styles

---
 src/styles/index.css | 81 ++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 45 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index 94a8d5c9..9ec2e16b 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -527,6 +527,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .relative {
     position: relative;
   }
+  .fixed {
+    position: fixed;
+  }
   .bottom-0 {
     bottom: 0px;
   }
@@ -542,6 +545,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .z-20 {
     z-index: 20;
   }
+  .z-50 {
+    z-index: 50;
+  }
   .m-4 {
     margin: 1rem;
   }
@@ -622,14 +628,17 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .mt-8 {
     margin-top: 2rem;
   }
-  .mt-md {
-    margin-top: var(--spacing-md);
+  .mt-auto {
+    margin-top: auto;
+  }
+  .mt-xs {
+    margin-top: var(--spacing-xs);
   }
   .mt-sm {
     margin-top: var(--spacing-sm);
   }
-  .mt-xs {
-    margin-top: var(--spacing-xs);
+  .mt-md {
+    margin-top: var(--spacing-md);
   }
   .inline-block {
     display: inline-block;
@@ -655,6 +664,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-28 {
     height: 7rem;
   }
+  .h-80 {
+    height: 80%;
+  }
   .h-3 {
     height: 0.75rem;
   }
@@ -688,6 +700,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-full {
     height: 100%;
   }
+  .min-h-screen {
+    min-height: 100vh;
+  }
   .h-md {
     height: var(--spacing-md);
   }
@@ -945,6 +960,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -991,6 +1009,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .border-brand-700 {
     border-color: var(--color-brand-700);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+
+  .bg-opacity-50 {
+    opacity: 0.5;
+  }
+
   .border-gray-200 {
     --tw-border-opacity: 1;
     border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1402,6 +1428,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   /* font-size: 1.6rem; */
   /* Elsie base design */
+  --color-black: #15191d;
   --color-brand-300: #6d6d6d;
   --color-brand-500: #454545;
   --color-brand-600: #383838;
@@ -1801,11 +1828,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   opacity: 1;
 }
 
-/* Testing Drawer Classes */
-.fixed {
-  position: fixed;
-}
-
+/* Drawer Classes */
 .inset-0 {
   top: 0;
   right: 0;
@@ -1813,46 +1836,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   left: 0;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
-.mt-auto {
-  margin-top: auto;
-}
-
-.h-80 {
-  height: 80%; /* Adjust height as needed */
-}
-
 .shadow-lg {
   box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 }
 
-.overflow-auto {
-  overflow: auto;
-}
-
-.text-white {
-  color: white;
-}
-
-.bg-black {
-  background-color: black;
-}
-
-.bg-opacity-50 {
-  opacity: 0.5;
-}
-
-.min-h-screen {
-  min-height: 100vh;
-}
-
-.bg-gray-100 {
-  background-color: #f7fafc;
-}
-
 /* Slide transitions */
 @keyframes slideUp {
   from {
@@ -1880,6 +1867,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   animation: slideDown 0.3s ease-out forwards;
 }
 
+.no-scroll {
+  overflow: hidden;
+}
+
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;

From daedc0d43de40c22ac736b5968e9ae49f501ea10 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Wed, 26 Jun 2024 02:37:28 +0530
Subject: [PATCH 041/160] Fix pagination css

---
 src/components/Pagination/Pagination.tsx | 127 ++++++++++++++++++-----
 src/containers/ProductsContainer.tsx     |  44 ++------
 src/hooks/usePagination.ts               |   7 ++
 src/icons/guillemet.svg                  |   5 +
 src/styles/index.css                     |  64 ++++++++----
 5 files changed, 162 insertions(+), 85 deletions(-)
 create mode 100644 src/icons/guillemet.svg

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index e30402bd..1e629a46 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -10,9 +10,10 @@ it.
 import { FunctionComponent } from 'preact';
 import { useEffect } from 'preact/hooks';
 
-import { useProducts } from '../../context';
+import { useProducts, useSensor } from '../../context';
 import { ELLIPSIS, usePagination } from '../../hooks/usePagination';
 import Chevron from '../../icons/chevron.svg';
+import Guillemet from '../../icons/guillemet.svg';
 
 interface PaginationProps {
   onPageChange: (page: number | string) => void;
@@ -30,6 +31,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     currentPage,
     totalPages,
   });
+  const { screenSize } = useSensor();
 
   useEffect(() => {
     const { currentPage, totalPages } = productsCtx;
@@ -39,37 +41,80 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
 
     return () => {};
   }, []);
-  const onPrevious = () => {
+  const onPrevious = (evt: Event) => {
+    evt.preventDefault();
+
     if (currentPage > 1) {
       onPageChange(currentPage - 1);
     }
   };
 
-  const onNext = () => {
+  const onNext = (evt: Event) => {
+    evt.preventDefault();
+
     if (currentPage < totalPages) {
       onPageChange(currentPage + 1);
     }
   };
 
+  const onFirst = (evt: Event) => {
+    evt.preventDefault();
+
+    if (currentPage > 1) {
+      onPageChange(1);
+    }
+  }
+
+  const onLast = (evt: Event) => {
+    evt.preventDefault();
+
+    if (currentPage < totalPages) {
+      onPageChange(totalPages);
+    }
+  }
+
   return (
-    <ul className="ds-plp-pagination flex justify-center items-center mt-2 mb-6 list-none">
-      <Chevron
-        className={`h-sm w-sm transform rotate-90 ${
-          currentPage === 1
-            ? 'stroke-neutral-600 cursor-not-allowed'
-            : 'stroke-brand-700 cursor-pointer'
-        }`}
-        onClick={onPrevious}
-      />
+    <ul className="ds-plp-pagination flex justify-center items-center list-none gap-[6px] h-[36px] text-[14px] font-normal">
+      <li className="border border-solid border-[#ddd] h-[100%]">
+        <a 
+          href="?p=1"
+          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+          onClick={onFirst}>
+          <Guillemet
+            className={`h-small w-small transform ${
+              currentPage === 1
+                ? 'stroke-neutral-600 cursor-not-allowed'
+                : 'stroke-brand-700 cursor-pointer'
+            }`}
+          />
+          {screenSize.desktop && <span>First</span>}
+        </a>
+      </li>
+      <li className="border border-solid border-[#ddd] h-[100%]">
+        <a 
+          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+          href={`?p=${currentPage - 1}`}
+          onClick={onPrevious}>
+          <Chevron
+            className={`h-sm w-sm transform rotate-90 ${
+              currentPage === 1
+                ? 'stroke-neutral-600 cursor-not-allowed'
+                : 'stroke-brand-700 cursor-pointer'
+            }`}
+          />
+          {screenSize.desktop && <span>Back</span>}
+        </a>
+      </li>
+      
 
       {paginationRange?.map((page: number | string) => {
         if (page === ELLIPSIS) {
           return (
             <li
               key={page}
-              className="ds-plp-pagination__dots text-brand-300 mx-sm my-auto"
+              className="ds-plp-pagination__dots text-brand-300 h-[100%] border border-solid border-[#ddd]"
             >
-              ...
+              <button className="flex items-center jupx-[12px] px-[12px] py-xsmall h-[100%]">...</button>
             </li>
           );
         }
@@ -77,26 +122,54 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
         return (
           <li
             key={page}
-            className={`ds-plp-pagination__item flex items-center cursor-pointer text-center font-body-2-default text-brand-700 my-auto mx-sm ${
+            className={`ds-plp-pagination__item text-brand-700 h-[100%] border border-solid border-[#ddd] ${
               currentPage === page
-                ? 'ds-plp-pagination__item--current text-brand-700 font-body-1-strong underline underline-offset-4 decoration-brand-700'
+                ? 'ds-plp-pagination__item--current bg-black text-white'
                 : ''
             }`}
-            onClick={() => onPageChange(page)}
           >
-            {page}
+            <a 
+              href={`?p=${currentPage}`}
+              className="flex items-center jupx-[12px] px-[12px] py-xsmall h-[100%]"
+              onClick={(evt: Event) => {
+                evt.preventDefault();
+                onPageChange(page)
+              }}>
+              {page}
+            </a>
           </li>
         );
       })}
-
-      <Chevron
-        className={`h-sm w-sm transform -rotate-90 ${
-          currentPage === totalPages
-            ? 'stroke-neutral-600 cursor-not-allowed'
-            : 'stroke-brand-700 cursor-pointer'
-        }`}
-        onClick={onNext}
-      />
+      <li className="border border-solid border-[#ddd] h-[100%]">
+        <a 
+          href={`?p=${currentPage + 1}`}
+          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+          onClick={onNext}>
+          {screenSize.desktop && <span>Next</span>}
+          <Chevron
+            className={`h-sm w-sm transform -rotate-90 ${
+              currentPage === totalPages
+                ? 'stroke-neutral-600 cursor-not-allowed'
+                : 'stroke-brand-700 cursor-pointer'
+            }`}
+          />
+        </a>
+      </li>
+      <li className="border border-solid border-[#ddd] h-[100%]">
+        <a
+          href={`?p=${totalPages}`}
+          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+          onClick={onLast}>
+          {screenSize.desktop && <span>Last</span>}
+          <Guillemet
+            className={`h-small w-small transform rotate-180 ${
+              currentPage === totalPages
+                ? 'stroke-neutral-600 cursor-not-allowed'
+                : 'stroke-brand-700 cursor-pointer'
+            }`}
+          />
+        </a>
+      </li>
     </ul>
   );
 };
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index 087dd921..14bae1e0 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -7,19 +7,16 @@ accordance with the terms of the Adobe license agreement accompanying
 it.
 */
 
-import { FunctionalComponent, FunctionComponent } from 'preact';
+import {  FunctionComponent } from 'preact';
 import { useEffect } from 'preact/hooks';
 import { ProductCardShimmer } from 'src/components/ProductCardShimmer';
 import { useProducts, useSensor, useTranslation } from 'src/context';
-import { PageSizeOption } from 'src/types/interface';
 import {
-  handleUrlPageSize,
   handleUrlPagination,
 } from 'src/utils/handleUrlFilters';
 
 import { Alert } from '../components/Alert';
 import { Pagination } from '../components/Pagination';
-import { PerPagePicker, PerPagePickerProps } from '../components/PerPagePicker';
 import { ProductList } from '../components/ProductList';
 
 interface Props {
@@ -37,13 +34,11 @@ export const ProductsContainer: FunctionComponent<Props> = ({
     items,
     setCurrentPage,
     currentPage,
-    setPageSize,
     pageSize,
     totalPages,
     totalCount,
     minQueryLength,
     minQueryLengthReached,
-    pageSizeOptions,
     loading,
   } = productsCtx;
 
@@ -62,35 +57,8 @@ export const ProductsContainer: FunctionComponent<Props> = ({
     }
   };
 
-  const onPageSizeChange = (pageSizeOption: number) => {
-    setPageSize(pageSizeOption);
-    handleUrlPageSize(pageSizeOption);
-  };
   const translation = useTranslation();
 
-  const getPageSizeTranslation = (
-    pageSize: number,
-    pageSizeOptions: PageSizeOption[],
-    PerPagePicker: FunctionalComponent<PerPagePickerProps>
-  ) => {
-    const pageSizeTranslation = translation.ProductContainers.pagePicker;
-    const pageSizeTranslationOrder = pageSizeTranslation.split(' ');
-    return pageSizeTranslationOrder.map((word: string, index: any) =>
-      word === '{pageSize}' ? (
-        <PerPagePicker
-          pageSizeOptions={pageSizeOptions}
-          value={pageSize}
-          onChange={onPageSizeChange}
-          key={index}
-        />
-      ) : (
-        <span className="font-body-1-default" key={index}>
-          {word}{' '}
-        </span>
-      )
-    );
-  };
-
   if (!minQueryLengthReached) {
     const templateMinQueryText = translation.ProductContainers.minquery;
     const title = templateMinQueryText
@@ -137,13 +105,13 @@ export const ProductsContainer: FunctionComponent<Props> = ({
         />
       )}
       <div
-        className={`flex flex-row justify-between max-w-full ${
+        className={`flex ${screenSize.desktop ? 'flex-row' : 'flex-col gap-4'} justify-between max-w-full ${
           showFilters ? 'mx-auto' : 'mr-auto'
-        } w-full h-full`}
+        } w-full h-full text-[14px] font-normal`}
       >
-        <div>
-          {getPageSizeTranslation(pageSize, pageSizeOptions, PerPagePicker)}
-        </div>
+        <span className="flex items-center justify-center text-neutral-700">
+          {`${Math.max((currentPage-1)*pageSize, 1)}-${currentPage*pageSize}`} of {totalCount}
+        </span>
         {totalPages > 1 && (
           <Pagination
             currentPage={currentPage}
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
index 998bd359..db81bfaf 100644
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -9,6 +9,8 @@ it.
 
 import { useMemo } from 'preact/compat';
 
+import { useSensor } from './../context';
+
 export const ELLIPSIS = '...';
 
 const getRange = (start: number, end: number) => {
@@ -27,6 +29,7 @@ export const usePagination = ({
   totalPages,
   siblingCount = 1,
 }: PaginationType) => {
+  const { screenSize } = useSensor();
   const paginationRange: (string | number)[] | undefined = useMemo(() => {
     const firstPageIndex = 1;
     const lastPageIndex = totalPages;
@@ -38,6 +41,10 @@ export const usePagination = ({
     const showLeftDots = leftSiblingIndex > 2;
     const showRightDots = rightSiblingIndex < totalPages - 2;
 
+    if (!screenSize.desktop) {
+      return getRange(leftSiblingIndex, rightSiblingIndex);
+    }
+
     // Case 1 - the total page count is less than the page pills we want to show.
     // < 1 2 3 4 5 6 >
     if (totalPages <= totalPagePills) {
diff --git a/src/icons/guillemet.svg b/src/icons/guillemet.svg
new file mode 100644
index 00000000..37661b6f
--- /dev/null
+++ b/src/icons/guillemet.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon (heroicons-mini) https://heroicons.com/">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M13.581 11.8159C13.3513 12.0547 12.9715 12.0622 12.7326 11.8325L9.13261 8.4325C9.01496 8.31938 8.94847 8.16321 8.94847 8C8.94847 7.83679 9.01496 7.68062 9.13261 7.5675L12.7326 4.1675C12.9715 3.93782 13.3513 3.94527 13.581 4.18413C13.8106 4.423 13.8032 4.80282 13.5643 5.0325L10.4141 8L13.5643 10.9675C13.8032 11.1972 13.8106 11.577 13.581 11.8159ZM8.78097 11.8159C8.5513 12.0547 8.17147 12.0622 7.93261 11.8325L4.33261 8.4325C4.21496 8.31938 4.14847 8.16321 4.14847 8C4.14847 7.83679 4.21496 7.68062 4.33261 7.5675L7.93261 4.1675C8.17147 3.93782 8.5513 3.94527 8.78097 4.18413C9.01065 4.423 9.0032 4.80282 8.76434 5.0325L5.61414 8L8.76434 10.9675C9.0032 11.1972 9.01065 11.577 8.78097 11.8159Z" fill="#626262"/>
+</g>
+</svg>
diff --git a/src/styles/index.css b/src/styles/index.css
index 0589b038..94ca4ed9 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -553,18 +553,10 @@ video {
     margin-left: auto;
     margin-right: auto;
   }
-  .mx-sm {
-    margin-left: var(--spacing-sm);
-    margin-right: var(--spacing-sm);
-  }
   .my-0 {
     margin-top: 0px;
     margin-bottom: 0px;
   }
-  .my-auto {
-    margin-top: auto;
-    margin-bottom: auto;
-  }
   .my-lg {
     margin-top: var(--spacing-lg);
     margin-bottom: var(--spacing-lg);
@@ -575,9 +567,6 @@ video {
   .mb-0\.5 {
     margin-bottom: 0.125rem;
   }
-  .mb-6 {
-    margin-bottom: 1.5rem;
-  }
   .mb-\[1px\] {
     margin-bottom: 1px;
   }
@@ -680,6 +669,9 @@ video {
   .h-\[32px\] {
     height: 32px;
   }
+  .h-\[36px\] {
+    height: 36px;
+  }
   .h-\[38px\] {
     height: 38px;
   }
@@ -707,6 +699,9 @@ video {
   .h-sm {
     height: var(--spacing-sm);
   }
+  .h-small {
+    height: var(--spacing-small);
+  }
   .max-h-\[250px\] {
     max-height: 250px;
   }
@@ -756,6 +751,9 @@ video {
   .w-sm {
     width: var(--spacing-sm);
   }
+  .w-small {
+    width: var(--spacing-small);
+  }
   .min-w-\[16px\] {
     min-width: 16px;
   }
@@ -882,9 +880,18 @@ video {
   .gap-2 {
     gap: 0.5rem;
   }
+  .gap-4 {
+    gap: 1rem;
+  }
   .gap-\[10px\] {
     gap: 10px;
   }
+  .gap-\[6px\] {
+    gap: 6px;
+  }
+  .gap-xxsmall {
+    gap: var(--spacing-xxsmall);
+  }
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
@@ -955,9 +962,16 @@ video {
   .border-t {
     border-top-width: 1px;
   }
+  .border-solid {
+    border-style: solid;
+  }
   .border-none {
     border-style: none;
   }
+  .border-\[\#ddd\] {
+    --tw-border-opacity: 1;
+    border-color: rgb(221 221 221 / var(--tw-border-opacity));
+  }
   .border-black {
     --tw-border-opacity: 1;
     border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -988,6 +1002,10 @@ video {
   .bg-background {
     background-color: var(--background-color);
   }
+  .bg-black {
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  }
   .bg-blue-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1093,6 +1111,10 @@ video {
     padding-left: var(--spacing-big);
     padding-right: var(--spacing-big);
   }
+  .px-\[12px\] {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
   .px-md {
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-md);
@@ -1133,6 +1155,10 @@ video {
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
   }
+  .py-xsmall {
+    padding-top: var(--spacing-xsmall);
+    padding-bottom: var(--spacing-xsmall);
+  }
   .pb-2 {
     padding-bottom: 0.5rem;
   }
@@ -1191,6 +1217,9 @@ video {
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
   .text-base {
     font-size: var(--font-md);
     line-height: var(--leading-snug);
@@ -1280,6 +1309,10 @@ video {
     --tw-text-opacity: 1;
     color: rgb(153 27 27 / var(--tw-text-opacity));
   }
+  .text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
   .text-yellow-400 {
     --tw-text-opacity: 1;
     color: rgb(250 204 21 / var(--tw-text-opacity));
@@ -1292,21 +1325,12 @@ video {
     --tw-text-opacity: 1;
     color: rgb(133 77 14 / var(--tw-text-opacity));
   }
-  .underline {
-    text-decoration-line: underline;
-  }
   .line-through {
     text-decoration-line: line-through;
   }
   .no-underline {
     text-decoration-line: none;
   }
-  .decoration-brand-700 {
-    text-decoration-color: var(--color-brand-700);
-  }
-  .underline-offset-4 {
-    text-underline-offset: 4px;
-  }
   .accent-neutral-800 {
     accent-color: var(--color-neutral-800);
   }

From f82215b2e23fed2274377c78f7d550cb7196094e Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 27 Jun 2024 00:38:47 +0530
Subject: [PATCH 042/160] Fix button state css

---
 src/components/Pagination/Pagination.tsx | 41 ++++++++++++------------
 src/hooks/usePagination.ts               |  2 +-
 src/styles/index.css                     |  3 ++
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 1e629a46..edc07c1f 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -76,36 +76,35 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
   return (
     <ul className="ds-plp-pagination flex justify-center items-center list-none gap-[6px] h-[36px] text-[14px] font-normal">
       <li className="border border-solid border-[#ddd] h-[100%]">
-        <a 
+        <a
           href="?p=1"
-          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+          className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall 
+            ${currentPage === 1 ? 'cursor-not-allowed text-neutral-600' : ''}`
+          }
           onClick={onFirst}>
           <Guillemet
             className={`h-small w-small transform ${
-              currentPage === 1
-                ? 'stroke-neutral-600 cursor-not-allowed'
-                : 'stroke-brand-700 cursor-pointer'
+              currentPage === 1 ? 'stroke-neutral-600' : 'stroke-brand-700'
             }`}
           />
           {screenSize.desktop && <span>First</span>}
         </a>
       </li>
       <li className="border border-solid border-[#ddd] h-[100%]">
-        <a 
-          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+        <a
+          className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall
+            ${currentPage === 1 ? 'cursor-not-allowed text-neutral-600' : ''}`
+          }
           href={`?p=${currentPage - 1}`}
           onClick={onPrevious}>
           <Chevron
             className={`h-sm w-sm transform rotate-90 ${
-              currentPage === 1
-                ? 'stroke-neutral-600 cursor-not-allowed'
-                : 'stroke-brand-700 cursor-pointer'
+              currentPage === 1 ? 'stroke-neutral-600' : 'stroke-brand-700'
             }`}
           />
           {screenSize.desktop && <span>Back</span>}
         </a>
       </li>
-      
 
       {paginationRange?.map((page: number | string) => {
         if (page === ELLIPSIS) {
@@ -128,7 +127,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
                 : ''
             }`}
           >
-            <a 
+            <a
               href={`?p=${currentPage}`}
               className="flex items-center jupx-[12px] px-[12px] py-xsmall h-[100%]"
               onClick={(evt: Event) => {
@@ -141,16 +140,16 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
         );
       })}
       <li className="border border-solid border-[#ddd] h-[100%]">
-        <a 
+        <a
           href={`?p=${currentPage + 1}`}
-          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+          className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall 
+            ${currentPage === totalPages ? 'cursor-not-allowed text-neutral-600' : ''}`
+          }
           onClick={onNext}>
           {screenSize.desktop && <span>Next</span>}
           <Chevron
             className={`h-sm w-sm transform -rotate-90 ${
-              currentPage === totalPages
-                ? 'stroke-neutral-600 cursor-not-allowed'
-                : 'stroke-brand-700 cursor-pointer'
+              currentPage === totalPages ? 'stroke-neutral-600' : 'stroke-brand-700'
             }`}
           />
         </a>
@@ -158,14 +157,14 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
       <li className="border border-solid border-[#ddd] h-[100%]">
         <a
           href={`?p=${totalPages}`}
-          className="flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall"
+          className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall
+            ${currentPage === totalPages ? 'cursor-not-allowed text-neutral-600' : ''}`
+          }
           onClick={onLast}>
           {screenSize.desktop && <span>Last</span>}
           <Guillemet
             className={`h-small w-small transform rotate-180 ${
-              currentPage === totalPages
-                ? 'stroke-neutral-600 cursor-not-allowed'
-                : 'stroke-brand-700 cursor-pointer'
+              currentPage === totalPages ? 'stroke-neutral-600' : 'stroke-brand-700'
             }`}
           />
         </a>
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
index db81bfaf..44978753 100644
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -80,7 +80,7 @@ export const usePagination = ({
         lastPageIndex,
       ];
     }
-  }, [currentPage, totalPages, siblingCount]);
+  }, [currentPage, totalPages, siblingCount, screenSize.desktop]);
 
   return paginationRange;
 };
diff --git a/src/styles/index.css b/src/styles/index.css
index 94ca4ed9..d26865f4 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1288,6 +1288,9 @@ video {
     --tw-text-opacity: 1;
     color: rgb(22 101 52 / var(--tw-text-opacity));
   }
+  .text-neutral-600 {
+    color: var(--color-neutral-600);
+  }
   .text-neutral-700 {
     color: var(--color-neutral-700);
   }

From 01735c5413331ed4ffca4a051031f6fed2caa59c Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 27 Jun 2024 16:40:16 +0530
Subject: [PATCH 043/160] Fix computation error

---
 src/containers/ProductsContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index 14bae1e0..4d2cc625 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -110,7 +110,7 @@ export const ProductsContainer: FunctionComponent<Props> = ({
         } w-full h-full text-[14px] font-normal`}
       >
         <span className="flex items-center justify-center text-neutral-700">
-          {`${Math.max((currentPage-1)*pageSize, 1)}-${currentPage*pageSize}`} of {totalCount}
+          {`${Math.max((currentPage-1)*pageSize, 1)}-${Math.min(currentPage*pageSize, totalCount)}`} of {totalCount}
         </span>
         {totalPages > 1 && (
           <Pagination

From e18cf02de8ee348176abc419b8f42524e37184cb Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Thu, 27 Jun 2024 07:48:58 -0700
Subject: [PATCH 044/160] tailwind build

---
 src/components/Drawer/Drawer.tsx |   2 +-
 src/containers/App.tsx           |   3 +-
 src/styles/index.css             | 140 ++++++++++---------------------
 3 files changed, 44 insertions(+), 101 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index e013bd7e..c6bada41 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -29,7 +29,7 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
             className="fixed inset-0 bg-black bg-opacity-50"
             onClick={onClose}
           />
-          <div className="relative mt-auto w-full bg-white h-80 shadow-lg overflow-auto slide-up">
+          <div className="relative mt-auto w-full bg-white h-[80%] shadow-lg overflow-auto slide-up">
             <div className="flex items-center justify-between p-4">
               <CloseIcon
                 className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer fill-neutral-800"
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index a9a5f9aa..ef935d11 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -14,7 +14,6 @@ import Loading from 'src/components/Loading';
 import Shimmer from 'src/components/Shimmer';
 
 import { CategoryFilters } from '../components/CategoryFilters';
-import { SelectedFilters } from '../components/Facets';
 import {
   useProducts,
   useSearch,
@@ -24,7 +23,7 @@ import {
 } from '../context';
 import { MobileFilterHeader } from './MobileFilterHeader';
 import { ProductsContainer } from './ProductsContainer';
-import { ProductsHeader } from './ProductsHeader';
+
 
 export const App: FunctionComponent = () => {
   const searchCtx = useSearch();
diff --git a/src/styles/index.css b/src/styles/index.css
index 9ec2e16b..4d133ed6 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -521,14 +521,17 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .invisible {
     visibility: hidden;
   }
+  .fixed {
+    position: fixed;
+  }
   .absolute {
     position: absolute;
   }
   .relative {
     position: relative;
   }
-  .fixed {
-    position: fixed;
+  .inset-0 {
+    inset: 0px;
   }
   .bottom-0 {
     bottom: 0px;
@@ -613,9 +616,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .mr-auto {
     margin-right: auto;
   }
-  .mr-sm {
-    margin-right: var(--spacing-sm);
-  }
   .mr-xs {
     margin-right: var(--spacing-xs);
   }
@@ -631,14 +631,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .mt-auto {
     margin-top: auto;
   }
-  .mt-xs {
-    margin-top: var(--spacing-xs);
+  .mt-md {
+    margin-top: var(--spacing-md);
   }
   .mt-sm {
     margin-top: var(--spacing-sm);
   }
-  .mt-md {
-    margin-top: var(--spacing-md);
+  .mt-xs {
+    margin-top: var(--spacing-xs);
   }
   .inline-block {
     display: inline-block;
@@ -664,15 +664,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-28 {
     height: 7rem;
   }
-  .h-80 {
-    height: 80%;
-  }
   .h-3 {
     height: 0.75rem;
   }
   .h-5 {
     height: 1.25rem;
   }
+  .h-[80%] {
+    height: 80%;
+  }
   .h-\[15px\] {
     height: 15px;
   }
@@ -700,9 +700,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-full {
     height: 100%;
   }
-  .min-h-screen {
-    min-height: 100vh;
-  }
   .h-md {
     height: var(--spacing-md);
   }
@@ -712,9 +709,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-sm {
     height: var(--spacing-sm);
   }
-  .h-max-content {
-    height: max-content;
-  }
   .max-h-\[250px\] {
     max-height: 250px;
   }
@@ -724,18 +718,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .min-h-\[32px\] {
     min-height: 32px;
   }
-  .w-1\/3 {
-    width: 33.333333%;
-  }
   .w-1\/2 {
     width: 50%;
   }
+  .w-1\/3 {
+    width: 33.333333%;
+  }
   .w-28 {
     width: 7rem;
   }
-  .w-32 {
-    width: 8rem;
-  }
   .w-5 {
     width: 1.25rem;
   }
@@ -905,9 +896,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .gap-\[16px\] {
     gap: 16px;
   }
-  .gap-\[24px\] {
-    gap: 24px;
-  }
   .gap-x-1 {
     -moz-column-gap: 0.25rem;
     column-gap: 0.25rem;
@@ -920,10 +908,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     -moz-column-gap: 0.625rem;
     column-gap: 0.625rem;
   }
-  .gap-x-4 {
-    -moz-column-gap: 1rem;
-    column-gap: 1rem;
-  }
   .gap-x-6 {
     -moz-column-gap: 1.5rem;
     column-gap: 1.5rem;
@@ -949,10 +933,13 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));
     margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
   }
-  .space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
-    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  }
+  .overflow-auto {
+    overflow: auto;
   }
   .overflow-hidden {
     overflow: hidden;
@@ -960,9 +947,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .overflow-y-auto {
     overflow-y: auto;
   }
-  .overflow-auto {
-    overflow: auto;
-  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -993,12 +977,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .border-b {
     border-bottom-width: 1px;
   }
-  .border-t {
-    border-top-width: 1px;
-  }
   .border-r {
     border-right-width: 1px;
   }
+  .border-t {
+    border-top-width: 1px;
+  }
   .border-none {
     border-style: none;
   }
@@ -1009,14 +993,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .border-brand-700 {
     border-color: var(--color-brand-700);
   }
-  .bg-black {
-    background-color: var(--color-black);
-  }
-
-  .bg-opacity-50 {
-    opacity: 0.5;
-  }
-
   .border-gray-200 {
     --tw-border-opacity: 1;
     border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1043,6 +1019,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .bg-background {
     background-color: var(--background-color);
   }
+  .bg-black {
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  }
   .bg-blue-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1082,6 +1062,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-bg-opacity: 1;
     background-color: rgb(254 252 232 / var(--tw-bg-opacity));
   }
+  .bg-opacity-50 {
+    --tw-bg-opacity: 0.5;
+  }
   .bg-cover {
     background-size: cover;
   }
@@ -1206,9 +1189,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .pt-16 {
     padding-top: 4rem;
   }
-  .pt-28 {
-    padding-top: 7rem;
-  }
   .pt-\[15px\] {
     padding-top: 15px;
   }
@@ -1252,6 +1232,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .font-semibold {
     font-weight: var(--font-semibold);
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .\!text-brand-700 {
     color: var(--color-brand-700) !important;
   }
@@ -1344,9 +1327,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
-  .uppercase {
-    text-transform: uppercase;
-  }
   .accent-neutral-800 {
     accent-color: var(--color-neutral-800);
   }
@@ -1359,6 +1339,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
       var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+      0 4px 6px -4px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .outline {
     outline-style: solid;
   }
@@ -1428,7 +1416,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   /* font-size: 1.6rem; */
   /* Elsie base design */
-  --color-black: #15191d;
   --color-brand-300: #6d6d6d;
   --color-brand-500: #454545;
   --color-brand-600: #383838;
@@ -1828,49 +1815,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   opacity: 1;
 }
 
-/* Drawer Classes */
-.inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.shadow-lg {
-  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
-}
-
-/* Slide transitions */
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideDown {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-.slide-up {
-  animation: slideUp 0.3s ease-out forwards;
-}
-
-.slide-down {
-  animation: slideDown 0.3s ease-out forwards;
-}
-
-.no-scroll {
-  overflow: hidden;
-}
-
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;

From c3b3e05893cba8f1564355d3adbc2a94ce5ea436 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Thu, 27 Jun 2024 07:52:38 -0700
Subject: [PATCH 045/160] more tailwind config

---
 src/components/Drawer/Drawer.tsx |   2 +-
 src/styles/index.css             | 365 ++++++++++++++-----------------
 tailwind.config.js               |  14 ++
 3 files changed, 182 insertions(+), 199 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index c6bada41..884d8384 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -29,7 +29,7 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
             className="fixed inset-0 bg-black bg-opacity-50"
             onClick={onClose}
           />
-          <div className="relative mt-auto w-full bg-white h-[80%] shadow-lg overflow-auto slide-up">
+          <div className="relative mt-auto w-full bg-white h-[80%] shadow-lg overflow-auto animate-slideUp">
             <div className="flex items-center justify-between p-4">
               <CloseIcon
                 className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer fill-neutral-800"
diff --git a/src/styles/index.css b/src/styles/index.css
index 4d133ed6..262e7b7f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-  ::before,
-  ::after {
+::before,
+::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -19,7 +19,7 @@
     /* 2 */
   }
   ::before,
-  ::after {
+::after {
     --tw-content: '';
   }
   /*
@@ -32,7 +32,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-  :host {
+:host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,10 +40,9 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-    tab-size: 4;
+       tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -80,17 +79,17 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
+            text-decoration: underline dotted;
   }
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-size: inherit;
     font-weight: inherit;
   }
@@ -105,7 +104,7 @@ Reset links to optimize for opt-in styling instead of opt-out.
 Add the correct font weight in Edge and Safari.
 */
   b,
-  strong {
+strong {
     font-weight: bolder;
   }
   /*
@@ -115,11 +114,10 @@ Add the correct font weight in Edge and Safari.
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
+kbd,
+samp,
+pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
     font-feature-settings: normal;
     /* 2 */
@@ -138,7 +136,7 @@ Add the correct font size in all browsers.
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-  sup {
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
@@ -169,10 +167,10 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 3. Remove default padding in all browsers.
 */
   button,
-  input,
-  optgroup,
-  select,
-  textarea {
+input,
+optgroup,
+select,
+textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -196,7 +194,7 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-  select {
+select {
     text-transform: none;
   }
   /*
@@ -204,9 +202,9 @@ Remove the inheritance of text transform in Edge and Firefox.
 2. Remove default button styles.
 */
   button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -236,7 +234,7 @@ Add the correct vertical alignment in Chrome and Firefox.
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+::-webkit-outer-spin-button {
     height: auto;
   }
   /*
@@ -275,18 +273,18 @@ Add the correct display in Chrome and Safari.
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
     margin: 0;
   }
   fieldset {
@@ -297,8 +295,8 @@ Removes the default spacing and border for appropriate elements.
     padding: 0;
   }
   ol,
-  ul,
-  menu {
+ul,
+menu {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -319,15 +317,14 @@ Prevent resizing textareas horizontally by default.
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-  input::-moz-placeholder,
-  textarea::-moz-placeholder {
+  input::-moz-placeholder, textarea::-moz-placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
   input::placeholder,
-  textarea::placeholder {
+textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
@@ -337,7 +334,7 @@ Prevent resizing textareas horizontally by default.
 Set the default cursor for buttons.
 */
   button,
-  [role='button'] {
+[role="button"] {
     cursor: pointer;
   }
   /*
@@ -352,13 +349,13 @@ Make sure disabled buttons don't get the pointer cursor.
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
     display: block;
     /* 1 */
     vertical-align: middle;
@@ -368,7 +365,7 @@ Make sure disabled buttons don't get the pointer cursor.
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-  video {
+video {
     max-width: 100%;
     height: auto;
   }
@@ -376,9 +373,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   [hidden] {
     display: none;
   }
-  *,
-  ::before,
-  ::after {
+  *, ::before, ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -388,19 +383,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -408,24 +403,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   ::backdrop {
     --tw-border-spacing-x: 0;
@@ -437,19 +432,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -457,24 +452,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   .container {
     width: 100%;
@@ -670,9 +665,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-5 {
     height: 1.25rem;
   }
-  .h-[80%] {
-    height: 80%;
-  }
   .h-\[15px\] {
     height: 15px;
   }
@@ -694,6 +686,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-\[44px\] {
     height: 44px;
   }
+  .h-\[80\%\] {
+    height: 80%;
+  }
   .h-auto {
     height: auto;
   }
@@ -799,38 +794,38 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .-rotate-90 {
     --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-180 {
     --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-45 {
     --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-90 {
     --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .animate-slideUp {
+    animation: slideUp 0.3s ease-out forwards;
   }
   @keyframes spin {
     to {
@@ -854,8 +849,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .appearance-none {
     -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+       -moz-appearance: none;
+            appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -898,27 +893,27 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .gap-x-1 {
     -moz-column-gap: 0.25rem;
-    column-gap: 0.25rem;
+         column-gap: 0.25rem;
   }
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-    column-gap: 0.5rem;
+         column-gap: 0.5rem;
   }
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-    column-gap: 0.625rem;
+         column-gap: 0.625rem;
   }
   .gap-x-6 {
     -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-    column-gap: var(--spacing-md);
+         column-gap: var(--spacing-md);
   }
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-    column-gap: var(--spacing-sm);
+         column-gap: var(--spacing-sm);
   }
   .gap-y-8 {
     row-gap: 2rem;
@@ -1088,11 +1083,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .object-cover {
     -o-object-fit: cover;
-    object-fit: cover;
+       object-fit: cover;
   }
   .object-center {
     -o-object-position: center;
-    object-position: center;
+       object-position: center;
   }
   .p-1 {
     padding: 0.25rem;
@@ -1336,16 +1331,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-      0 4px 6px -4px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .outline {
     outline-style: solid;
@@ -1363,12 +1354,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     outline-color: transparent;
   }
   .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
   .ring-black {
     --tw-ring-opacity: 1;
@@ -1379,30 +1367,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .blur {
     --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .\!filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
   .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .transition {
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -1699,7 +1675,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
+  transition: background-image .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
 
 .first\:ml-0:first-child {
@@ -1762,21 +1738,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-green-600:focus {
@@ -1807,8 +1777,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 .active\:shadow-none:active {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .group:hover .group-hover\:opacity-100 {
@@ -1878,12 +1847,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 @media (min-width: 1280px) {
   .xl\:gap-x-4 {
     -moz-column-gap: 1rem;
-    column-gap: 1rem;
+         column-gap: 1rem;
   }
 
   .xl\:gap-x-6 {
     -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 75cc352b..e9f25746 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -114,6 +114,20 @@ module.exports = {
         3: 'var(--shape-icon-stroke-3)',
         4: 'var(--shape-icon-stroke-4)',
       },
+      keyframes: {
+        slideUp: {
+          '0%': { transform: 'translateY(100%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+        slideDown: {
+          '0%': { transform: 'translateY(0)' },
+          '100%': { transform: 'translateY(100%)' },
+        },
+      },
+      animation: {
+        slideUp: 'slideUp 0.3s ease-out forwards',
+        slideDown: 'slideDown 0.3s ease-out forwards',
+      },
     },
 
     plugins: [],

From 004d73861f09f65ba7cf58a251c469c21bb1ca8c Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Fri, 28 Jun 2024 11:24:49 +0530
Subject: [PATCH 046/160] Get image urls from product search query instead of
 refined product query for each item

---
 src/api/fragments.ts                       |  6 +++
 src/components/ProductItem/MockData.ts     | 33 ++++++++++++++
 src/components/ProductItem/ProductItem.tsx | 29 +++---------
 src/context/displayChange.tsx              |  4 +-
 src/types/interface.ts                     |  6 +++
 src/utils/getProductImage.ts               | 51 +++++++++++++++++++++-
 src/utils/productUtils.ts                  | 33 ++++++++++++++
 7 files changed, 136 insertions(+), 26 deletions(-)
 create mode 100644 src/utils/productUtils.ts

diff --git a/src/api/fragments.ts b/src/api/fragments.ts
index 27d6e613..fa1004a1 100644
--- a/src/api/fragments.ts
+++ b/src/api/fragments.ts
@@ -44,6 +44,12 @@ const ProductView = `
             inStock
             url
             urlKey
+            attributes(roles: ["visible_in_plp"]) {
+              label
+              name
+              roles
+              value
+            }
             images {
                 label
                 url
diff --git a/src/components/ProductItem/MockData.ts b/src/components/ProductItem/MockData.ts
index 2d6dbb78..be4786e4 100644
--- a/src/components/ProductItem/MockData.ts
+++ b/src/components/ProductItem/MockData.ts
@@ -71,6 +71,17 @@ export const sampleProductNoImage: Product = {
     new_to_date: null,
     created_at: null,
     updated_at: null,
+    attributes: [
+      {
+        label: "Bazaarvoice average rating",
+        name: "bv_rating_average",
+        roles: [
+            "visible_in_pdp",
+            "visible_in_plp"
+        ],
+        value: "4.500000"
+      },
+    ],
     price: {
       final: {
         amount: {
@@ -216,6 +227,17 @@ export const sampleProductDiscounted: Product = {
     meta_title: null,
     meta_keyword: null,
     meta_description: null,
+    attributes: [
+      {
+        label: "Bazaarvoice average rating",
+        name: "bv_rating_average",
+        roles: [
+            "visible_in_pdp",
+            "visible_in_plp"
+        ],
+        value: "4.500000"
+      },
+    ],
     images: [
       {
         url: 'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
@@ -388,6 +410,17 @@ export const sampleProductNotDiscounted: Product = {
     meta_title: null,
     meta_keyword: null,
     meta_description: null,
+    attributes: [
+      {
+        label: "Bazaarvoice average rating",
+        name: "bv_rating_average",
+        roles: [
+            "visible_in_pdp",
+            "visible_in_plp"
+        ],
+        value: "4.500000"
+      },
+    ],
     images: [
       {
         url: 'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index bc11e452..1fa45a04 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -24,9 +24,11 @@ import {
 import { SEARCH_UNIT_ID } from '../../utils/constants';
 import {
   generateOptimizedImages,
-  getProductImageURLs,
+  getProductImagesFromQuery,
+  getProductImageURLs
 } from '../../utils/getProductImage';
 import { htmlStringDecode } from '../../utils/htmlStringDecode';
+import { isSportsWear } from '../../utils/productUtils';
 import { AddToCartButton } from '../AddToCartButton';
 import ImageHover from '../ImageHover';
 import { SwatchButtonGroup } from '../SwatchButtonGroup';
@@ -96,18 +98,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     setImagesFromRefinedProduct(data.refineProduct.images);
     setRefinedProduct(data);
   };
-  
-  /** TEMP FIX to show image of the first variant per product */
-  const loadProductImagesFromRefinedProduct = async (optionIds: string[], sku: string) => {
-    const data = await refineProduct(optionIds, sku);
-    setImagesFromRefinedProduct(data.refineProduct?.images);
-  };
-
-  if (!productView.images?.length && !imagesFromRefinedProduct){
-    const optionId = productView.options?.[0]?.values?.[0]?.id || '';
-    loadProductImagesFromRefinedProduct([optionId], productView.sku);
-  }
-  /** END TEMP FIX to show image of the first variant per product */
 
   const isSelected = (id: string) => {
     const selected = selectedSwatch ? selectedSwatch === id : false;
@@ -116,11 +106,8 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   const productImageArray = imagesFromRefinedProduct
     ? getProductImageURLs(imagesFromRefinedProduct ?? [], 2)
-    : getProductImageURLs(
-        productView.images ?? [],
-        2,
-        product.image?.url ?? undefined
-      );
+    : getProductImagesFromQuery(item);
+    
   let optimizedImageArray: { src: string; srcset: any }[] = [];
 
   if (optimizeImages) {
@@ -145,6 +132,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const isGrouped = product?.__typename === 'GroupedProduct';
   const isGiftCard = product?.__typename === 'GiftCardProduct';
   const isConfigurable = product?.__typename === 'ConfigurableProduct';
+  const shouldShowAddToBagButton = isSportsWear(item) && (!screenSize.desktop || isHovering) && !showSizes;
 
   const onProductClick = () => {
     window.adobeDataLayer.push((dl: any) => {
@@ -360,10 +348,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               />
             )}
             <div className="add-to-cart-overlay absolute left-0 right-0 bottom-0 p-xsmall h-[56px]">
-              {!screenSize.desktop && !showSizes && <AddToCartButton onClick={handleAddToCart} />}
-              {isHovering && screenSize.desktop && !showSizes && (
-                <AddToCartButton onClick={handleAddToCart} />
-              )}
+              {shouldShowAddToBagButton && <AddToCartButton onClick={handleAddToCart} />}
               {showSizes && productView?.options?.map((swatches) => {
                 if (swatches.title === SWATCH_SIZE) {
                   const swatchItems: SwatchValues[] = (swatches.values ?? []).map((swatch) => ({
diff --git a/src/context/displayChange.tsx b/src/context/displayChange.tsx
index 0aba8f00..c392f8d2 100644
--- a/src/context/displayChange.tsx
+++ b/src/context/displayChange.tsx
@@ -46,10 +46,10 @@ const useSensor = () => {
 export const ResizeChangeContext = createContext({} as DisplayChangeContext);
 
 const getColumn = (screenSize: DisplayChange): number => {
-  if (screenSize.desktop) {
+  if (window.matchMedia('screen and (min-width: 1281px)').matches) {
     return PRODUCT_COLUMNS.desktop;
   }
-  if (screenSize.tablet) {
+  if (window.matchMedia('screen and (min-width: 768px) and (max-width: 1280px)').matches) {
     return PRODUCT_COLUMNS.tablet;
   }
   if (screenSize.mobile) {
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 0dc0fd95..fec59b7b 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -216,6 +216,12 @@ export interface Product {
     new_to_date: null | string;
     created_at: null | string;
     updated_at: null | string;
+    attributes: Array<{
+      label: string
+      name: string
+      roles: string[]
+      value: string
+    }>;
     price: {
       final: ProductViewPrice;
       regular: ProductViewPrice;
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 764591ac..440930fb 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -7,7 +7,8 @@ accordance with the terms of the Adobe license agreement accompanying
 it.
 */
 
-import { ProductViewMedia } from '../types/interface';
+import { Product, ProductViewMedia } from '../types/interface';
+import { isSportsWear } from './productUtils';
 
 const getProductImageURLs = (
   images: ProductViewMedia[],
@@ -107,4 +108,50 @@ const generateOptimizedImages = (
   return imageUrlArray;
 };
 
-export { generateOptimizedImages, getProductImageURLs };
+function getProductImagesFromQuery(item: Product) {
+  const { productView } = item;
+  const attributeId = productView?.options?.[0].id;
+  if (!attributeId) {
+    return [];
+  }
+
+  const imageAttributes = productView?.attributes?.find(({ name }) => name === 'eds_images');
+  if (imageAttributes) {
+    const options = JSON.parse(imageAttributes.value);
+    const defaultOption = options.find((option: any) => option.attribute_id === attributeId);
+    if (!defaultOption) {
+      return [];
+    }
+
+    const variantId = productView?.options?.[0].values?.[0].id;
+    if (isSportsWear(item) && defaultOption.images) {
+      const imageConfig = defaultOption.images.find((image: any) => image.id === variantId);
+      return getAbsoluteImageUrl(item, [imageConfig.image, imageConfig.back_view_image]);
+    }
+
+    if (defaultOption && defaultOption.images.length > 0) {
+      const imageConfig = defaultOption.images[0];
+      return getAbsoluteImageUrl(item, [imageConfig.image, imageConfig.back_view_image]);
+    } 
+  }
+
+  return [];
+}
+
+function getAbsoluteImageUrl(item: Product, urls: string[]) {
+  return urls.map((url) => {
+    if (url.startsWith('http')) {
+      return url;
+    }
+
+    if (url.startsWith('/')) {
+      url = url.slice(1);
+    }
+
+    const { productView } = item;
+    const baseUrl = productView?.url?.replace(productView?.urlKey || '', '');
+    return baseUrl + url;
+  });
+}
+
+export { generateOptimizedImages, getProductImageURLs, getProductImagesFromQuery };
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
new file mode 100644
index 00000000..6ad39ba0
--- /dev/null
+++ b/src/utils/productUtils.ts
@@ -0,0 +1,33 @@
+import { Product } from '../types/interface';
+
+function isSportsWear(product: Product) {
+  const { productView } = product;
+  const department = productView?.attributes?.find(({ name }) => name === 'pim_department_name');
+  
+  return department?.value.includes('Sportswear');
+}
+
+function getColorSwatchesFromQuery(item: Product) {
+  if (isSportsWear(item)) {
+    return [];
+  }
+
+  const { productView } = item;
+  const attributeId = productView?.options?.[0].id;
+  const imageAttributes = productView?.attributes?.find(({ name }) => name === 'eds_images');
+  if (imageAttributes) {
+    const options = JSON.parse(imageAttributes.value);
+    const colorOption = options.find((option: any) => option.attribute_id === attributeId 
+      && option.attribute_type === 'visual' 
+      && option.show_swatches);
+    if (!colorOption) {
+      return [];
+    }
+
+    return colorOption.images;
+  }
+
+  return [];
+}
+
+export { isSportsWear, getColorSwatchesFromQuery };

From 4d43e1023bed18a66ff6651e4f25397e363f2c87 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Tue, 2 Jul 2024 14:47:09 +0530
Subject: [PATCH 047/160] Resolve code review comments

---
 src/components/ProductItem/ProductItem.tsx |  4 ++--
 src/utils/getProductImage.ts               | 16 ++++++++++++++--
 src/utils/productUtils.ts                  | 17 +++++++++++++++--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 1fa45a04..66b89bdf 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -24,7 +24,7 @@ import {
 import { SEARCH_UNIT_ID } from '../../utils/constants';
 import {
   generateOptimizedImages,
-  getProductImagesFromQuery,
+  getProductImagesFromAttribute,
   getProductImageURLs
 } from '../../utils/getProductImage';
 import { htmlStringDecode } from '../../utils/htmlStringDecode';
@@ -106,7 +106,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   const productImageArray = imagesFromRefinedProduct
     ? getProductImageURLs(imagesFromRefinedProduct ?? [], 2)
-    : getProductImagesFromQuery(item);
+    : getProductImagesFromAttribute(item);
     
   let optimizedImageArray: { src: string; srcset: any }[] = [];
 
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 440930fb..8449889d 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -108,7 +108,19 @@ const generateOptimizedImages = (
   return imageUrlArray;
 };
 
-function getProductImagesFromQuery(item: Product) {
+/*
+* New attribute i.e. "eds_images" for product images were introduced to get around catalog service sync issue
+* Ref: https://adobe-dx-support.slack.com/archives/C04CQH83BME/p1719261375238899
+*
+* Following steps are taken to get the images:
+* 1. Get the attribute id from the product options by selecting the first option
+* 2. Find the attribute with name "eds_images"
+* 3. Parse the value of the attribute
+* 4. Find the option with the same attribute id as found in step 1
+* 6. If the product is sports wear, get the images from the option with same the variant id as in product view options found in step 1.
+* 7. If the product is not sports wear, get the images from the first option.
+*/
+function getProductImagesFromAttribute(item: Product) {
   const { productView } = item;
   const attributeId = productView?.options?.[0].id;
   if (!attributeId) {
@@ -154,4 +166,4 @@ function getAbsoluteImageUrl(item: Product, urls: string[]) {
   });
 }
 
-export { generateOptimizedImages, getProductImageURLs, getProductImagesFromQuery };
+export { generateOptimizedImages, getProductImageURLs, getProductImagesFromAttribute };
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 6ad39ba0..5ea4e356 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -7,7 +7,20 @@ function isSportsWear(product: Product) {
   return department?.value.includes('Sportswear');
 }
 
-function getColorSwatchesFromQuery(item: Product) {
+/*
+* New attribute i.e. "eds_images" for product images were introduced to get around catalog service sync issue
+* Ref: https://adobe-dx-support.slack.com/archives/C04CQH83BME/p1719261375238899
+*
+* Following steps are taken to get the color swatches:
+* 1. If the product is sports wear, return an empty array since there are no color swatches for sports wear
+* 2. Get the attribute id from the product view options by selecting the first option
+* 3. Find the attribute with name "eds_images" in product view attributes
+* 4. Parse the value of the attribute
+* 5. Find the option with the same attribute id as found in step 1
+* 6. Validate if the option has the attribute type as "visual" and show_swatches is true
+* 7. If the above condition is met, return the image options
+*/
+function getColorSwatchesFromAttribute(item: Product) {
   if (isSportsWear(item)) {
     return [];
   }
@@ -30,4 +43,4 @@ function getColorSwatchesFromQuery(item: Product) {
   return [];
 }
 
-export { isSportsWear, getColorSwatchesFromQuery };
+export { isSportsWear, getColorSwatchesFromAttribute };

From bbc65abce65f3cc24bf1fc38959816484a435b85 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Wed, 10 Jul 2024 12:34:38 +0530
Subject: [PATCH 048/160] Fix previous button text and underline button text on
 hover

---
 src/components/Pagination/Pagination.tsx | 14 +++++++-------
 src/styles/index.css                     | 15 +++++++++++----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index edc07c1f..1a6578cd 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -75,7 +75,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
 
   return (
     <ul className="ds-plp-pagination flex justify-center items-center list-none gap-[6px] h-[36px] text-[14px] font-normal">
-      <li className="border border-solid border-[#ddd] h-[100%]">
+      <li className="border border-solid border-[#ddd] h-[100%] hover:underline underline-offset-4">
         <a
           href="?p=1"
           className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall 
@@ -90,7 +90,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
           {screenSize.desktop && <span>First</span>}
         </a>
       </li>
-      <li className="border border-solid border-[#ddd] h-[100%]">
+      <li className="border border-solid border-[#ddd] h-[100%] hover:underline underline-offset-4">
         <a
           className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall
             ${currentPage === 1 ? 'cursor-not-allowed text-neutral-600' : ''}`
@@ -102,7 +102,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
               currentPage === 1 ? 'stroke-neutral-600' : 'stroke-brand-700'
             }`}
           />
-          {screenSize.desktop && <span>Back</span>}
+          {screenSize.desktop && <span>Previous</span>}
         </a>
       </li>
 
@@ -121,7 +121,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
         return (
           <li
             key={page}
-            className={`ds-plp-pagination__item text-brand-700 h-[100%] border border-solid border-[#ddd] ${
+            className={`ds-plp-pagination__item text-brand-700 h-[100%] border border-solid border-[#ddd] hover:underline underline-offset-4 ${
               currentPage === page
                 ? 'ds-plp-pagination__item--current bg-black text-white'
                 : ''
@@ -134,12 +134,12 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
                 evt.preventDefault();
                 onPageChange(page)
               }}>
-              {page}
+              <span>{page}</span>
             </a>
           </li>
         );
       })}
-      <li className="border border-solid border-[#ddd] h-[100%]">
+      <li className="border border-solid border-[#ddd] h-[100%] hover:underline underline-offset-4">
         <a
           href={`?p=${currentPage + 1}`}
           className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall 
@@ -154,7 +154,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
           />
         </a>
       </li>
-      <li className="border border-solid border-[#ddd] h-[100%]">
+      <li className="border border-solid border-[#ddd] h-[100%] hover:underline underline-offset-4">
         <a
           href={`?p=${totalPages}`}
           className={`flex items-center justify-center px-[12px] py-xsmall h-[100%] gap-xxsmall
diff --git a/src/styles/index.css b/src/styles/index.css
index d26865f4..938e1fef 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1107,14 +1107,14 @@ video {
     padding-left: 1rem;
     padding-right: 1rem;
   }
-  .px-big {
-    padding-left: var(--spacing-big);
-    padding-right: var(--spacing-big);
-  }
   .px-\[12px\] {
     padding-left: 12px;
     padding-right: 12px;
   }
+  .px-big {
+    padding-left: var(--spacing-big);
+    padding-right: var(--spacing-big);
+  }
   .px-md {
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-md);
@@ -1334,6 +1334,9 @@ video {
   .no-underline {
     text-decoration-line: none;
   }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .accent-neutral-800 {
     accent-color: var(--color-neutral-800);
   }
@@ -1721,6 +1724,10 @@ video {
   color: var(--color-neutral-900);
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .hover\:no-underline:hover {
   text-decoration-line: none;
 }

From 927ea21c8d44c54275b51c68a19b698d1cc3fc54 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Wed, 10 Jul 2024 07:46:59 -0700
Subject: [PATCH 049/160] added - icon logic

---
 src/components/Facets/Facets.tsx                   |  2 ++
 src/components/Facets/Scalar/ScalarFacet.tsx       |  6 ++++--
 src/components/FilterSelection/FilterSelection.tsx | 12 +++++++++++-
 src/icons/minus.svg                                |  3 +++
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/icons/minus.svg

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index e935c526..1353d9f9 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -110,6 +110,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                     filterData={facet}
                     handleFilter={() => handleTesting(facet)}
                     selectedNumber={getSelectedFilters(facet)}
+                    selectedFacet={selectedFacet}
                   />
                 );
               case 'RangeBucket':
@@ -128,6 +129,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                     filterData={facet}
                     handleFilter={() => handleTesting(facet)}
                     selectedNumber={getSelectedFilters(facet)}
+                    selectedFacet={selectedFacet}
                   />
                 );
               default:
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 1e3feac1..564f0fc4 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -16,14 +16,15 @@ interface ScalarFacetProps {
   filterData: FacetType | PriceFacet;
   handleFilter?: HandleFilterType;
   selectedNumber?: number;
+  selectedFacet?: FacetType | PriceFacet | null;
 }
 
 export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   filterData,
   handleFilter,
-  selectedNumber
+  selectedNumber,
+  selectedFacet
 }) => {
-
   return (
     <>
       <FilterSelection
@@ -31,6 +32,7 @@ export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
         attribute={filterData.attribute}
         handleFilter={handleFilter}
         selectedNumber={selectedNumber}
+        selectedFacet={selectedFacet}
       />
     </>
   );
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index 3cc06185..f141bd7d 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -1,6 +1,8 @@
 import { FunctionComponent } from 'preact';
 
+import MinusIcon from '../../icons/minus.svg';
 import PlusIcon from '../../icons/plus.svg';
+import { Facet as FacetType, PriceFacet } from '../../types/interface';
 
 export type FilterSelectionTitleSlot = (label: string) => FunctionComponent;
 
@@ -10,6 +12,7 @@ export interface FilterSelectionProps {
   filterSelectionTitleSlot?: FilterSelectionTitleSlot;
   handleFilter?: () => void;
   selectedNumber?: number;
+  selectedFacet?: FacetType | PriceFacet | null;
 }
 
 export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
@@ -17,11 +20,14 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
   filterSelectionTitleSlot,
   handleFilter,
   selectedNumber,
+  selectedFacet,
 }) => {
   const handleOptions = () => {
     handleFilter?.();
   };
 
+  const isSelected = title === selectedFacet?.title;
+
   return (
     <div className="ds-sdk-input py-md">
       {filterSelectionTitleSlot ? (
@@ -37,7 +43,11 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
               <span className="font-normal text-neutral-700">{`${selectedNumber} Selected`}</span>
             )}
           </label>
-          <PlusIcon className="h-sm w-sm fill-neutral-800" />
+          {isSelected ? (
+            <MinusIcon className="h-sm w-sm fill-neutral-800" />
+          ) : (
+            <PlusIcon className="h-sm w-sm fill-neutral-800" />
+          )}
         </div>
       )}
     </div>
diff --git a/src/icons/minus.svg b/src/icons/minus.svg
new file mode 100644
index 00000000..c1c9605f
--- /dev/null
+++ b/src/icons/minus.svg
@@ -0,0 +1,3 @@
+<svg className="fill-current" width="10" height="3" viewBox="-2 0 10 2" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.898438 2.44531V0.25H5.21094V2.44531H0.898438Z"/>
+</svg>

From acbff6c2bc9f2ac60b7ebb6e018f65f475b07ab5 Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Wed, 10 Jul 2024 07:49:32 -0700
Subject: [PATCH 050/160] clean up

---
 src/components/CategoryFilters/CategoryFilters.tsx | 7 -------
 src/components/SortDropdown/SortDropdown.tsx       | 2 --
 2 files changed, 9 deletions(-)

diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 6ec72ad4..994552f0 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -9,10 +9,8 @@ it.
 
 import { FunctionComponent } from 'preact';
 
-// import { useTranslation } from '../../context/translation';
 import { Facet } from '../../types/interface';
 import { Facets } from '../Facets';
-// import { FilterButton } from '../FilterButton';
 
 interface CategoryFiltersProps {
   loading: boolean;
@@ -27,14 +25,9 @@ interface CategoryFiltersProps {
 }
 
 export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
-  // loading,
   pageLoading,
   totalCount,
   facets,
-  // categoryName,
-  // phrase,
-  // setShowFilters,
-  // filterCount,
 }) => {
 
   return (
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 352024db..e66e690b 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -28,8 +28,6 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
   onChange,
   mobile
 }: SortDropdownProps) => {
-  console.log(mobile)
-
   const sortOptionButton = useRef<HTMLButtonElement | null>(null);
   const sortOptionMenu = useRef<HTMLDivElement | null>(null);
 

From 2fbc410c1ddac7087633e420b493c092927d2aaf Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Thu, 11 Jul 2024 06:22:39 -0700
Subject: [PATCH 051/160] cleanup

---
 src/components/Facets/format.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Facets/format.ts b/src/components/Facets/format.ts
index fb645e28..a102371c 100644
--- a/src/components/Facets/format.ts
+++ b/src/components/Facets/format.ts
@@ -40,7 +40,6 @@ const formatBinaryLabel = (
   categoryPath?: string
 ) => {
   if (categoryPath && categoryNames) {
-    console.log('working2')
     const category = categoryNames.find(
       (facet) => facet.attribute === filter.attribute && facet.value === option
     );

From c08524537992fe2bf053feb2da7f020a8986bb8e Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Fri, 12 Jul 2024 09:47:08 -0700
Subject: [PATCH 052/160] desktop sort options

---
 src/components/Facets/Facets.tsx             |  13 +-
 src/components/SortDropdown/SortDropdown.tsx |   2 +-
 src/styles/index.css                         | 376 +++++++++----------
 src/utils/sort.ts                            |  29 +-
 4 files changed, 196 insertions(+), 224 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 1353d9f9..b3998040 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -45,6 +45,17 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   const attributeMetadata = useAttributeMetadata();
   const translation = useTranslation();
 
+  const attributesToFilter = [
+    'featured',
+    'new',
+    'pcm_publication_date',
+    'price',
+  ];
+
+  const filteredAttributes = attributeMetadata?.sortable.filter((item) =>
+    attributesToFilter.includes(item.attribute)
+  );
+
   const [selectedFacet, setSelectedFacet] = useState<FacetType | null>(null);
   const [sortOptions, setSortOptions] = useState(defaultSortOptions());
 
@@ -52,7 +63,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     setSortOptions(
       getSortOptionsfromMetadata(
         translation,
-        attributeMetadata?.sortable,
+        filteredAttributes,
         config?.displayOutOfStock,
         config?.currentCategoryUrlPath,
         config?.currentCategoryId
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index e66e690b..b6aaefaf 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -108,7 +108,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
           <ul
             ref={listRef}
             tabIndex={-1}
-            className="ds-sdk-sort-dropdown__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
+            className="ds-sdk-sort-dropdown__items top-full absolute hover:cursor-pointer right-0 w-full rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
           >
             {sortOptions.map((option, i) => (
               <li
diff --git a/src/styles/index.css b/src/styles/index.css
index 0d0227ff..a05c0a83 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-  ::before,
-  ::after {
+::before,
+::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -19,7 +19,7 @@
     /* 2 */
   }
   ::before,
-  ::after {
+::after {
     --tw-content: '';
   }
   /*
@@ -32,7 +32,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-  :host {
+:host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,10 +40,9 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-    tab-size: 4;
+       tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -80,17 +79,17 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
+            text-decoration: underline dotted;
   }
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-size: inherit;
     font-weight: inherit;
   }
@@ -105,7 +104,7 @@ Reset links to optimize for opt-in styling instead of opt-out.
 Add the correct font weight in Edge and Safari.
 */
   b,
-  strong {
+strong {
     font-weight: bolder;
   }
   /*
@@ -115,11 +114,10 @@ Add the correct font weight in Edge and Safari.
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
+kbd,
+samp,
+pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
     font-feature-settings: normal;
     /* 2 */
@@ -138,7 +136,7 @@ Add the correct font size in all browsers.
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-  sup {
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
@@ -169,10 +167,10 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 3. Remove default padding in all browsers.
 */
   button,
-  input,
-  optgroup,
-  select,
-  textarea {
+input,
+optgroup,
+select,
+textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -196,7 +194,7 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-  select {
+select {
     text-transform: none;
   }
   /*
@@ -204,9 +202,9 @@ Remove the inheritance of text transform in Edge and Firefox.
 2. Remove default button styles.
 */
   button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -236,7 +234,7 @@ Add the correct vertical alignment in Chrome and Firefox.
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+::-webkit-outer-spin-button {
     height: auto;
   }
   /*
@@ -275,18 +273,18 @@ Add the correct display in Chrome and Safari.
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
     margin: 0;
   }
   fieldset {
@@ -297,8 +295,8 @@ Removes the default spacing and border for appropriate elements.
     padding: 0;
   }
   ol,
-  ul,
-  menu {
+ul,
+menu {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -319,15 +317,14 @@ Prevent resizing textareas horizontally by default.
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-  input::-moz-placeholder,
-  textarea::-moz-placeholder {
+  input::-moz-placeholder, textarea::-moz-placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
   input::placeholder,
-  textarea::placeholder {
+textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
@@ -337,7 +334,7 @@ Prevent resizing textareas horizontally by default.
 Set the default cursor for buttons.
 */
   button,
-  [role='button'] {
+[role="button"] {
     cursor: pointer;
   }
   /*
@@ -352,13 +349,13 @@ Make sure disabled buttons don't get the pointer cursor.
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
     display: block;
     /* 1 */
     vertical-align: middle;
@@ -368,7 +365,7 @@ Make sure disabled buttons don't get the pointer cursor.
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-  video {
+video {
     max-width: 100%;
     height: auto;
   }
@@ -376,9 +373,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   [hidden] {
     display: none;
   }
-  *,
-  ::before,
-  ::after {
+  *, ::before, ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -388,19 +383,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -408,24 +403,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   ::backdrop {
     --tw-border-spacing-x: 0;
@@ -437,19 +432,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -457,24 +452,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   .container {
     width: 100%;
@@ -533,6 +528,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .inset-0 {
     inset: 0px;
   }
+  .top-full {
+    top: 100%;
+  }
   .bottom-0 {
     bottom: 0px;
   }
@@ -662,9 +660,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-\[100\%\] {
     height: 100%;
   }
-  .h-\[12px\] {
-    height: 12px;
-  }
   .h-\[15px\] {
     height: 15px;
   }
@@ -686,12 +681,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-\[44px\] {
     height: 44px;
   }
-  .h-\[80\%\] {
-    height: 80%;
-  }
   .h-\[56px\] {
     height: 56px;
   }
+  .h-\[80\%\] {
+    height: 80%;
+  }
   .h-auto {
     height: auto;
   }
@@ -803,38 +798,26 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .-rotate-90 {
     --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-180 {
     --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-45 {
     --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-90 {
     --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   @keyframes slideUp {
     0% {
@@ -870,8 +853,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .appearance-none {
     -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+       -moz-appearance: none;
+            appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -918,35 +901,35 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .gap-\[16px\] {
     gap: 16px;
   }
-  .gap-x-1 {
-    -moz-column-gap: 0.25rem;
-    column-gap: 0.25rem;
-  }
   .gap-\[6px\] {
     gap: 6px;
   }
   .gap-xxsmall {
     gap: var(--spacing-xxsmall);
   }
+  .gap-x-1 {
+    -moz-column-gap: 0.25rem;
+         column-gap: 0.25rem;
+  }
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-    column-gap: 0.5rem;
+         column-gap: 0.5rem;
   }
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-    column-gap: 0.625rem;
+         column-gap: 0.625rem;
   }
   .gap-x-6 {
     -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-    column-gap: var(--spacing-md);
+         column-gap: var(--spacing-md);
   }
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-    column-gap: var(--spacing-sm);
+         column-gap: var(--spacing-sm);
   }
   .gap-y-8 {
     row-gap: 2rem;
@@ -1123,11 +1106,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .object-cover {
     -o-object-fit: cover;
-    object-fit: cover;
+       object-fit: cover;
   }
   .object-center {
     -o-object-position: center;
-    object-position: center;
+       object-position: center;
   }
   .p-1 {
     padding: 0.25rem;
@@ -1194,14 +1177,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-  .py-md {
-    padding-top: var(--spacing-md);
-    padding-bottom: var(--spacing-md);
-  }
   .py-\[10px\] {
     padding-top: 10px;
     padding-bottom: 10px;
   }
+  .py-md {
+    padding-top: var(--spacing-md);
+    padding-bottom: var(--spacing-md);
+  }
   .py-sm {
     padding-top: var(--spacing-sm);
     padding-bottom: var(--spacing-sm);
@@ -1387,6 +1370,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-text-opacity: 1;
     color: rgb(133 77 14 / var(--tw-text-opacity));
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .line-through {
     text-decoration-line: line-through;
   }
@@ -1405,16 +1391,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-      0 4px 6px -4px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .outline {
     outline-style: solid;
@@ -1432,12 +1414,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     outline-color: transparent;
   }
   .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
   .ring-black {
     --tw-ring-opacity: 1;
@@ -1448,30 +1427,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .blur {
     --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .\!filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
   .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .transition {
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -1769,7 +1736,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
+  transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
 
 .first\:ml-0:first-child {
@@ -1836,21 +1803,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-green-600:focus {
@@ -1881,8 +1842,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 .active\:shadow-none:active {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .group:hover .group-hover\:opacity-100 {
@@ -1952,12 +1912,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 @media (min-width: 1280px) {
   .xl\:gap-x-4 {
     -moz-column-gap: 1rem;
-    column-gap: 1rem;
+         column-gap: 1rem;
   }
 
   .xl\:gap-x-6 {
     -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
 }
 
diff --git a/src/utils/sort.ts b/src/utils/sort.ts
index 9ba5c01f..c833e56f 100644
--- a/src/utils/sort.ts
+++ b/src/utils/sort.ts
@@ -23,21 +23,22 @@ const getSortOptionsfromMetadata = (
   sortMetadata: SortMetadata[],
   displayOutOfStock?: string | boolean,
   categoryPath?: string,
-  categoryId?: string,
+  categoryId?: string
 ): SortOption[] => {
-  const sortOptions = categoryPath || categoryId
-    ? [
-        {
-          label: translation.SortDropdown.positionLabel,
-          value: 'position_ASC',
-        },
-      ]
-    : [
-        {
-          label: translation.SortDropdown.relevanceLabel,
-          value: 'relevance_DESC',
-        },
-      ];
+  const sortOptions =
+    categoryPath || categoryId
+      ? [
+          {
+            label: translation.SortDropdown.positionLabel,
+            value: 'position_ASC',
+          },
+        ]
+      : [
+          {
+            label: translation.SortDropdown.relevanceLabel,
+            value: 'relevance_DESC',
+          },
+        ];
   const displayInStockOnly = displayOutOfStock != '1'; // '!=' is intentional for conversion
 
   if (sortMetadata && sortMetadata.length > 0) {

From 9a152acbf8616b6ba9d639f7cb9085ded7c3b92a Mon Sep 17 00:00:00 2001
From: Johnny Ung <johnnyung91@gmail.com>
Date: Fri, 12 Jul 2024 12:21:46 -0700
Subject: [PATCH 053/160] mobile sort

---
 src/components/Facets/Facets.tsx             |  1 -
 src/components/SortDropdown/SortDropdown.tsx |  2 +-
 src/containers/MobileFilterHeader.tsx        | 12 +++++++++++-
 src/styles/index.css                         |  6 +++---
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index b3998040..6dfbad32 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -48,7 +48,6 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   const attributesToFilter = [
     'featured',
     'new',
-    'pcm_publication_date',
     'price',
   ];
 
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index b6aaefaf..c55687b5 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -108,7 +108,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
           <ul
             ref={listRef}
             tabIndex={-1}
-            className="ds-sdk-sort-dropdown__items top-full absolute hover:cursor-pointer right-0 w-full rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
+            className="ds-sdk-sort-dropdown__items top-full absolute hover:cursor-pointer right-0 w-28 rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
           >
             {sortOptions.map((option, i) => (
               <li
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index db273277..382ff44c 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -51,6 +51,16 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
   const productsCtx = useProducts();
   const translation = useTranslation();
 
+  const attributesToFilter = [
+    'featured',
+    'new',
+    'price',
+  ];
+
+  const filteredAttributes = attributeMetadata?.sortable.filter((item) =>
+    attributesToFilter.includes(item.attribute)
+  );
+
   const [showMobileFacet, setShowMobileFacet] = useState(
     !!productsCtx.variables.filter?.length
   );
@@ -60,7 +70,7 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
     setSortOptions(
       getSortOptionsfromMetadata(
         translation,
-        attributeMetadata?.sortable,
+        filteredAttributes,
         storeCtx?.config?.displayOutOfStock,
         storeCtx?.config?.currentCategoryUrlPath,
         storeCtx?.config?.currentCategoryId
diff --git a/src/styles/index.css b/src/styles/index.css
index a05c0a83..14c4b97a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -528,9 +528,6 @@ video {
   .inset-0 {
     inset: 0px;
   }
-  .top-full {
-    top: 100%;
-  }
   .bottom-0 {
     bottom: 0px;
   }
@@ -543,6 +540,9 @@ video {
   .right-0 {
     right: 0px;
   }
+  .top-full {
+    top: 100%;
+  }
   .z-20 {
     z-index: 20;
   }

From 76d9208c834bc2fe87ba689ecb41a3ffb0020aa9 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Wed, 10 Jul 2024 14:48:45 +0530
Subject: [PATCH 054/160] Make size option button smaller in smaller screens

---
 src/components/AddToCartButton/AddToCartButton.tsx | 11 +++++++----
 src/styles/index.css                               |  6 ++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
index 87301cfe..456b3d77 100644
--- a/src/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -10,6 +10,7 @@ it.
 import { FunctionComponent } from 'preact';
 
 import PlusIcon from '../../icons/plus.svg';
+import { useSensor } from '../../context';
 
 export interface AddToCartButtonProps {
   onClick: (e: any) => any;
@@ -17,14 +18,16 @@ export interface AddToCartButtonProps {
 export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   onClick,
 }: AddToCartButtonProps) => {
+  const { screenSize } = useSensor();
+
   return (
-    <div className="ds-sdk-add-to-cart-button">
+    <div className={`ds-sdk-add-to-cart-button ${screenSize.desktop ? 'h-[100%] w-full' : 'h-[40px] w-[40px]'}`}>
       <button
-        className="flex items-center justify-center h-[100%] w-full px-big py-[10px]"
+        className={`flex items-center justify-center h-[100%] w-full gap-2 ${screenSize.desktop ? 'px-big py-[10px]': ''}`}
         onClick={onClick}
       >
-        <PlusIcon className="w-[14px] mr-xs" />
-        Quick Add
+        <PlusIcon className="w-[14px]" />
+        {screenSize.desktop && 'Quick Add'}
       </button>
     </div>
   );
diff --git a/src/styles/index.css b/src/styles/index.css
index 0d0227ff..c06945b6 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -680,6 +680,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-\[38px\] {
     height: 38px;
   }
+  .h-\[40px\] {
+    height: 40px;
+  }
   .h-\[445px\] {
     height: 445px;
   }
@@ -743,6 +746,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .w-\[20px\] {
     width: 20px;
   }
+  .w-\[40px\] {
+    width: 40px;
+  }
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;

From 31bcbf077d0afec9d4a15087fd38bfb95c6005ea Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Wed, 17 Jul 2024 00:44:50 +0530
Subject: [PATCH 055/160] Resolve code review comments

---
 .../AddToCartButton/AddToCartButton.tsx       |   4 +-
 src/styles/index.css                          | 729 ++++++++----------
 src/styles/tokens.css                         |   1 +
 3 files changed, 341 insertions(+), 393 deletions(-)

diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
index 456b3d77..dd35531a 100644
--- a/src/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -21,9 +21,9 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   const { screenSize } = useSensor();
 
   return (
-    <div className={`ds-sdk-add-to-cart-button ${screenSize.desktop ? 'h-[100%] w-full' : 'h-[40px] w-[40px]'}`}>
+    <div className='ds-sdk-add-to-cart-button h-[40px] w-[40px] lg:h-[100%] lg:w-full'>
       <button
-        className={`flex items-center justify-center h-[100%] w-full gap-2 ${screenSize.desktop ? 'px-big py-[10px]': ''}`}
+        className='flex items-center justify-center h-[100%] w-full gap-2 lg:px-big lg:py-[10px]'
         onClick={onClick}
       >
         <PlusIcon className="w-[14px]" />
diff --git a/src/styles/index.css b/src/styles/index.css
index c06945b6..fe9b08e4 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-  ::before,
-  ::after {
+::before,
+::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -19,7 +19,7 @@
     /* 2 */
   }
   ::before,
-  ::after {
+::after {
     --tw-content: '';
   }
   /*
@@ -32,7 +32,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-  :host {
+:host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,10 +40,9 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-    tab-size: 4;
+       tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -80,17 +79,17 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
+            text-decoration: underline dotted;
   }
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-size: inherit;
     font-weight: inherit;
   }
@@ -105,7 +104,7 @@ Reset links to optimize for opt-in styling instead of opt-out.
 Add the correct font weight in Edge and Safari.
 */
   b,
-  strong {
+strong {
     font-weight: bolder;
   }
   /*
@@ -115,11 +114,10 @@ Add the correct font weight in Edge and Safari.
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
+kbd,
+samp,
+pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
     font-feature-settings: normal;
     /* 2 */
@@ -138,7 +136,7 @@ Add the correct font size in all browsers.
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-  sup {
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
@@ -169,10 +167,10 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 3. Remove default padding in all browsers.
 */
   button,
-  input,
-  optgroup,
-  select,
-  textarea {
+input,
+optgroup,
+select,
+textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -196,7 +194,7 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-  select {
+select {
     text-transform: none;
   }
   /*
@@ -204,9 +202,9 @@ Remove the inheritance of text transform in Edge and Firefox.
 2. Remove default button styles.
 */
   button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -236,7 +234,7 @@ Add the correct vertical alignment in Chrome and Firefox.
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+::-webkit-outer-spin-button {
     height: auto;
   }
   /*
@@ -275,18 +273,18 @@ Add the correct display in Chrome and Safari.
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
     margin: 0;
   }
   fieldset {
@@ -297,8 +295,8 @@ Removes the default spacing and border for appropriate elements.
     padding: 0;
   }
   ol,
-  ul,
-  menu {
+ul,
+menu {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -319,15 +317,14 @@ Prevent resizing textareas horizontally by default.
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
-  input::-moz-placeholder,
-  textarea::-moz-placeholder {
+  input::-moz-placeholder, textarea::-moz-placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
   input::placeholder,
-  textarea::placeholder {
+textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
@@ -337,7 +334,7 @@ Prevent resizing textareas horizontally by default.
 Set the default cursor for buttons.
 */
   button,
-  [role='button'] {
+[role="button"] {
     cursor: pointer;
   }
   /*
@@ -352,13 +349,13 @@ Make sure disabled buttons don't get the pointer cursor.
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
     display: block;
     /* 1 */
     vertical-align: middle;
@@ -368,7 +365,7 @@ Make sure disabled buttons don't get the pointer cursor.
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-  video {
+video {
     max-width: 100%;
     height: auto;
   }
@@ -376,9 +373,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   [hidden] {
     display: none;
   }
-  *,
-  ::before,
-  ::after {
+  *, ::before, ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -388,19 +383,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -408,24 +403,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   ::backdrop {
     --tw-border-spacing-x: 0;
@@ -437,19 +432,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -457,24 +452,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
   .container {
     width: 100%;
@@ -662,9 +657,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-\[100\%\] {
     height: 100%;
   }
-  .h-\[12px\] {
-    height: 12px;
-  }
   .h-\[15px\] {
     height: 15px;
   }
@@ -689,12 +681,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .h-\[44px\] {
     height: 44px;
   }
-  .h-\[80\%\] {
-    height: 80%;
-  }
   .h-\[56px\] {
     height: 56px;
   }
+  .h-\[80\%\] {
+    height: 80%;
+  }
   .h-auto {
     height: auto;
   }
@@ -809,38 +801,26 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .-rotate-90 {
     --tw-rotate: -90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-180 {
     --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-45 {
     --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .rotate-90 {
     --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   @keyframes slideUp {
     0% {
@@ -876,8 +856,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .appearance-none {
     -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+       -moz-appearance: none;
+            appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -924,35 +904,35 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .gap-\[16px\] {
     gap: 16px;
   }
-  .gap-x-1 {
-    -moz-column-gap: 0.25rem;
-    column-gap: 0.25rem;
-  }
   .gap-\[6px\] {
     gap: 6px;
   }
   .gap-xxsmall {
     gap: var(--spacing-xxsmall);
   }
+  .gap-x-1 {
+    -moz-column-gap: 0.25rem;
+         column-gap: 0.25rem;
+  }
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-    column-gap: 0.5rem;
+         column-gap: 0.5rem;
   }
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-    column-gap: 0.625rem;
+         column-gap: 0.625rem;
   }
   .gap-x-6 {
     -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-    column-gap: var(--spacing-md);
+         column-gap: var(--spacing-md);
   }
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-    column-gap: var(--spacing-sm);
+         column-gap: var(--spacing-sm);
   }
   .gap-y-8 {
     row-gap: 2rem;
@@ -1129,11 +1109,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .object-cover {
     -o-object-fit: cover;
-    object-fit: cover;
+       object-fit: cover;
   }
   .object-center {
     -o-object-position: center;
-    object-position: center;
+       object-position: center;
   }
   .p-1 {
     padding: 0.25rem;
@@ -1172,10 +1152,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-left: 12px;
     padding-right: 12px;
   }
-  .px-big {
-    padding-left: var(--spacing-big);
-    padding-right: var(--spacing-big);
-  }
   .px-md {
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-md);
@@ -1204,10 +1180,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: var(--spacing-md);
     padding-bottom: var(--spacing-md);
   }
-  .py-\[10px\] {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
   .py-sm {
     padding-top: var(--spacing-sm);
     padding-bottom: var(--spacing-sm);
@@ -1393,6 +1365,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-text-opacity: 1;
     color: rgb(133 77 14 / var(--tw-text-opacity));
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .line-through {
     text-decoration-line: line-through;
   }
@@ -1411,16 +1386,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-      0 4px 6px -4px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .outline {
     outline-style: solid;
@@ -1438,12 +1409,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     outline-color: transparent;
   }
   .ring-1 {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow, 0 0 #0000);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
   .ring-black {
     --tw-ring-opacity: 1;
@@ -1454,30 +1422,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
   .blur {
     --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .\!filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
   .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
-      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
   .transition {
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -1489,6 +1445,192 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   .ease-out {
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
+  .first\:ml-0:first-child {
+    margin-left: 0px;
+  }
+  .hover\:cursor-pointer:hover {
+    cursor: pointer;
+  }
+  .hover\:border-none:hover {
+    border-style: none;
+  }
+  .hover\:bg-green-100:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  }
+  .hover\:bg-neutral-200:hover {
+    background-color: var(--color-neutral-200);
+  }
+  .hover\:bg-transparent:hover {
+    background-color: transparent;
+  }
+  .hover\:text-blue-600:hover {
+    --tw-text-opacity: 1;
+    color: rgb(37 99 235 / var(--tw-text-opacity));
+  }
+  .hover\:text-brand-700:hover {
+    color: var(--color-brand-700);
+  }
+  .hover\:text-neutral-900:hover {
+    color: var(--color-neutral-900);
+  }
+  .hover\:underline:hover {
+    text-decoration-line: underline;
+  }
+  .hover\:no-underline:hover {
+    text-decoration-line: none;
+  }
+  .focus\:border-none:focus {
+    border-style: none;
+  }
+  .focus\:bg-transparent:focus {
+    background-color: transparent;
+  }
+  .focus\:no-underline:focus {
+    text-decoration-line: none;
+  }
+  .focus\:outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  .focus\:ring-0:focus {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  }
+  .focus\:ring-2:focus {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  }
+  .focus\:ring-green-600:focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
+  }
+  .focus\:ring-offset-2:focus {
+    --tw-ring-offset-width: 2px;
+  }
+  .focus\:ring-offset-green-50:focus {
+    --tw-ring-offset-color: #f0fdf4;
+  }
+  .active\:border-none:active {
+    border-style: none;
+  }
+  .active\:bg-transparent:active {
+    background-color: transparent;
+  }
+  .active\:no-underline:active {
+    text-decoration-line: none;
+  }
+  .active\:shadow-none:active {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+  .group:hover .group-hover\:opacity-100 {
+    opacity: 1;
+  }
+  @media (min-width: 640px) {
+    .sm\:flex {
+      display: flex;
+    }
+  }
+  @media (min-width: 640px) {
+    .sm\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 640px) {
+    .sm\:px-6 {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+  @media (min-width: 640px) {
+    .sm\:pb-24 {
+      padding-bottom: 6rem;
+    }
+  }
+  @media (min-width: 640px) {
+    .sm\:pb-6 {
+      padding-bottom: 1.5rem;
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:ml-6 {
+      margin-left: 1.5rem;
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:flex {
+      display: flex;
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:justify-between {
+      justify-content: space-between;
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:h-\[100\%\] {
+      height: 100%;
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:w-full {
+      width: 100%;
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:max-w-7xl {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:max-w-full {
+      max-width: 100%;
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:px-big {
+      padding-left: var(--spacing-big);
+      padding-right: var(--spacing-big);
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:py-\[10px\] {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+  @media (min-width: 1280px) {
+    .xl\:gap-x-4 {
+      -moz-column-gap: 1rem;
+           column-gap: 1rem;
+    }
+  }
+  @media (min-width: 1280px) {
+    .xl\:gap-x-6 {
+      -moz-column-gap: 1.5rem;
+           column-gap: 1.5rem;
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    .dark\:bg-neutral-800 {
+      background-color: var(--color-neutral-800);
+    }
+  }
   /* font-size: 1.6rem; */
   /* Elsie base design */
   --color-brand-300: #6d6d6d;
@@ -1775,200 +1917,5 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .ds-sdk-product-image-hover {
-  transition: background-image 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
-}
-
-.first\:ml-0:first-child {
-  margin-left: 0px;
-}
-
-.hover\:cursor-pointer:hover {
-  cursor: pointer;
-}
-
-.hover\:border-none:hover {
-  border-style: none;
-}
-
-.hover\:bg-green-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-200:hover {
-  background-color: var(--color-neutral-200);
-}
-
-.hover\:bg-transparent:hover {
-  background-color: transparent;
-}
-
-.hover\:text-blue-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
-.hover\:text-brand-700:hover {
-  color: var(--color-brand-700);
-}
-
-.hover\:text-neutral-900:hover {
-  color: var(--color-neutral-900);
-}
-
-.hover\:underline:hover {
-  text-decoration-line: underline;
-}
-
-.hover\:no-underline:hover {
-  text-decoration-line: none;
-}
-
-.focus\:border-none:focus {
-  border-style: none;
-}
-
-.focus\:bg-transparent:focus {
-  background-color: transparent;
-}
-
-.focus\:no-underline:focus {
-  text-decoration-line: none;
-}
-
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-green-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
-.focus\:ring-offset-green-50:focus {
-  --tw-ring-offset-color: #f0fdf4;
-}
-
-.active\:border-none:active {
-  border-style: none;
-}
-
-.active\:bg-transparent:active {
-  background-color: transparent;
-}
-
-.active\:no-underline:active {
-  text-decoration-line: none;
-}
-
-.active\:shadow-none:active {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.group:hover .group-hover\:opacity-100 {
-  opacity: 1;
-}
-
-@media (min-width: 640px) {
-  .sm\:flex {
-    display: flex;
-  }
-
-  .sm\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .sm\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .sm\:pb-24 {
-    padding-bottom: 6rem;
-  }
-
-  .sm\:pb-6 {
-    padding-bottom: 1.5rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:ml-6 {
-    margin-left: 1.5rem;
-  }
-
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .md\:justify-between {
-    justify-content: space-between;
-  }
-}
-
-@media (min-width: 1024px) {
-  .lg\:w-full {
-    width: 100%;
-  }
-
-  .lg\:max-w-7xl {
-    max-width: 80rem;
-  }
-
-  .lg\:max-w-full {
-    max-width: 100%;
-  }
-
-  .lg\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .xl\:gap-x-4 {
-    -moz-column-gap: 1rem;
-    column-gap: 1rem;
-  }
-
-  .xl\:gap-x-6 {
-    -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-neutral-800 {
-    background-color: var(--color-neutral-800);
-  }
+  transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 16a9662e..e049f38f 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -3,6 +3,7 @@
   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
+  @import 'tailwindcss/variants';
 
   /* font-size: 1.6rem; */
 

From 0042d2c0d209dde09ba72aa5773715ffab1e977d Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Wed, 17 Jul 2024 00:51:31 +0530
Subject: [PATCH 056/160] Fix lint errors

---
 src/components/AddToCartButton/AddToCartButton.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
index dd35531a..9b58a02d 100644
--- a/src/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -9,8 +9,8 @@ it.
 
 import { FunctionComponent } from 'preact';
 
-import PlusIcon from '../../icons/plus.svg';
 import { useSensor } from '../../context';
+import PlusIcon from '../../icons/plus.svg';
 
 export interface AddToCartButtonProps {
   onClick: (e: any) => any;
@@ -21,9 +21,9 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   const { screenSize } = useSensor();
 
   return (
-    <div className='ds-sdk-add-to-cart-button h-[40px] w-[40px] lg:h-[100%] lg:w-full'>
+    <div className="ds-sdk-add-to-cart-button h-[40px] w-[40px] lg:h-[100%] lg:w-full">
       <button
-        className='flex items-center justify-center h-[100%] w-full gap-2 lg:px-big lg:py-[10px]'
+        className="flex items-center justify-center h-[100%] w-full gap-2 lg:px-big lg:py-[10px]"
         onClick={onClick}
       >
         <PlusIcon className="w-[14px]" />

From e0350275addc06b445a6db8abb794bd312fce85a Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Wed, 17 Jul 2024 11:38:32 +0200
Subject: [PATCH 057/160] Respect redirect route in storefront events

---
 src/api/search.ts                          | 41 +++++++++++++++-------
 src/components/ProductItem/ProductItem.tsx | 12 +++----
 src/containers/App.tsx                     | 10 +++---
 src/containers/ProductsHeader.tsx          |  8 +++--
 src/context/events.tsx                     | 29 +++++++++------
 src/types/interface.ts                     |  1 +
 src/utils/sort.ts                          | 29 +++++++--------
 7 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index 29ef1871..a594b3f2 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -57,6 +57,7 @@ const getProductSearch = async ({
   context,
   categorySearch = false,
   categoryId,
+  route,
 }: ProductSearchQuery & ClientProps): Promise<
   ProductSearchResponse['data']
 > => {
@@ -116,17 +117,23 @@ const getProductSearch = async ({
     sort
   );
 
-  window.adobeDataLayer.push((dl : any) => {
-    dl.push({ event: 'search-request-sent', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
-  })
+  window.adobeDataLayer.push((dl: any) => {
+    dl.push({
+      event: 'search-request-sent',
+      eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID },
+    });
+  });
   // ======  end of data collection =====
 
-  const query = categorySearch && categoryId ? CATEGORY_QUERY : PRODUCT_SEARCH_QUERY;
+  const query =
+    categorySearch && categoryId ? CATEGORY_QUERY : PRODUCT_SEARCH_QUERY;
   const results = await fetch(apiUrl, {
     method: 'POST',
     headers,
     body: JSON.stringify({
-      query: query.replace(/(?:\r\n|\r|\n|\t|[\s]{4})/g, ' ').replace(/\s\s+/g, ' '),
+      query: query
+        .replace(/(?:\r\n|\r|\n|\t|[\s]{4})/g, ' ')
+        .replace(/\s\s+/g, ' '),
       variables: { ...variables },
     }),
   }).then((res) => res.json());
@@ -135,21 +142,31 @@ const getProductSearch = async ({
   updateSearchResultsCtx(
     SEARCH_UNIT_ID,
     searchRequestId,
-    results?.data?.productSearch
+    results?.data?.productSearch,
+    route
   );
 
-  window.adobeDataLayer.push((dl : any) => {
-    dl.push({ event: 'search-response-received', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+  window.adobeDataLayer.push((dl: any) => {
+    dl.push({
+      event: 'search-response-received',
+      eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID },
+    });
   });
 
   if (categorySearch && categoryId) {
-    window.adobeDataLayer.push((dl : any) => {
+    window.adobeDataLayer.push((dl: any) => {
       dl.push({ categoryContext: results?.data?.categories?.[0] });
-      dl.push({ event: 'category-results-view', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+      dl.push({
+        event: 'category-results-view',
+        eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID },
+      });
     });
   } else {
-    window.adobeDataLayer.push((dl : any) => {
-      dl.push({ event: 'search-results-view', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+    window.adobeDataLayer.push((dl: any) => {
+      dl.push({
+        event: 'search-results-view',
+        eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID },
+      });
     });
   }
   // ======  end of data collection =====
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 64126ba6..a936e347 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -373,12 +373,12 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
           )}
         </div>
       )}
-        <div className="pb-4 mt-sm">
-          {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
-          {isHovering && screenSize.desktop && (
-            <AddToCartButton onClick={handleAddToCart} />
-          )}
-        </div>
+      <div className="pb-4 mt-sm">
+        {screenSize.mobile && <AddToCartButton onClick={handleAddToCart} />}
+        {isHovering && screenSize.desktop && (
+          <AddToCartButton onClick={handleAddToCart} />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index fed857eb..995af58e 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -16,11 +16,11 @@ import Shimmer from 'src/components/Shimmer';
 import { CategoryFilters } from '../components/CategoryFilters';
 import { SelectedFilters } from '../components/Facets';
 import {
-    useProducts,
-    useSearch,
-    useSensor,
-    useStore,
-    useTranslation,
+  useProducts,
+  useSearch,
+  useSensor,
+  useStore,
+  useTranslation,
 } from '../context';
 import { ProductsContainer } from './ProductsContainer';
 import { ProductsHeader } from './ProductsHeader';
diff --git a/src/containers/ProductsHeader.tsx b/src/containers/ProductsHeader.tsx
index 54df787e..e751db20 100644
--- a/src/containers/ProductsHeader.tsx
+++ b/src/containers/ProductsHeader.tsx
@@ -72,9 +72,11 @@ export const ProductsHeader: FunctionComponent<Props> = ({
     getSortOptions();
   }, [getSortOptions]);
 
-  const defaultSortOption = (storeCtx.config?.currentCategoryUrlPath || storeCtx.config?.currentCategoryId)
-    ? 'position_ASC'
-    : 'relevance_DESC';
+  const defaultSortOption =
+    storeCtx.config?.currentCategoryUrlPath ||
+    storeCtx.config?.currentCategoryId
+      ? 'position_ASC'
+      : 'relevance_DESC';
   const sortFromUrl = getValueFromUrl('product_list_order');
   const sortByDefault = sortFromUrl ? sortFromUrl : defaultSortOption;
   const [sortBy, setSortBy] = useState<string>(sortByDefault);
diff --git a/src/context/events.tsx b/src/context/events.tsx
index 83022dba..1ff579b1 100644
--- a/src/context/events.tsx
+++ b/src/context/events.tsx
@@ -18,7 +18,7 @@ import {
   SearchSort,
 } from '@adobe/magento-storefront-events-sdk/dist/types/types/schemas';
 
-import { ProductSearchResponse } from '../types/interface';
+import { ProductSearchResponse, RedirectRouteFunc } from '../types/interface';
 
 const updateSearchInputCtx = (
   searchUnitId: string,
@@ -29,7 +29,7 @@ const updateSearchInputCtx = (
   currentPage: number,
   sort: Array<SearchSort>
 ): void => {
-  window.adobeDataLayer.push((dl : any) => {
+  window.adobeDataLayer.push((dl: any) => {
     const searchInputCtx = dl.getState('searchInputContext') ?? { units: [] };
 
     // create search input unit
@@ -46,7 +46,7 @@ const updateSearchInputCtx = (
 
     // find search input unit index
     const searchInputUnitIndex = searchInputCtx.units.findIndex(
-      (unit : any) => unit.searchUnitId === searchUnitId
+      (unit: any) => unit.searchUnitId === searchUnitId
     );
 
     // update search input unit
@@ -63,21 +63,24 @@ const updateSearchInputCtx = (
 const updateSearchResultsCtx = (
   searchUnitId: string,
   searchRequestId: string,
-  results: ProductSearchResponse['data']['productSearch']
+  results: ProductSearchResponse['data']['productSearch'],
+  route?: RedirectRouteFunc
 ): void => {
-  window.adobeDataLayer.push((dl : any) => {
-    const searchResultsCtx = dl.getState('searchResultsContext') ?? { units: [] };
+  window.adobeDataLayer.push((dl: any) => {
+    const searchResultsCtx = dl.getState('searchResultsContext') ?? {
+      units: [],
+    };
 
     // find search result unit index
     const searchResultUnitIndex = searchResultsCtx.units.findIndex(
-      (unit : any) => unit.searchUnitId === searchUnitId
+      (unit: any) => unit.searchUnitId === searchUnitId
     );
 
     // create search result unit
     const searchResultUnit: SearchResultUnit = {
       searchUnitId,
       searchRequestId,
-      products: createProducts(results.items),
+      products: createProducts(results.items, route),
       categories: [],
       suggestions: createSuggestions(results.suggestions),
       page: results?.page_info?.current_page || 1,
@@ -97,7 +100,8 @@ const updateSearchResultsCtx = (
 };
 
 const createProducts = (
-  items: ProductSearchResponse['data']['productSearch']['items']
+  items: ProductSearchResponse['data']['productSearch']['items'],
+  route?: RedirectRouteFunc
 ): SearchResultProduct[] => {
   if (!items) {
     return [];
@@ -106,7 +110,12 @@ const createProducts = (
   const products: SearchResultProduct[] = items.map((item, index) => ({
     name: item?.product?.name,
     sku: item?.product?.sku,
-    url: item?.product?.canonical_url ?? '',
+    url: route
+      ? route({
+          sku: item?.productView?.sku,
+          urlKey: item?.productView?.urlKey,
+        })
+      : item?.product?.canonical_url ?? '',
     imageUrl: item?.productView?.images?.length
       ? item?.productView?.images[0].url ?? ''
       : '',
diff --git a/src/types/interface.ts b/src/types/interface.ts
index b3283a56..b9ebd14c 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -93,6 +93,7 @@ export interface ProductSearchQuery {
   data?: QueryData;
   categorySearch?: boolean;
   categoryId?: string;
+  route?: RedirectRouteFunc;
 }
 
 export interface RefineProductQuery {
diff --git a/src/utils/sort.ts b/src/utils/sort.ts
index 9ba5c01f..c833e56f 100644
--- a/src/utils/sort.ts
+++ b/src/utils/sort.ts
@@ -23,21 +23,22 @@ const getSortOptionsfromMetadata = (
   sortMetadata: SortMetadata[],
   displayOutOfStock?: string | boolean,
   categoryPath?: string,
-  categoryId?: string,
+  categoryId?: string
 ): SortOption[] => {
-  const sortOptions = categoryPath || categoryId
-    ? [
-        {
-          label: translation.SortDropdown.positionLabel,
-          value: 'position_ASC',
-        },
-      ]
-    : [
-        {
-          label: translation.SortDropdown.relevanceLabel,
-          value: 'relevance_DESC',
-        },
-      ];
+  const sortOptions =
+    categoryPath || categoryId
+      ? [
+          {
+            label: translation.SortDropdown.positionLabel,
+            value: 'position_ASC',
+          },
+        ]
+      : [
+          {
+            label: translation.SortDropdown.relevanceLabel,
+            value: 'relevance_DESC',
+          },
+        ];
   const displayInStockOnly = displayOutOfStock != '1'; // '!=' is intentional for conversion
 
   if (sortMetadata && sortMetadata.length > 0) {

From d856191f5a06ac673ee2b6971e3197046cf45366 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Tue, 16 Jul 2024 23:42:27 +0530
Subject: [PATCH 058/160] WAF-287: Add colorway swaches

---
 src/api/fragments.ts                          |  7 +-
 src/components/ProductItem/ProductItem.tsx    | 57 +++++++++-------
 src/components/SwatchButton/SwatchButton.tsx  | 20 ++++--
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   | 42 +++++++++---
 src/utils/productUtils.ts                     | 65 ++++++++++++++-----
 5 files changed, 133 insertions(+), 58 deletions(-)

diff --git a/src/api/fragments.ts b/src/api/fragments.ts
index fa1004a1..457d97f4 100644
--- a/src/api/fragments.ts
+++ b/src/api/fragments.ts
@@ -90,13 +90,8 @@ const ProductView = `
                     id
                     title
                     values {
+                        id
                         title
-                        ... on ProductViewOptionValueSwatch {
-                            id
-                            inStock
-                            type
-                            value
-                        }
                     }
                 }
             }
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 66b89bdf..afa7b246 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -28,7 +28,7 @@ import {
   getProductImageURLs
 } from '../../utils/getProductImage';
 import { htmlStringDecode } from '../../utils/htmlStringDecode';
-import { isSportsWear } from '../../utils/productUtils';
+import { getColorSwatchesFromAttribute, getDefaultColorSwatchId, isSportsWear } from '../../utils/productUtils';
 import { AddToCartButton } from '../AddToCartButton';
 import ImageHover from '../ImageHover';
 import { SwatchButtonGroup } from '../SwatchButtonGroup';
@@ -51,8 +51,6 @@ export interface ProductProps {
 }
 
 const SWATCH_COLORS = 'Colors';
-const SWATCH_COLORS_TEAM = 'Colors / Team';
-const SWATCH_COLORS_TEAM_NAME = 'Colors / Team name';
 const SWATCH_SIZE = 'Size';
 
 export const ProductItem: FunctionComponent<ProductProps> = ({
@@ -67,7 +65,9 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   addToCart,
 }: ProductProps) => {
   const { product, productView } = item;
-  const [selectedSwatch, setSelectedSwatch] = useState('');
+  const defaultColorSwatchId = getDefaultColorSwatchId(item);
+
+  const [selectedSwatch, setSelectedSwatch] = useState(defaultColorSwatchId);
   const [imagesFromRefinedProduct, setImagesFromRefinedProduct] = useState<
     ProductViewMedia[] | null
   >();
@@ -99,6 +99,12 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     setRefinedProduct(data);
   };
 
+  const handleSwatchMouseOut = () => {
+    setSelectedSwatch(defaultColorSwatchId);
+    setImagesFromRefinedProduct(null);
+    setRefinedProduct(undefined);
+  }
+
   const isSelected = (id: string) => {
     const selected = selectedSwatch ? selectedSwatch === id : false;
     return selected;
@@ -134,6 +140,17 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const isConfigurable = product?.__typename === 'ConfigurableProduct';
   const shouldShowAddToBagButton = isSportsWear(item) && (!screenSize.desktop || isHovering) && !showSizes;
 
+  const colorSwatchesFromAttribute = getColorSwatchesFromAttribute(item);
+  let colorSwatches: SwatchValues[] = [];
+  if (colorSwatchesFromAttribute && colorSwatchesFromAttribute.length > 0) {
+    colorSwatches = colorSwatchesFromAttribute.map((swatch) => ({
+      id: swatch.id,
+      type: 'IMAGE',
+      value: `${swatch.image}?width=44&height=44&bg-color=E8E4DA`,
+      title: swatch.title,
+    }));
+  }
+
   const onProductClick = () => {
     window.adobeDataLayer.push((dl: any) => {
       dl.push({
@@ -258,6 +275,8 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                           showMore={onProductClick}
                           productUrl={productUrl as string}
                           onClick={handleSelection}
+                          onMouseEnter={handleSelection}
+                          onMouseLeave={handleSwatchMouseOut}
                           sku={productView?.sku}
                         />
                       )
@@ -373,25 +392,19 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             </div>
           </div>
           <div className="flex flex-col px-xsmall py-small gap-2">
-            {productView?.options && productView.options?.length > 0 && (
+            {colorSwatches && colorSwatches.length > 0 && (
               <div className="ds-sdk-product-item__product-swatch flex flex-row text-sm text-brand-700">
-                {productView?.options?.map(
-                  (swatches) => {
-                    if ([SWATCH_COLORS, SWATCH_COLORS_TEAM, SWATCH_COLORS_TEAM_NAME].includes(swatches.title || '')) {
-                      return (
-                        <SwatchButtonGroup
-                          key={product?.sku}
-                          isSelected={isSelected}
-                          swatches={swatches.values ?? []}
-                          showMore={onProductClick}
-                          productUrl={productUrl as string}
-                          onClick={handleSelection}
-                          sku={product?.sku}
-                        />
-                      );
-                    }
-                  }
-                )}
+                 <SwatchButtonGroup
+                    key={product?.sku}
+                    isSelected={isSelected}
+                    swatches={colorSwatches}
+                    showMore={onProductClick}
+                    productUrl={productUrl as string}
+                    onMouseEnter={handleSelection}
+                    onMouseLeave={handleSwatchMouseOut}
+                    onClick={handleSelection}
+                    sku={product?.sku}
+                  />
               </div>
             )}
             <div className="ds-sdk-product-item__product-name font-medium text-lg">
diff --git a/src/components/SwatchButton/SwatchButton.tsx b/src/components/SwatchButton/SwatchButton.tsx
index 26b50fbd..40f98aa7 100644
--- a/src/components/SwatchButton/SwatchButton.tsx
+++ b/src/components/SwatchButton/SwatchButton.tsx
@@ -16,13 +16,17 @@ export interface SwatchButtonProps {
   value: string;
   type: SwatchType;
   checked: boolean;
-  onClick: (e: any) => any;
+  onClick?: (e: Event) => any;
+  onMouseEnter?: (e: Event) => any;
+  onMouseLeave?: (e: Event) => any;
 }
 export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
   id,
   value,
   type,
   checked,
+  onMouseEnter,
+  onMouseLeave,
   onClick,
 }: SwatchButtonProps) => {
   const outlineColor = checked
@@ -38,7 +42,7 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
     const className = `min-w-[44px] p-sm border border-[1.5px] ${outlineColor} h-[44px] outline-transparent`;
     const isWhite = color === '#ffffff' || color === '#fff';
     return (
-      <div className={`ds-sdk-swatch-button_${id}`}>
+      <div className={`ds-sdk-swatch-button_${id} colors-neutral-700 h-full`}>
         <button
           title={value}
           key={id}
@@ -47,9 +51,11 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
             backgroundColor: id === 'show-more' ? null : mockColor,
             border: !checked && isWhite ? '1px solid #ccc' : undefined,
           }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
           onClick={onClick}
           checked={checked}
-        >{id === 'show-more' ? '+' : ''}</button>
+        >{id === 'show-more' ? value : ''}</button>
       </div>
     );
   }
@@ -68,6 +74,8 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
             backgroundColor: color,
             border: !checked && isWhite ? '1px solid #ccc' : undefined,
           }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
           onClick={onClick}
           checked={checked}
         />
@@ -79,11 +87,13 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
     const className = `object-cover object-center min-w-[32px] rounded-full p-sm border border-[1.5px] ${outlineColor} h-[32px] outline-transparent`;
     const style = `background: url(${value}) no-repeat center; background-size: initial`;
     return (
-      <div className={`ds-sdk-swatch-button_${value}`}>
+      <div className={`ds-sdk-swatch-button_${value} w-[100%] h-[100%]`}>
         <button
           key={id}
           className={className}
           style={style}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
           onClick={onClick}
           checked={checked}
         />
@@ -98,6 +108,8 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
       <button
         key={id}
         className={className}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         onClick={onClick}
         checked={checked}
       >
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index bd280dab..82964b67 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -20,6 +20,8 @@ export interface SwatchButtonGroupProps {
   onClick: (optionIds: string[], sku: string) => any;
   sku: string;
   maxSwatches?: number;
+  onMouseEnter?: (optionIds: string[], sku: string) => void;
+  onMouseLeave?: () => void;
 }
 
 const MAX_SWATCHES = 4;
@@ -29,6 +31,8 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   swatches,
   showMore,
   productUrl,
+  onMouseEnter,
+  onMouseLeave,
   onClick,
   sku,
   maxSwatches = MAX_SWATCHES,
@@ -39,10 +43,10 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   return (
     <div className="ds-sdk-product-item__product-swatch-group flex column items-center space-x-2">
       {moreSwatches ? (
-        <div className="flex">
+        <div className="flex h-full w-full">
           {swatches.slice(0, numberOfOptions).map((swatch) => {
             const checked = isSelected(swatch.id);
-            const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''}`;
+            const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''} ${checked ? 'selected' : ''}`;
             const handleClick = (evt: Event) => {
               evt.preventDefault();
               evt.stopPropagation();
@@ -50,6 +54,12 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
               onClick([swatch.id], sku);
             }
 
+            const handleMouseEnter = () => {
+              if (onMouseEnter) {
+                onMouseEnter([swatch.id], sku);
+              }
+            }
+
             return (
               <div className={wrapperClasses} key={swatch.id}>
                   <SwatchButton
@@ -57,6 +67,8 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
                     value={swatch.value}
                     type={swatch.type}
                     checked={!!checked}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={onMouseLeave}
                     onClick={handleClick}
                   />
                 </div>
@@ -66,7 +78,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
             <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
               <SwatchButton
                 id={'show-more'}
-                value={`+${swatches.length - numberOfOptions}`}
+                value={`+ ${swatches.length - numberOfOptions} more`}
                 type={'TEXT'}
                 checked={false}
                 onClick={showMore}
@@ -77,19 +89,29 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
       ) : (
         swatches.slice(0, numberOfOptions).map((swatch) => {
           const checked = isSelected(swatch.id);
+          const handleClick = (evt: Event) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            onClick([swatch.id], sku);
+          }
+
+          const handleMouseEnter = () => {
+            if (onMouseEnter) {
+              onMouseEnter([swatch.id], sku);
+            }
+          }
+
           return (
-            <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700" key={swatch.id}>
+            <div className={`ds-sdk-product-item__product-swatch-item text-sm text-brand-700 ${checked ? 'selected' : ''}`} key={swatch.id}>
               <SwatchButton
                 id={swatch.id}
                 value={swatch.value}
                 type={swatch.type}
                 checked={!!checked}
-                onClick={(evt: Event) => {
-                  evt.preventDefault();
-                  evt.stopPropagation();
-
-                  onClick([swatch.id], sku);
-                }}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={onMouseLeave}
+                onClick={handleClick}
               />
             </div>
           );
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 5ea4e356..c49c125b 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -7,6 +7,34 @@ function isSportsWear(product: Product) {
   return department?.value.includes('Sportswear');
 }
 
+function getColorSwatcheConfigFromAttribute(item: Product) {
+  if (isSportsWear(item)) {
+    return null;
+  }
+
+  const { productView } = item;
+  const imageAttributes = productView?.attributes?.find(({ name }) => name === 'eds_images');
+  if (!imageAttributes) {
+    return null;
+  }
+
+  let options;
+  try {
+    options = JSON.parse(imageAttributes.value);
+  } catch (e) {
+    console.error('Error parsing image attributes', e);
+    return null;
+  }
+
+  const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
+  const colorOptions =  productOptions?.[0];
+  const attributeId = colorOptions?.id;
+  
+  return options.find((option: any) => option.attribute_id === attributeId 
+    && option.attribute_type === 'visual' 
+    && option.show_swatches);
+}
+
 /*
 * New attribute i.e. "eds_images" for product images were introduced to get around catalog service sync issue
 * Ref: https://adobe-dx-support.slack.com/archives/C04CQH83BME/p1719261375238899
@@ -22,25 +50,30 @@ function isSportsWear(product: Product) {
 */
 function getColorSwatchesFromAttribute(item: Product) {
   if (isSportsWear(item)) {
-    return [];
+    return null;
   }
 
-  const { productView } = item;
-  const attributeId = productView?.options?.[0].id;
-  const imageAttributes = productView?.attributes?.find(({ name }) => name === 'eds_images');
-  if (imageAttributes) {
-    const options = JSON.parse(imageAttributes.value);
-    const colorOption = options.find((option: any) => option.attribute_id === attributeId 
-      && option.attribute_type === 'visual' 
-      && option.show_swatches);
-    if (!colorOption) {
-      return [];
-    }
-
-    return colorOption.images;
+  const colorOptionsFromAttribute = getColorSwatcheConfigFromAttribute(item);
+  if (!colorOptionsFromAttribute) {
+    return null;
   }
 
-  return [];
+  const { productView } = item;
+  const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
+  const colorOptions = productOptions?.[0];
+  return colorOptions?.values?.map((option) => {
+    const imagConfig = colorOptionsFromAttribute.images.find((image: any) => image.id === option.id);
+    return {
+      ...option,
+      image: imagConfig?.swatch_image,
+    };
+  });
+}
+
+function getDefaultColorSwatchId(item: Product) {
+  const colorOptionsFromAttribute = getColorSwatcheConfigFromAttribute(item);
+
+  return colorOptionsFromAttribute?.images?.[0]?.id;
 }
 
-export { isSportsWear, getColorSwatchesFromAttribute };
+export { isSportsWear, getColorSwatchesFromAttribute, getDefaultColorSwatchId };

From 7e1c235211570614491bbb4020602d236b617028 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Sun, 28 Jul 2024 01:56:43 +0530
Subject: [PATCH 059/160] Compute visible swatches

---
 src/components/ProductItem/ProductItem.tsx    |  34 ++++-
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   | 130 ++++++++----------
 src/utils/productUtils.ts                     |   1 +
 3 files changed, 89 insertions(+), 76 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index afa7b246..79623aa1 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -8,7 +8,7 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useEffect,useRef, useState } from 'preact/hooks';
 
 import '../ProductItem/ProductItem.css';
 
@@ -74,6 +74,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const [refinedProduct, setRefinedProduct] = useState<RefinedProduct>();
   const [isHovering, setIsHovering] = useState(false);
   const [showSizes, setShowSizes] = useState(false);
+  const prevSelectedSwatch = useRef<string | null>(null);
 
   const { addToCartGraphQL, refreshCart } = useCart();
   const { viewType } = useProducts();
@@ -83,6 +84,10 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   const { screenSize } = useSensor();
 
+  useEffect(() => {
+    prevSelectedSwatch.current = selectedSwatch;
+  }, [selectedSwatch]);
+
   const handleMouseOver = () => {
     setIsHovering(true);
   };
@@ -93,10 +98,28 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   };
 
   const handleSelection = async (optionIds: string[], sku: string) => {
-    const data = await refineProduct(optionIds, sku);
-    setSelectedSwatch(optionIds[0]);
-    setImagesFromRefinedProduct(data.refineProduct.images);
-    setRefinedProduct(data);
+    const selectedSwatchBeforeUdpate = selectedSwatch;
+    const nextSelectedSwatch = optionIds[0];
+    setSelectedSwatch(nextSelectedSwatch);
+
+    try {
+      const data = await refineProduct(optionIds, sku);
+      // If different swatch is selected before the data is fetched, do not update the state
+      if (prevSelectedSwatch.current !== nextSelectedSwatch) {
+        return;
+      }
+
+      setImagesFromRefinedProduct(data.refineProduct.images);
+      setRefinedProduct(data);
+    } catch (error) {
+      // Reset the selected swatch if there is an error
+      if (prevSelectedSwatch.current === nextSelectedSwatch) {
+        setSelectedSwatch(selectedSwatchBeforeUdpate);
+      }
+
+      // eslint-disable-next-line no-console
+      console.error('Error fetching refined product', error);
+    }
   };
 
   const handleSwatchMouseOut = () => {
@@ -384,7 +407,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                       productUrl={productUrl as string}
                       onClick={handleSizeSelection}
                       sku={product?.sku}
-                      maxSwatches={swatchItems.length}
                     />
                   );
                 }
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index 82964b67..ebaade6b 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -8,6 +8,8 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
+import { useRef } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 
 import { SwatchValues } from '../../types/interface';
 import { SwatchButton } from '../SwatchButton';
@@ -19,13 +21,10 @@ export interface SwatchButtonGroupProps {
   productUrl: string;
   onClick: (optionIds: string[], sku: string) => any;
   sku: string;
-  maxSwatches?: number;
   onMouseEnter?: (optionIds: string[], sku: string) => void;
   onMouseLeave?: () => void;
 }
 
-const MAX_SWATCHES = 4;
-
 export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   isSelected,
   swatches,
@@ -34,51 +33,72 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   onMouseEnter,
   onMouseLeave,
   onClick,
-  sku,
-  maxSwatches = MAX_SWATCHES,
+  sku
 }: SwatchButtonGroupProps) => {
-  const moreSwatches = swatches.length > maxSwatches;
-  const numberOfOptions = moreSwatches ? maxSwatches - 1 : swatches.length;
+  const [visibleCount, setVisibleCount] = useState<number|null>(null);
+  const swatchButtonContainerRef = useRef<HTMLDivElement>(null);
+  const swatchButtonRef = useRef<HTMLDivElement>(null);
 
-  return (
-    <div className="ds-sdk-product-item__product-swatch-group flex column items-center space-x-2">
-      {moreSwatches ? (
-        <div className="flex h-full w-full">
-          {swatches.slice(0, numberOfOptions).map((swatch) => {
-            const checked = isSelected(swatch.id);
-            const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''} ${checked ? 'selected' : ''}`;
-            const handleClick = (evt: Event) => {
-              evt.preventDefault();
-              evt.stopPropagation();
+  useEffect(() => {
+    const updateVisibleCount = () => {
+      if (swatchButtonContainerRef.current && swatchButtonRef.current) {
+        const containerWidth = swatchButtonContainerRef.current.offsetWidth;
+        const swatchWidth = swatchButtonRef.current.offsetWidth;
+        const visibleSwatches = Math.floor(containerWidth / swatchWidth);
+        setVisibleCount(visibleSwatches); 
+      }
+    };
+
+    updateVisibleCount();
 
-              onClick([swatch.id], sku);
-            }
+    window.addEventListener('resize', updateVisibleCount);
+    return () => window.removeEventListener('resize', updateVisibleCount);
+  }, [swatchButtonContainerRef, swatchButtonRef]);
 
-            const handleMouseEnter = () => {
-              if (onMouseEnter) {
-                onMouseEnter([swatch.id], sku);
-              }
-            }
+  const moreSwatches = visibleCount === null ? false : swatches.length > visibleCount;
+  const numberOfOptions = moreSwatches && visibleCount !== null ? visibleCount - 1 : swatches.length;
+
+  const swatchButtons = swatches.slice(0, numberOfOptions).map((swatch, index) => {
+    const handleClick = (evt: Event) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+
+      onClick([swatch.id], sku);
+    }
+
+    const handleMouseEnter = () => {
+      if (onMouseEnter) {
+        onMouseEnter([swatch.id], sku);
+      }
+    }
+
+    const checked = isSelected(swatch.id);
+    const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''} ${checked ? 'selected' : ''}`;
+    return (
+      <div className={wrapperClasses} key={swatch.id} ref={index === 0  ? swatchButtonRef : null}>
+          <SwatchButton
+            id={swatch.id}
+            value={swatch.value}
+            type={swatch.type}
+            checked={!!checked}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={onMouseLeave}
+            onClick={handleClick}
+          />
+        </div>
+      );
+  });
 
-            return (
-              <div className={wrapperClasses} key={swatch.id}>
-                  <SwatchButton
-                    id={swatch.id}
-                    value={swatch.value}
-                    type={swatch.type}
-                    checked={!!checked}
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                    onClick={handleClick}
-                  />
-                </div>
-              );
-          })}
+  return (
+    <div className="ds-sdk-product-item__product-swatch-group flex column items-center space-x-2" ref={swatchButtonContainerRef}>
+      {moreSwatches ? (
+        <div className="flex h-full w-full">
+          {swatchButtons}
           <a href={productUrl as string} className="hover:no-underline">
             <div className="ds-sdk-product-item__product-swatch-item text-sm text-brand-700">
               <SwatchButton
                 id={'show-more'}
-                value={`+ ${swatches.length - numberOfOptions} more`}
+                value={`+${swatches.length - numberOfOptions} more`}
                 type={'TEXT'}
                 checked={false}
                 onClick={showMore}
@@ -86,37 +106,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
             </div>
           </a>
         </div>
-      ) : (
-        swatches.slice(0, numberOfOptions).map((swatch) => {
-          const checked = isSelected(swatch.id);
-          const handleClick = (evt: Event) => {
-            evt.preventDefault();
-            evt.stopPropagation();
-
-            onClick([swatch.id], sku);
-          }
-
-          const handleMouseEnter = () => {
-            if (onMouseEnter) {
-              onMouseEnter([swatch.id], sku);
-            }
-          }
-
-          return (
-            <div className={`ds-sdk-product-item__product-swatch-item text-sm text-brand-700 ${checked ? 'selected' : ''}`} key={swatch.id}>
-              <SwatchButton
-                id={swatch.id}
-                value={swatch.value}
-                type={swatch.type}
-                checked={!!checked}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={onMouseLeave}
-                onClick={handleClick}
-              />
-            </div>
-          );
-        })
-      )}
+      ) : swatchButtons}
     </div>
   );
 };
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index c49c125b..25e6a7f2 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -22,6 +22,7 @@ function getColorSwatcheConfigFromAttribute(item: Product) {
   try {
     options = JSON.parse(imageAttributes.value);
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.error('Error parsing image attributes', e);
     return null;
   }

From 4dacb2ede8709efcbafb09f6a1fb59d3d2f9dbe9 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Sun, 28 Jul 2024 02:12:20 +0530
Subject: [PATCH 060/160] Remove unnecessary changes

---
 src/api/fragments.ts                                   | 6 ++++++
 src/components/ProductItem/ProductItem.tsx             | 2 --
 src/components/SwatchButtonGroup/SwatchButtonGroup.tsx | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/api/fragments.ts b/src/api/fragments.ts
index 457d97f4..c2ff07d0 100644
--- a/src/api/fragments.ts
+++ b/src/api/fragments.ts
@@ -92,6 +92,12 @@ const ProductView = `
                     values {
                         id
                         title
+                        ... on ProductViewOptionValueSwatch {
+                            id
+                            inStock
+                            type
+                            value
+                        }
                     }
                 }
             }
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 79623aa1..da239c79 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -298,8 +298,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                           showMore={onProductClick}
                           productUrl={productUrl as string}
                           onClick={handleSelection}
-                          onMouseEnter={handleSelection}
-                          onMouseLeave={handleSwatchMouseOut}
                           sku={productView?.sku}
                         />
                       )
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index ebaade6b..e32ff259 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -53,7 +53,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
 
     window.addEventListener('resize', updateVisibleCount);
     return () => window.removeEventListener('resize', updateVisibleCount);
-  }, [swatchButtonContainerRef, swatchButtonRef]);
+  }, []);
 
   const moreSwatches = visibleCount === null ? false : swatches.length > visibleCount;
   const numberOfOptions = moreSwatches && visibleCount !== null ? visibleCount - 1 : swatches.length;

From 2b6e154ddd6df6ad24a4ced4cbe92a2b4337b29b Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Sun, 28 Jul 2024 02:49:47 +0530
Subject: [PATCH 061/160] Use resize observer instead on window resize

---
 src/components/SwatchButtonGroup/SwatchButtonGroup.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index e32ff259..0fc7bd3d 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -51,8 +51,12 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
 
     updateVisibleCount();
 
-    window.addEventListener('resize', updateVisibleCount);
-    return () => window.removeEventListener('resize', updateVisibleCount);
+    const resizeObserver = new ResizeObserver(() => updateVisibleCount());
+    if (swatchButtonContainerRef.current) {
+      resizeObserver.observe(swatchButtonContainerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
   }, []);
 
   const moreSwatches = visibleCount === null ? false : swatches.length > visibleCount;

From 4d5b54d5ddd267bbd48fddb2793a449db6950cb7 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Sun, 28 Jul 2024 03:02:22 +0530
Subject: [PATCH 062/160] Fix failing test

---
 .../SwatchButtonGroup/SwatchButtonGroup.test.tsx   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx
index 678855ae..a14c8ab0 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx
@@ -11,6 +11,20 @@ import { render } from '@testing-library/preact';
 
 import { SwatchButtonGroup, SwatchButtonGroupProps } from './SwatchButtonGroup';
 
+class ResizeObserver {
+  constructor() {
+  }
+
+  observe() {
+  }
+  unobserve() {
+  }
+  disconnect() {
+  }
+}
+
+global.ResizeObserver = ResizeObserver;
+
 const mockButtonGroup: SwatchButtonGroupProps = {
   swatches: [
     {

From 796d0a9c060cf314df9de52953dea3f084f200e9 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 29 Jul 2024 10:01:55 +0200
Subject: [PATCH 063/160] WAF-104 - Adder containers for eds promos

---
 .../Enrichment/Enrichment.stories.mdx         | 22 +++++++++++++++++
 src/components/Enrichment/Enrichment.tsx      | 24 +++++++++++++++++++
 src/components/Enrichment/index.ts            | 11 +++++++++
 src/containers/App.tsx                        |  5 ++++
 4 files changed, 62 insertions(+)
 create mode 100644 src/components/Enrichment/Enrichment.stories.mdx
 create mode 100644 src/components/Enrichment/Enrichment.tsx
 create mode 100644 src/components/Enrichment/index.ts

diff --git a/src/components/Enrichment/Enrichment.stories.mdx b/src/components/Enrichment/Enrichment.stories.mdx
new file mode 100644
index 00000000..2d91cb52
--- /dev/null
+++ b/src/components/Enrichment/Enrichment.stories.mdx
@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Enrichment } from '../Enrichment';
+
+<Meta
+  title="PLP/Enrichment"
+  component={Enrichment}
+  parameters={{
+    layout: 'centered',
+  }}
+/>
+
+export const Template = (args) => <Enrichment {...args} />;
+
+# Enrichment
+
+```
+import { Enrichment } from '../Enrichment'
+```
+
+<Canvas>
+  <Story name="Enrichment">{Template.bind({})}</Story>
+</Canvas>
diff --git a/src/components/Enrichment/Enrichment.tsx b/src/components/Enrichment/Enrichment.tsx
new file mode 100644
index 00000000..bff1c59d
--- /dev/null
+++ b/src/components/Enrichment/Enrichment.tsx
@@ -0,0 +1,24 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+export interface EnrichmentProps {
+  position: string;
+}
+
+export const Enrichment: FunctionComponent<EnrichmentProps> = (position) => {
+  const positionClass = position?.position ? position?.position : 'below-category';
+
+  return (
+    <div className={`enrichment-container ${positionClass}`}/>
+  );
+};
+
+export default Enrichment;
diff --git a/src/components/Enrichment/index.ts b/src/components/Enrichment/index.ts
new file mode 100644
index 00000000..48e8a87b
--- /dev/null
+++ b/src/components/Enrichment/index.ts
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './Enrichment';
+export { Enrichment as default } from './Enrichment';
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index ef935d11..19078974 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -12,6 +12,7 @@ import { useState } from 'preact/hooks';
 import FilterButton from 'src/components/FilterButton';
 import Loading from 'src/components/Loading';
 import Shimmer from 'src/components/Shimmer';
+import Enrichment from 'src/components/Enrichment';
 
 import { CategoryFilters } from '../components/CategoryFilters';
 import {
@@ -51,6 +52,7 @@ export const App: FunctionComponent = () => {
       {!(displayMode === 'PAGE') &&
         (!screenSize.mobile && showFilters && productsCtx.facets.length > 0 ? (
           <div className="ds-widgets bg-body py-2">
+            <Enrichment position={'below-title'} />
             <div className="flex flex-col">
               <CategoryFilters
                 loading={productsCtx.loading}
@@ -63,6 +65,7 @@ export const App: FunctionComponent = () => {
                 setShowFilters={setShowFilters}
                 filterCount={searchCtx.filterCount}
               />
+              <Enrichment position={'above-grid'} />
               <div
                 className={`ds-widgets_results flex flex-col items-center flex-[75] `}
               >
@@ -77,6 +80,7 @@ export const App: FunctionComponent = () => {
           </div>
         ) : (
           <div className="ds-widgets bg-body py-2">
+            <Enrichment position={'below-title'} />
             <div className="flex flex-col">
               <div className="flex flex-col items-center w-full h-full">
                 <div className="justify-start w-full h-full">
@@ -92,6 +96,7 @@ export const App: FunctionComponent = () => {
                   </div>
                 </div>
               </div>
+              <Enrichment position={'above-grid'} />
               <div className="ds-widgets_results flex flex-col items-center flex-[75]">
                 <div className="flex w-full h-full">
                   {!screenSize.mobile &&

From b9bb4d407ec03be2192af4daef977a8bf1407630 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Mon, 29 Jul 2024 16:04:47 +0530
Subject: [PATCH 064/160] Use default image for swatches

---
 src/components/ProductItem/ProductItem.tsx | 7 ++++---
 src/types/interface.ts                     | 1 +
 src/utils/getProductImage.ts               | 5 +++--
 src/utils/productUtils.ts                  | 6 ++++--
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index da239c79..aaa96871 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -79,7 +79,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const { addToCartGraphQL, refreshCart } = useCart();
   const { viewType } = useProducts();
   const {
-    config: { optimizeImages, imageBaseWidth, listview },
+    config: { optimizeImages, imageBaseWidth, listview, imageBackgroundColor },
   } = useStore();
 
   const { screenSize } = useSensor();
@@ -142,7 +142,8 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   if (optimizeImages) {
     optimizedImageArray = generateOptimizedImages(
       productImageArray,
-      imageBaseWidth ?? 200
+      imageBaseWidth ?? 200,
+      imageBackgroundColor || ''
     );
   }
 
@@ -169,7 +170,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     colorSwatches = colorSwatchesFromAttribute.map((swatch) => ({
       id: swatch.id,
       type: 'IMAGE',
-      value: `${swatch.image}?width=44&height=44&bg-color=E8E4DA`,
+      value: `${swatch.image}?width=44&height=44&bg-color=${imageBackgroundColor}`,
       title: swatch.title,
     }));
   }
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 2336cb06..cb74af3a 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -47,6 +47,7 @@ export interface StoreDetailsConfig {
   listview?: boolean;
   optimizeImages?: boolean;
   imageBaseWidth?: number;
+  imageBackgroundColor?: string;
   resolveCartId?: () => Promise<string | undefined>;
   refreshCart?: () => void;
   addToCart?: (
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 8449889d..27608954 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -71,7 +71,8 @@ const resolveImageUrl = (url: string, opts: ResolveImageUrlOptions): string => {
 
 const generateOptimizedImages = (
   imageUrls: string[],
-  baseImageWidth: number
+  baseImageWidth: number,
+  imageBackgroundColor: string,
 ): { src: string; srcset: any }[] => {
   const baseOptions = {
     fit: 'bounds',
@@ -83,7 +84,7 @@ const generateOptimizedImages = (
     auto: 'webp',
     enable: 'upscale',
     canvas: '9:11',
-    'bg-color': 'E8E4DA'
+    'bg-color': imageBackgroundColor,
   };
 
   const imageUrlArray: Array<{ src: string; srcset: any }> = [];
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 25e6a7f2..d21c8c1e 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -63,10 +63,12 @@ function getColorSwatchesFromAttribute(item: Product) {
   const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
   const colorOptions = productOptions?.[0];
   return colorOptions?.values?.map((option) => {
-    const imagConfig = colorOptionsFromAttribute.images.find((image: any) => image.id === option.id);
+    const imagConfig = colorOptionsFromAttribute.images && colorOptionsFromAttribute.images.find((image: any) => image.id === option.id);
+    const defaultImage = colorOptionsFromAttribute.images?.[0]?.swatch_image || '/en-us/media/image/media_1ccf88b21200e64fed7e7e93e0cf2d0a76fa007a8.png';
+    let swatchImage = (imagConfig && imagConfig.swatch_image) || defaultImage
     return {
       ...option,
-      image: imagConfig?.swatch_image,
+      image: swatchImage,
     };
   });
 }

From 17cfb0459e337a8c7bcb88e1381042ca0697c209 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Wed, 31 Jul 2024 02:03:08 +0530
Subject: [PATCH 065/160] Remove swatch hover functionality from PLP swatches

---
 src/components/ProductItem/ProductItem.tsx         | 14 +++++---------
 src/components/SwatchButton/SwatchButton.tsx       | 12 ------------
 .../SwatchButtonGroup/SwatchButtonGroup.tsx        | 12 ------------
 src/types/interface.ts                             |  2 ++
 src/utils/productUtils.ts                          |  2 +-
 5 files changed, 8 insertions(+), 34 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index aaa96871..21824489 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -122,12 +122,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     }
   };
 
-  const handleSwatchMouseOut = () => {
-    setSelectedSwatch(defaultColorSwatchId);
-    setImagesFromRefinedProduct(null);
-    setRefinedProduct(undefined);
-  }
-
   const isSelected = (id: string) => {
     const selected = selectedSwatch ? selectedSwatch === id : false;
     return selected;
@@ -189,7 +183,11 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   };
 
   const productUrl = setRoute
-    ? setRoute({ sku: productView?.sku, urlKey: productView?.urlKey })
+    ? setRoute({ 
+        sku: productView?.sku, 
+        urlKey: productView?.urlKey, 
+        optionsUIDs: selectedSwatch ? [selectedSwatch] : null,
+      })
     : product?.canonical_url;
 
   const updateCart = async (selectedVariants: string[] = []) => {
@@ -421,8 +419,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                     swatches={colorSwatches}
                     showMore={onProductClick}
                     productUrl={productUrl as string}
-                    onMouseEnter={handleSelection}
-                    onMouseLeave={handleSwatchMouseOut}
                     onClick={handleSelection}
                     sku={product?.sku}
                   />
diff --git a/src/components/SwatchButton/SwatchButton.tsx b/src/components/SwatchButton/SwatchButton.tsx
index 40f98aa7..f8f31fa1 100644
--- a/src/components/SwatchButton/SwatchButton.tsx
+++ b/src/components/SwatchButton/SwatchButton.tsx
@@ -17,16 +17,12 @@ export interface SwatchButtonProps {
   type: SwatchType;
   checked: boolean;
   onClick?: (e: Event) => any;
-  onMouseEnter?: (e: Event) => any;
-  onMouseLeave?: (e: Event) => any;
 }
 export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
   id,
   value,
   type,
   checked,
-  onMouseEnter,
-  onMouseLeave,
   onClick,
 }: SwatchButtonProps) => {
   const outlineColor = checked
@@ -51,8 +47,6 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
             backgroundColor: id === 'show-more' ? null : mockColor,
             border: !checked && isWhite ? '1px solid #ccc' : undefined,
           }}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
           onClick={onClick}
           checked={checked}
         >{id === 'show-more' ? value : ''}</button>
@@ -74,8 +68,6 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
             backgroundColor: color,
             border: !checked && isWhite ? '1px solid #ccc' : undefined,
           }}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
           onClick={onClick}
           checked={checked}
         />
@@ -92,8 +84,6 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
           key={id}
           className={className}
           style={style}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
           onClick={onClick}
           checked={checked}
         />
@@ -108,8 +98,6 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
       <button
         key={id}
         className={className}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
         onClick={onClick}
         checked={checked}
       >
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index 0fc7bd3d..99f27308 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -21,8 +21,6 @@ export interface SwatchButtonGroupProps {
   productUrl: string;
   onClick: (optionIds: string[], sku: string) => any;
   sku: string;
-  onMouseEnter?: (optionIds: string[], sku: string) => void;
-  onMouseLeave?: () => void;
 }
 
 export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
@@ -30,8 +28,6 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   swatches,
   showMore,
   productUrl,
-  onMouseEnter,
-  onMouseLeave,
   onClick,
   sku
 }: SwatchButtonGroupProps) => {
@@ -70,12 +66,6 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
       onClick([swatch.id], sku);
     }
 
-    const handleMouseEnter = () => {
-      if (onMouseEnter) {
-        onMouseEnter([swatch.id], sku);
-      }
-    }
-
     const checked = isSelected(swatch.id);
     const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''} ${checked ? 'selected' : ''}`;
     return (
@@ -85,8 +75,6 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
             value={swatch.value}
             type={swatch.type}
             checked={!!checked}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={onMouseLeave}
             onClick={handleClick}
           />
         </div>
diff --git a/src/types/interface.ts b/src/types/interface.ts
index cb74af3a..5e809584 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -67,9 +67,11 @@ export type BucketTypename =
 export type RedirectRouteFunc = ({
   sku,
   urlKey,
+  optionsUIDs,
 }: {
   sku: string;
   urlKey: null | string;
+  optionsUIDs: null | string[];
 }) => string;
 
 export interface MagentoHeaders {
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index d21c8c1e..31b0d119 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -65,7 +65,7 @@ function getColorSwatchesFromAttribute(item: Product) {
   return colorOptions?.values?.map((option) => {
     const imagConfig = colorOptionsFromAttribute.images && colorOptionsFromAttribute.images.find((image: any) => image.id === option.id);
     const defaultImage = colorOptionsFromAttribute.images?.[0]?.swatch_image || '/en-us/media/image/media_1ccf88b21200e64fed7e7e93e0cf2d0a76fa007a8.png';
-    let swatchImage = (imagConfig && imagConfig.swatch_image) || defaultImage
+    const swatchImage = (imagConfig && imagConfig.swatch_image) || defaultImage
     return {
       ...option,
       image: swatchImage,

From 127ed74da10c86884f881b6bab2c6879e6e17449 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 1 Aug 2024 01:56:12 +0530
Subject: [PATCH 066/160] Fix swatch image quality

---
 src/components/ProductItem/ProductItem.tsx   | 17 +++++++++++------
 src/components/SwatchButton/SwatchButton.tsx |  4 ++--
 src/utils/getProductImage.ts                 |  4 ++--
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 21824489..e84a5e99 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -161,12 +161,17 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const colorSwatchesFromAttribute = getColorSwatchesFromAttribute(item);
   let colorSwatches: SwatchValues[] = [];
   if (colorSwatchesFromAttribute && colorSwatchesFromAttribute.length > 0) {
-    colorSwatches = colorSwatchesFromAttribute.map((swatch) => ({
-      id: swatch.id,
-      type: 'IMAGE',
-      value: `${swatch.image}?width=44&height=44&bg-color=${imageBackgroundColor}`,
-      title: swatch.title,
-    }));
+    colorSwatches = colorSwatchesFromAttribute.map((swatch) => {
+      let imageUrl = generateOptimizedImages([swatch.image], 44, imageBackgroundColor || '', '1:1')[0]?.src;
+      imageUrl = `${imageUrl}&dpr=${Math.round(window.devicePixelRatio)}`;
+
+      return {
+        id: swatch.id,
+        type: 'IMAGE',
+        value: imageUrl,
+        title: swatch.title,
+      };
+    });
   }
 
   const onProductClick = () => {
diff --git a/src/components/SwatchButton/SwatchButton.tsx b/src/components/SwatchButton/SwatchButton.tsx
index f8f31fa1..61d5d498 100644
--- a/src/components/SwatchButton/SwatchButton.tsx
+++ b/src/components/SwatchButton/SwatchButton.tsx
@@ -77,9 +77,9 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
 
   if (type === 'IMAGE' && value) {
     const className = `object-cover object-center min-w-[32px] rounded-full p-sm border border-[1.5px] ${outlineColor} h-[32px] outline-transparent`;
-    const style = `background: url(${value}) no-repeat center; background-size: initial`;
+    const style = `background: url(${value}) no-repeat center; background-size: contain;`;
     return (
-      <div className={`ds-sdk-swatch-button_${value} w-[100%] h-[100%]`}>
+      <div className="w-full h-full">
         <button
           key={id}
           className={className}
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 27608954..e8a9e4a5 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -73,17 +73,17 @@ const generateOptimizedImages = (
   imageUrls: string[],
   baseImageWidth: number,
   imageBackgroundColor: string,
+  aspectRatio?: string | undefined
 ): { src: string; srcset: any }[] => {
   const baseOptions = {
     fit: 'bounds',
-    dpi: 1,
     orient: 1,
     quality: 95,
     optimize: 'high',
     format: 'pjpeg',
     auto: 'webp',
     enable: 'upscale',
-    canvas: '9:11',
+    canvas: aspectRatio || '9:11',
     'bg-color': imageBackgroundColor,
   };
 

From f31832976733db2ebacc3897516fbdbc2b00e780 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 1 Aug 2024 02:17:26 +0530
Subject: [PATCH 067/160] Use placeholder image instead of first swatch image
 as fallback

---
 src/utils/productUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 31b0d119..91a54409 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -64,7 +64,7 @@ function getColorSwatchesFromAttribute(item: Product) {
   const colorOptions = productOptions?.[0];
   return colorOptions?.values?.map((option) => {
     const imagConfig = colorOptionsFromAttribute.images && colorOptionsFromAttribute.images.find((image: any) => image.id === option.id);
-    const defaultImage = colorOptionsFromAttribute.images?.[0]?.swatch_image || '/en-us/media/image/media_1ccf88b21200e64fed7e7e93e0cf2d0a76fa007a8.png';
+    const defaultImage = '/en-us/media/image/media_1ccf88b21200e64fed7e7e93e0cf2d0a76fa007a8.png';
     const swatchImage = (imagConfig && imagConfig.swatch_image) || defaultImage
     return {
       ...option,

From 6aa100039e063f41553251f4cffd3943d80b02c0 Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Thu, 8 Aug 2024 14:50:17 +0530
Subject: [PATCH 068/160] [WIL] PLP - Product Graveyard

adding filter for not fetch discontinued product
---
 src/api/search.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/api/search.ts b/src/api/search.ts
index c2216480..66ab620d 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -86,6 +86,13 @@ const getProductSearch = async ({
     eq: 'true',
   };
 
+  const discontinuedFilter = {
+    attribute: 'pcm_product_salability',
+    in: ['STANDARD','COMING_SOON','DRAW_CAMPAIGN','EARLY_ACCESS','SOLD_OUT','PRE_ORDER','NOT_SOLD_ONLINE'],
+  };
+
+  variables.filter?.push(discontinuedFilter);
+
   if (displayInStockOnly) {
     variables.filter.push(inStockFilter);
   }

From 15c5596e9b567a7e603e5ef53d4a014bcbb256f5 Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Fri, 9 Aug 2024 01:13:40 +0300
Subject: [PATCH 069/160] Add necessary PLP schema

---
 src/components/ImageHover/ImageHover.tsx    |   1 +
 src/components/ProductItem/ProductItem.tsx  |   6 +-
 src/components/ProductItem/ProductPrice.tsx | 192 ++++++++++++--------
 src/utils/getProductPrice.ts                |  47 +++--
 4 files changed, 153 insertions(+), 93 deletions(-)

diff --git a/src/components/ImageHover/ImageHover.tsx b/src/components/ImageHover/ImageHover.tsx
index 8c231e34..f063cc4c 100644
--- a/src/components/ImageHover/ImageHover.tsx
+++ b/src/components/ImageHover/ImageHover.tsx
@@ -24,6 +24,7 @@ export const ImageHover: FunctionComponent<ImageCarouselProps> = ({
         {images.length > 1 && (
           <link rel="preload" as="image" href={typeof images[1] === 'object' ? images[1].src : images[1]} />
         )}
+          <meta itemProp="image" content={typeof images[0] === 'object' ? images[0].src : images[0]} />
         <div class="relative w-full pb-[122.22%]">
           <div class="ds-sdk-product-image-hover absolute h-full w-full m-auto bg-cover bg-no-repeat bg-position-center"
               style={{
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index e84a5e99..a0c1225d 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -362,7 +362,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   }
 
   return (
-    <div
+    <div itemScope itemType="http://schema.org/Product"
       className="ds-sdk-product-item group relative flex flex-col w-full justify-between h-full"
       style={{
         'border-color': '#D5D5D5',
@@ -370,7 +370,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
     >
-      <a
+      <a itemProp="url"
         href={productUrl as string}
         onClick={onProductClick}
         className="!text-brand-700 hover:no-underline hover:text-brand-700"
@@ -429,7 +429,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                   />
               </div>
             )}
-            <div className="ds-sdk-product-item__product-name font-medium text-lg">
+            <div itemProp="name" className="ds-sdk-product-item__product-name font-medium text-lg">
               {product.name !== null && htmlStringDecode(product.name)}
             </div>
             <ProductPrice
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index bc46e409..b948d040 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -12,7 +12,7 @@ import { useContext } from 'preact/hooks';
 
 import { TranslationContext } from '../../context/translation';
 import { Product, RefinedProduct } from '../../types/interface';
-import { getProductPrice } from '../../utils/getProductPrice';
+import { getProductPrice, getOnlyProductPrice } from '../../utils/getProductPrice';
 
 export interface ProductPriceProps {
   isComplexProductView: boolean;
@@ -58,24 +58,34 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
       translation.ProductCard.bundlePrice.split(' ');
     return bundlePriceTranslationOrder.map((word: string, index: any) =>
       word === '{fromBundlePrice}' ? (
-        <span
-          className="text-brand-600 font-headline-4-default mr-xs"
-          key={index}
-        >
-          {getProductPrice(item, currencySymbol, currencyRate, false, true)}
+          <span
+              className="text-brand-600 font-headline-4-default mr-xs"
+              key={index}
+          >
+          <meta itemProp="price" content={getOnlyProductPrice(
+              item,
+              currencyRate,
+              false,
+              true)}/>
+            {getProductPrice(item, currencySymbol, currencyRate, false, true)}
         </span>
       ) : word === '{toBundlePrice}' ? (
-        <span
-          className="text-brand-600 font-headline-4-default mr-xs"
-          key={index}
-        >
-          {getProductPrice(item, currencySymbol, currencyRate, true, true)}
+          <span
+              className="text-brand-600 font-headline-4-default mr-xs"
+              key={index}
+          >
+            <meta itemProp="price" content={getOnlyProductPrice(
+                item,
+                currencyRate,
+                true,
+                true)}/>
+            {getProductPrice(item, currencySymbol, currencyRate, true, true)}
         </span>
       ) : (
-        <span
-          className="text-brand-300 font-headline-4-default mr-xs"
-          key={index}
-        >
+          <span
+              className="text-brand-300 font-headline-4-default mr-xs"
+              key={index}
+          >
           {word}
         </span>
       )
@@ -113,12 +123,25 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
           {getProductPrice(item, currencySymbol, currencyRate, false, false)}
         </span>
         <span className="font-headline-4-strong text-neutral-700 ml-2">
+          <meta itemProp="price" content={getOnlyProductPrice(
+            item,
+            currencyRate,
+            false,
+            true)}/>
           {getProductPrice(item, currencySymbol, currencyRate, false, true)}
         </span>
       </>
     ) : (
-      getProductPrice(item, currencySymbol, currencyRate, false, true)
-    );
+        <>
+        <meta itemProp="price" content={getOnlyProductPrice(
+            item,
+            currencyRate,
+            false,
+            true)}/>
+    {getProductPrice(item, currencySymbol, currencyRate, false, true)}
+        </>
+  )
+    ;
     const discountedPriceTranslation = translation.ProductCard.asLowAs;
     const discountedPriceTranslationOrder =
       discountedPriceTranslation.split('{discountPrice}');
@@ -140,79 +163,90 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   return (
     <>
       {price && (
-        <div className="ds-sdk-product-price">
-          {!isBundle &&
-            !isGrouped &&
-            !isConfigurable &&
-            !isComplexProductView &&
-            discount && (
-              <p className="ds-sdk-product-price--discount font-headline-4-strong">
+          <div className="ds-sdk-product-price" itemProp="offers" itemScope itemType="https://schema.org/Offer">
+            <meta itemProp="priceCurrency" content="USD"/>
+            {!isBundle &&
+                !isGrouped &&
+                !isConfigurable &&
+                !isComplexProductView &&
+                discount && (
+                    <p className="ds-sdk-product-price--discount font-headline-4-strong">
                 <span className="line-through pr-2 text-brand-300">
                   {getProductPrice(
-                    item,
-                    currencySymbol,
-                    currencyRate,
-                    false,
-                    false
+                      item,
+                      currencySymbol,
+                      currencyRate,
+                      false,
+                      false
                   )}
                 </span>
-                <span className="text-brand-600">
-                  {getProductPrice(
-                    item,
-                    currencySymbol,
-                    currencyRate,
-                    false,
-                    true
-                  )}
+                      <span className="text-brand-600">
+                        <meta itemProp="price" content={getOnlyProductPrice(
+                            item,
+                            currencyRate,
+                            false,
+                            true)}/>
+                        {getProductPrice(
+                            item,
+                            currencySymbol,
+                            currencyRate,
+                            false,
+                            true
+                        )}
                 </span>
-              </p>
-            )}
-
-          {!isBundle &&
-            !isGrouped &&
-            !isGiftCard &&
-            !isConfigurable &&
-            !isComplexProductView &&
-            !discount && (
-              <p className="ds-sdk-product-price--no-discount font-headline-4-strong">
-                {getProductPrice(
-                  item,
-                  currencySymbol,
-                  currencyRate,
-                  false,
-                  true
+                    </p>
                 )}
-              </p>
-            )}
 
-          {isBundle && (
-            <div className="ds-sdk-product-price--bundle">
-              <p className="mt-xs font-headline-4-default">
-                {getBundledPrice(item, currencySymbol, currencyRate)}
-              </p>
-            </div>
-          )}
+            {!isBundle &&
+                !isGrouped &&
+                !isGiftCard &&
+                !isConfigurable &&
+                !isComplexProductView &&
+                !discount && (
+                    <p className="ds-sdk-product-price--no-discount font-headline-4-strong">
+                      <meta itemProp="price" content={getOnlyProductPrice(
+                          item,
+                          currencyRate,
+                          false,
+                          true)}/>
+                      {getProductPrice(
+                          item,
+                          currencySymbol,
+                          currencyRate,
+                          false,
+                          true
+                      )}
+                    </p>
+                )}
 
-          {isGrouped && (
-            <p className="ds-sdk-product-price--grouped font-headline-4-strong">
-              {getPriceFormat(item, currencySymbol, currencyRate, false)}
-            </p>
-          )}
+            {isBundle && (
+                <div className="ds-sdk-product-price--bundle">
+                  <p className="mt-xs font-headline-4-default">
+                    {getBundledPrice(item, currencySymbol, currencyRate)}
+                  </p>
+                </div>
+            )}
 
-          {isGiftCard && (
-            <p className="ds-sdk-product-price--gift-card font-headline-4-strong">
-              {getPriceFormat(item, currencySymbol, currencyRate, true)}
-            </p>
-          )}
+            {isGrouped && (
+                <p className="ds-sdk-product-price--grouped font-headline-4-strong">
+                  {getPriceFormat(item, currencySymbol, currencyRate, false)}
+                </p>
+            )}
 
-          {!isGrouped &&
-            !isBundle &&
-            (isConfigurable || isComplexProductView) && (
-              <p className="ds-sdk-product-price--configurable font-headline-4-strong">
-                {getDiscountedPrice(discount)}
-              </p>
+            {isGiftCard && (
+                <p className="ds-sdk-product-price--gift-card font-headline-4-strong">
+                  {getPriceFormat(item, currencySymbol, currencyRate, true)}
+                </p>
             )}
-        </div>
+
+            {!isGrouped &&
+                !isBundle &&
+                (isConfigurable || isComplexProductView) && (
+                    <p className="ds-sdk-product-price--configurable font-headline-4-strong">
+                      {getDiscountedPrice(discount)}
+                    </p>
+                )}
+          </div>
       )}
     </>
   );
diff --git a/src/utils/getProductPrice.ts b/src/utils/getProductPrice.ts
index 5ae52e97..6d5d83d9 100644
--- a/src/utils/getProductPrice.ts
+++ b/src/utils/getProductPrice.ts
@@ -9,15 +9,13 @@ it.
 
 import getSymbolFromCurrency from 'currency-symbol-map';
 
-import { Product, RefinedProduct } from '../types/interface';
+import { Product, RefinedProduct, Money } from '../types/interface';
 
-const getProductPrice = (
-  product: Product | RefinedProduct,
-  currencySymbol: string,
-  currencyRate: string | undefined,
-  useMaximum = false,
-  useFinal = false
-): string => {
+const computeProductPrice = (
+    product: Product | RefinedProduct,
+    useMaximum = false,
+    useFinal = false
+): Money => {
   let priceType;
   let price;
   if ('product' in product) {
@@ -33,8 +31,8 @@ const getProductPrice = (
     }
   } else {
     priceType =
-      product?.refineProduct?.priceRange?.minimum ??
-      product?.refineProduct?.price;
+        product?.refineProduct?.priceRange?.minimum ??
+        product?.refineProduct?.price;
 
     if (useMaximum) {
       priceType = product?.refineProduct?.priceRange?.maximum;
@@ -46,6 +44,18 @@ const getProductPrice = (
     }
   }
 
+  return price;
+};
+
+const getProductPrice = (
+  product: Product | RefinedProduct,
+  currencySymbol: string,
+  currencyRate: string | undefined,
+  useMaximum = false,
+  useFinal = false
+): string => {
+  const price =  computeProductPrice(product, useMaximum, useFinal);
+
   // if currency symbol is configurable within Commerce, that symbol is used
   let currency = price?.currency;
 
@@ -62,4 +72,19 @@ const getProductPrice = (
   return convertedPrice ? `${currency}${convertedPrice.toFixed(2)}` : '';
 };
 
-export { getProductPrice };
+const getOnlyProductPrice = (
+    product: Product | RefinedProduct,
+    currencyRate: string | undefined,
+    useMaximum = false,
+    useFinal = false
+): string => {
+    const price = computeProductPrice(product, useMaximum, useFinal);
+
+    const convertedPrice = currencyRate
+        ? price?.value * parseFloat(currencyRate)
+        : price?.value;
+
+    return convertedPrice ? convertedPrice.toFixed() : '';
+}
+
+export { getProductPrice, getOnlyProductPrice };

From f5907591e50c1e84296a273f42cfe913c0100654 Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Fri, 9 Aug 2024 11:42:36 +0300
Subject: [PATCH 070/160] Add more schema details

---
 src/components/ProductItem/ProductItem.tsx  | 15 +++++++++++++++
 src/components/ProductItem/ProductPrice.tsx |  3 +++
 src/types/interface.ts                      |  1 +
 3 files changed, 19 insertions(+)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index a0c1225d..65d99e84 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -141,6 +141,10 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     );
   }
 
+  // Rating data
+  const ratingValue = parseFloat(productView?.attributes?.filter((attr) => attr?.name === 'bv_rating_average')[0]?.value) || 0;
+  const ratingCount = parseInt(productView?.attributes?.filter((attr) => attr?.name === 'bv_rating_count')[0]?.value, 10) || 0;
+
   // will have to figure out discount logic for amount_off and percent_off still
   const discount: boolean = refinedProduct
     ? refinedProduct.refineProduct?.priceRange?.minimum?.regular?.amount
@@ -370,6 +374,16 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
     >
+      <meta itemProp="sku" content={product?.sku} />
+      <meta itemProp="description" content={product?.short_description?.html} />
+      <meta itemProp="availability" content={productView?.inStock ? 'InStock' : 'OutOfStock'} />
+      {ratingCount > 0 ? (
+        <div itemprop="aggregateRating"
+             itemscope itemtype="https://schema.org/AggregateRating">
+          <meta itemprop="ratingValue" content={ratingValue.toFixed(2).toString()}/>
+          <meta itemprop="ratingCount" content={ratingCount.toString()}/>
+        </div>
+      ) : ''}
       <a itemProp="url"
         href={productUrl as string}
         onClick={onProductClick}
@@ -442,6 +456,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               discount={discount}
               currencySymbol={currencySymbol}
               currencyRate={currencyRate}
+              inStock={productView?.inStock}
             />
           </div>
         </div>
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index b948d040..f197609c 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -24,6 +24,7 @@ export interface ProductPriceProps {
   discount: boolean | undefined;
   currencySymbol: string;
   currencyRate?: string;
+  inStock?: boolean | undefined;
 }
 
 export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
@@ -36,6 +37,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   discount,
   currencySymbol,
   currencyRate,
+  inStock
 }: ProductPriceProps) => {
   const translation = useContext(TranslationContext);
   let price;
@@ -165,6 +167,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
       {price && (
           <div className="ds-sdk-product-price" itemProp="offers" itemScope itemType="https://schema.org/Offer">
             <meta itemProp="priceCurrency" content="USD"/>
+            <meta itemProp="availability" content={inStock ? 'InStock' : 'OutOfStock'}/>
             {!isBundle &&
                 !isGrouped &&
                 !isConfigurable &&
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 5e809584..5b548992 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -208,6 +208,7 @@ export interface Product {
     uid: string;
     name: string;
     sku: string;
+    inStock: null | boolean;
     description: null | ComplexTextValue;
     short_description: null | ComplexTextValue;
     attribute_set_id: null | number;

From 52849fc877cbd0dbb8eee2829abd88c88297d576 Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Mon, 12 Aug 2024 14:40:03 +0530
Subject: [PATCH 071/160] PLP price

---
 src/components/ProductItem/ProductPrice.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index f197609c..c4250650 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -119,6 +119,18 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   };
 
   const getDiscountedPrice = (discount: boolean | undefined) => {
+    const productSalability = item.productView.attributes.find((attr: { id: string; }) =>
+        attr.name === 'pcm_product_salability')?.value;
+    if (productSalability === 'SOLD_OUT') {
+      return (
+          <>
+        <span className="line-through text-back">
+          {getProductPrice(item, currencySymbol, currencyRate, false, true)}
+        </span>
+          </>
+      );
+    }
+
     const discountPrice = discount ? (
       <>
         <span className="line-through text-black">

From b3a81dc24266b79685cf368305ef024271a4b0c6 Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Tue, 13 Aug 2024 08:10:00 +0530
Subject: [PATCH 072/160] Price styling on PLP

---
 src/components/ProductItem/ProductPrice.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index c4250650..62d0c5b4 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -133,10 +133,10 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
 
     const discountPrice = discount ? (
       <>
-        <span className="line-through text-black">
+        <span className="line-through text-neutral-700">
           {getProductPrice(item, currencySymbol, currencyRate, false, false)}
         </span>
-        <span className="font-headline-4-strong text-neutral-700 ml-2">
+        <span className="font-headline-4-strong text-black ml-2">
           <meta itemProp="price" content={getOnlyProductPrice(
             item,
             currencyRate,

From 2f942b2151a045496c8c20634f81a4d49518c7d8 Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Tue, 13 Aug 2024 15:16:47 +0530
Subject: [PATCH 073/160] fixing alignment

---
 src/components/ProductItem/ProductItem.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 65d99e84..72dd6c8d 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -130,7 +130,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const productImageArray = imagesFromRefinedProduct
     ? getProductImageURLs(imagesFromRefinedProduct ?? [], 2)
     : getProductImagesFromAttribute(item);
-    
+
   let optimizedImageArray: { src: string; srcset: any }[] = [];
 
   if (optimizeImages) {
@@ -192,9 +192,9 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   };
 
   const productUrl = setRoute
-    ? setRoute({ 
-        sku: productView?.sku, 
-        urlKey: productView?.urlKey, 
+    ? setRoute({
+        sku: productView?.sku,
+        urlKey: productView?.urlKey,
         optionsUIDs: selectedSwatch ? [selectedSwatch] : null,
       })
     : product?.canonical_url;
@@ -367,7 +367,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   return (
     <div itemScope itemType="http://schema.org/Product"
-      className="ds-sdk-product-item group relative flex flex-col w-full justify-between h-full"
+      className="ds-sdk-product-item group relative flex flex-col w-full h-full"
       style={{
         'border-color': '#D5D5D5',
       }}

From b3af8431ea1b94cbe98e185b788174655c6623f0 Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Tue, 13 Aug 2024 17:17:05 +0530
Subject: [PATCH 074/160] fixing alignment

Hide the microdata div so it is excluded from layout
changes from PR https://github.com/wilson-ecommerce/storefront-product-listing-page/pull/21/files
---
 src/components/ProductItem/ProductItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 72dd6c8d..703f24b9 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -367,7 +367,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   return (
     <div itemScope itemType="http://schema.org/Product"
-      className="ds-sdk-product-item group relative flex flex-col w-full h-full"
+      className="ds-sdk-product-item group relative flex flex-col w-full justify-between h-full"
       style={{
         'border-color': '#D5D5D5',
       }}
@@ -378,7 +378,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       <meta itemProp="description" content={product?.short_description?.html} />
       <meta itemProp="availability" content={productView?.inStock ? 'InStock' : 'OutOfStock'} />
       {ratingCount > 0 ? (
-        <div itemprop="aggregateRating"
+        <div itemprop="aggregateRating" style="display:none"
              itemscope itemtype="https://schema.org/AggregateRating">
           <meta itemprop="ratingValue" content={ratingValue.toFixed(2).toString()}/>
           <meta itemprop="ratingCount" content={ratingCount.toString()}/>

From 56628970a178acb57b091f6733c330e1b5db4482 Mon Sep 17 00:00:00 2001
From: Yugandhar Kamdi <yugandhar.kamdi@gmail.com>
Date: Wed, 14 Aug 2024 12:35:01 +0530
Subject: [PATCH 075/160] WAF-120: Add attribute check for quick add button
 (#18)

* WAF-120: Add attribute check to show quick add button
---
 README.md                                     |  2 +
 .../AddToCartButton/AddToCartButton.tsx       |  9 +-
 src/components/ProductItem/ProductItem.tsx    | 95 +++++++++++--------
 src/components/ProductList/ProductList.tsx    |  3 +
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   |  4 +-
 src/containers/App.tsx                        |  2 +-
 src/context/products.tsx                      |  4 +
 src/i18n/en_US.ts                             |  3 +
 src/styles/index.css                          | 58 ++++++++++-
 src/styles/tokens.css                         | 52 ++++++++++
 src/types/interface.ts                        |  2 +
 11 files changed, 190 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 859eb342..e08dcd09 100644
--- a/README.md
+++ b/README.md
@@ -125,6 +125,7 @@ const storeDetails = {
         currentCategoryUrlPath?: string;
         currentCategoryId?: string;
         categoryName: '', // name of category to display
+        categoryConfig: {} // Custom category config
         displaySearchBox: false, // display search box
         displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
         displayMode: '', // "" for search || "PAGE" for category search
@@ -134,6 +135,7 @@ const storeDetails = {
         listview: false; //add listview as an option - EXPERIMENTAL, default is false
         optimizeImages: true, // optimize images with Fastly
         imageBaseWidth: 200,
+        imageBackgroundColor: #fff // Background color for PLP product images
         resolveCartId?: resolveCartId // Luma specific addToCart method. Enabled with the extension
         refreshCart?: refreshCart // Luma specific addToCart method. Enabled with the extension
         addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
index 9b58a02d..32be27d6 100644
--- a/src/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -9,7 +9,7 @@ it.
 
 import { FunctionComponent } from 'preact';
 
-import { useSensor } from '../../context';
+import { useSensor, useTranslation } from '../../context';
 import PlusIcon from '../../icons/plus.svg';
 
 export interface AddToCartButtonProps {
@@ -19,15 +19,16 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   onClick,
 }: AddToCartButtonProps) => {
   const { screenSize } = useSensor();
+  const translation = useTranslation();
 
   return (
-    <div className="ds-sdk-add-to-cart-button h-[40px] w-[40px] lg:h-[100%] lg:w-full">
+    <div className="ds-sdk-add-to-cart-button h-[40px] w-[40px] lg:h-full lg:w-full">
       <button
-        className="flex items-center justify-center h-[100%] w-full gap-2 lg:px-big lg:py-[10px]"
+        className="flex items-center justify-center h-full w-full gap-2 lg:px-big lg:py-[10px]"
         onClick={onClick}
       >
         <PlusIcon className="w-[14px]" />
-        {screenSize.desktop && 'Quick Add'}
+        {screenSize.desktop && translation.ProductCard.quickAdd}
       </button>
     </div>
   );
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 703f24b9..58482afe 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -12,7 +12,7 @@ import { useEffect,useRef, useState } from 'preact/hooks';
 
 import '../ProductItem/ProductItem.css';
 
-import { useCart, useProducts, useSensor, useStore } from '../../context';
+import { useProducts, useSensor, useStore, useTranslation } from '../../context';
 import NoImage from '../../icons/NoImage.svg';
 import {
   Product,
@@ -38,30 +38,37 @@ export interface ProductProps {
   item: Product;
   currencySymbol: string;
   currencyRate?: string;
+  categoryConfig?: Record<string, any>;
   setRoute?: RedirectRouteFunc | undefined;
   refineProduct: (optionIds: string[], sku: string) => any;
   setCartUpdated: (cartUpdated: boolean) => void;
   setItemAdded: (itemAdded: string) => void;
   setError: (error: boolean) => void;
-  addToCart?: (
+  addToCart: (
     sku: string,
     options: string[],
-    quantity: number
-  ) => Promise<void | undefined>;
+    quantity: number,
+    source: string,
+  ) => Promise<{
+    user_errors: any[];
+  }>;
 }
 
 const SWATCH_COLORS = 'Colors';
 const SWATCH_SIZE = 'Size';
 
+const QUICK_ADD_STATUS_IDLE = 'IDLE';
+const QUICK_ADD_STATUS_PENDING = 'PENDING';
+const QUICK_ADD_STATUS_SUCCESS = 'SUCCESS';
+const QUICK_ADD_STATUS_ERROR = 'ERROR';
+
 export const ProductItem: FunctionComponent<ProductProps> = ({
   item,
   currencySymbol,
   currencyRate,
+  categoryConfig,
   setRoute,
   refineProduct,
-  setCartUpdated,
-  setItemAdded,
-  setError,
   addToCart,
 }: ProductProps) => {
   const { product, productView } = item;
@@ -74,15 +81,15 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const [refinedProduct, setRefinedProduct] = useState<RefinedProduct>();
   const [isHovering, setIsHovering] = useState(false);
   const [showSizes, setShowSizes] = useState(false);
+  const [quickAddStatus, setQuickAddStatus] = useState(QUICK_ADD_STATUS_IDLE);
   const prevSelectedSwatch = useRef<string | null>(null);
-
-  const { addToCartGraphQL, refreshCart } = useCart();
   const { viewType } = useProducts();
   const {
     config: { optimizeImages, imageBaseWidth, listview, imageBackgroundColor },
   } = useStore();
 
   const { screenSize } = useSensor();
+  const translation = useTranslation();
 
   useEffect(() => {
     prevSelectedSwatch.current = selectedSwatch;
@@ -95,6 +102,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const handleMouseOut = () => {
     setIsHovering(false);
     setShowSizes(false);
+    setQuickAddStatus(QUICK_ADD_STATUS_IDLE);
   };
 
   const handleSelection = async (optionIds: string[], sku: string) => {
@@ -160,7 +168,11 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const isGrouped = product?.__typename === 'GroupedProduct';
   const isGiftCard = product?.__typename === 'GiftCardProduct';
   const isConfigurable = product?.__typename === 'ConfigurableProduct';
-  const shouldShowAddToBagButton = isSportsWear(item) && (!screenSize.desktop || isHovering) && !showSizes;
+  const shouldShowAddToBagButton = isSportsWear(item)
+    && categoryConfig?.['plp_quick_view_modal_enabled'] === '1'
+    && (!screenSize.desktop || isHovering)
+    && !showSizes
+    && quickAddStatus === QUICK_ADD_STATUS_IDLE;
 
   const colorSwatchesFromAttribute = getColorSwatchesFromAttribute(item);
   let colorSwatches: SwatchValues[] = [];
@@ -199,29 +211,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       })
     : product?.canonical_url;
 
-  const updateCart = async (selectedVariants: string[] = []) => {
-    setError(false);
-    if (addToCart) {
-      //Custom add to cart function passed in
-      await addToCart(productView.sku, selectedVariants, 1);
-    } else {
-      // Add to cart using GraphQL & Luma extension
-      const response = await addToCartGraphQL(productView.sku, selectedVariants);
-
-      if (
-        response?.errors ||
-        response?.data?.addProductsToCart?.user_errors.length > 0
-      ) {
-        setError(true);
-        return;
-      }
-
-      setItemAdded(product.name);
-      refreshCart && refreshCart();
-      setCartUpdated(true);
-    }
-  }
-
   const handleAddToCart = async (evt: any) => {
     evt.preventDefault();
     evt.stopPropagation();
@@ -233,18 +222,37 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     }
 
     const selectedVariants = selectedSwatch ? [selectedSwatch] : [];
-    updateCart(selectedVariants);
+    await addToCart(productView.sku, selectedVariants, 1, 'product-list-page');
   };
 
   const handleSizeSelection = async (optionIds: string[]) => {
-    setShowSizes(false);
+    const sizeVariants = item.productView?.options?.find((option) => option.title === SWATCH_SIZE)?.values;
+    const selectedSize = sizeVariants?.find((size) => optionIds.includes(size.id));
+    if (selectedSize && !selectedSize.inStock) {
+      return;
+    }
+
+    let selectedVariants: string[] = [];
+    // Sportswear products do not have multiple color swatches
+    // Select the default color variant
+    const colorVariant = item.productView?.options?.find((option) => option.title === SWATCH_COLORS)?.values?.[0].id;
+    if (colorVariant) {
+      selectedVariants = [colorVariant];
+    }
 
-    let selectedVariants = selectedSwatch ? [selectedSwatch] : [];
     if (optionIds) {
       selectedVariants = [...selectedVariants, ...optionIds];
     }
 
-    updateCart(selectedVariants);
+    setShowSizes(false);
+    setQuickAddStatus(QUICK_ADD_STATUS_PENDING);
+    const addedToCart = await addToCart(productView.sku, selectedVariants, 1, 'product-list-page');
+
+    if (addedToCart?.user_errors?.length) {
+      setQuickAddStatus(QUICK_ADD_STATUS_ERROR);
+    } else {
+      setQuickAddStatus(QUICK_ADD_STATUS_SUCCESS);
+    }
   };
 
   if (listview && viewType === 'listview') {
@@ -406,6 +414,19 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               />
             )}
             <div className="add-to-cart-overlay absolute left-0 right-0 bottom-0 p-xsmall h-[56px]">
+              {quickAddStatus !== QUICK_ADD_STATUS_IDLE && (
+                <div className="status-container flex items-center justify-center h-full w-full">
+                  {quickAddStatus === QUICK_ADD_STATUS_PENDING && (
+                    <span className="loader" />
+                  )}
+                  {quickAddStatus === QUICK_ADD_STATUS_SUCCESS && (
+                    <span className="status status-success">{translation.ProductCard.quickAddSuccess}</span>
+                  )}
+                  {quickAddStatus === QUICK_ADD_STATUS_ERROR && (
+                    <span className="status status-error">{translation.ProductCard.quickAddError}</span>
+                  )}
+                </div>
+              )}
               {shouldShowAddToBagButton && <AddToCartButton onClick={handleAddToCart} />}
               {showSizes && productView?.options?.map((swatches) => {
                 if (swatches.title === SWATCH_SIZE) {
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 3a8a1876..1be51221 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -34,6 +34,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
   const {
     currencySymbol,
     currencyRate,
+    categoryConfig,
     setRoute,
     refineProduct,
     refreshCart,
@@ -93,6 +94,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
                 key={product?.productView?.id}
                 currencySymbol={currencySymbol}
                 currencyRate={currencyRate}
+                categoryConfig={categoryConfig}
                 setRoute={setRoute}
                 refineProduct={refineProduct}
                 setCartUpdated={setCartUpdated}
@@ -116,6 +118,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
               key={product?.productView?.id}
               currencySymbol={currencySymbol}
               currencyRate={currencyRate}
+              categoryConfig={categoryConfig}
               setRoute={setRoute}
               refineProduct={refineProduct}
               setCartUpdated={setCartUpdated}
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index 99f27308..73f99be2 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -67,7 +67,9 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
     }
 
     const checked = isSelected(swatch.id);
-    const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''} ${checked ? 'selected' : ''}`;
+    const selectedClass = checked ? 'selected' : '';
+    const outOfStockClass = swatch.inStock ? '' : 'out-of-stock';
+    const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''} ${selectedClass} ${outOfStockClass}`;
     return (
       <div className={wrapperClasses} key={swatch.id} ref={index === 0  ? swatchButtonRef : null}>
           <SwatchButton
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 19078974..7031bb52 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -9,10 +9,10 @@ it.
 
 import { FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
+import Enrichment from 'src/components/Enrichment';
 import FilterButton from 'src/components/FilterButton';
 import Loading from 'src/components/Loading';
 import Shimmer from 'src/components/Shimmer';
-import Enrichment from 'src/components/Enrichment';
 
 import { CategoryFilters } from '../components/CategoryFilters';
 import {
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 3ec344e6..f63edfd3 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -71,6 +71,7 @@ const ProductsContext = createContext<{
   pageLoading: boolean;
   setPageLoading: (loading: boolean) => void;
   categoryPath: string | undefined;
+  categoryConfig: Record<string, any> | undefined;
   viewType: string;
   setViewType: (viewType: string) => void;
   listViewType: string;
@@ -114,6 +115,7 @@ const ProductsContext = createContext<{
   pageLoading: false,
   setPageLoading: () => {},
   categoryPath: undefined,
+  categoryConfig: undefined,
   viewType: '',
   setViewType: () => {},
   listViewType: '',
@@ -168,6 +170,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
   }, [storeCtx?.config.minQueryLength]);
   const categoryPath = storeCtx.config?.currentCategoryUrlPath;
   const categoryId = storeCtx.config?.currentCategoryId;
+  const categoryConfig = storeCtx.config?.categoryConfig;
 
   const viewTypeFromUrl = getValueFromUrl('view_type');
   const [viewType, setViewType] = useState<string>(
@@ -234,6 +237,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     setPageLoading,
     categoryPath,
     categoryId,
+    categoryConfig,
     viewType,
     setViewType,
     listViewType,
diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts
index f5b92af4..bbc521c0 100644
--- a/src/i18n/en_US.ts
+++ b/src/i18n/en_US.ts
@@ -53,6 +53,9 @@ export const en_US = {
     startingAt: 'Starting at {productPrice}',
     bundlePrice: 'From {fromBundlePrice} To {toBundlePrice}',
     from: 'From {productPrice}',
+    quickAdd: 'Quick Add',
+    quickAddSuccess: 'Added to your bag',
+    quickAddError: 'Error. Can\'t add to bag',
   },
   ProductContainers: {
     minquery:
diff --git a/src/styles/index.css b/src/styles/index.css
index fe9b08e4..430f62a3 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1577,7 +1577,7 @@ video {
     }
   }
   @media (min-width: 1024px) {
-    .lg\:h-\[100\%\] {
+    .lg\:h-full {
       height: 100%;
     }
   }
@@ -1916,6 +1916,62 @@ video {
   height: 100%;
 }
 
+.add-to-cart-overlay .status-container {
+  background-color: var(--color-neutral-50);
+  color: var(--color-brand-700);
+  font-size: var(--font-sm);
+  font-weight: var(--font-medium);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.add-to-cart-overlay .loader {
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  border-radius: 50%;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: #666;
+  border-left-color: #666;
+  animation: spin 1s linear infinite;
+}
+
+.add-to-cart-overlay .status {
+  display: inline-block;
+  padding-left: var(--spacing-sm);
+  position: relative;
+}
+
+.add-to-cart-overlay .status.status-success {
+  color: var(--quick-add-success);
+}
+
+.add-to-cart-overlay .status.status-error {
+  color: var(--quick-add-error);
+}
+
+.add-to-cart-overlay .status::before {
+  content: '';
+  position: absolute;
+  left: -5px;
+}
+
+.add-to-cart-overlay .status.status-success::before {
+  content: '✓';
+}
+
+.add-to-cart-overlay .status.status-error::before {
+  content: '✕';
+}
+
 .ds-sdk-product-image-hover {
   transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index e049f38f..2d8ca1ec 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -288,6 +288,58 @@
   height: 100%;
 }
 
+.add-to-cart-overlay .status-container {
+  background-color: var(--color-neutral-50);
+  color: var(--color-brand-700);
+  font-size: var(--font-sm);
+  font-weight: var(--font-medium);
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.add-to-cart-overlay .loader {
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  border-radius: 50%;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: #666;
+  border-left-color: #666;
+  animation: spin 1s linear infinite;
+}
+
+.add-to-cart-overlay .status {
+  display: inline-block;
+  padding-left: var(--spacing-sm);
+  position: relative;
+}
+
+.add-to-cart-overlay .status.status-success {
+  color: var(--quick-add-success);
+}
+
+.add-to-cart-overlay .status.status-error {
+  color: var(--quick-add-error);
+}
+
+.add-to-cart-overlay .status::before {
+  content: '';
+  position: absolute;
+  left: -5px;
+}
+
+.add-to-cart-overlay .status.status-success::before {
+  content: '✓';
+}
+
+.add-to-cart-overlay .status.status-error::before {
+  content: '✕';
+}
+
+
 .ds-sdk-product-image-hover {
   transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 5b548992..17132acf 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -38,6 +38,7 @@ export interface StoreDetailsConfig {
   currentCategoryUrlPath?: string;
   currentCategoryId?: string;
   categoryName?: string;
+  categoryConfig?: Record<string, any>;
   displaySearchBox?: boolean;
   displayOutOfStock?: string | boolean; // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
   displayMode?: string;
@@ -349,6 +350,7 @@ export interface SwatchValues {
   id: string;
   type: SwatchType;
   value: string;
+  inStock?: boolean;
 }
 
 export interface CustomAttribute {

From 2b5c783e4ffe65293ccf903a83275e5a2b4d983c Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Wed, 14 Aug 2024 17:17:10 +0300
Subject: [PATCH 076/160] Display category as links

---
 dev-template.html                             |  5 ++-
 src/components/Facets/Facets.tsx              | 13 ++++++--
 .../FilterSelection/FilterSelectionGroup.tsx  | 16 +++-------
 .../InputButtonGroup/InputButtonGroup.tsx     |  4 +--
 .../LabelledInput/LabelledInput.tsx           | 32 ++++++++++++++-----
 src/components/ProductItem/ProductPrice.tsx   |  2 +-
 src/context/products.tsx                      |  1 +
 src/types/interface.ts                        | 11 ++++++-
 tsconfig.json                                 |  1 +
 9 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 3a31f71a..9e137a79 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -76,7 +76,7 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        // currentCategoryUrlPath: 'baseball', // current category url path, please prefer using currentCategoryId
+        currentCategoryUrlPath: 'sportswear/women/tops', // current category url path, please prefer using currentCategoryId
         // currentCategoryId: '107', // current category id
         // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
@@ -91,6 +91,9 @@
         // resolveCartId?: resolveCartId, // Luma specific addToCart method. Enabled with the extension
         // refreshCart?: refreshCart, // Luma specific addToCart method. Enabled with the extension
         // addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
+        onCategoryChange: (category) => {
+          document.title = category;
+        },
       },
       context: {
         customerGroup: '0',
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 1353d9f9..edfbbd23 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -96,6 +96,15 @@ export const Facets: FunctionComponent<FacetsProps> = ({
 
   const { isSelected, onChange } = useScalarFacet(selectedFacet);
 
+  const onFacetChange = (value: string, selected?: boolean, type?: string) => {
+    if (type?.includes('link')) {
+      if (config?.onCategoryChange) {
+        config.onCategoryChange(value);
+      }
+    }
+    onChange(value, selected);
+  }
+
   return (
     <div className="ds-plp-facets flex flex-col">
       <div className="border-t border-b border-neutral-500 flex justify-between items-center">
@@ -150,8 +159,8 @@ export const Facets: FunctionComponent<FacetsProps> = ({
             attribute={selectedFacet.attribute}
             buckets={selectedFacet.buckets as any}
             isSelected={isSelected}
-            onChange={(args) => onChange(args.value, args.selected)}
-            type={'checkbox'}
+            onChange={(args) => onFacetChange(args.value, args.selected)}
+            type={selectedFacet?.buckets[0]?.__typename  === 'CategoryView' ? 'link' : 'checkbox'}
           />
         </div>
       )}
diff --git a/src/components/FilterSelection/FilterSelectionGroup.tsx b/src/components/FilterSelection/FilterSelectionGroup.tsx
index bd215e45..34965cff 100644
--- a/src/components/FilterSelection/FilterSelectionGroup.tsx
+++ b/src/components/FilterSelection/FilterSelectionGroup.tsx
@@ -8,7 +8,7 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { ChangeEvent, useState } from 'preact/compat';
+import { useState } from "preact/compat";
 import { Bucket } from 'src/types/interface';
 
 import { useProducts, useTranslation } from '../../context';
@@ -19,6 +19,7 @@ import { LabelledInput } from '../LabelledInput';
 export type FilterSelectionGroupOnChangeProps = {
   value: string;
   selected?: boolean;
+  type?: string;
 };
 
 export type FilterSelectionGroupOnChange = (
@@ -31,7 +32,7 @@ export interface FilterSelectionGroupProps {
   buckets: Bucket[];
   isSelected: (title: string) => boolean | undefined;
   onChange: FilterSelectionGroupOnChange;
-  type: 'radio' | 'checkbox';
+  type: 'radio' | 'checkbox' | 'link';
 }
 
 const numberOfOptionsShown = 5;
@@ -48,13 +49,6 @@ export const FilterSelectionGroup: FunctionComponent<
 
   const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
 
-  const onInputChange = (title: string, e: ChangeEvent<HTMLInputElement>) => {
-    onChange({
-      value: title,
-      selected: (e?.target as HTMLInputElement)?.checked,
-    });
-  };
-
   const formatLabel = (title: string, bucket: Bucket) => {
     const {
       currencyRate = '1',
@@ -113,9 +107,7 @@ export const FilterSelectionGroup: FunctionComponent<
                 checked={!!checked}
                 value={option.title}
                 count={noShowPriceBucketCount ? null : option.count}
-                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  onInputChange(option.title, e)
-                }
+                onChange={onChange}
                 type={type}
               />
             );
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 69e4b46d..09e48031 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -125,9 +125,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
                 checked={!!checked}
                 value={option.title}
                 count={noShowPriceBucketCount ? null : option.count}
-                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  onInputChange(option.title, e)
-                }
+                onChange={onChange}
                 type={type}
               />
             );
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index f9f53be9..f91c6294 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -8,15 +8,20 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { ChangeEvent } from 'preact/compat';
+
+export type LabelledInputOnChangeProps = {
+    value: string;
+    selected?: boolean;
+    type?: string;
+};
 
 // Maybe someday extend the `type` field to allow more inputs like `range` or `time`
 export interface LabelledInputProps {
   checked: boolean;
   name: string;
   attribute: string;
-  type: 'checkbox' | 'radio';
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  type: 'checkbox' | 'radio' | 'link';
+  onChange: (e: LabelledInputOnChangeProps) => void;
   label: string;
   value: string;
   count?: number | null;
@@ -32,8 +37,20 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
   value,
   count,
 }) => {
-  return (
-    <div className="ds-sdk-labelled-input flex items-center">
+  return(
+    type === 'link' ? (
+            <div className="ds-sdk-labelled-input flex items-center">
+        <a href={label} onClick={(e) => {e.preventDefault(); return {value: label, type}}}>
+            {label}
+            {count && (
+                <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
+                {`(${count})`}
+                </span>
+            )}
+        </a>
+            </div>
+        ) : (
+            <div className="ds-sdk-labelled-input flex items-center">
       <input
         id={name}
         name={
@@ -45,7 +62,7 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
         className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
         checked={checked}
         aria-checked={checked}
-        onInput={onChange}
+        onInput={(e) => onChange({ value, selected: e.currentTarget.checked, type })}
         value={value}
       />
       <label
@@ -59,6 +76,5 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
           </span>
         )}
       </label>
-    </div>
-  );
+            </div>));
 };
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index c4250650..a5334423 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -119,7 +119,7 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
   };
 
   const getDiscountedPrice = (discount: boolean | undefined) => {
-    const productSalability = item.productView.attributes.find((attr: { id: string; }) =>
+    const productSalability = item.productView?.attributes?.find((attr) =>
         attr.name === 'pcm_product_salability')?.value;
     if (productSalability === 'SOLD_OUT') {
       return (
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 3ec344e6..4eb476b7 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -375,6 +375,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
               name: bucket.name,
               value: bucket.title,
               attribute: facet.attribute,
+              path: bucket.path
             };
         });
         searchCtx.setCategoryNames(names);
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 5b548992..888ee9c2 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -55,6 +55,7 @@ export interface StoreDetailsConfig {
     options: string[],
     quantity: number
   ) => Promise<void | undefined>;
+  onCategoryChange?: (categoryPath: string) => void;
 }
 
 // Types
@@ -208,7 +209,7 @@ export interface Product {
     uid: string;
     name: string;
     sku: string;
-    inStock: null | boolean;
+    inStock?: boolean | undefined;
     description: null | ComplexTextValue;
     short_description: null | ComplexTextValue;
     attribute_set_id: null | number;
@@ -302,6 +303,14 @@ export interface RefinedProduct {
           values: null | SwatchValues[];
         }[];
   };
+  productView: {
+    attributes: Array<{
+      label: string
+      name: string
+      roles: string[]
+      value: string
+    }>;
+  };
   highlights: Array<Highlights>;
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index 852ae54d..b2030249 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
     "checkJs": false,
     "resolveJsonModule": true,
     "noUnusedParameters": true,
+    "sourceMap": true,
     "types": ["node", "jest"],
     "typeRoots": ["./src/types", "./node_modules/@types"],
     "paths": {

From 72b4d821f5a6e59ebaafc4822a3ac1af2f7b9c3e Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Wed, 14 Aug 2024 17:22:53 +0300
Subject: [PATCH 077/160] Checkbox should still be there for search

---
 dev-template.html                | 2 +-
 src/components/Facets/Facets.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 9e137a79..09398f51 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -76,7 +76,7 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        currentCategoryUrlPath: 'sportswear/women/tops', // current category url path, please prefer using currentCategoryId
+        //currentCategoryUrlPath: 'sportswear/women/tops', // current category url path, please prefer using currentCategoryId
         // currentCategoryId: '107', // current category id
         // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index edfbbd23..b95aa419 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -64,8 +64,9 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     getSortOptions();
   }, [getSortOptions]);
 
+  const isCategory = config?.currentCategoryUrlPath || config?.currentCategoryId;
   const defaultSortOption =
-    config?.currentCategoryUrlPath || config?.currentCategoryId
+    isCategory
       ? 'position_ASC'
       : 'relevance_DESC';
   const sortFromUrl = getValueFromUrl('product_list_order');
@@ -160,7 +161,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
             buckets={selectedFacet.buckets as any}
             isSelected={isSelected}
             onChange={(args) => onFacetChange(args.value, args.selected)}
-            type={selectedFacet?.buckets[0]?.__typename  === 'CategoryView' ? 'link' : 'checkbox'}
+            type={isCategory && selectedFacet?.buckets[0]?.__typename  === 'CategoryView' ? 'link' : 'checkbox'}
           />
         </div>
       )}

From f436d0e5e78219b9261826f7563b39ef1ee7a4b7 Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Wed, 14 Aug 2024 18:23:36 +0300
Subject: [PATCH 078/160] Make npm run dev work

---
 src/components/Facets/Facets.tsx                        | 3 ++-
 src/components/FilterSelection/FilterSelectionGroup.tsx | 3 ++-
 src/components/LabelledInput/LabelledInput.tsx          | 5 ++++-
 src/components/ProductItem/ProductItem.test.tsx         | 1 +
 src/context/products.tsx                                | 6 +++---
 src/context/store.tsx                                   | 4 +++-
 src/types/interface.ts                                  | 5 +++--
 src/utils/tests/utils.test.ts                           | 2 ++
 8 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index b95aa419..9b72f209 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -101,6 +101,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     if (type?.includes('link')) {
       if (config?.onCategoryChange) {
         config.onCategoryChange(value);
+        return;
       }
     }
     onChange(value, selected);
@@ -160,7 +161,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
             attribute={selectedFacet.attribute}
             buckets={selectedFacet.buckets as any}
             isSelected={isSelected}
-            onChange={(args) => onFacetChange(args.value, args.selected)}
+            onChange={(args) => onFacetChange(args.value, args.selected, args.type)}
             type={isCategory && selectedFacet?.buckets[0]?.__typename  === 'CategoryView' ? 'link' : 'checkbox'}
           />
         </div>
diff --git a/src/components/FilterSelection/FilterSelectionGroup.tsx b/src/components/FilterSelection/FilterSelectionGroup.tsx
index 34965cff..cd60f349 100644
--- a/src/components/FilterSelection/FilterSelectionGroup.tsx
+++ b/src/components/FilterSelection/FilterSelectionGroup.tsx
@@ -98,6 +98,7 @@ export const FilterSelectionGroup: FunctionComponent<
           {buckets.slice(0, numberOfOptions).map((option) => {
             const checked = isSelected(option.title);
             const noShowPriceBucketCount = option.__typename === 'RangeBucket';
+            const value: string = option.__typename === 'CategoryView' && type === 'link' ? option.path || '' : option.title;
             return (
               <LabelledInput
                 key={formatLabel(title, option)}
@@ -105,7 +106,7 @@ export const FilterSelectionGroup: FunctionComponent<
                 attribute={attribute}
                 label={formatLabel(title, option)}
                 checked={!!checked}
-                value={option.title}
+                value={value}
                 count={noShowPriceBucketCount ? null : option.count}
                 onChange={onChange}
                 type={type}
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index f91c6294..677f4f98 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -40,7 +40,10 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
   return(
     type === 'link' ? (
             <div className="ds-sdk-labelled-input flex items-center">
-        <a href={label} onClick={(e) => {e.preventDefault(); return {value: label, type}}}>
+        <a href={value} onClick={(e) => {
+            e.preventDefault();
+            onChange({value, type})
+        }}>
             {label}
             {count && (
                 <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
diff --git a/src/components/ProductItem/ProductItem.test.tsx b/src/components/ProductItem/ProductItem.test.tsx
index a89ac86e..d7152899 100644
--- a/src/components/ProductItem/ProductItem.test.tsx
+++ b/src/components/ProductItem/ProductItem.test.tsx
@@ -35,6 +35,7 @@ describe('WidgetSDK - UIKit/ProductItem', () => {
         setItemAdded={() => 'test'}
         setCartUpdated={() => true}
         setError={() => ''}
+        addToCart={()=>Promise.resolve({user_errors: []})}
       />
     );
 
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 6e64bbd7..558c7a4c 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -78,11 +78,11 @@ const ProductsContext = createContext<{
   setListViewType: (viewType: string) => void;
   resolveCartId?: () => Promise<string | undefined>;
   refreshCart?: () => void;
-  addToCart?: (
+  addToCart: (
     sku: string,
     options: string[],
     quantity: number
-  ) => Promise<void | undefined>;
+  ) => Promise<{user_errors: any[];}>;
 }>({
   variables: {
     phrase: '',
@@ -122,7 +122,7 @@ const ProductsContext = createContext<{
   setListViewType: () => {},
   resolveCartId: () => Promise.resolve(''),
   refreshCart: () => {},
-  addToCart: () => Promise.resolve(),
+  addToCart: () => Promise.resolve({user_errors: []}),
 });
 
 const ProductsContextProvider = ({ children }: WithChildrenProps) => {
diff --git a/src/context/store.tsx b/src/context/store.tsx
index 2ceac90f..3f8948c3 100644
--- a/src/context/store.tsx
+++ b/src/context/store.tsx
@@ -42,7 +42,9 @@ const StoreContext = createContext<StoreDetailsProps>({
   storeViewCode: '',
   apiUrl: '',
   apiKey: '',
-  config: {},
+  config: {
+    addToCart: () => Promise.resolve({user_errors: []})
+  },
   context: {},
   route: undefined,
   searchQuery: 'q',
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 1256618a..e1725af4 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -51,11 +51,11 @@ export interface StoreDetailsConfig {
   imageBackgroundColor?: string;
   resolveCartId?: () => Promise<string | undefined>;
   refreshCart?: () => void;
-  addToCart?: (
+  addToCart: (
     sku: string,
     options: string[],
     quantity: number
-  ) => Promise<void | undefined>;
+  ) => Promise<{ user_errors: any[]; }>;
   onCategoryChange?: (categoryPath: string) => void;
 }
 
@@ -394,6 +394,7 @@ export type Bucket = {
   to?: number;
   from?: number;
   name?: string;
+  path?: string;
   __typename: 'ScalarBucket' | 'RangeBucket' | 'CategoryView';
 };
 
diff --git a/src/utils/tests/utils.test.ts b/src/utils/tests/utils.test.ts
index 0fb4bb0a..1e44ab74 100644
--- a/src/utils/tests/utils.test.ts
+++ b/src/utils/tests/utils.test.ts
@@ -87,6 +87,7 @@ describe('test validating storeDetails.', () => {
         allowAllProducts: false,
         optimizeImages: true,
         imageBaseWidth: 200,
+        addToCart: () => Promise.resolve({user_errors: []}),
       },
       context: {
         customerGroup: 'b6589fc6ab0dc82cf12099d1c2d40ab994e8410c',
@@ -115,6 +116,7 @@ describe('test validating storeDetails.', () => {
         allowAllProducts: false,
         optimizeImages: true,
         imageBaseWidth: 200,
+        addToCart: () => Promise.resolve({user_errors: []}),
       },
       context: {
         customerGroup: 'b6589fc6ab0dc82cf12099d1c2d40ab994e8410c',

From 4fc995aa98574d0fd0e553d1837573b8a666d9f5 Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Wed, 14 Aug 2024 18:37:55 +0300
Subject: [PATCH 079/160] Fix quotes

---
 src/components/FilterSelection/FilterSelectionGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FilterSelection/FilterSelectionGroup.tsx b/src/components/FilterSelection/FilterSelectionGroup.tsx
index cd60f349..4ec08bb7 100644
--- a/src/components/FilterSelection/FilterSelectionGroup.tsx
+++ b/src/components/FilterSelection/FilterSelectionGroup.tsx
@@ -8,7 +8,7 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { useState } from "preact/compat";
+import { useState } from 'preact/compat';
 import { Bucket } from 'src/types/interface';
 
 import { useProducts, useTranslation } from '../../context';

From adb5922a196e9abb17353a5d36cbaec334d1aa45 Mon Sep 17 00:00:00 2001
From: Yugandhar Kamdi <yugandhar.kamdi@gmail.com>
Date: Wed, 14 Aug 2024 23:56:47 +0530
Subject: [PATCH 080/160] WAF-146: Advanced search page interface and No search
 results page (#22)

* Add product search header

* Add no search result page

* Refactor code

* Fix result count color
---
 src/components/Facets/SelectedFilters.tsx | 86 +++++++++++------------
 src/containers/App.tsx                    | 68 +++++++-----------
 src/containers/MobileFilterHeader.tsx     | 26 +++----
 src/containers/ProductsContainer.tsx      | 23 ++++--
 src/i18n/en_US.ts                         |  3 +-
 src/styles/index.css                      | 23 +++++-
 src/types/interface.ts                    |  4 ++
 7 files changed, 125 insertions(+), 108 deletions(-)

diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 5d016879..edd39d31 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -26,46 +26,46 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
 
   return (
     <div className="w-full h-full flex justify-between items-center sm:pb-6 py-md">
-      {searchCtx.filters?.length > 0 && (
-        <div className="ds-plp-facets__pills flex flex-wrap justify-start items-center gap-[16px]">
-          {searchCtx.filters.map((filter) => (
-            <div
-              key={filter.attribute}
-              className="flex items-center gap-[16px]"
-            >
-              {filter.in?.map((option) => (
-                <Pill
-                  key={formatBinaryLabel(
-                    filter,
-                    option,
-                    searchCtx.categoryNames,
-                    productsCtx.categoryPath
-                  )}
-                  label={formatBinaryLabel(
-                    filter,
-                    option,
-                    searchCtx.categoryNames,
-                    productsCtx.categoryPath
-                  )}
-                  type="filter"
-                  onClick={() => searchCtx.updateFilterOptions(filter, option)}
-                />
-              ))}
-              {filter.range && (
-                <Pill
-                  label={formatRangeLabel(
-                    filter,
-                    productsCtx.currencyRate,
-                    productsCtx.currencySymbol
-                  )}
-                  type="transparent"
-                  onClick={() => {
-                    searchCtx.removeFilter(filter.attribute);
-                  }}
-                />
-              )}
-            </div>
-          ))}
+      <div className="ds-plp-facets__pills flex flex-wrap justify-start items-center gap-[16px]">
+        {searchCtx.filters?.length > 0 && searchCtx.filters.map((filter) => (
+          <div
+            key={filter.attribute}
+            className="flex items-center gap-[16px]"
+          >
+            {filter.in?.map((option) => (
+              <Pill
+                key={formatBinaryLabel(
+                  filter,
+                  option,
+                  searchCtx.categoryNames,
+                  productsCtx.categoryPath
+                )}
+                label={formatBinaryLabel(
+                  filter,
+                  option,
+                  searchCtx.categoryNames,
+                  productsCtx.categoryPath
+                )}
+                type="filter"
+                onClick={() => searchCtx.updateFilterOptions(filter, option)}
+              />
+            ))}
+            {filter.range && (
+              <Pill
+                label={formatRangeLabel(
+                  filter,
+                  productsCtx.currencyRate,
+                  productsCtx.currencySymbol
+                )}
+                type="transparent"
+                onClick={() => {
+                  searchCtx.removeFilter(filter.attribute);
+                }}
+              />
+            )}
+          </div>
+        ))}
+        {searchCtx.filters?.length > 0 && (
           <div className="py-1">
             <button
               className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
@@ -77,9 +77,9 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
               </span>
             </button>
           </div>
-        </div>
-      )}
-      {searchCtx.filters?.length > 0 && <p>{totalCount} Results</p>}
+        )}
+      </div>
+      <p className="result-count">{totalCount} Results</p>
     </div>
   );
 };
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 7031bb52..081e7d98 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -36,66 +36,52 @@ export const App: FunctionComponent = () => {
 
   const loadingLabel = translation.Loading.title;
 
-  let title = productsCtx.categoryName || '';
-  if (productsCtx.variables.phrase) {
-    const text = translation.CategoryFilters.results;
-    title = text.replace('{phrase}', `"${productsCtx.variables.phrase ?? ''}"`);
-  }
-  const getResults = (totalCount: number) => {
-    const resultsTranslation = translation.CategoryFilters.products;
-    const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);
-    return results;
-  };
-
   return (
     <>
       {!(displayMode === 'PAGE') &&
         (!screenSize.mobile && showFilters && productsCtx.facets.length > 0 ? (
           <div className="ds-widgets bg-body py-2">
+            {searchCtx.phrase && (
+              <div className="product-list-page-header flex flex-col gap-4 justify-center items-center h-[180px] lg:h-[248px]">
+                <h1 className="text-center capitalize">
+                  {searchCtx.phrase}
+                </h1>
+              </div>
+            )}
             <Enrichment position={'below-title'} />
             <div className="flex flex-col">
-              <CategoryFilters
-                loading={productsCtx.loading}
-                pageLoading={productsCtx.pageLoading}
-                facets={productsCtx.facets}
-                totalCount={productsCtx.totalCount}
-                categoryName={productsCtx.categoryName ?? ''}
-                phrase={productsCtx.variables.phrase ?? ''}
-                showFilters={showFilters}
-                setShowFilters={setShowFilters}
-                filterCount={searchCtx.filterCount}
-              />
+              {productsCtx.totalCount && (
+                <CategoryFilters
+                  loading={productsCtx.loading}
+                  pageLoading={productsCtx.pageLoading}
+                  facets={productsCtx.facets}
+                  totalCount={productsCtx.totalCount}
+                  categoryName={productsCtx.categoryName ?? ''}
+                  phrase={productsCtx.variables.phrase ?? ''}
+                  showFilters={showFilters}
+                  setShowFilters={setShowFilters}
+                  filterCount={searchCtx.filterCount}
+                />
+              )}
               <Enrichment position={'above-grid'} />
               <div
                 className={`ds-widgets_results flex flex-col items-center flex-[75] `}
               >
-                {/* <ProductsHeader
-                  facets={productsCtx.facets}
-                  totalCount={productsCtx.totalCount}
-                  screenSize={screenSize}
-                /> */}
                 <ProductsContainer showFilters={showFilters} />
               </div>
             </div>
           </div>
         ) : (
           <div className="ds-widgets bg-body py-2">
+            {searchCtx.phrase && (
+              <div className="product-list-page-header flex flex-col gap-4 justify-center items-center h-[180px] lg:h-[248px]">
+                <h1 className="text-center capitalize">
+                  {searchCtx.phrase}
+                </h1>
+              </div>
+            )}
             <Enrichment position={'below-title'} />
             <div className="flex flex-col">
-              <div className="flex flex-col items-center w-full h-full">
-                <div className="justify-start w-full h-full">
-                  <div class="hidden sm:flex ds-widgets-_actions relative max-w-[21rem] w-full h-full px-2 flex-col overflow-y-auto">
-                    <div className="ds-widgets_actions_header flex justify-between items-center mb-md">
-                      {title && <span> {title}</span>}
-                      {!productsCtx.loading && (
-                        <span className="text-brand-700 text-sm">
-                          {getResults(productsCtx.totalCount)}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
               <Enrichment position={'above-grid'} />
               <div className="ds-widgets_results flex flex-col items-center flex-[75]">
                 <div className="flex w-full h-full">
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index db273277..91f948a1 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -11,7 +11,6 @@ import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { Drawer } from 'src/components/Drawer/Drawer';
 import MobileFacets from 'src/components/MobileFacets';
-import ViewSwitcher from 'src/components/ViewSwitcher';
 
 import { FilterButton } from '../components/FilterButton';
 import { SortDropdown } from '../components/SortDropdown';
@@ -86,10 +85,14 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
     handleUrlSort(sortOption);
   };
 
+  if (totalCount === 0) {
+    return null;
+  }
+
   return (
     <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
       <div className="flex border-t border-b border-neutral-400">
-        {screenSize.mobile && totalCount > 0 && (
+        {screenSize.mobile && (
           <div className="flex justify-center w-1/2 py-md border-r border-neutral-400">
             <FilterButton
               displayFilter={() => setShowMobileFacet(!showMobileFacet)}
@@ -98,17 +101,14 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
           </div>
         )}
 
-        {totalCount > 0 && (
-          <div className="flex justify-center w-1/2 py-md">
-            {storeCtx?.config?.listview && <ViewSwitcher />}
-            <SortDropdown
-              sortOptions={sortOptions}
-              value={sortBy}
-              onChange={onSortChange}
-              mobile
-            />
-          </div>
-        )}
+        <div className="flex justify-center w-1/2 py-md">
+          <SortDropdown
+            sortOptions={sortOptions}
+            value={sortBy}
+            onChange={onSortChange}
+            mobile
+          />
+        </div>
       </div>
       {screenSize.mobile && (
         <Drawer
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index 4d2cc625..1290473d 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -10,7 +10,7 @@ it.
 import {  FunctionComponent } from 'preact';
 import { useEffect } from 'preact/hooks';
 import { ProductCardShimmer } from 'src/components/ProductCardShimmer';
-import { useProducts, useSensor, useTranslation } from 'src/context';
+import { useProducts, useSensor, useStore,useTranslation } from 'src/context';
 import {
   handleUrlPagination,
 } from 'src/utils/handleUrlFilters';
@@ -26,6 +26,7 @@ interface Props {
 export const ProductsContainer: FunctionComponent<Props> = ({
   showFilters,
 }) => {
+  const storeCtx = useStore();
   const productsCtx = useProducts();
   const { screenSize } = useSensor();
 
@@ -73,12 +74,20 @@ export const ProductsContainer: FunctionComponent<Props> = ({
 
   if (!totalCount) {
     return (
-      <div className="ds-sdk-no-results__page mx-auto max-w-8xl py-12 px-4 sm:px-6 lg:px-8">
-        <Alert
-          title={translation.ProductContainers.noresults}
-          type="warning"
-          description=""
-        />
+      <div className="ds-sdk-no-results__page flex flex-col gap-8 justify-center items-center w-full">
+        <p className="text-center px-md">0 {translation.ProductContainers.resultsText}</p>
+        <p className="text-center px-md">{translation.ProductContainers.noresults}</p>
+        {storeCtx.config.noResultsLinks && (
+          <ul className="flex flex-wrap justify-center items-center gap-[12px] px-md">
+            {storeCtx.config.noResultsLinks.map((link) => (
+              <li key={link.text} className="inline-block p-[14px] bg-black text-white uppercase">
+                <a href={link.url} className="">
+                  {link.text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     );
   }
diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts
index bbc521c0..5923107e 100644
--- a/src/i18n/en_US.ts
+++ b/src/i18n/en_US.ts
@@ -60,7 +60,8 @@ export const en_US = {
   ProductContainers: {
     minquery:
       'Your search term {variables.phrase} has not reached the minimum of {minQueryLength} characters.',
-    noresults: 'Your search returned no results.',
+    resultsText: 'Results',
+    noresults: 'We couldn\'t find any products that match your search. Here are a few other destinations that might help.',
     pagePicker: 'Show {pageSize} per page',
     showAll: 'all',
   },
diff --git a/src/styles/index.css b/src/styles/index.css
index 430f62a3..c475c553 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -639,9 +639,6 @@ video {
   .grid {
     display: grid;
   }
-  .hidden {
-    display: none;
-  }
   .aspect-auto {
     aspect-ratio: auto;
   }
@@ -660,6 +657,9 @@ video {
   .h-\[15px\] {
     height: 15px;
   }
+  .h-\[180px\] {
+    height: 180px;
+  }
   .h-\[20px\] {
     height: 20px;
   }
@@ -898,9 +898,15 @@ video {
   .gap-4 {
     gap: 1rem;
   }
+  .gap-8 {
+    gap: 2rem;
+  }
   .gap-\[10px\] {
     gap: 10px;
   }
+  .gap-\[12px\] {
+    gap: 12px;
+  }
   .gap-\[16px\] {
     gap: 16px;
   }
@@ -1127,6 +1133,9 @@ video {
   .p-4 {
     padding: 1rem;
   }
+  .p-\[14px\] {
+    padding: 14px;
+  }
   .p-sm {
     padding: var(--spacing-sm);
   }
@@ -1281,6 +1290,9 @@ video {
   .uppercase {
     text-transform: uppercase;
   }
+  .capitalize {
+    text-transform: capitalize;
+  }
   .\!text-brand-700 {
     color: var(--color-brand-700) !important;
   }
@@ -1576,6 +1588,11 @@ video {
       justify-content: space-between;
     }
   }
+  @media (min-width: 1024px) {
+    .lg\:h-\[248px\] {
+      height: 248px;
+    }
+  }
   @media (min-width: 1024px) {
     .lg\:h-full {
       height: 100%;
diff --git a/src/types/interface.ts b/src/types/interface.ts
index e1725af4..3b7d144f 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -49,6 +49,10 @@ export interface StoreDetailsConfig {
   optimizeImages?: boolean;
   imageBaseWidth?: number;
   imageBackgroundColor?: string;
+  noResultsLinks?: Array<{
+    text: string;
+    url: string;
+  }>;
   resolveCartId?: () => Promise<string | undefined>;
   refreshCart?: () => void;
   addToCart: (

From b93aee7d6b37cee05db699a02f65721dc5d5b6ea Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Mon, 19 Aug 2024 17:29:04 +0200
Subject: [PATCH 081/160] WAF-41 - prechecked filters for custom category

---
 dev-template.html        |  1 +
 src/context/products.tsx | 42 ++++++++++++++++++++++++++++++++++++++--
 src/types/interface.ts   |  4 ++++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 09398f51..3b87f7c8 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -76,6 +76,7 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
+        preCheckedFilters: [{key: 'pim_axis_article_techspec_hand_code_pim_20786' , value: 'Right-hand throw'}],
         //currentCategoryUrlPath: 'sportswear/women/tops', // current category url path, please prefer using currentCategoryId
         // currentCategoryId: '107', // current category id
         // categoryName: 'Baseball', // name of category to display
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 558c7a4c..a95fa9ee 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -18,6 +18,7 @@ import {
   Product,
   ProductSearchQuery,
   RedirectRouteFunc,
+  SearchClauseInput,
 } from '../types/interface';
 import {
   CATEGORY_SORT_DEFAULT,
@@ -395,10 +396,14 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
 
   useEffect(() => {
     if (attributeMetadataCtx.filterableInSearch) {
+      const filtersFromConfig = [];
+      if(storeCtx?.config?.preCheckedFilters) {
+        filtersFromConfig.push(...getFiltersFromConfig(attributeMetadataCtx.filterableInSearch, storeCtx.config.preCheckedFilters));
+      }
       const filtersFromUrl = getFiltersFromUrl(
         attributeMetadataCtx.filterableInSearch
-      );
-      searchCtx.setFilters(filtersFromUrl);
+      )
+      searchCtx.setFilters([...filtersFromConfig, ...filtersFromUrl]);
     }
   }, [attributeMetadataCtx.filterableInSearch]);
 
@@ -415,6 +420,39 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
   );
 };
 
+const getFiltersFromConfig = (
+  filterableAttributes: string[],
+  preCheckedFilters: Array <{
+    key: string,
+    value: string,
+  }>
+): SearchClauseInput[] => {
+  const filters: FacetFilter[] = [];
+  preCheckedFilters.forEach(({key, value}) => {
+    if (filterableAttributes.includes(key)) {
+      if (value.includes('--')) {
+        const range = value.split('--');
+        const filter = {
+          attribute: key,
+          range: { from: Number(range[0]), to: Number(range[1]) },
+        };
+        filters.push(filter);
+      } else {
+        const attributeIndex = filters.findIndex(
+          (filter) => filter.attribute == key
+        );
+        if (attributeIndex !== -1) {
+          filters[attributeIndex].in?.push(value);
+        } else {
+          const filter = { attribute: key, in: [value] };
+          filters.push(filter);
+        }
+      }
+    }
+  });
+  return filters;
+};
+
 const useProducts = () => {
   const productsCtx = useContext(ProductsContext);
   return productsCtx;
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 3b7d144f..cc2f91b2 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -53,6 +53,10 @@ export interface StoreDetailsConfig {
     text: string;
     url: string;
   }>;
+  preCheckedFilters?: Array<{
+    key: string;
+    value: string;
+  }>;
   resolveCartId?: () => Promise<string | undefined>;
   refreshCart?: () => void;
   addToCart: (

From 8b9d7964bf319fa76fa49db016cb4be34dc26ef6 Mon Sep 17 00:00:00 2001
From: Hannes Hertach <hanneshertach@gmail.com>
Date: Mon, 19 Aug 2024 17:53:57 +0200
Subject: [PATCH 082/160] initial franchises implementation

---
 src/api/queries.ts                            |  7 +++
 src/api/search.ts                             | 57 +++++++++++++++++-
 .../ProductFranchiseList.tsx                  |  0
 src/components/ProductFranchiseList/index.ts  |  0
 src/components/ProductList/ProductList.tsx    | 58 ++++++++++++++-----
 src/containers/ProductsContainer.tsx          | 14 +++++
 src/context/products.tsx                      | 33 ++++++++++-
 src/types/interface.ts                        |  1 +
 8 files changed, 154 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ProductFranchiseList/ProductFranchiseList.tsx
 create mode 100644 src/components/ProductFranchiseList/index.ts

diff --git a/src/api/queries.ts b/src/api/queries.ts
index e0678277..b8728867 100644
--- a/src/api/queries.ts
+++ b/src/api/queries.ts
@@ -57,6 +57,13 @@ const QUICK_SEARCH_QUERY = `
     ${Product}
 `;
 
+export const FranchiseQueryFragment = `
+  fragment FRANCHISE_QUERY on ProductSearchItem {
+    ...Product
+    ...ProductView
+  }
+`;
+
 const ProductSearchQueryFragment = `
     fragment PRODUCT_SEARCH on Query {
         productSearch(
diff --git a/src/api/search.ts b/src/api/search.ts
index 29ef1871..918dc0e5 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -22,10 +22,11 @@ import {
 import { SEARCH_UNIT_ID } from '../utils/constants';
 import {
   ATTRIBUTE_METADATA_QUERY,
-  CATEGORY_QUERY,
+  CATEGORY_QUERY, FranchiseQueryFragment,
   PRODUCT_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
 } from './queries';
+import {Product, ProductView} from "./fragments";
 
 const getHeaders = (headers: MagentoHeaders) => {
   return {
@@ -40,6 +41,58 @@ const getHeaders = (headers: MagentoHeaders) => {
   };
 };
 
+const getFranchiseSearch = async ({
+  environmentId,
+  websiteCode,
+  storeCode,
+  storeViewCode,
+  apiKey,
+  apiUrl,
+  xRequestId = uuidv4(),
+  context,
+  categories = [],
+}) => {
+  const headers = getHeaders({
+    environmentId,
+    websiteCode,
+    storeCode,
+    storeViewCode,
+    apiKey,
+    xRequestId,
+    customerGroup: context?.customerGroup ?? '',
+  });
+
+  const query = `
+    query getFranchises {
+      ${categories.map((category) => `
+        ${category.split('/').at(-1).replaceAll('-', '')}: productSearch(
+          phrase: "",
+          filter: [
+            { attribute: "categoryPath", eq: "${category}" }
+          ]
+        ) {
+          items {
+            ... FRANCHISE_QUERY
+          }
+        }
+      `).join(' ')}
+    }
+    ${Product}
+    ${ProductView}
+    ${FranchiseQueryFragment}
+  `;
+
+  const results = await fetch(apiUrl, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      query: query.replace(/(?:\r\n|\r|\n|\t|[\s]{4})/g, ' ').replace(/\s\s+/g, ' '),
+    }),
+  }).then((res) => res.json());
+
+  return results?.data;
+}
+
 const getProductSearch = async ({
   environmentId,
   websiteCode,
@@ -226,4 +279,4 @@ const refineProductSearch = async ({
   return results?.data;
 };
 
-export { getAttributeMetadata, getProductSearch, refineProductSearch };
+export { getAttributeMetadata, getProductSearch, refineProductSearch, getFranchiseSearch };
diff --git a/src/components/ProductFranchiseList/ProductFranchiseList.tsx b/src/components/ProductFranchiseList/ProductFranchiseList.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/ProductFranchiseList/index.ts b/src/components/ProductFranchiseList/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 1be51221..a3606018 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -7,29 +7,31 @@ accordance with the terms of the Adobe license agreement accompanying
 it.
 */
 
-import { FunctionComponent } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import { useEffect, useState } from 'preact/hooks';
+import {FunctionComponent} from 'preact';
+import {HTMLAttributes} from 'preact/compat';
+import {useEffect, useState} from 'preact/hooks';
 
 import './product-list.css';
 
-import { Alert } from '../../components/Alert';
-import { useProducts, useStore } from '../../context';
-import { Product } from '../../types/interface';
-import { classNames } from '../../utils/dom';
+import {Alert} from '../../components/Alert';
+import {useProducts, useStore} from '../../context';
+import {Product} from '../../types/interface';
+import {classNames} from '../../utils/dom';
 import ProductItem from '../ProductItem';
 
 export interface ProductListProps extends HTMLAttributes<HTMLDivElement> {
   products: Array<Product> | null | undefined;
   numberOfColumns: number;
   showFilters: boolean;
+  franchises: any;
 }
 
 export const ProductList: FunctionComponent<ProductListProps> = ({
-  products,
-  numberOfColumns,
-  showFilters,
-}) => {
+                                                                   products,
+                                                                   numberOfColumns,
+                                                                   showFilters,
+                                                                   franchises,
+                                                                 }) => {
   const productsCtx = useProducts();
   const {
     currencySymbol,
@@ -42,10 +44,10 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
   } = productsCtx;
   const [cartUpdated, setCartUpdated] = useState(false);
   const [itemAdded, setItemAdded] = useState('');
-  const { viewType } = useProducts();
+  const {viewType} = useProducts();
   const [error, setError] = useState<boolean>(false);
   const {
-    config: { listview },
+    config: {listview},
   } = useStore();
 
   const className = showFilters
@@ -84,6 +86,36 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
         </div>
       )}
 
+      {
+        franchises && (<div className="w-full">
+          {Object.keys(franchises).map((franchise) => (
+            <div key={franchise}>
+              <h2>{franchises[franchise].name}</h2>
+              <div style={{
+                gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
+              }}
+                   className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6">
+                {franchises[franchise].items.slice(0, 4).map((item) => (
+                  <ProductItem
+                    item={item}
+                    setError={setError}
+                    key={item?.productView?.id}
+                    currencySymbol={currencySymbol}
+                    currencyRate={currencyRate}
+                    categoryConfig={categoryConfig}
+                    setRoute={setRoute}
+                    refineProduct={refineProduct}
+                    setCartUpdated={setCartUpdated}
+                    setItemAdded={setItemAdded}
+                    addToCart={addToCart}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>)
+      }
+
       {listview && viewType === 'listview' ? (
         <div className="w-full">
           <div className="ds-sdk-product-list__list-view-default mt-md grid grid-cols-none pt-[15px] w-full gap-[10px]">
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index 1290473d..02f99c77 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -41,6 +41,7 @@ export const ProductsContainer: FunctionComponent<Props> = ({
     minQueryLength,
     minQueryLengthReached,
     loading,
+    franchises,
   } = productsCtx;
 
   useEffect(() => {
@@ -72,6 +73,18 @@ export const ProductsContainer: FunctionComponent<Props> = ({
     );
   }
 
+  // if (storeCtx.config.displayByFranchise && franchises) {
+  //   return (
+  //     <div>
+  //       {Object.keys(franchises).map((franchise) => (
+  //         <div key={franchise}>
+  //           <h2>{franchises[franchise].name}</h2>
+  //         </div>
+  //       ))}
+  //     </div>
+  //   );
+  // }
+
   if (!totalCount) {
     return (
       <div className="ds-sdk-no-results__page flex flex-col gap-8 justify-center items-center w-full">
@@ -109,6 +122,7 @@ export const ProductsContainer: FunctionComponent<Props> = ({
       ) : (
         <ProductList
           products={items}
+          franchises={franchises}
           numberOfColumns={screenSize.columns}
           showFilters={showFilters}
         />
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 558c7a4c..37dbbd0d 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -10,7 +10,7 @@ it.
 import { createContext } from 'preact';
 import { useContext, useEffect, useMemo, useState } from 'preact/hooks';
 
-import { getProductSearch, refineProductSearch } from '../api/search';
+import {getFranchiseSearch, getProductSearch, refineProductSearch} from '../api/search';
 import {
   Facet,
   FacetFilter,
@@ -46,6 +46,7 @@ const ProductsContext = createContext<{
   loading: boolean;
   items: Product[];
   setItems: (items: Product[]) => void;
+  franchises: any;
   currentPage: number;
   setCurrentPage: (page: number) => void;
   pageSize: number;
@@ -148,6 +149,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
   const [loading, setLoading] = useState(true);
   const [pageLoading, setPageLoading] = useState(true);
   const [items, setItems] = useState<Product[]>([]);
+  const [franchises, setFranchises] = useState<any>(null);
   const [currentPage, setCurrentPage] = useState<number>(pageDefault);
   const [pageSize, setPageSize] = useState<number>(pageSizeDefault);
   const [totalCount, setTotalCount] = useState<number>(0);
@@ -246,8 +248,33 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     refreshCart: storeCtx.config.refreshCart,
     resolveCartId: storeCtx.config.resolveCartId,
     addToCart: storeCtx.config.addToCart,
+    displayByFranchise: storeCtx.config.displayByFranchise,
+    franchises,
   };
 
+  const handleFranchiseSearch = async (data) => {
+    const categories = data.productSearch.facets.find((facet) => facet.attribute === 'categories')?.buckets;
+
+    console.log(categories)
+
+    const result = await getFranchiseSearch({
+      ...variables,
+      ...storeCtx,
+      apiUrl: storeCtx.apiUrl,
+      categories: categories.map((c) => c.title),
+    });
+
+    Object.keys(result).forEach((key) => {
+      const category = categories.find((c) => c.title.replaceAll('-', '').endsWith(key));
+      result[key] = {
+        ...category,
+        ...result[key],
+      }
+    });
+
+    setFranchises(result);
+  }
+
   const searchProducts = async () => {
     try {
       setLoading(true);
@@ -274,6 +301,10 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
 
         getPageSizeOptions(data?.productSearch?.total_count);
 
+        if (storeCtx.config.displayByFranchise) {
+          await handleFranchiseSearch(data);
+        }
+
         paginationCheck(
           data?.productSearch?.total_count,
           data?.productSearch?.page_info?.total_pages
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 3b7d144f..d45fae1f 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -53,6 +53,7 @@ export interface StoreDetailsConfig {
     text: string;
     url: string;
   }>;
+  displayByFranchise?: boolean;
   resolveCartId?: () => Promise<string | undefined>;
   refreshCart?: () => void;
   addToCart: (

From 5a53eba2330bb366beaf7d16a3ced39231bec448 Mon Sep 17 00:00:00 2001
From: Hannes Hertach <hanneshertach@gmail.com>
Date: Tue, 20 Aug 2024 12:32:03 +0200
Subject: [PATCH 083/160] fix types and hide franchises if filtered

---
 src/api/search.ts                          | 12 +++++++++++-
 src/components/ProductList/ProductList.tsx | 12 ++++++------
 src/containers/ProductsContainer.tsx       | 17 +++--------------
 src/context/products.tsx                   | 21 +++++++++++++++------
 src/context/search.tsx                     |  8 ++++++++
 src/context/store.tsx                      |  1 +
 6 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index 918dc0e5..f37cb6af 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -51,6 +51,16 @@ const getFranchiseSearch = async ({
   xRequestId = uuidv4(),
   context,
   categories = [],
+}: {
+  environmentId: string;
+  websiteCode: string;
+  storeCode: string;
+  storeViewCode: string;
+  apiKey: string;
+  apiUrl: string;
+  xRequestId?: string;
+  context?: any;
+  categories: string[];
 }) => {
   const headers = getHeaders({
     environmentId,
@@ -65,7 +75,7 @@ const getFranchiseSearch = async ({
   const query = `
     query getFranchises {
       ${categories.map((category) => `
-        ${category.split('/').at(-1).replaceAll('-', '')}: productSearch(
+        ${category.split('/').at(-1)?.replaceAll('-', '')}: productSearch(
           phrase: "",
           filter: [
             { attribute: "categoryPath", eq: "${category}" }
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index a3606018..fdb37300 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -14,7 +14,7 @@ import {useEffect, useState} from 'preact/hooks';
 import './product-list.css';
 
 import {Alert} from '../../components/Alert';
-import {useProducts, useStore} from '../../context';
+import {useProducts, useSearch, useStore} from '../../context';
 import {Product} from '../../types/interface';
 import {classNames} from '../../utils/dom';
 import ProductItem from '../ProductItem';
@@ -49,6 +49,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
   const {
     config: {listview},
   } = useStore();
+  const { displayFranchises } = useSearch();
 
   const className = showFilters
     ? 'ds-sdk-product-list bg-body max-w-full pl-3 pb-2xl sm:pb-24'
@@ -86,8 +87,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
         </div>
       )}
 
-      {
-        franchises && (<div className="w-full">
+      {displayFranchises && franchises && (<div className="w-full">
           {Object.keys(franchises).map((franchise) => (
             <div key={franchise}>
               <h2>{franchises[franchise].name}</h2>
@@ -95,7 +95,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
                 gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
               }}
                    className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6">
-                {franchises[franchise].items.slice(0, 4).map((item) => (
+                {franchises[franchise].items.slice(0, 4).map((item: Product) => (
                   <ProductItem
                     item={item}
                     setError={setError}
@@ -116,7 +116,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
         </div>)
       }
 
-      {listview && viewType === 'listview' ? (
+      {!displayFranchises && (listview && viewType === 'listview' ? (
         <div className="w-full">
           <div className="ds-sdk-product-list__list-view-default mt-md grid grid-cols-none pt-[15px] w-full gap-[10px]">
             {products?.map((product) => (
@@ -159,7 +159,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
             />
           ))}
         </div>
-      )}
+      ))}
     </div>
   );
 };
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index 02f99c77..5496ed6c 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -10,7 +10,7 @@ it.
 import {  FunctionComponent } from 'preact';
 import { useEffect } from 'preact/hooks';
 import { ProductCardShimmer } from 'src/components/ProductCardShimmer';
-import { useProducts, useSensor, useStore,useTranslation } from 'src/context';
+import {useProducts, useSearch, useSensor, useStore, useTranslation} from 'src/context';
 import {
   handleUrlPagination,
 } from 'src/utils/handleUrlFilters';
@@ -28,6 +28,7 @@ export const ProductsContainer: FunctionComponent<Props> = ({
 }) => {
   const storeCtx = useStore();
   const productsCtx = useProducts();
+  const { displayFranchises } = useSearch();
   const { screenSize } = useSensor();
 
   const {
@@ -73,18 +74,6 @@ export const ProductsContainer: FunctionComponent<Props> = ({
     );
   }
 
-  // if (storeCtx.config.displayByFranchise && franchises) {
-  //   return (
-  //     <div>
-  //       {Object.keys(franchises).map((franchise) => (
-  //         <div key={franchise}>
-  //           <h2>{franchises[franchise].name}</h2>
-  //         </div>
-  //       ))}
-  //     </div>
-  //   );
-  // }
-
   if (!totalCount) {
     return (
       <div className="ds-sdk-no-results__page flex flex-col gap-8 justify-center items-center w-full">
@@ -135,7 +124,7 @@ export const ProductsContainer: FunctionComponent<Props> = ({
         <span className="flex items-center justify-center text-neutral-700">
           {`${Math.max((currentPage-1)*pageSize, 1)}-${Math.min(currentPage*pageSize, totalCount)}`} of {totalCount}
         </span>
-        {totalPages > 1 && (
+        {!displayFranchises && totalPages > 1 && (
           <Pagination
             currentPage={currentPage}
             totalPages={totalPages}
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 37dbbd0d..77753441 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -12,11 +12,12 @@ import { useContext, useEffect, useMemo, useState } from 'preact/hooks';
 
 import {getFranchiseSearch, getProductSearch, refineProductSearch} from '../api/search';
 import {
+  CategoryView,
   Facet,
   FacetFilter,
   PageSizeOption,
   Product,
-  ProductSearchQuery,
+  ProductSearchQuery, ProductSearchResponse,
   RedirectRouteFunc,
 } from '../types/interface';
 import {
@@ -36,11 +37,16 @@ import { useAttributeMetadata } from './attributeMetadata';
 import { useSearch } from './search';
 import { useStore } from './store';
 import { useTranslation } from './translation';
+import store from "store2";
 
 interface WithChildrenProps {
   children?: any;
 }
 
+type Franchise = {
+  items: Product[];
+} & CategoryView;
+
 const ProductsContext = createContext<{
   variables: ProductSearchQuery;
   loading: boolean;
@@ -124,6 +130,7 @@ const ProductsContext = createContext<{
   resolveCartId: () => Promise.resolve(''),
   refreshCart: () => {},
   addToCart: () => Promise.resolve({user_errors: []}),
+  franchises: null,
 });
 
 const ProductsContextProvider = ({ children }: WithChildrenProps) => {
@@ -149,7 +156,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
   const [loading, setLoading] = useState(true);
   const [pageLoading, setPageLoading] = useState(true);
   const [items, setItems] = useState<Product[]>([]);
-  const [franchises, setFranchises] = useState<any>(null);
+  const [franchises, setFranchises] = useState<Record<string, Franchise> | null>(null);
   const [currentPage, setCurrentPage] = useState<number>(pageDefault);
   const [pageSize, setPageSize] = useState<number>(pageSizeDefault);
   const [totalCount, setTotalCount] = useState<number>(0);
@@ -252,10 +259,12 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     franchises,
   };
 
-  const handleFranchiseSearch = async (data) => {
-    const categories = data.productSearch.facets.find((facet) => facet.attribute === 'categories')?.buckets;
+  const handleFranchiseSearch = async (data: ProductSearchResponse['data']) => {
+    const categories = data.productSearch.facets?.find((facet) => facet.attribute === 'categories')?.buckets as CategoryView[];
 
-    console.log(categories)
+    if (!categories) {
+      return;
+    }
 
     const result = await getFranchiseSearch({
       ...variables,
@@ -301,7 +310,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
 
         getPageSizeOptions(data?.productSearch?.total_count);
 
-        if (storeCtx.config.displayByFranchise) {
+        if (searchCtx.displayFranchises) {
           await handleFranchiseSearch(data);
         }
 
diff --git a/src/context/search.tsx b/src/context/search.tsx
index c6d7bbe2..1941b071 100644
--- a/src/context/search.tsx
+++ b/src/context/search.tsx
@@ -25,6 +25,7 @@ import {
 } from '../utils/handleUrlFilters';
 import { generateGQLSortInput } from '../utils/sort';
 import { useStore } from './store';
+import store from "store2";
 
 interface SearchContextProps {
   phrase: string;
@@ -43,6 +44,7 @@ interface SearchContextProps {
   updateFilterOptions(filter: FacetFilter, option: string): void;
   removeFilter: (name: string, option?: string) => void;
   clearFilters: () => void;
+  displayFranchises: boolean;
 }
 
 export const SearchContext = createContext({} as SearchContextProps);
@@ -132,6 +134,11 @@ const SearchProvider: FunctionComponent = ({ children }) => {
     setFilterCount(count);
   }, [filters]);
 
+  const displayFranchises = (storeCtx.config.displayByFranchise || false)
+    && (filters.length === 0)
+    && (sort.length === 1)
+    && (sort[0].attribute === 'relevance');
+
   const context: SearchContextProps = {
     phrase,
     categoryPath,
@@ -149,6 +156,7 @@ const SearchProvider: FunctionComponent = ({ children }) => {
     updateFilterOptions,
     removeFilter,
     clearFilters,
+    displayFranchises,
   };
 
   return (
diff --git a/src/context/store.tsx b/src/context/store.tsx
index 3f8948c3..050c87df 100644
--- a/src/context/store.tsx
+++ b/src/context/store.tsx
@@ -15,6 +15,7 @@ import {
   RedirectRouteFunc,
   StoreDetailsConfig,
 } from '../types/interface';
+import {useState} from "react";
 
 interface WithChildrenProps {
   children?: any;

From 7cf856d5a9f83dfbb07c0b70d3dffb729873bf04 Mon Sep 17 00:00:00 2001
From: Hannes Hertach <hanneshertach@gmail.com>
Date: Tue, 20 Aug 2024 18:17:40 +0200
Subject: [PATCH 084/160] add load more

---
 package-lock.json                           |   6 +-
 src/components/Facets/SelectedFilters.tsx   |   4 +-
 src/components/ProductList/ProductList.tsx  | 104 +++++++++++++++-----
 src/components/ProductList/product-list.css |  24 ++++-
 src/containers/ProductsContainer.tsx        |   8 +-
 5 files changed, 113 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d8bd14a0..c5f7c026 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9213,9 +9213,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001585",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001585.tgz",
-      "integrity": "sha512-yr2BWR1yLXQ8fMpdS/4ZZXpseBgE7o4g41x3a6AJOqZuOi+iE/WdJYAuZ6Y95i4Ohd2Y+9MzIWRR+uGABH4s3Q==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "dev": true,
       "funding": [
         {
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index edd39d31..a285394b 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -79,7 +79,9 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
           </div>
         )}
       </div>
-      <p className="result-count">{totalCount} Results</p>
+      {!searchCtx.displayFranchises && (
+        <p className="result-count">{totalCount} Results</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index fdb37300..f4f0b05b 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -17,7 +17,69 @@ import {Alert} from '../../components/Alert';
 import {useProducts, useSearch, useStore} from '../../context';
 import {Product} from '../../types/interface';
 import {classNames} from '../../utils/dom';
-import ProductItem from '../ProductItem';
+import ProductItem, {ProductProps} from '../ProductItem';
+
+type FranchiseProps = Omit<ProductProps, "item"> & {
+  franchise: string;
+  franchises: any;
+  numberOfColumns: number;
+};
+
+const Franchise : FunctionComponent<FranchiseProps> = ({
+   currencySymbol,
+   currencyRate,
+   categoryConfig,
+   setRoute,
+   refineProduct,
+   addToCart,
+  franchise,
+  franchises,
+  numberOfColumns,
+  setCartUpdated,
+  setItemAdded,
+  setError,
+  }: FranchiseProps) => {
+  const [page, setPage] = useState(1);
+  const storeCtx = useStore();
+
+  return (
+    <div className="franchises" key={franchise}>
+      <div className="franchise-header">
+        <h2>{franchises[franchise].name.toUpperCase()}</h2>
+        <a href={storeCtx.route?.({
+          sku: "",
+          urlKey: franchises[franchise].title,
+          optionsUIDs: null
+        }) ?? franchises[franchise].title}>View all {franchises[franchise].items.length} results</a>
+      </div>
+      <div style={{
+        gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
+      }}
+           className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6">
+        {franchises[franchise].items.slice(0, numberOfColumns * page).map((item: Product) => (
+          <ProductItem
+            item={item}
+            setError={setError}
+            key={item?.productView?.id}
+            currencySymbol={currencySymbol}
+            currencyRate={currencyRate}
+            categoryConfig={categoryConfig}
+            setRoute={setRoute}
+            refineProduct={refineProduct}
+            setCartUpdated={setCartUpdated}
+            setItemAdded={setItemAdded}
+            addToCart={addToCart}
+          />
+        ))}
+      </div>
+      {page * numberOfColumns < franchises[franchise].items.length &&
+        <button onClick={() => setPage((p) => p + 1)} className="button secondary">Load More</button>
+      }
+
+    </div>
+  );
+}
+
 
 export interface ProductListProps extends HTMLAttributes<HTMLDivElement> {
   products: Array<Product> | null | undefined;
@@ -49,7 +111,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
   const {
     config: {listview},
   } = useStore();
-  const { displayFranchises } = useSearch();
+  const {displayFranchises } = useSearch();
 
   const className = showFilters
     ? 'ds-sdk-product-list bg-body max-w-full pl-3 pb-2xl sm:pb-24'
@@ -89,29 +151,21 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
 
       {displayFranchises && franchises && (<div className="w-full">
           {Object.keys(franchises).map((franchise) => (
-            <div key={franchise}>
-              <h2>{franchises[franchise].name}</h2>
-              <div style={{
-                gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
-              }}
-                   className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6">
-                {franchises[franchise].items.slice(0, 4).map((item: Product) => (
-                  <ProductItem
-                    item={item}
-                    setError={setError}
-                    key={item?.productView?.id}
-                    currencySymbol={currencySymbol}
-                    currencyRate={currencyRate}
-                    categoryConfig={categoryConfig}
-                    setRoute={setRoute}
-                    refineProduct={refineProduct}
-                    setCartUpdated={setCartUpdated}
-                    setItemAdded={setItemAdded}
-                    addToCart={addToCart}
-                  />
-                ))}
-              </div>
-            </div>
+            <Franchise
+              numberOfColumns={numberOfColumns}
+              franchises={franchises}
+              franchise={franchise}
+              setError={setError}
+              key={franchise}
+              currencySymbol={currencySymbol}
+              currencyRate={currencyRate}
+              categoryConfig={categoryConfig}
+              setRoute={setRoute}
+              refineProduct={refineProduct}
+              setCartUpdated={setCartUpdated}
+              setItemAdded={setItemAdded}
+              addToCart={addToCart}
+            />
           ))}
         </div>)
       }
diff --git a/src/components/ProductList/product-list.css b/src/components/ProductList/product-list.css
index ccf520bb..c141336e 100644
--- a/src/components/ProductList/product-list.css
+++ b/src/components/ProductList/product-list.css
@@ -1,5 +1,27 @@
 /* https://cssguidelin.es/#bem-like-naming */
-.sfsdk-product-list {
+.ds-sdk-product-list .franchises h2 {
+  font-size: var(--heading-font-size-l);
+  font-family: var(--ff-gt-america-expanded-bold);
+  margin-bottom: 0;
+}
+
+.ds-sdk-product-list .franchises {
+  padding-bottom: 40px;
+  margin-bottom: 40px;
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.ds-sdk-product-list .franchises button {
+  border: 1px solid #DDDDDD;
+  display: block;
+  margin: 25px auto auto;
+}
+
+.ds-sdk-product-list .franchises .franchise-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 50px;
 }
 
 /* Extra small devices (phones, 600px and down) */
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index 5496ed6c..9b916bfa 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -121,9 +121,11 @@ export const ProductsContainer: FunctionComponent<Props> = ({
           showFilters ? 'mx-auto' : 'mr-auto'
         } w-full h-full text-[14px] font-normal`}
       >
-        <span className="flex items-center justify-center text-neutral-700">
-          {`${Math.max((currentPage-1)*pageSize, 1)}-${Math.min(currentPage*pageSize, totalCount)}`} of {totalCount}
-        </span>
+        {!displayFranchises && (
+          <span className="flex items-center justify-center text-neutral-700">
+            {`${Math.max((currentPage - 1) * pageSize, 1)}-${Math.min(currentPage * pageSize, totalCount)}`} of {totalCount}
+          </span>
+        )}
         {!displayFranchises && totalPages > 1 && (
           <Pagination
             currentPage={currentPage}

From c8d66d6f3812e756322637ffabc5bf18032255cc Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Wed, 21 Aug 2024 12:10:08 +0200
Subject: [PATCH 085/160] Filter swatches by categoryId and eds segmentation

---
 dev-template.html                          |  4 +--
 src/components/ProductItem/ProductItem.tsx |  6 ++--
 src/context/products.tsx                   |  4 +--
 src/utils/productUtils.ts                  | 34 ++++++++++++++++++----
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 09398f51..e4a07737 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -76,8 +76,8 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        //currentCategoryUrlPath: 'sportswear/women/tops', // current category url path, please prefer using currentCategoryId
-        // currentCategoryId: '107', // current category id
+        currentCategoryUrlPath: 'sportswear/women', // current category url path, please prefer using currentCategoryId
+        currentCategoryId: '677', // current category id
         // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
         // displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 58482afe..995495db 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -8,7 +8,7 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { useEffect,useRef, useState } from 'preact/hooks';
+import { useEffect,useMemo,useRef, useState } from 'preact/hooks';
 
 import '../ProductItem/ProductItem.css';
 
@@ -174,10 +174,10 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     && !showSizes
     && quickAddStatus === QUICK_ADD_STATUS_IDLE;
 
-  const colorSwatchesFromAttribute = getColorSwatchesFromAttribute(item);
+  const colorSwatchesFromAttribute = useMemo(() => getColorSwatchesFromAttribute(item), [item]);
   let colorSwatches: SwatchValues[] = [];
   if (colorSwatchesFromAttribute && colorSwatchesFromAttribute.length > 0) {
-    colorSwatches = colorSwatchesFromAttribute.map((swatch) => {
+    colorSwatches = colorSwatchesFromAttribute.map((swatch: any) => {
       let imageUrl = generateOptimizedImages([swatch.image], 44, imageBackgroundColor || '', '1:1')[0]?.src;
       imageUrl = `${imageUrl}&dpr=${Math.round(window.devicePixelRatio)}`;
 
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 558c7a4c..20da8a6f 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -353,9 +353,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
         eq: categoryPath,
       };
       filters.push(categoryFilter);
-    }
-
-    if (categoryId) {
+    } else if (categoryId) {
       const categoryIdFilter = {
         attribute: 'categoryIds',
         eq: categoryId,
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 91a54409..27c00e3e 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -3,7 +3,7 @@ import { Product } from '../types/interface';
 function isSportsWear(product: Product) {
   const { productView } = product;
   const department = productView?.attributes?.find(({ name }) => name === 'pim_department_name');
-  
+
   return department?.value.includes('Sportswear');
 }
 
@@ -30,9 +30,9 @@ function getColorSwatcheConfigFromAttribute(item: Product) {
   const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
   const colorOptions =  productOptions?.[0];
   const attributeId = colorOptions?.id;
-  
-  return options.find((option: any) => option.attribute_id === attributeId 
-    && option.attribute_type === 'visual' 
+
+  return options.find((option: any) => option.attribute_id === attributeId
+    && option.attribute_type === 'visual'
     && option.show_swatches);
 }
 
@@ -59,10 +59,17 @@ function getColorSwatchesFromAttribute(item: Product) {
     return null;
   }
 
+  const categoryId = '3197';
   const { productView } = item;
   const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
   const colorOptions = productOptions?.[0];
-  return colorOptions?.values?.map((option) => {
+  if (!colorOptions) {
+    return null;
+  }
+  const segmentedOptions = getSegmentedOptions(item, colorOptions.id, categoryId);
+
+  return colorOptions?.values?.filter((option: any) => !segmentedOptions || segmentedOptions.includes(option.id))
+    .map((option: any) => {
     const imagConfig = colorOptionsFromAttribute.images && colorOptionsFromAttribute.images.find((image: any) => image.id === option.id);
     const defaultImage = '/en-us/media/image/media_1ccf88b21200e64fed7e7e93e0cf2d0a76fa007a8.png';
     const swatchImage = (imagConfig && imagConfig.swatch_image) || defaultImage
@@ -73,6 +80,23 @@ function getColorSwatchesFromAttribute(item: Product) {
   });
 }
 
+function getSegmentedOptions(item: Product, optionId: string | null, categoryId: string) {
+  const edsSegmentation = item.productView?.attributes?.find(({name}) => name === 'eds_segmentation')?.value;
+  if (!edsSegmentation) {
+    return null;
+  }
+
+  const parsedSegmentation = JSON.parse(edsSegmentation);
+  if (parsedSegmentation?.['attribute_code'] === optionId) {
+    const segmentedOptions = parsedSegmentation.options
+        .filter((option: any) => option?.categories?.split()?.includes(categoryId))
+        .map((option:any) => option.id);
+    return segmentedOptions.length > 0 ? segmentedOptions : null;
+  }
+  return null;
+}
+
+
 function getDefaultColorSwatchId(item: Product) {
   const colorOptionsFromAttribute = getColorSwatcheConfigFromAttribute(item);
 

From ed464f8c91d72fd8d98d6eaa438e2c4229dc3966 Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Thu, 16 May 2024 14:55:24 +0200
Subject: [PATCH 086/160] Use categoryPath for filtering

---
 src/context/products.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/context/products.tsx b/src/context/products.tsx
index 558c7a4c..20da8a6f 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -353,9 +353,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
         eq: categoryPath,
       };
       filters.push(categoryFilter);
-    }
-
-    if (categoryId) {
+    } else if (categoryId) {
       const categoryIdFilter = {
         attribute: 'categoryIds',
         eq: categoryId,

From 940f79ced595f05639b75006cc190d838c7bdea6 Mon Sep 17 00:00:00 2001
From: Hannes Hertach <hanneshertach@gmail.com>
Date: Wed, 21 Aug 2024 12:34:46 +0200
Subject: [PATCH 087/160] add franchise view toggle

---
 .../Facets/FranchiseViewSelector.tsx          | 21 ++++++++++++++++
 src/components/Facets/SelectedFilters.tsx     |  8 ++++++-
 src/components/Facets/filters.css             | 24 +++++++++++++++++++
 src/components/ProductList/ProductList.tsx    |  4 ++--
 src/components/ProductList/product-list.css   | 17 +++++++++++++
 src/containers/App.tsx                        |  6 ++++-
 src/context/search.tsx                        | 17 ++++++++++---
 src/icons/franchiseview.svg                   |  5 ++++
 src/icons/plpview.svg                         |  3 +++
 9 files changed, 98 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Facets/FranchiseViewSelector.tsx
 create mode 100644 src/components/Facets/filters.css
 create mode 100644 src/icons/franchiseview.svg
 create mode 100644 src/icons/plpview.svg

diff --git a/src/components/Facets/FranchiseViewSelector.tsx b/src/components/Facets/FranchiseViewSelector.tsx
new file mode 100644
index 00000000..7695031c
--- /dev/null
+++ b/src/components/Facets/FranchiseViewSelector.tsx
@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'preact';
+
+import {useSearch} from "../../context";
+import FranchiseView from "../../icons/franchiseview.svg";
+import PlpView from "../../icons/plpview.svg";
+
+
+export const FranchiseViewSelector: FunctionComponent = () => {
+  const searchCtx = useSearch();
+
+  return (
+    <div className="flex gap-[10px] franchise-selector">
+      <button disabled={searchCtx.displayFranchises} onClick={searchCtx.toggleFranchiseView}>
+        <FranchiseView/>
+      </button>
+      <button disabled={!searchCtx.displayFranchises} onClick={searchCtx.toggleFranchiseView}>
+        <PlpView/>
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index a285394b..72b430c9 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -9,9 +9,11 @@ it.
 
 import { FunctionComponent } from 'preact';
 
-import { useProducts, useSearch, useTranslation } from '../../context';
+import {useProducts, useSearch, useStore, useTranslation} from '../../context';
 import Pill from '../Pill';
 import { formatBinaryLabel, formatRangeLabel } from './format';
+import "./filters.css";
+import {FranchiseViewSelector} from "./FranchiseViewSelector";
 
 interface SelectedFiltersProps {
   totalCount?: number;
@@ -22,6 +24,7 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
 }) => {
   const searchCtx = useSearch();
   const productsCtx = useProducts();
+  const storeCtx = useStore();
   const translation = useTranslation();
 
   return (
@@ -82,6 +85,9 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
       {!searchCtx.displayFranchises && (
         <p className="result-count">{totalCount} Results</p>
       )}
+      {storeCtx.config.displayByFranchise && (
+        <FranchiseViewSelector />
+      )}
     </div>
   );
 };
diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
new file mode 100644
index 00000000..f53fea8f
--- /dev/null
+++ b/src/components/Facets/filters.css
@@ -0,0 +1,24 @@
+.franchise-selector button:not([disabled]) svg {
+  fill: #dddddd;
+}
+
+.franchise-selector button:hover svg {
+  opacity: 0.6;
+}
+
+.franchise-selector button[disabled] {
+  border-bottom: 2px solid black;
+}
+
+.franchise-selector {
+  align-items: start;
+}
+
+@media (max-width: 768px) {
+  .franchise-selector {
+    align-self: end;
+    padding-right: 12px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+}
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index f4f0b05b..730929d7 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -25,7 +25,7 @@ type FranchiseProps = Omit<ProductProps, "item"> & {
   numberOfColumns: number;
 };
 
-const Franchise : FunctionComponent<FranchiseProps> = ({
+const Franchises : FunctionComponent<FranchiseProps> = ({
    currencySymbol,
    currencyRate,
    categoryConfig,
@@ -151,7 +151,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
 
       {displayFranchises && franchises && (<div className="w-full">
           {Object.keys(franchises).map((franchise) => (
-            <Franchise
+            <Franchises
               numberOfColumns={numberOfColumns}
               franchises={franchises}
               franchise={franchise}
diff --git a/src/components/ProductList/product-list.css b/src/components/ProductList/product-list.css
index c141336e..abb443ee 100644
--- a/src/components/ProductList/product-list.css
+++ b/src/components/ProductList/product-list.css
@@ -24,6 +24,23 @@
   margin-bottom: 50px;
 }
 
+.ds-sdk-product-list .franchises .franchise-header a {
+  text-decoration: underline;
+}
+
+
+@media only screen and (max-width: 768px) {
+  .ds-sdk-product-list .franchises .franchise-header {
+    flex-direction: column;
+    align-items: start;
+    margin-bottom: 30px;
+  }
+
+  .ds-sdk-product-list .franchises h2 {
+    margin-bottom: 10px;
+  }
+}
+
 /* Extra small devices (phones, 600px and down) */
 /* @media only screen and (max-width: 600px) { } */
 
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 081e7d98..f3346455 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -24,6 +24,7 @@ import {
 } from '../context';
 import { MobileFilterHeader } from './MobileFilterHeader';
 import { ProductsContainer } from './ProductsContainer';
+import {FranchiseViewSelector} from "../components/Facets/FranchiseViewSelector";
 
 
 export const App: FunctionComponent = () => {
@@ -31,7 +32,7 @@ export const App: FunctionComponent = () => {
   const productsCtx = useProducts();
   const { screenSize } = useSensor();
   const translation = useTranslation();
-  const { displayMode } = useStore().config;
+  const { displayMode, displayByFranchise } = useStore().config;
   const [showFilters, setShowFilters] = useState(true);
 
   const loadingLabel = translation.Loading.title;
@@ -116,6 +117,9 @@ export const App: FunctionComponent = () => {
                         screenSize={screenSize}
                       />
                     </div>
+                    {displayByFranchise && (
+                      <FranchiseViewSelector />
+                    )}
                     <ProductsContainer
                       showFilters={showFilters && productsCtx.facets.length > 0}
                     />
diff --git a/src/context/search.tsx b/src/context/search.tsx
index 1941b071..74b4726e 100644
--- a/src/context/search.tsx
+++ b/src/context/search.tsx
@@ -8,7 +8,7 @@ it.
 */
 
 import { createContext, FunctionComponent, useContext } from 'preact/compat';
-import { useState } from 'preact/hooks';
+import {useCallback, useState} from 'preact/hooks';
 import { useEffect } from 'react';
 
 import {
@@ -16,7 +16,7 @@ import {
   ProductSearchSortInput,
   SearchClauseInput,
 } from '../types/interface';
-import { SEARCH_SORT_DEFAULT } from '../utils/constants';
+import {CATEGORY_SORT_DEFAULT, SEARCH_SORT_DEFAULT} from '../utils/constants';
 import {
   addUrlFilter,
   getValueFromUrl,
@@ -45,6 +45,7 @@ interface SearchContextProps {
   removeFilter: (name: string, option?: string) => void;
   clearFilters: () => void;
   displayFranchises: boolean;
+  toggleFranchiseView: () => void;
 }
 
 export const SearchContext = createContext({} as SearchContextProps);
@@ -68,6 +69,7 @@ const SearchProvider: FunctionComponent = ({ children }) => {
   >([]);
   const [sort, setSort] = useState<ProductSearchSortInput[]>(sortDefault);
   const [filterCount, setFilterCount] = useState<number>(0);
+  const [preferFranchiseView, setPreferFranchiseView] = useState<boolean>(true);
 
   const createFilter = (filter: SearchClauseInput) => {
     const newFilters = [...filters, filter];
@@ -137,7 +139,15 @@ const SearchProvider: FunctionComponent = ({ children }) => {
   const displayFranchises = (storeCtx.config.displayByFranchise || false)
     && (filters.length === 0)
     && (sort.length === 1)
-    && (sort[0].attribute === 'relevance');
+    && (sort[0].attribute === 'relevance')
+    && preferFranchiseView;
+
+  const toggleFranchiseView = useCallback(() => {
+    setFilters([]);
+    setSort(SEARCH_SORT_DEFAULT);
+    window.history.pushState({}, '', `${window.location.pathname}`);
+    setPreferFranchiseView((p) => !p);
+  }, []);
 
   const context: SearchContextProps = {
     phrase,
@@ -157,6 +167,7 @@ const SearchProvider: FunctionComponent = ({ children }) => {
     removeFilter,
     clearFilters,
     displayFranchises,
+    toggleFranchiseView,
   };
 
   return (
diff --git a/src/icons/franchiseview.svg b/src/icons/franchiseview.svg
new file mode 100644
index 00000000..0686a4da
--- /dev/null
+++ b/src/icons/franchiseview.svg
@@ -0,0 +1,5 @@
+<svg fill="black" width="24" height="24" viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2532_14905)">
+        <path d="M1.5 1.54286H6V10.0286V11.5714V20.0571H1.5V1.54286ZM7.5 11.5714H22.5V20.0571H7.5V11.5714ZM22.5 10.0286H7.5V1.54286H22.5V10.0286ZM0 20.0571V21.6H1.5H22.5H24V20.0571V1.54286V0H22.5H1.5H0V1.54286V20.0571Z"/>
+    </g>
+</svg>
diff --git a/src/icons/plpview.svg b/src/icons/plpview.svg
new file mode 100644
index 00000000..a30f29a9
--- /dev/null
+++ b/src/icons/plpview.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.5 3V7.5H22.5V3H16.5ZM15 3H9V7.5H15V3ZM7.5 3H1.5V7.5H7.5V3ZM1.5 9V15H7.5V9H1.5ZM1.5 16.5V21H7.5V16.5H1.5ZM9 21H15V16.5H9V21ZM16.5 21H22.5V16.5H16.5V21ZM22.5 15V9H16.5V15H22.5ZM0 1.5H1.5H22.5H24V3V21V22.5H22.5H1.5H0V21V3V1.5ZM9 15H15V9H9V15Z"/>
+</svg>

From a976bc985b4b0fc75b1a1dea70186f1836e85cf5 Mon Sep 17 00:00:00 2001
From: Hannes Hertach <hanneshertach@gmail.com>
Date: Wed, 21 Aug 2024 12:38:55 +0200
Subject: [PATCH 088/160] fix add to cart button

---
 src/components/ProductList/ProductList.tsx  | 2 +-
 src/components/ProductList/product-list.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 730929d7..2bd56e73 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -73,7 +73,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
         ))}
       </div>
       {page * numberOfColumns < franchises[franchise].items.length &&
-        <button onClick={() => setPage((p) => p + 1)} className="button secondary">Load More</button>
+        <button onClick={() => setPage((p) => p + 1)} className="button secondary load-more">Load More</button>
       }
 
     </div>
diff --git a/src/components/ProductList/product-list.css b/src/components/ProductList/product-list.css
index abb443ee..26f250bc 100644
--- a/src/components/ProductList/product-list.css
+++ b/src/components/ProductList/product-list.css
@@ -11,7 +11,7 @@
   border-bottom: 1px solid #DDDDDD;
 }
 
-.ds-sdk-product-list .franchises button {
+.ds-sdk-product-list .franchises button.load-more {
   border: 1px solid #DDDDDD;
   display: block;
   margin: 25px auto auto;

From a67534d36ecfca8348b6ef0dddfdebcab1a3183f Mon Sep 17 00:00:00 2001
From: Hannes Hertach <hanneshertach@gmail.com>
Date: Wed, 21 Aug 2024 12:51:59 +0200
Subject: [PATCH 089/160] fix toggle franchise

---
 src/components/Facets/FranchiseViewSelector.tsx | 4 ++--
 src/context/search.tsx                          | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Facets/FranchiseViewSelector.tsx b/src/components/Facets/FranchiseViewSelector.tsx
index 7695031c..0ed769cd 100644
--- a/src/components/Facets/FranchiseViewSelector.tsx
+++ b/src/components/Facets/FranchiseViewSelector.tsx
@@ -10,10 +10,10 @@ export const FranchiseViewSelector: FunctionComponent = () => {
 
   return (
     <div className="flex gap-[10px] franchise-selector">
-      <button disabled={searchCtx.displayFranchises} onClick={searchCtx.toggleFranchiseView}>
+      <button disabled={searchCtx.displayFranchises} onClick={() => searchCtx.toggleFranchiseView(true)}>
         <FranchiseView/>
       </button>
-      <button disabled={!searchCtx.displayFranchises} onClick={searchCtx.toggleFranchiseView}>
+      <button disabled={!searchCtx.displayFranchises} onClick={() => searchCtx.toggleFranchiseView(false)}>
         <PlpView/>
       </button>
     </div>
diff --git a/src/context/search.tsx b/src/context/search.tsx
index 74b4726e..e4d71843 100644
--- a/src/context/search.tsx
+++ b/src/context/search.tsx
@@ -45,7 +45,7 @@ interface SearchContextProps {
   removeFilter: (name: string, option?: string) => void;
   clearFilters: () => void;
   displayFranchises: boolean;
-  toggleFranchiseView: () => void;
+  toggleFranchiseView: (showFranchise: boolean) => void;
 }
 
 export const SearchContext = createContext({} as SearchContextProps);
@@ -142,11 +142,11 @@ const SearchProvider: FunctionComponent = ({ children }) => {
     && (sort[0].attribute === 'relevance')
     && preferFranchiseView;
 
-  const toggleFranchiseView = useCallback(() => {
+  const toggleFranchiseView = useCallback(async (showFranchise: boolean) => {
     setFilters([]);
     setSort(SEARCH_SORT_DEFAULT);
     window.history.pushState({}, '', `${window.location.pathname}`);
-    setPreferFranchiseView((p) => !p);
+    setPreferFranchiseView(showFranchise);
   }, []);
 
   const context: SearchContextProps = {

From 35be3088f8469bb6f9613eb3d3237012a04ef2ec Mon Sep 17 00:00:00 2001
From: Mike Weis <miweis@adobe.com>
Date: Wed, 21 Aug 2024 08:20:26 -0500
Subject: [PATCH 090/160] WAF-186: Master switch to disable all purchases -
 implemented

---
 src/components/ProductItem/ProductItem.test.tsx | 1 +
 src/components/ProductItem/ProductItem.tsx      | 3 +++
 src/components/ProductList/ProductList.tsx      | 3 +++
 src/context/products.tsx                        | 3 +++
 src/types/interface.ts                          | 1 +
 5 files changed, 11 insertions(+)

diff --git a/src/components/ProductItem/ProductItem.test.tsx b/src/components/ProductItem/ProductItem.test.tsx
index d7152899..2a1fa1ba 100644
--- a/src/components/ProductItem/ProductItem.test.tsx
+++ b/src/components/ProductItem/ProductItem.test.tsx
@@ -36,6 +36,7 @@ describe('WidgetSDK - UIKit/ProductItem', () => {
         setCartUpdated={() => true}
         setError={() => ''}
         addToCart={()=>Promise.resolve({user_errors: []})}
+        disableAllPurchases={false}
       />
     );
 
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 58482afe..9ec8895b 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -52,6 +52,7 @@ export interface ProductProps {
   ) => Promise<{
     user_errors: any[];
   }>;
+  disableAllPurchases: boolean;
 }
 
 const SWATCH_COLORS = 'Colors';
@@ -70,6 +71,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   setRoute,
   refineProduct,
   addToCart,
+  disableAllPurchases,
 }: ProductProps) => {
   const { product, productView } = item;
   const defaultColorSwatchId = getDefaultColorSwatchId(item);
@@ -170,6 +172,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const isConfigurable = product?.__typename === 'ConfigurableProduct';
   const shouldShowAddToBagButton = isSportsWear(item)
     && categoryConfig?.['plp_quick_view_modal_enabled'] === '1'
+    && !disableAllPurchases
     && (!screenSize.desktop || isHovering)
     && !showSizes
     && quickAddStatus === QUICK_ADD_STATUS_IDLE;
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 1be51221..d36362e1 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -39,6 +39,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
     refineProduct,
     refreshCart,
     addToCart,
+    disableAllPurchases = false,
   } = productsCtx;
   const [cartUpdated, setCartUpdated] = useState(false);
   const [itemAdded, setItemAdded] = useState('');
@@ -100,6 +101,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
                 setCartUpdated={setCartUpdated}
                 setItemAdded={setItemAdded}
                 addToCart={addToCart}
+                disableAllPurchases={disableAllPurchases}
               />
             ))}
           </div>
@@ -124,6 +126,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
               setCartUpdated={setCartUpdated}
               setItemAdded={setItemAdded}
               addToCart={addToCart}
+              disableAllPurchases={disableAllPurchases}
             />
           ))}
         </div>
diff --git a/src/context/products.tsx b/src/context/products.tsx
index a95fa9ee..a4575594 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -84,6 +84,7 @@ const ProductsContext = createContext<{
     options: string[],
     quantity: number
   ) => Promise<{user_errors: any[];}>;
+  disableAllPurchases?: boolean;
 }>({
   variables: {
     phrase: '',
@@ -124,6 +125,7 @@ const ProductsContext = createContext<{
   resolveCartId: () => Promise.resolve(''),
   refreshCart: () => {},
   addToCart: () => Promise.resolve({user_errors: []}),
+  disableAllPurchases: false,
 });
 
 const ProductsContextProvider = ({ children }: WithChildrenProps) => {
@@ -247,6 +249,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     refreshCart: storeCtx.config.refreshCart,
     resolveCartId: storeCtx.config.resolveCartId,
     addToCart: storeCtx.config.addToCart,
+    disableAllPurchases: storeCtx.config.disableAllPurchases,
   };
 
   const searchProducts = async () => {
diff --git a/src/types/interface.ts b/src/types/interface.ts
index cc2f91b2..ecfb7a7f 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -65,6 +65,7 @@ export interface StoreDetailsConfig {
     quantity: number
   ) => Promise<{ user_errors: any[]; }>;
   onCategoryChange?: (categoryPath: string) => void;
+  disableAllPurchases: boolean;
 }
 
 // Types

From 2d02635dd9d73f9a244dd4bfed7cf0a744dc3248 Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Wed, 21 Aug 2024 16:07:27 +0200
Subject: [PATCH 091/160] changes to merge latest acdl branch

---
 dev-template.html                             |  4 ++--
 .../ProductItem/ProductItem.test.tsx          | 23 +++++++++----------
 src/types/interface.ts                        |  2 +-
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index 09398f51..8efb2f9c 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -76,8 +76,8 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        //currentCategoryUrlPath: 'sportswear/women/tops', // current category url path, please prefer using currentCategoryId
-        // currentCategoryId: '107', // current category id
+        currentCategoryUrlPath: 'sportswear/women/tops', // current category url path, please prefer using currentCategoryId
+        currentCategoryId: '107', // current category id
         // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
         // displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
diff --git a/src/components/ProductItem/ProductItem.test.tsx b/src/components/ProductItem/ProductItem.test.tsx
index 2d05dc7b..288e340b 100644
--- a/src/components/ProductItem/ProductItem.test.tsx
+++ b/src/components/ProductItem/ProductItem.test.tsx
@@ -44,18 +44,17 @@ describe('WidgetSDK - UIKit/ProductItem', () => {
     };
 
     const { container } = render(
-      <StoreContextProvider {...context}>
-        <ProductItem
-          item={sampleProductNotDiscounted}
-          currencySymbol="$"
-          currencyRate="USD"
-          setRoute={undefined}
-          refineProduct={() => {}}
-          setItemAdded={() => 'test'}
-          setCartUpdated={() => true}
-          setError={() => ''}
-        />
-      </StoreContextProvider>
+      <ProductItem
+        item={sampleProductNotDiscounted}
+        currencySymbol="$"
+        currencyRate="USD"
+        setRoute={undefined}
+        refineProduct={() => {}}
+        setItemAdded={() => 'test'}
+        setCartUpdated={() => true}
+        setError={() => ''}
+        addToCart={()=>Promise.resolve({user_errors: []})}
+      />
     );
 
     const elem = container.querySelector('.ds-sdk-product-item');
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 1cfb42e7..9747749c 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -77,7 +77,7 @@ export type RedirectRouteFunc = ({
 }: {
   sku: string;
   urlKey: null | string;
-  optionsUIDs: null | string[];
+  optionsUIDs?: null | string[];
 }) => string;
 
 export interface MagentoHeaders {

From 1f4178ba69d4fefa1d48161ce589850c0c08ee39 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 22 Aug 2024 14:05:25 +0530
Subject: [PATCH 092/160] Fix lint and build errors

---
 src/api/search.ts                             |  2 +-
 src/components/Facets/SelectedFilters.tsx     |  3 ++-
 .../InputButtonGroup/InputButtonGroup.tsx     |  9 +------
 .../ProductItem/ProductItem.test.tsx          | 18 -------------
 src/components/ProductItem/ProductPrice.tsx   | 25 ++++---------------
 .../ProductList/ProductList.test.tsx          |  2 +-
 src/components/ProductList/ProductList.tsx    |  3 +++
 src/containers/App.tsx                        |  2 +-
 src/containers/ProductsHeader.tsx             |  1 -
 src/context/products.tsx                      |  1 -
 src/context/search.tsx                        |  3 +--
 src/context/store.tsx                         |  2 +-
 src/utils/getProductPrice.ts                  |  2 +-
 src/utils/tests/utils.test.ts                 |  2 ++
 14 files changed, 19 insertions(+), 56 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index 64c2f43e..cb5a05c6 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -20,13 +20,13 @@ import {
   RefineProductQuery,
 } from '../types/interface';
 import { SEARCH_UNIT_ID } from '../utils/constants';
+import {Product, ProductView} from "./fragments";
 import {
   ATTRIBUTE_METADATA_QUERY,
   CATEGORY_QUERY, FranchiseQueryFragment,
   PRODUCT_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
 } from './queries';
-import {Product, ProductView} from "./fragments";
 
 const getHeaders = (headers: MagentoHeaders) => {
   return {
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 72b430c9..564ed5a4 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -9,10 +9,11 @@ it.
 
 import { FunctionComponent } from 'preact';
 
+import "./filters.css";
+
 import {useProducts, useSearch, useStore, useTranslation} from '../../context';
 import Pill from '../Pill';
 import { formatBinaryLabel, formatRangeLabel } from './format';
-import "./filters.css";
 import {FranchiseViewSelector} from "./FranchiseViewSelector";
 
 interface SelectedFiltersProps {
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 09e48031..68cb557f 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'preact';
-import { ChangeEvent, useState } from 'preact/compat';
+import { useState } from 'preact/compat';
 
 import { useProducts, useTranslation } from '../../context';
 import PlusIcon from '../../icons/plus.svg';
@@ -53,13 +53,6 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
 
   const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
 
-  const onInputChange = (title: string, e: ChangeEvent<HTMLInputElement>) => {
-    onChange({
-      value: title,
-      selected: (e?.target as HTMLInputElement)?.checked,
-    });
-  };
-
   const formatLabel = (title: string, bucket: Bucket) => {
     const {
       currencyRate = '1',
diff --git a/src/components/ProductItem/ProductItem.test.tsx b/src/components/ProductItem/ProductItem.test.tsx
index 1e06ae0d..2a1fa1ba 100644
--- a/src/components/ProductItem/ProductItem.test.tsx
+++ b/src/components/ProductItem/ProductItem.test.tsx
@@ -9,7 +9,6 @@ it.
 
 import { render } from '@testing-library/preact';
 
-import { StoreContextProvider } from '../../context';
 import { sampleProductNotDiscounted } from './MockData';
 import ProductItem from './ProductItem';
 
@@ -26,23 +25,6 @@ beforeEach(() => {
 
 describe('WidgetSDK - UIKit/ProductItem', () => {
   test('renders', () => {
-    const context = {
-      environmentId: '',
-      environmentType: '',
-      websiteCode: '',
-      storeCode: '',
-      storeViewCode: '',
-      apiUrl: '',
-      apiKey: '',
-      config: {
-        optimizeImages: true,
-        imageBaseWidth: 200,
-      },
-      context: {},
-      route: undefined,
-      searchQuery: 'q',
-    };
-
     const { container } = render(
       <ProductItem
         item={sampleProductNotDiscounted}
diff --git a/src/components/ProductItem/ProductPrice.tsx b/src/components/ProductItem/ProductPrice.tsx
index f0026b28..6dec81cd 100644
--- a/src/components/ProductItem/ProductPrice.tsx
+++ b/src/components/ProductItem/ProductPrice.tsx
@@ -12,7 +12,7 @@ import { useContext } from 'preact/hooks';
 
 import { TranslationContext } from '../../context/translation';
 import { Product, RefinedProduct } from '../../types/interface';
-import { getProductPrice, getOnlyProductPrice } from '../../utils/getProductPrice';
+import { getOnlyProductPrice,getProductPrice } from '../../utils/getProductPrice';
 
 export interface ProductPriceProps {
   isComplexProductView: boolean;
@@ -147,31 +147,16 @@ export const ProductPrice: FunctionComponent<ProductPriceProps> = ({
       </>
     ) : (
         <>
-        <meta itemProp="price" content={getOnlyProductPrice(
+          <meta itemProp="price" content={getOnlyProductPrice(
             item,
             currencyRate,
             false,
             true)}/>
-    {getProductPrice(item, currencySymbol, currencyRate, false, true)}
+          {getProductPrice(item, currencySymbol, currencyRate, false, true)}
         </>
-  )
-    ;
-    const discountedPriceTranslation = translation.ProductCard.asLowAs;
-    const discountedPriceTranslationOrder =
-      discountedPriceTranslation.split('{discountPrice}');
+      );
+
     return discountPrice;
-    // return discountedPriceTranslationOrder.map((word: string, index: any) =>
-    //   word === '' ? (
-    //     discountPrice
-    //   ) : (
-    //     <span
-    //       className="text-brand-300 font-headline-4-default mr-xs"
-    //       key={index}
-    //     >
-    //       {word}
-    //     </span>
-    //   )
-    // );
   };
 
   return (
diff --git a/src/components/ProductList/ProductList.test.tsx b/src/components/ProductList/ProductList.test.tsx
index 47051357..fa556a1c 100644
--- a/src/components/ProductList/ProductList.test.tsx
+++ b/src/components/ProductList/ProductList.test.tsx
@@ -14,7 +14,7 @@ import { ProductList } from './ProductList';
 describe('WidgetSDK - UIKit/ProductList', () => {
   test('renders', () => {
     const { container } = render(
-      <ProductList products={[]} numberOfColumns={0} showFilters={true} />
+      <ProductList products={[]} numberOfColumns={0} showFilters={true} franchises={[]}/>
     );
 
     const elem = container.querySelector('.ds-sdk-product-list');
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index e1ffa094..e10df0ac 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -35,6 +35,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
   franchise,
   franchises,
   numberOfColumns,
+  disableAllPurchases,
   setCartUpdated,
   setItemAdded,
   setError,
@@ -64,6 +65,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
             currencySymbol={currencySymbol}
             currencyRate={currencyRate}
             categoryConfig={categoryConfig}
+            disableAllPurchases={disableAllPurchases}
             setRoute={setRoute}
             refineProduct={refineProduct}
             setCartUpdated={setCartUpdated}
@@ -161,6 +163,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
               currencySymbol={currencySymbol}
               currencyRate={currencyRate}
               categoryConfig={categoryConfig}
+              disableAllPurchases={disableAllPurchases}
               setRoute={setRoute}
               refineProduct={refineProduct}
               setCartUpdated={setCartUpdated}
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index f3346455..78af3390 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -15,6 +15,7 @@ import Loading from 'src/components/Loading';
 import Shimmer from 'src/components/Shimmer';
 
 import { CategoryFilters } from '../components/CategoryFilters';
+import {FranchiseViewSelector} from "../components/Facets/FranchiseViewSelector";
 import {
   useProducts,
   useSearch,
@@ -24,7 +25,6 @@ import {
 } from '../context';
 import { MobileFilterHeader } from './MobileFilterHeader';
 import { ProductsContainer } from './ProductsContainer';
-import {FranchiseViewSelector} from "../components/Facets/FranchiseViewSelector";
 
 
 export const App: FunctionComponent = () => {
diff --git a/src/containers/ProductsHeader.tsx b/src/containers/ProductsHeader.tsx
index 2ccc606a..b5f9db98 100644
--- a/src/containers/ProductsHeader.tsx
+++ b/src/containers/ProductsHeader.tsx
@@ -13,7 +13,6 @@ import ViewSwitcher from 'src/components/ViewSwitcher';
 
 import Facets from '../components/Facets';
 import { FilterButton } from '../components/FilterButton';
-import { SearchBar } from '../components/SearchBar';
 import { SortDropdown } from '../components/SortDropdown';
 import {
   useAttributeMetadata,
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 25d3baab..f2791716 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -38,7 +38,6 @@ import { useAttributeMetadata } from './attributeMetadata';
 import { useSearch } from './search';
 import { useStore } from './store';
 import { useTranslation } from './translation';
-import store from "store2";
 
 interface WithChildrenProps {
   children?: any;
diff --git a/src/context/search.tsx b/src/context/search.tsx
index e4d71843..33eb0ffe 100644
--- a/src/context/search.tsx
+++ b/src/context/search.tsx
@@ -16,7 +16,7 @@ import {
   ProductSearchSortInput,
   SearchClauseInput,
 } from '../types/interface';
-import {CATEGORY_SORT_DEFAULT, SEARCH_SORT_DEFAULT} from '../utils/constants';
+import { SEARCH_SORT_DEFAULT } from '../utils/constants';
 import {
   addUrlFilter,
   getValueFromUrl,
@@ -25,7 +25,6 @@ import {
 } from '../utils/handleUrlFilters';
 import { generateGQLSortInput } from '../utils/sort';
 import { useStore } from './store';
-import store from "store2";
 
 interface SearchContextProps {
   phrase: string;
diff --git a/src/context/store.tsx b/src/context/store.tsx
index 050c87df..6bbcb352 100644
--- a/src/context/store.tsx
+++ b/src/context/store.tsx
@@ -15,7 +15,6 @@ import {
   RedirectRouteFunc,
   StoreDetailsConfig,
 } from '../types/interface';
-import {useState} from "react";
 
 interface WithChildrenProps {
   children?: any;
@@ -44,6 +43,7 @@ const StoreContext = createContext<StoreDetailsProps>({
   apiUrl: '',
   apiKey: '',
   config: {
+    disableAllPurchases: false,
     addToCart: () => Promise.resolve({user_errors: []})
   },
   context: {},
diff --git a/src/utils/getProductPrice.ts b/src/utils/getProductPrice.ts
index 6d5d83d9..fe25f1c4 100644
--- a/src/utils/getProductPrice.ts
+++ b/src/utils/getProductPrice.ts
@@ -9,7 +9,7 @@ it.
 
 import getSymbolFromCurrency from 'currency-symbol-map';
 
-import { Product, RefinedProduct, Money } from '../types/interface';
+import { Money,Product, RefinedProduct } from '../types/interface';
 
 const computeProductPrice = (
     product: Product | RefinedProduct,
diff --git a/src/utils/tests/utils.test.ts b/src/utils/tests/utils.test.ts
index 1e44ab74..8338c6c5 100644
--- a/src/utils/tests/utils.test.ts
+++ b/src/utils/tests/utils.test.ts
@@ -87,6 +87,7 @@ describe('test validating storeDetails.', () => {
         allowAllProducts: false,
         optimizeImages: true,
         imageBaseWidth: 200,
+        disableAllPurchases: false,
         addToCart: () => Promise.resolve({user_errors: []}),
       },
       context: {
@@ -116,6 +117,7 @@ describe('test validating storeDetails.', () => {
         allowAllProducts: false,
         optimizeImages: true,
         imageBaseWidth: 200,
+        disableAllPurchases: false,
         addToCart: () => Promise.resolve({user_errors: []}),
       },
       context: {

From ec8ae4a4126a3017d96469c1d6ea752d71ccdbb4 Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Thu, 22 Aug 2024 15:00:43 +0200
Subject: [PATCH 093/160] Allow Swatch filtering (segmentation) in category PLP

---
 src/components/ProductItem/ProductItem.tsx |  4 ++--
 src/utils/productUtils.ts                  | 22 +++++++++++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 89e9dd7a..93fc8ce4 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -87,7 +87,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const prevSelectedSwatch = useRef<string | null>(null);
   const { viewType } = useProducts();
   const {
-    config: { optimizeImages, imageBaseWidth, listview, imageBackgroundColor },
+    config: { optimizeImages, imageBaseWidth, listview, imageBackgroundColor, currentCategoryId },
   } = useStore();
 
   const { screenSize } = useSensor();
@@ -177,7 +177,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     && !showSizes
     && quickAddStatus === QUICK_ADD_STATUS_IDLE;
 
-  const colorSwatchesFromAttribute = useMemo(() => getColorSwatchesFromAttribute(item), [item]);
+  const colorSwatchesFromAttribute = useMemo(() => getColorSwatchesFromAttribute(item, currentCategoryId), [item]);
   let colorSwatches: SwatchValues[] = [];
   if (colorSwatchesFromAttribute && colorSwatchesFromAttribute.length > 0) {
     colorSwatches = colorSwatchesFromAttribute.map((swatch: any) => {
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 27c00e3e..b93b979d 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -49,7 +49,7 @@ function getColorSwatcheConfigFromAttribute(item: Product) {
 * 6. Validate if the option has the attribute type as "visual" and show_swatches is true
 * 7. If the above condition is met, return the image options
 */
-function getColorSwatchesFromAttribute(item: Product) {
+function getColorSwatchesFromAttribute(item: Product, categoryId?: string) {
   if (isSportsWear(item)) {
     return null;
   }
@@ -59,14 +59,13 @@ function getColorSwatchesFromAttribute(item: Product) {
     return null;
   }
 
-  const categoryId = '3197';
   const { productView } = item;
   const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
   const colorOptions = productOptions?.[0];
   if (!colorOptions) {
     return null;
   }
-  const segmentedOptions = getSegmentedOptions(item, colorOptions.id, categoryId);
+  const segmentedOptions = categoryId ? getSegmentedOptions(item, colorOptions.id, categoryId) : null;
 
   return colorOptions?.values?.filter((option: any) => !segmentedOptions || segmentedOptions.includes(option.id))
     .map((option: any) => {
@@ -80,6 +79,23 @@ function getColorSwatchesFromAttribute(item: Product) {
   });
 }
 
+/**
+ * When product has attribute `eds_segmentation`.
+ * eds_segmentation contains an array of optionUID:categoryIDs pairs.
+ * This enables a given option of the product for a one or more categories.
+ *
+ * if the categoryId is found in at least one of the optionUIDs, only
+ * the swatches matching the optionUIDs enabled for that categoryId should be displayed.
+ * If the categoryId is not found in any of the optionUIDs all swatches should be displayed
+ *
+ * @param item Product Item
+ * @param optionId id of the option
+ * @param categoryId id of the current category
+ * @returns array of optionUIDs(swatches) that must be displayed for current product in the current category,
+ * or null if all optionUIDs(swatches) must be shown for the current product in the current category.
+ *
+ * For more information see https://amersports.atlassian.net/browse/WAF-116
+ */
 function getSegmentedOptions(item: Product, optionId: string | null, categoryId: string) {
   const edsSegmentation = item.productView?.attributes?.find(({name}) => name === 'eds_segmentation')?.value;
   if (!edsSegmentation) {

From 07db1c365d4cccc14b8832cc5fbc931a8bfef254 Mon Sep 17 00:00:00 2001
From: Yugandhar Kamdi <yugandhar.kamdi@gmail.com>
Date: Thu, 22 Aug 2024 21:23:21 +0530
Subject: [PATCH 094/160] WAF-145: Address feedback points (#31)

* Remove displayByFranchise from store config

* Load 4 rows on load more and fix CSS
---
 src/api/search.ts                           |  6 ++++-
 src/components/Facets/SelectedFilters.tsx   |  2 +-
 src/components/ProductList/ProductList.tsx  |  4 +++-
 src/components/ProductList/product-list.css | 25 +++++++++++----------
 src/containers/App.tsx                      |  3 ++-
 src/context/products.tsx                    |  1 -
 src/context/search.tsx                      |  2 +-
 src/types/interface.ts                      |  1 -
 8 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index cb5a05c6..01f4a8a4 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -78,7 +78,11 @@ const getFranchiseSearch = async ({
         ${category.split('/').at(-1)?.replaceAll('-', '')}: productSearch(
           phrase: "",
           filter: [
-            { attribute: "categoryPath", eq: "${category}" }
+            { attribute: "categoryPath", eq: "${category}" },
+            { 
+              attribute: "pcm_product_salability",
+              in: ["STANDARD", "COMING_SOON", "DRAW_CAMPAIGN", "EARLY_ACCESS", "SOLD_OUT", "PRE_ORDER", "NOT_SOLD_ONLINE"],
+            }
           ]
         ) {
           items {
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 564ed5a4..5a324999 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -86,7 +86,7 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
       {!searchCtx.displayFranchises && (
         <p className="result-count">{totalCount} Results</p>
       )}
-      {storeCtx.config.displayByFranchise && (
+      {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '1' && (
         <FranchiseViewSelector />
       )}
     </div>
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index e10df0ac..3e3e0af4 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -25,6 +25,8 @@ type FranchiseProps = Omit<ProductProps, "item"> & {
   numberOfColumns: number;
 };
 
+const NEXT_NUMBER_OF_ROWS = 4;
+
 const Franchises : FunctionComponent<FranchiseProps> = ({
    currencySymbol,
    currencyRate,
@@ -75,7 +77,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
         ))}
       </div>
       {page * numberOfColumns < franchises[franchise].items.length &&
-        <button onClick={() => setPage((p) => p + 1)} className="button secondary load-more">Load More</button>
+        <button onClick={() => setPage((p) => p + NEXT_NUMBER_OF_ROWS)} className="button secondary load-more">Load More</button>
       }
 
     </div>
diff --git a/src/components/ProductList/product-list.css b/src/components/ProductList/product-list.css
index 26f250bc..fa56e55a 100644
--- a/src/components/ProductList/product-list.css
+++ b/src/components/ProductList/product-list.css
@@ -1,8 +1,8 @@
 /* https://cssguidelin.es/#bem-like-naming */
 .ds-sdk-product-list .franchises h2 {
-  font-size: var(--heading-font-size-l);
+  font-size: var(--heading-font-size-xxxs);
   font-family: var(--ff-gt-america-expanded-bold);
-  margin-bottom: 0;
+  margin-bottom: 10px;
 }
 
 .ds-sdk-product-list .franchises {
@@ -19,25 +19,26 @@
 
 .ds-sdk-product-list .franchises .franchise-header {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 50px;
+  align-items: flex-start;
+  margin-bottom: 30px;
 }
 
 .ds-sdk-product-list .franchises .franchise-header a {
   text-decoration: underline;
 }
 
-
-@media only screen and (max-width: 768px) {
-  .ds-sdk-product-list .franchises .franchise-header {
-    flex-direction: column;
-    align-items: start;
-    margin-bottom: 30px;
+@media only screen and (min-width: 1025px) {
+  .ds-sdk-product-list .franchises h2 {
+    font-size: var(--heading-font-size-l);
+    margin-bottom: 0;
   }
 
-  .ds-sdk-product-list .franchises h2 {
-    margin-bottom: 10px;
+  .ds-sdk-product-list .franchises .franchise-header {
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 50px;
   }
 }
 
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 78af3390..541191c6 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -32,10 +32,11 @@ export const App: FunctionComponent = () => {
   const productsCtx = useProducts();
   const { screenSize } = useSensor();
   const translation = useTranslation();
-  const { displayMode, displayByFranchise } = useStore().config;
+  const { displayMode, categoryConfig } = useStore().config;
   const [showFilters, setShowFilters] = useState(true);
 
   const loadingLabel = translation.Loading.title;
+  const displayByFranchise = categoryConfig?.pcm_display_by_franchise === '1';
 
   return (
     <>
diff --git a/src/context/products.tsx b/src/context/products.tsx
index f2791716..2a2afd45 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -258,7 +258,6 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     resolveCartId: storeCtx.config.resolveCartId,
     addToCart: storeCtx.config.addToCart,
     disableAllPurchases: storeCtx.config.disableAllPurchases,
-    displayByFranchise: storeCtx.config.displayByFranchise,
     franchises,
   };
 
diff --git a/src/context/search.tsx b/src/context/search.tsx
index 33eb0ffe..5eb4ff30 100644
--- a/src/context/search.tsx
+++ b/src/context/search.tsx
@@ -135,7 +135,7 @@ const SearchProvider: FunctionComponent = ({ children }) => {
     setFilterCount(count);
   }, [filters]);
 
-  const displayFranchises = (storeCtx.config.displayByFranchise || false)
+  const displayFranchises = storeCtx.config.categoryConfig?.pcm_display_by_franchise === '1'
     && (filters.length === 0)
     && (sort.length === 1)
     && (sort[0].attribute === 'relevance')
diff --git a/src/types/interface.ts b/src/types/interface.ts
index ed0939bf..0f4cd2e4 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -53,7 +53,6 @@ export interface StoreDetailsConfig {
     text: string;
     url: string;
   }>;
-  displayByFranchise?: boolean;
   preCheckedFilters?: Array<{
     key: string;
     value: string;

From 9b6a38e8d3bd50f21fca775967882ec1939442b0 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Sat, 24 Aug 2024 00:04:55 +0530
Subject: [PATCH 095/160] Fix franchise pagination

---
 src/api/search.ts                          | 17 +++++++-
 src/components/ProductList/ProductList.tsx | 33 +++++++++++++++-
 src/context/products.tsx                   | 46 ++++++++++++++++++++++
 3 files changed, 93 insertions(+), 3 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index 01f4a8a4..38a2b2be 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -51,6 +51,8 @@ const getFranchiseSearch = async ({
   xRequestId = uuidv4(),
   context,
   categories = [],
+  pageSize = 20,
+  currentPage = 1,
 }: {
   environmentId: string;
   websiteCode: string;
@@ -61,6 +63,8 @@ const getFranchiseSearch = async ({
   xRequestId?: string;
   context?: any;
   categories: string[];
+  pageSize?: number;
+  currentPage?: number;
 }) => {
   const headers = getHeaders({
     environmentId,
@@ -73,10 +77,15 @@ const getFranchiseSearch = async ({
   });
 
   const query = `
-    query getFranchises {
+    query getFranchises(
+      $pageSize: Int = 20
+      $currentPage: Int = 1
+    ) {
       ${categories.map((category) => `
         ${category.split('/').at(-1)?.replaceAll('-', '')}: productSearch(
           phrase: "",
+          page_size: $pageSize
+          current_page: $currentPage
           filter: [
             { attribute: "categoryPath", eq: "${category}" },
             { 
@@ -96,11 +105,17 @@ const getFranchiseSearch = async ({
     ${FranchiseQueryFragment}
   `;
 
+  const variables = {
+    pageSize,
+    currentPage,
+  };
+
   const results = await fetch(apiUrl, {
     method: 'POST',
     headers,
     body: JSON.stringify({
       query: query.replace(/(?:\r\n|\r|\n|\t|[\s]{4})/g, ' ').replace(/\s\s+/g, ' '),
+      variables,
     }),
   }).then((res) => res.json());
 
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 3e3e0af4..77e4b1bd 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -23,6 +23,7 @@ type FranchiseProps = Omit<ProductProps, "item"> & {
   franchise: string;
   franchises: any;
   numberOfColumns: number;
+  getMoreFranchiseProducts: (category: string, pageSize: number, currentPage: number) => void
 };
 
 const NEXT_NUMBER_OF_ROWS = 4;
@@ -41,10 +42,36 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
   setCartUpdated,
   setItemAdded,
   setError,
+  getMoreFranchiseProducts,
   }: FranchiseProps) => {
   const [page, setPage] = useState(1);
   const storeCtx = useStore();
 
+  const totalProductsCount = franchises[franchise]?.count;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const franchiseData = franchises[franchise];
+      if (!franchiseData) {
+        return;
+      }
+
+      const {
+        currentPage,
+        pageSize,
+        path
+      } = franchiseData;
+
+      const requestedProducts = page * numberOfColumns;
+      const fetchedProducts = franchises[franchise].items.length;
+      if (requestedProducts > fetchedProducts) {
+        await getMoreFranchiseProducts(path, pageSize, currentPage + 1);
+      }
+    }
+
+    fetchData();
+  }, [page, franchises, franchise])
+
   return (
     <div className="franchises" key={franchise}>
       <div className="franchise-header">
@@ -53,7 +80,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
           sku: "",
           urlKey: franchises[franchise].title,
           optionsUIDs: null
-        }) ?? franchises[franchise].title}>View all {franchises[franchise].items.length} results</a>
+        }) ?? franchises[franchise].title}>View all {totalProductsCount} results</a>
       </div>
       <div style={{
         gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
@@ -76,7 +103,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
           />
         ))}
       </div>
-      {page * numberOfColumns < franchises[franchise].items.length &&
+      {page * numberOfColumns < totalProductsCount &&
         <button onClick={() => setPage((p) => p + NEXT_NUMBER_OF_ROWS)} className="button secondary load-more">Load More</button>
       }
 
@@ -107,6 +134,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
     refineProduct,
     refreshCart,
     addToCart,
+    getMoreFranchiseProducts,
     disableAllPurchases = false,
   } = productsCtx;
   const [cartUpdated, setCartUpdated] = useState(false);
@@ -171,6 +199,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
               setCartUpdated={setCartUpdated}
               setItemAdded={setItemAdded}
               addToCart={addToCart}
+              getMoreFranchiseProducts={getMoreFranchiseProducts}
             />
           ))}
         </div>)
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 2a2afd45..276f1b64 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -91,6 +91,7 @@ const ProductsContext = createContext<{
     quantity: number
   ) => Promise<{user_errors: any[];}>;
   disableAllPurchases?: boolean;
+  getMoreFranchiseProducts: (category: string, pageSize: number, currentPage: number) => void
 }>({
   variables: {
     phrase: '',
@@ -133,6 +134,7 @@ const ProductsContext = createContext<{
   addToCart: () => Promise.resolve({user_errors: []}),
   disableAllPurchases: false,
   franchises: null,
+  getMoreFranchiseProducts: () => {}
 });
 
 const ProductsContextProvider = ({ children }: WithChildrenProps) => {
@@ -217,6 +219,45 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     return data;
   };
 
+  const getMoreFranchiseProducts = async (categoryPath: string, pageSize: number, currentPage: number) => {
+    if (!categoryPath) {
+      return;
+    }
+
+    const result = await getFranchiseSearch({
+      ...variables,
+      ...storeCtx,
+      pageSize,
+      currentPage,
+      apiUrl: storeCtx.apiUrl,
+      categories: [categoryPath],
+    });
+
+    const category = categoryPath.split('/').at(-1)?.replaceAll('-', '') || '';
+    if (result?.[category]?.items?.length === 0) {
+      return;
+    }
+
+    setFranchises((franchises) => {
+      if (!franchises) {
+        return franchises;
+      }
+      
+      return {
+        ...franchises,
+        [category]: {
+          ...franchises[category],
+          pageSize,
+          currentPage,
+          items: [
+            ...franchises[category].items,
+            ...result[category].items,
+          ],
+        }
+      };
+    });
+  }
+
   const context = {
     variables,
     loading,
@@ -259,6 +300,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     addToCart: storeCtx.config.addToCart,
     disableAllPurchases: storeCtx.config.disableAllPurchases,
     franchises,
+    getMoreFranchiseProducts,
   };
 
   const handleFranchiseSearch = async (data: ProductSearchResponse['data']) => {
@@ -271,6 +313,8 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
     const result = await getFranchiseSearch({
       ...variables,
       ...storeCtx,
+      pageSize: 20,
+      currentPage: 1,
       apiUrl: storeCtx.apiUrl,
       categories: categories.map((c) => c.title),
     });
@@ -280,6 +324,8 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
       result[key] = {
         ...category,
         ...result[key],
+        currentPage: 1,
+        pageSize: 20,
       }
     });
 

From 1e467231c1fa2d89dbe5789834598348363d2571 Mon Sep 17 00:00:00 2001
From: Maksym Yakobchuk <miakobchuk@gmail.com>
Date: Fri, 23 Aug 2024 15:39:31 -0500
Subject: [PATCH 096/160] added additional data for plp-events

---
 src/api/search.ts                          | 2 +-
 src/components/ProductItem/ProductItem.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index 01f4a8a4..ad0d2995 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -239,7 +239,7 @@ const getProductSearch = async ({
     window.adobeDataLayer.push((dl: any) => {
       dl.push({
         event: 'search-results-view',
-        eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID },
+        eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID, searchResults: results?.data?.productSearch },
       });
     });
   }
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 93fc8ce4..c47d7d4b 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -200,6 +200,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
         eventInfo: {
           ...dl.getState(),
           sku: product?.sku,
+          productView,
           searchUnitId: SEARCH_UNIT_ID,
         },
       });

From 3b09a516d3b22b3dede72a9398dfa79cd5c7b8fa Mon Sep 17 00:00:00 2001
From: Maksym Yakobchuk <miakobchuk@gmail.com>
Date: Mon, 26 Aug 2024 14:47:11 -0500
Subject: [PATCH 097/160] searchRequest data was replaced with specific
 attributes data

---
 src/api/search.ts                          | 2 +-
 src/components/ProductItem/ProductItem.tsx | 1 -
 src/context/events.tsx                     | 6 ++++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index fab29581..38a2b2be 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -254,7 +254,7 @@ const getProductSearch = async ({
     window.adobeDataLayer.push((dl: any) => {
       dl.push({
         event: 'search-results-view',
-        eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID, searchResults: results?.data?.productSearch },
+        eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID },
       });
     });
   }
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index c47d7d4b..93fc8ce4 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -200,7 +200,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
         eventInfo: {
           ...dl.getState(),
           sku: product?.sku,
-          productView,
           searchUnitId: SEARCH_UNIT_ID,
         },
       });
diff --git a/src/context/events.tsx b/src/context/events.tsx
index 1ff579b1..54c34f98 100644
--- a/src/context/events.tsx
+++ b/src/context/events.tsx
@@ -122,7 +122,13 @@ const createProducts = (
     price:
       item?.productView?.price?.final?.amount?.value ??
       item?.product?.price_range?.minimum_price?.final_price?.value,
+    priceRange: item?.productView?.priceRange,
     rank: index,
+    ratingCount: item?.productView?.attributes.find((attr) => attr.name === 'bv_rating_count')?.value ?? '0',
+    ratingAverage: item?.productView?.attributes.find((attr) => attr.name === 'bv_rating_average')?.value ?? '0',
+    articleNumber: item?.productView?.attributes.find((attr) => attr.name === 'pim_article_code')?.value || '',
+    modelNumber: item?.productView?.attributes.find((attr) => attr.name === 'pim_model_code')?.value || '',
+    season: item?.productView?.attributes.find((attr) => attr.name === 'pim_season_dev')?.value || '',
   }));
 
   return products;

From 4752559b2cdbb98167e61f5b290cbf7227e1ad8c Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 12 Aug 2024 10:09:06 +0200
Subject: [PATCH 098/160] WAF-296 - Added centering containers and styling

---
 src/components/Facets/Facets.css           | 11 +++
 src/components/Facets/Facets.tsx           | 94 +++++++++++-----------
 src/components/ProductList/ProductList.tsx |  2 +-
 src/containers/App.tsx                     |  2 +-
 src/styles/index.css                       | 16 ++++
 5 files changed, 78 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Facets/Facets.css

diff --git a/src/components/Facets/Facets.css b/src/components/Facets/Facets.css
new file mode 100644
index 00000000..2a8372a9
--- /dev/null
+++ b/src/components/Facets/Facets.css
@@ -0,0 +1,11 @@
+.ds-plp-facets__center-container {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+@media (width > 1024px) {
+  .ds-plp-facets__center-container {
+    padding: 0 48px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 3fec6301..15de6093 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -31,6 +31,8 @@ import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
 import { SelectedFilters } from './SelectedFilters';
 
+import '../Facets/Facets.css';
+
 interface FacetsProps {
   searchFacets: FacetType[];
   totalCount?: number;
@@ -119,53 +121,55 @@ export const Facets: FunctionComponent<FacetsProps> = ({
 
   return (
     <div className="ds-plp-facets flex flex-col">
-      <div className="border-t border-b border-neutral-500 flex justify-between items-center">
-        <form className="ds-plp-facets__list flex gap-x-6">
-          {searchFacets?.map((facet) => {
-            const bucketType = facet?.buckets[0]?.__typename;
-            switch (bucketType) {
-              case 'ScalarBucket':
-                return (
-                  <ScalarFacet
-                    key={facet.attribute}
-                    filterData={facet}
-                    handleFilter={() => handleTesting(facet)}
-                    selectedNumber={getSelectedFilters(facet)}
-                    selectedFacet={selectedFacet}
-                  />
-                );
-              case 'RangeBucket':
-                return config?.priceSlider ? (
-                  <SliderDoubleControl filterData={facet as PriceFacet} />
-                ) : (
-                  <RangeFacet
-                    key={facet.attribute}
-                    filterData={facet as PriceFacet}
-                  />
-                );
-              case 'CategoryView':
-                return (
-                  <ScalarFacet
-                    key={facet.attribute}
-                    filterData={facet}
-                    handleFilter={() => handleTesting(facet)}
-                    selectedNumber={getSelectedFilters(facet)}
-                    selectedFacet={selectedFacet}
-                  />
-                );
-              default:
-                return null;
-            }
-          })}
-        </form>
-        <SortDropdown
-          sortOptions={sortOptions}
-          value={sortBy}
-          onChange={onSortChange}
-        />
+      <div className="border-t border-b border-neutral-500">
+        <div className="ds-plp-facets__center-container flex justify-between items-center">
+          <form className="ds-plp-facets__list flex gap-x-6">
+            {searchFacets?.map((facet) => {
+              const bucketType = facet?.buckets[0]?.__typename;
+              switch (bucketType) {
+                case 'ScalarBucket':
+                  return (
+                    <ScalarFacet
+                      key={facet.attribute}
+                      filterData={facet}
+                      handleFilter={() => handleTesting(facet)}
+                      selectedNumber={getSelectedFilters(facet)}
+                      selectedFacet={selectedFacet}
+                    />
+                  );
+                case 'RangeBucket':
+                  return config?.priceSlider ? (
+                    <SliderDoubleControl filterData={facet as PriceFacet} />
+                  ) : (
+                    <RangeFacet
+                      key={facet.attribute}
+                      filterData={facet as PriceFacet}
+                    />
+                  );
+                case 'CategoryView':
+                  return (
+                    <ScalarFacet
+                      key={facet.attribute}
+                      filterData={facet}
+                      handleFilter={() => handleTesting(facet)}
+                      selectedNumber={getSelectedFilters(facet)}
+                      selectedFacet={selectedFacet}
+                    />
+                  );
+                default:
+                  return null;
+              }
+            })}
+          </form>
+          <SortDropdown
+            sortOptions={sortOptions}
+            value={sortBy}
+            onChange={onSortChange}
+          />
+        </div>
       </div>
       {selectedFacet && (
-        <div>
+        <div className="ds-plp-facets__center-container">
           <FilterSelectionGroup
             title={selectedFacet.title}
             attribute={selectedFacet.attribute}
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 77e4b1bd..b934ccb1 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -231,7 +231,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
           style={{
             gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
           }}
-          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6"
+          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm md:gap-x-9 md:gap-y-9"
         >
           {products?.map((product) => (
             <ProductItem
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 541191c6..a9eb3d29 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -67,7 +67,7 @@ export const App: FunctionComponent = () => {
               )}
               <Enrichment position={'above-grid'} />
               <div
-                className={`ds-widgets_results flex flex-col items-center flex-[75] `}
+                className={`ds-widgets_results flex flex-col items-center flex-[75] ds-widgets-results__center-container `}
               >
                 <ProductsContainer showFilters={showFilters} />
               </div>
diff --git a/src/styles/index.css b/src/styles/index.css
index daf9849a..32704183 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -943,9 +943,15 @@ video {
     -moz-column-gap: var(--spacing-sm);
          column-gap: var(--spacing-sm);
   }
+  .gap-x-9 {
+     column-gap: 2.4rem;
+   }
   .gap-y-8 {
     row-gap: 2rem;
   }
+  .gap-y-9 {
+    row-gap: 2.4rem;
+  }
   .space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1595,6 +1601,16 @@ video {
       justify-content: space-between;
     }
   }
+  @media (min-width: 768px) {
+    .md\:gap-x-9 {
+      column-gap: 2.4rem;
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:gap-y-9 {
+      row-gap: 2.4rem;
+    }
+  }
   @media (min-width: 1024px) {
     .lg\:h-\[248px\] {
       height: 248px;

From bbf87fe43e9f7387138d5756c112c2529362624c Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 14 Aug 2024 11:35:02 +0200
Subject: [PATCH 099/160] WAF-296 - Changes after Erika request

---
 src/components/Facets/Facets.css |  7 +++++++
 src/components/Facets/Facets.tsx | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Facets/Facets.css b/src/components/Facets/Facets.css
index 2a8372a9..37036830 100644
--- a/src/components/Facets/Facets.css
+++ b/src/components/Facets/Facets.css
@@ -2,6 +2,13 @@
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
+  padding: 0 12px;
+}
+
+@media (width > 768px) {
+  .ds-plp-facets__center-container {
+    padding: 0 24px;
+  }
 }
 
 @media (width > 1024px) {
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 15de6093..32fe414b 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -168,19 +168,19 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           />
         </div>
       </div>
+      <div className="ds-plp-facets__center-container">
       {selectedFacet && (
-        <div className="ds-plp-facets__center-container">
-          <FilterSelectionGroup
-            title={selectedFacet.title}
-            attribute={selectedFacet.attribute}
-            buckets={selectedFacet.buckets as any}
-            isSelected={isSelected}
-            onChange={(args) => onFacetChange(args.value, args.selected, args.type)}
-            type={isCategory && selectedFacet?.buckets[0]?.__typename  === 'CategoryView' ? 'link' : 'checkbox'}
-          />
-        </div>
+        <FilterSelectionGroup
+          title={selectedFacet.title}
+          attribute={selectedFacet.attribute}
+          buckets={selectedFacet.buckets as any}
+          isSelected={isSelected}
+          onChange={(args) => onFacetChange(args.value, args.selected, args.type)}
+          type={isCategory && selectedFacet?.buckets[0]?.__typename  === 'CategoryView' ? 'link' : 'checkbox'}
+        />
       )}
       <SelectedFilters totalCount={totalCount} />
+      </div>
     </div>
   );
 };

From 95308af132f47412304c5e5cc26061ecfd4229a6 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Thu, 15 Aug 2024 16:47:19 +0200
Subject: [PATCH 100/160] WAF-296 - Changes for plp blocks

---
 src/components/ProductList/ProductList.tsx | 2 +-
 src/containers/App.tsx                     | 2 +-
 src/containers/ProductsContainer.tsx       | 2 +-
 src/styles/index.css                       | 3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index b934ccb1..8e525e87 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -147,7 +147,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
   const {displayFranchises } = useSearch();
 
   const className = showFilters
-    ? 'ds-sdk-product-list bg-body max-w-full pl-3 pb-2xl sm:pb-24'
+    ? 'ds-sdk-product-list bg-body max-w-full pb-2xl sm:pb-24'
     : 'ds-sdk-product-list bg-body w-full mx-auto pb-2xl sm:pb-24';
 
   useEffect(() => {
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index a9eb3d29..497e5a5f 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -84,7 +84,6 @@ export const App: FunctionComponent = () => {
             )}
             <Enrichment position={'below-title'} />
             <div className="flex flex-col">
-              <Enrichment position={'above-grid'} />
               <div className="ds-widgets_results flex flex-col items-center flex-[75]">
                 <div className="flex w-full h-full">
                   {!screenSize.mobile &&
@@ -121,6 +120,7 @@ export const App: FunctionComponent = () => {
                     {displayByFranchise && (
                       <FranchiseViewSelector />
                     )}
+                    <Enrichment position={'above-grid'} />
                     <ProductsContainer
                       showFilters={showFilters && productsCtx.facets.length > 0}
                     />
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index 9b916bfa..a2febaf9 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -117,7 +117,7 @@ export const ProductsContainer: FunctionComponent<Props> = ({
         />
       )}
       <div
-        className={`flex ${screenSize.desktop ? 'flex-row' : 'flex-col gap-4'} justify-between max-w-full ${
+        className={`flex ${screenSize.desktop ? 'flex-row' : 'flex-col gap-4'} pb-24 justify-between max-w-full ${
           showFilters ? 'mx-auto' : 'mr-auto'
         } w-full h-full text-[14px] font-normal`}
       >
diff --git a/src/styles/index.css b/src/styles/index.css
index 32704183..7a58771c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1236,6 +1236,9 @@ video {
   .pb-\[122\.22\%\] {
     padding-bottom: 122.22%;
   }
+  .pb-24 {
+    padding-bottom: 2.4rem;
+  }
   .pl-3 {
     padding-left: 0.75rem;
   }

From c7b5b1c047ef92990a99baa5c3623d2dec256bad Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Fri, 23 Aug 2024 14:44:08 +0200
Subject: [PATCH 101/160] WAF-296 - Tailwind review fix

---
 src/components/Facets/Facets.css | 18 ------------------
 src/components/Facets/Facets.tsx |  4 ++--
 src/styles/index.css             | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/Facets/Facets.css

diff --git a/src/components/Facets/Facets.css b/src/components/Facets/Facets.css
deleted file mode 100644
index 37036830..00000000
--- a/src/components/Facets/Facets.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.ds-plp-facets__center-container {
-  width: 100%;
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 0 12px;
-}
-
-@media (width > 768px) {
-  .ds-plp-facets__center-container {
-    padding: 0 24px;
-  }
-}
-
-@media (width > 1024px) {
-  .ds-plp-facets__center-container {
-    padding: 0 48px;
-  }
-}
\ No newline at end of file
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 32fe414b..cfb8a11a 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -122,7 +122,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   return (
     <div className="ds-plp-facets flex flex-col">
       <div className="border-t border-b border-neutral-500">
-        <div className="ds-plp-facets__center-container flex justify-between items-center">
+        <div className="flex justify-between items-center px-[12px] md:px-[24px] lg:px-[48px] mx-auto w-full max-w-[1600px]">
           <form className="ds-plp-facets__list flex gap-x-6">
             {searchFacets?.map((facet) => {
               const bucketType = facet?.buckets[0]?.__typename;
@@ -168,7 +168,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           />
         </div>
       </div>
-      <div className="ds-plp-facets__center-container">
+      <div className="px-[12px] md:px-[24px] lg:px-[48px] mx-auto w-full max-w-[1600px]">
       {selectedFacet && (
         <FilterSelectionGroup
           title={selectedFacet.title}
diff --git a/src/styles/index.css b/src/styles/index.css
index 7a58771c..09d88b7a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -781,6 +781,9 @@ video {
   .max-w-\[21rem\] {
     max-width: 21rem;
   }
+  .max-w-\[1600px\] {
+    max-width: 1600px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1614,6 +1617,12 @@ video {
       row-gap: 2.4rem;
     }
   }
+  @media (min-width: 768px) {
+    .md\:px-\[24px\] {
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+  }
   @media (min-width: 1024px) {
     .lg\:h-\[248px\] {
       height: 248px;
@@ -1657,6 +1666,12 @@ video {
       padding-bottom: 10px;
     }
   }
+  @media (min-width: 1024px) {
+    .lg\:px-\[48px\] {
+      padding-left: 48px;
+      padding-right: 48px;
+    }
+  }
   @media (min-width: 1280px) {
     .xl\:gap-x-4 {
       -moz-column-gap: 1rem;

From 6aa14a6a4e35a6b5c22a675288da8abc7613a9dd Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Thu, 29 Aug 2024 17:33:28 +0200
Subject: [PATCH 102/160] WAF-116 - fix for team specific PLP

---
 src/utils/productUtils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index b93b979d..2f6177eb 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -105,8 +105,8 @@ function getSegmentedOptions(item: Product, optionId: string | null, categoryId:
   const parsedSegmentation = JSON.parse(edsSegmentation);
   if (parsedSegmentation?.['attribute_code'] === optionId) {
     const segmentedOptions = parsedSegmentation.options
-        .filter((option: any) => option?.categories?.split()?.includes(categoryId))
-        .map((option:any) => option.id);
+      .filter((option: any) => option?.categories?.split(',')?.includes(categoryId))
+      .map((option:any) => option.id);
     return segmentedOptions.length > 0 ? segmentedOptions : null;
   }
   return null;

From fb529ce4e1459c035b7c6beff60f15bf93242188 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Fri, 30 Aug 2024 08:54:28 +0200
Subject: [PATCH 103/160] WAF-296 - Fix for facets css

---
 src/components/Facets/Facets.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index cfb8a11a..5110b3eb 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -31,8 +31,6 @@ import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
 import { SelectedFilters } from './SelectedFilters';
 
-import '../Facets/Facets.css';
-
 interface FacetsProps {
   searchFacets: FacetType[];
   totalCount?: number;

From 83d005dca3534b72c92416ccccb81e48e5b4c30d Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Mon, 2 Sep 2024 17:31:03 +0530
Subject: [PATCH 104/160] Fix weird hover effect and category filter display

---
 .../FilterSelection/FilterSelectionGroup.tsx           |  3 +--
 src/components/ProductItem/ProductItem.tsx             | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/FilterSelection/FilterSelectionGroup.tsx b/src/components/FilterSelection/FilterSelectionGroup.tsx
index 4ec08bb7..9ebbceb2 100644
--- a/src/components/FilterSelection/FilterSelectionGroup.tsx
+++ b/src/components/FilterSelection/FilterSelectionGroup.tsx
@@ -53,7 +53,6 @@ export const FilterSelectionGroup: FunctionComponent<
     const {
       currencyRate = '1',
       currencySymbol = '$',
-      categoryPath,
     } = productsCtx;
 
     const formatPrice = (value: number) =>
@@ -74,7 +73,7 @@ export const FilterSelectionGroup: FunctionComponent<
     }
 
     if (bucket.__typename === 'CategoryView') {
-      return categoryPath ? bucket.name ?? bucket.title : bucket.title;
+      return bucket.name ? bucket.name : bucket.title;
     }
 
     if (bucket.title === BOOLEAN_YES) {
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 93fc8ce4..c0fb7fa3 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -268,7 +268,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             <a
               href={productUrl as string}
               onClick={onProductClick}
-              className="!text-brand-700 hover:no-underline hover:text-brand-700"
+              className="!text-brand-700 hover:no-underline"
             >
               {/* Image */}
               {productImageArray.length ? (
@@ -293,7 +293,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
               <a
                 href={productUrl as string}
                 onClick={onProductClick}
-                className="!text-brand-700 hover:no-underline hover:text-brand-700"
+                className="!text-brand-700 hover:no-underline"
               >
                 <div className="ds-sdk-product-item__product-name mt-xs text-sm text-brand-700">
                   {product.name !== null && htmlStringDecode(product.name)}
@@ -329,7 +329,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             <a
               href={productUrl as string}
               onClick={onProductClick}
-              className="!text-brand-700 hover:no-underline hover:text-brand-700"
+              className="!text-brand-700 hover:no-underline"
             >
               <ProductPrice
                 item={refinedProduct ?? item}
@@ -348,7 +348,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
             <a
               href={productUrl as string}
               onClick={onProductClick}
-              className="!text-brand-700 hover:no-underline hover:text-brand-700"
+              className="!text-brand-700 hover:no-underline"
             >
               {product.short_description?.html ? (
                 <>
@@ -398,7 +398,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       <a itemProp="url"
         href={productUrl as string}
         onClick={onProductClick}
-        className="!text-brand-700 hover:no-underline hover:text-brand-700"
+        className="!text-brand-700 hover:no-underline"
       >
         <div className="ds-sdk-product-item__main relative flex flex-col justify-between h-full">
           <div className="ds-sdk-product-item__image relative w-full h-full h-[445px] overflow-hidden">

From 58e1b46625672e0cf2bf0cef799c16a7cc4f00c3 Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Tue, 3 Sep 2024 11:35:25 +0200
Subject: [PATCH 105/160] Fix main image for team specific PLP

---
 dev-template.html                          |  4 ++++
 src/components/ProductItem/ProductItem.tsx | 11 ++++++-----
 src/utils/getProductImage.ts               | 11 ++++++-----
 src/utils/productUtils.ts                  | 22 ++++++++++++++--------
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index fe4b6f84..e5adc436 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -78,6 +78,10 @@
         allowAllProducts: false,
         currentCategoryUrlPath: 'sportswear/women', // current category url path, please prefer using currentCategoryId
         currentCategoryId: '488', // current category id
+        /** TEAM SPECIFIC PLP SETTINGS **/
+        // currentCategoryUrlPath: 'basketball/basketballs/chicago-bulls',
+        // currentCategoryId: '3197', // current category id
+        /** END TEAM SPECIFIC PLP **/
         // preCheckedFilters: [{key: 'pim_axis_article_techspec_hand_code_pim_20786' , value: 'Right-hand throw'}],
         // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index c0fb7fa3..0a8a539e 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -74,8 +74,11 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   disableAllPurchases,
 }: ProductProps) => {
   const { product, productView } = item;
-  const defaultColorSwatchId = getDefaultColorSwatchId(item);
+  const {
+    config: { optimizeImages, imageBaseWidth, listview, imageBackgroundColor, currentCategoryId },
+  } = useStore();
 
+  const defaultColorSwatchId = getDefaultColorSwatchId(item, currentCategoryId);
   const [selectedSwatch, setSelectedSwatch] = useState(defaultColorSwatchId);
   const [imagesFromRefinedProduct, setImagesFromRefinedProduct] = useState<
     ProductViewMedia[] | null
@@ -86,9 +89,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const [quickAddStatus, setQuickAddStatus] = useState(QUICK_ADD_STATUS_IDLE);
   const prevSelectedSwatch = useRef<string | null>(null);
   const { viewType } = useProducts();
-  const {
-    config: { optimizeImages, imageBaseWidth, listview, imageBackgroundColor, currentCategoryId },
-  } = useStore();
 
   const { screenSize } = useSensor();
   const translation = useTranslation();
@@ -137,9 +137,10 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     return selected;
   };
 
+
   const productImageArray = imagesFromRefinedProduct
     ? getProductImageURLs(imagesFromRefinedProduct ?? [], 2)
-    : getProductImagesFromAttribute(item);
+    : getProductImagesFromAttribute(item, currentCategoryId);
 
   let optimizedImageArray: { src: string; srcset: any }[] = [];
 
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index e8a9e4a5..314fdcf5 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -6,9 +6,9 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
 accordance with the terms of the Adobe license agreement accompanying
 it.
 */
-
 import { Product, ProductViewMedia } from '../types/interface';
-import { isSportsWear } from './productUtils';
+import { getSegmentedOptions,isSportsWear } from './productUtils';
+
 
 const getProductImageURLs = (
   images: ProductViewMedia[],
@@ -121,7 +121,7 @@ const generateOptimizedImages = (
 * 6. If the product is sports wear, get the images from the option with same the variant id as in product view options found in step 1.
 * 7. If the product is not sports wear, get the images from the first option.
 */
-function getProductImagesFromAttribute(item: Product) {
+function getProductImagesFromAttribute(item: Product, categoryId?: string) {
   const { productView } = item;
   const attributeId = productView?.options?.[0].id;
   if (!attributeId) {
@@ -143,9 +143,10 @@ function getProductImagesFromAttribute(item: Product) {
     }
 
     if (defaultOption && defaultOption.images.length > 0) {
-      const imageConfig = defaultOption.images[0];
+      const segmentedOptions = categoryId ? getSegmentedOptions(item, defaultOption['attribute_id'] || null, categoryId) : null;
+      const imageConfig = defaultOption.images.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id));
       return getAbsoluteImageUrl(item, [imageConfig.image, imageConfig.back_view_image]);
-    } 
+    }
   }
 
   return [];
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 2f6177eb..729c72b7 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -7,7 +7,7 @@ function isSportsWear(product: Product) {
   return department?.value.includes('Sportswear');
 }
 
-function getColorSwatcheConfigFromAttribute(item: Product) {
+function getColorSwatchesConfigFromAttribute(item: Product) {
   if (isSportsWear(item)) {
     return null;
   }
@@ -32,8 +32,8 @@ function getColorSwatcheConfigFromAttribute(item: Product) {
   const attributeId = colorOptions?.id;
 
   return options.find((option: any) => option.attribute_id === attributeId
-    && option.attribute_type === 'visual'
-    && option.show_swatches);
+  && option.attribute_type === 'visual'
+  && option.show_swatches);
 }
 
 /*
@@ -54,7 +54,7 @@ function getColorSwatchesFromAttribute(item: Product, categoryId?: string) {
     return null;
   }
 
-  const colorOptionsFromAttribute = getColorSwatcheConfigFromAttribute(item);
+  const colorOptionsFromAttribute = getColorSwatchesConfigFromAttribute(item);
   if (!colorOptionsFromAttribute) {
     return null;
   }
@@ -97,6 +97,9 @@ function getColorSwatchesFromAttribute(item: Product, categoryId?: string) {
  * For more information see https://amersports.atlassian.net/browse/WAF-116
  */
 function getSegmentedOptions(item: Product, optionId: string | null, categoryId: string) {
+  if (!categoryId) {
+    return null;
+  }
   const edsSegmentation = item.productView?.attributes?.find(({name}) => name === 'eds_segmentation')?.value;
   if (!edsSegmentation) {
     return null;
@@ -113,10 +116,13 @@ function getSegmentedOptions(item: Product, optionId: string | null, categoryId:
 }
 
 
-function getDefaultColorSwatchId(item: Product) {
-  const colorOptionsFromAttribute = getColorSwatcheConfigFromAttribute(item);
-
+function getDefaultColorSwatchId(item: Product, categoryId?: string) {
+  const colorOptionsFromAttribute = getColorSwatchesConfigFromAttribute(item);
+  if (colorOptionsFromAttribute && categoryId) {
+    const segmentedOptions = getSegmentedOptions(item, colorOptionsFromAttribute.attribute_id, categoryId);
+    return colorOptionsFromAttribute?.images?.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id));
+  }
   return colorOptionsFromAttribute?.images?.[0]?.id;
 }
 
-export { isSportsWear, getColorSwatchesFromAttribute, getDefaultColorSwatchId };
+export { isSportsWear, getColorSwatchesFromAttribute, getDefaultColorSwatchId, getSegmentedOptions };

From dd1303fd0f6825123fb8e1819b78b72d2e2f48f1 Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Thu, 5 Sep 2024 11:29:06 +0200
Subject: [PATCH 106/160] WAF-116 - return option id instead of option object

---
 src/utils/productUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 729c72b7..e292a90a 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -120,7 +120,7 @@ function getDefaultColorSwatchId(item: Product, categoryId?: string) {
   const colorOptionsFromAttribute = getColorSwatchesConfigFromAttribute(item);
   if (colorOptionsFromAttribute && categoryId) {
     const segmentedOptions = getSegmentedOptions(item, colorOptionsFromAttribute.attribute_id, categoryId);
-    return colorOptionsFromAttribute?.images?.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id));
+    return colorOptionsFromAttribute?.images?.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id))?.id;
   }
   return colorOptionsFromAttribute?.images?.[0]?.id;
 }

From 50d2116669717017988ee6038c3dd4dc7ac4c405 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Fri, 6 Sep 2024 17:04:38 +0530
Subject: [PATCH 107/160] Add swatches for sportswear PLP

---
 src/api/queries.ts                            |   5 +
 src/components/ProductItem/ProductItem.tsx    | 251 ++++++++++--------
 .../SwatchButtonGroup.test.tsx                |   5 +-
 .../SwatchButtonGroup/SwatchButtonGroup.tsx   |  20 +-
 src/types/interface.ts                        | 121 +++++----
 src/utils/getProductImage.ts                  |  53 ++--
 src/utils/productUtils.ts                     | 101 +++----
 7 files changed, 292 insertions(+), 264 deletions(-)

diff --git a/src/api/queries.ts b/src/api/queries.ts
index b8728867..b9be861b 100644
--- a/src/api/queries.ts
+++ b/src/api/queries.ts
@@ -181,6 +181,11 @@ const REFINE_PRODUCT_QUERY = `
                     values {
                         id
                         title
+                        ... on ProductViewOptionValueSwatch {
+                            inStock
+                            type
+                            value
+                        }
                     }
                 }
                 priceRange {
diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 0a8a539e..22baf441 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -15,11 +15,11 @@ import '../ProductItem/ProductItem.css';
 import { useProducts, useSensor, useStore, useTranslation } from '../../context';
 import NoImage from '../../icons/NoImage.svg';
 import {
+  ColorSwatchFromAttribute,
   Product,
   ProductViewMedia,
   RedirectRouteFunc,
   RefinedProduct,
-  SwatchValues
 } from '../../types/interface';
 import { SEARCH_UNIT_ID } from '../../utils/constants';
 import {
@@ -31,7 +31,7 @@ import { htmlStringDecode } from '../../utils/htmlStringDecode';
 import { getColorSwatchesFromAttribute, getDefaultColorSwatchId, isSportsWear } from '../../utils/productUtils';
 import { AddToCartButton } from '../AddToCartButton';
 import ImageHover from '../ImageHover';
-import { SwatchButtonGroup } from '../SwatchButtonGroup';
+import { Swatch, SwatchButtonGroup } from '../SwatchButtonGroup';
 import ProductPrice from './ProductPrice';
 
 export interface ProductProps {
@@ -55,7 +55,6 @@ export interface ProductProps {
   disableAllPurchases: boolean;
 }
 
-const SWATCH_COLORS = 'Colors';
 const SWATCH_SIZE = 'Size';
 
 const QUICK_ADD_STATUS_IDLE = 'IDLE';
@@ -78,8 +77,6 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     config: { optimizeImages, imageBaseWidth, listview, imageBackgroundColor, currentCategoryId },
   } = useStore();
 
-  const defaultColorSwatchId = getDefaultColorSwatchId(item, currentCategoryId);
-  const [selectedSwatch, setSelectedSwatch] = useState(defaultColorSwatchId);
   const [imagesFromRefinedProduct, setImagesFromRefinedProduct] = useState<
     ProductViewMedia[] | null
   >();
@@ -87,15 +84,100 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const [isHovering, setIsHovering] = useState(false);
   const [showSizes, setShowSizes] = useState(false);
   const [quickAddStatus, setQuickAddStatus] = useState(QUICK_ADD_STATUS_IDLE);
-  const prevSelectedSwatch = useRef<string | null>(null);
   const { viewType } = useProducts();
-
   const { screenSize } = useSensor();
   const translation = useTranslation();
 
+  const { colorSwatches, defaultColorSwatch} = useMemo(() => {
+    const colorSwatchesFromAttribute = getColorSwatchesFromAttribute(productView, currentCategoryId);
+    const colorSwatches: Swatch[] = colorSwatchesFromAttribute.map((swatch: ColorSwatchFromAttribute) => {
+      const {
+        id,
+        image,
+        label,
+        config_sku: sku,
+        config_id: configId,
+      } = swatch;
+
+      let imageUrl = generateOptimizedImages([image], 44, imageBackgroundColor || '', '1:1')[0]?.src;
+      imageUrl = `${imageUrl}&dpr=${Math.round(window.devicePixelRatio)}`;
+
+      return {
+        id,
+        title: label,
+        sku,
+        configId,
+        type: 'IMAGE',
+        value: imageUrl,
+      };
+    });
+
+    const defaultColorOptionId = getDefaultColorSwatchId(item.productView, colorSwatchesFromAttribute)
+    const defaultColorSwatch = defaultColorOptionId ? {
+      sku: item.productView.sku,
+      optionId: defaultColorOptionId,
+    } : null
+
+    return {
+      colorSwatches,
+      defaultColorSwatch
+    }
+  }, [item, currentCategoryId]);
+
+  const [selectedColorSwatch, setSelectedColorSwatch] = useState<{
+    sku: string,
+    optionId: string,
+  } | null>(defaultColorSwatch);
+
+  const prevSelectedSwatch = useRef<{
+    sku: string,
+    optionId: string
+  } | null>(defaultColorSwatch);
+
+  const productSku = refinedProduct?.refineProduct?.sku || product?.sku;
+  const productOptions = refinedProduct?.refineProduct?.options || productView?.options;
+  const sizeOption = productOptions?.find((option) => option.title === SWATCH_SIZE);
+  const sizeSwatches: Swatch[] = (sizeOption?.values ?? []).map((swatch) => ({
+    ...swatch,
+    type: 'SIZE',
+    sku: productSku,
+  }));
+
   useEffect(() => {
-    prevSelectedSwatch.current = selectedSwatch;
-  }, [selectedSwatch]);
+    let isSwatchUpdated = false;
+    async function fetchData() {
+      try {
+          if (!selectedColorSwatch) {
+            return;
+          }
+          
+          const { sku, optionId} = selectedColorSwatch;
+          const data = await refineProduct([optionId], sku);
+          // Return early if different swatch is selected before request is complete
+          if (isSwatchUpdated) {
+            return;
+          }
+
+          setImagesFromRefinedProduct(data.refineProduct.images);
+          setRefinedProduct(data);
+
+          prevSelectedSwatch.current = selectedColorSwatch;
+        } catch (error) {
+          // Reset the selected swatch if there is an error
+          if (!isSwatchUpdated && prevSelectedSwatch.current && prevSelectedSwatch.current !== selectedColorSwatch) {
+            setSelectedColorSwatch(prevSelectedSwatch.current);
+          }
+
+          // eslint-disable-next-line no-console
+          console.error('Error fetching refined product', error);
+        }
+    }
+    fetchData();
+
+    return () => {
+      isSwatchUpdated = true;
+    }
+  }, [selectedColorSwatch]);
 
   const handleMouseOver = () => {
     setIsHovering(true);
@@ -107,40 +189,23 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     setQuickAddStatus(QUICK_ADD_STATUS_IDLE);
   };
 
-  const handleSelection = async (optionIds: string[], sku: string) => {
-    const selectedSwatchBeforeUdpate = selectedSwatch;
-    const nextSelectedSwatch = optionIds[0];
-    setSelectedSwatch(nextSelectedSwatch);
-
-    try {
-      const data = await refineProduct(optionIds, sku);
-      // If different swatch is selected before the data is fetched, do not update the state
-      if (prevSelectedSwatch.current !== nextSelectedSwatch) {
-        return;
-      }
-
-      setImagesFromRefinedProduct(data.refineProduct.images);
-      setRefinedProduct(data);
-    } catch (error) {
-      // Reset the selected swatch if there is an error
-      if (prevSelectedSwatch.current === nextSelectedSwatch) {
-        setSelectedSwatch(selectedSwatchBeforeUdpate);
-      }
-
-      // eslint-disable-next-line no-console
-      console.error('Error fetching refined product', error);
+  const handleColorSelection = async (optionIds: string[], sku: string) => {
+    if (selectedColorSwatch?.optionId !== optionIds[0] && selectedColorSwatch?.sku !== sku) {
+      setSelectedColorSwatch({
+        sku,
+        optionId: optionIds[0],
+      });
     }
   };
 
   const isSelected = (id: string) => {
-    const selected = selectedSwatch ? selectedSwatch === id : false;
+    const selected = selectedColorSwatch ? selectedColorSwatch.optionId === id : false;
     return selected;
   };
 
-
   const productImageArray = imagesFromRefinedProduct
     ? getProductImageURLs(imagesFromRefinedProduct ?? [], 2)
-    : getProductImagesFromAttribute(item, currentCategoryId);
+    : getProductImagesFromAttribute(productView, currentCategoryId);
 
   let optimizedImageArray: { src: string; srcset: any }[] = [];
 
@@ -171,36 +236,21 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   const isGrouped = product?.__typename === 'GroupedProduct';
   const isGiftCard = product?.__typename === 'GiftCardProduct';
   const isConfigurable = product?.__typename === 'ConfigurableProduct';
-  const shouldShowAddToBagButton = isSportsWear(item)
+  const shouldShowAddToBagButton = isSportsWear(productView)
     && categoryConfig?.['plp_quick_view_modal_enabled'] === '1'
     && !disableAllPurchases
     && (!screenSize.desktop || isHovering)
+    && sizeSwatches.length > 0
     && !showSizes
     && quickAddStatus === QUICK_ADD_STATUS_IDLE;
 
-  const colorSwatchesFromAttribute = useMemo(() => getColorSwatchesFromAttribute(item, currentCategoryId), [item]);
-  let colorSwatches: SwatchValues[] = [];
-  if (colorSwatchesFromAttribute && colorSwatchesFromAttribute.length > 0) {
-    colorSwatches = colorSwatchesFromAttribute.map((swatch: any) => {
-      let imageUrl = generateOptimizedImages([swatch.image], 44, imageBackgroundColor || '', '1:1')[0]?.src;
-      imageUrl = `${imageUrl}&dpr=${Math.round(window.devicePixelRatio)}`;
-
-      return {
-        id: swatch.id,
-        type: 'IMAGE',
-        value: imageUrl,
-        title: swatch.title,
-      };
-    });
-  }
-
   const onProductClick = () => {
     window.adobeDataLayer.push((dl: any) => {
       dl.push({
         event: 'search-product-click',
         eventInfo: {
           ...dl.getState(),
-          sku: product?.sku,
+          sku: productSku,
           searchUnitId: SEARCH_UNIT_ID,
         },
       });
@@ -209,11 +259,11 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
 
   const productUrl = setRoute
     ? setRoute({
-        sku: productView?.sku,
-        urlKey: productView?.urlKey,
-        optionsUIDs: selectedSwatch ? [selectedSwatch] : null,
+        sku: productSku,
+        urlKey: refinedProduct?.refineProduct?.urlKey || productView?.urlKey,
+        optionsUIDs: selectedColorSwatch ? [selectedColorSwatch.optionId] : null,
       })
-    : product?.canonical_url;
+    : refinedProduct?.refineProduct?.url || product?.canonical_url;
 
   const handleAddToCart = async (evt: any) => {
     evt.preventDefault();
@@ -225,32 +275,20 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       return;
     }
 
-    const selectedVariants = selectedSwatch ? [selectedSwatch] : [];
-    await addToCart(productView.sku, selectedVariants, 1, 'product-list-page');
+    const selectedVariants = selectedColorSwatch ? [selectedColorSwatch.optionId] : [];
+    await addToCart(productSku, selectedVariants, 1, 'product-list-page');
   };
 
   const handleSizeSelection = async (optionIds: string[]) => {
-    const sizeVariants = item.productView?.options?.find((option) => option.title === SWATCH_SIZE)?.values;
-    const selectedSize = sizeVariants?.find((size) => optionIds.includes(size.id));
-    if (selectedSize && !selectedSize.inStock) {
+    const selectedSize = sizeSwatches?.find((size) => optionIds.includes(size.id));
+    if (!selectedSize || !selectedSize.inStock) {
       return;
     }
 
-    let selectedVariants: string[] = [];
-    // Sportswear products do not have multiple color swatches
-    // Select the default color variant
-    const colorVariant = item.productView?.options?.find((option) => option.title === SWATCH_COLORS)?.values?.[0].id;
-    if (colorVariant) {
-      selectedVariants = [colorVariant];
-    }
-
-    if (optionIds) {
-      selectedVariants = [...selectedVariants, ...optionIds];
-    }
-
+    const selectedVariants: string[] = selectedColorSwatch ? [selectedColorSwatch.optionId, ...optionIds] : [...optionIds];
     setShowSizes(false);
     setQuickAddStatus(QUICK_ADD_STATUS_PENDING);
-    const addedToCart = await addToCart(productView.sku, selectedVariants, 1, 'product-list-page');
+    const addedToCart = await addToCart(selectedSize.sku, selectedVariants, 1, 'product-list-page');
 
     if (addedToCart?.user_errors?.length) {
       setQuickAddStatus(QUICK_ADD_STATUS_ERROR);
@@ -301,27 +339,20 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                 </div>
                 <div className="ds-sdk-product-item__product-sku mt-xs text-sm text-brand-700">
                   SKU:
-                  {product.sku !== null && htmlStringDecode(product.sku)}
+                  {productSku !== null && htmlStringDecode(productSku)}
                 </div>
               </a>
 
               {/* Swatch */}
               <div className="ds-sdk-product-item__product-swatch flex flex-row mt-sm text-sm text-brand-700 pb-6">
-                {productView?.options?.map(
-                  (swatches) => {
-                      // swatches.id === 'color' && (
-                     return swatches.title === SWATCH_COLORS && (
-                        <SwatchButtonGroup
-                          key={productView?.sku}
-                          isSelected={isSelected}
-                          swatches={swatches.values ?? []}
-                          showMore={onProductClick}
-                          productUrl={productUrl as string}
-                          onClick={handleSelection}
-                          sku={productView?.sku}
-                        />
-                      )
-                  }
+                {sizeSwatches.length > 0 && (
+                  <SwatchButtonGroup
+                    isSelected={() => false}
+                    swatches={sizeSwatches}
+                    showMore={onProductClick}
+                    productUrl={productUrl as string}
+                    onClick={handleSizeSelection}
+                  />
                 )}
               </div>
             </div>
@@ -377,6 +408,9 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     );
   }
 
+  const productAvailability = (refinedProduct?.refineProduct ? refinedProduct?.refineProduct.inStock : productView?.inStock) 
+    ? 'InStock' 
+    : 'OutOfStock';
   return (
     <div itemScope itemType="http://schema.org/Product"
       className="ds-sdk-product-item group relative flex flex-col w-full justify-between h-full"
@@ -386,9 +420,9 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
     >
-      <meta itemProp="sku" content={product?.sku} />
+      <meta itemProp="sku" content={productSku} />
       <meta itemProp="description" content={product?.short_description?.html} />
-      <meta itemProp="availability" content={productView?.inStock ? 'InStock' : 'OutOfStock'} />
+      <meta itemProp="availability" content={productAvailability}/>
       {ratingCount > 0 ? (
         <div itemprop="aggregateRating" style="display:none"
              itemscope itemtype="https://schema.org/AggregateRating">
@@ -432,39 +466,26 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
                 </div>
               )}
               {shouldShowAddToBagButton && <AddToCartButton onClick={handleAddToCart} />}
-              {showSizes && productView?.options?.map((swatches) => {
-                if (swatches.title === SWATCH_SIZE) {
-                  const swatchItems: SwatchValues[] = (swatches.values ?? []).map((swatch) => ({
-                    ...swatch,
-                    type: 'SIZE',
-                  }));
-
-                  return (
-                    <SwatchButtonGroup
-                      key={product?.sku}
-                      isSelected={isSelected}
-                      swatches={swatchItems}
-                      showMore={onProductClick}
-                      productUrl={productUrl as string}
-                      onClick={handleSizeSelection}
-                      sku={product?.sku}
-                    />
-                  );
-                }
-              })}
+              {showSizes && sizeSwatches.length > 0 && (
+                <SwatchButtonGroup
+                  isSelected={() => false}
+                  swatches={sizeSwatches}
+                  showMore={onProductClick}
+                  productUrl={productUrl as string}
+                  onClick={handleSizeSelection}
+                />
+              )}
             </div>
           </div>
           <div className="flex flex-col px-xsmall py-small gap-2">
             {colorSwatches && colorSwatches.length > 0 && (
               <div className="ds-sdk-product-item__product-swatch flex flex-row text-sm text-brand-700">
                  <SwatchButtonGroup
-                    key={product?.sku}
                     isSelected={isSelected}
                     swatches={colorSwatches}
                     showMore={onProductClick}
                     productUrl={productUrl as string}
-                    onClick={handleSelection}
-                    sku={product?.sku}
+                    onClick={handleColorSelection}
                   />
               </div>
             )}
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx
index a14c8ab0..b9678592 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.test.tsx
@@ -32,25 +32,27 @@ const mockButtonGroup: SwatchButtonGroupProps = {
       id: 'Y29uZmlndXJhYmxlLzkzLzU5',
       type: 'COLOR_HEX',
       value: '#1857f7',
+      sku: 'test',
     },
     {
       title: 'Purple',
       id: 'Y29uZmlndXJhYmxlLzkzLzY2',
       type: 'COLOR_HEX',
       value: '#ef3dff',
+      sku: 'test',
     },
     {
       title: 'Red',
       id: 'Y29uZmlndXJhYmxlLzkzLzY3',
       type: 'COLOR_HEX',
       value: '#ff0000',
+      sku: 'test',
     },
   ],
   isSelected: () => true,
   showMore: () => {},
   productUrl: '',
   onClick: () => {},
-  sku: 'test',
 };
 
 describe('WidgetSDK - UIKit/SwatchButtonGroup', () => {
@@ -62,7 +64,6 @@ describe('WidgetSDK - UIKit/SwatchButtonGroup', () => {
         showMore={mockButtonGroup.showMore}
         productUrl={mockButtonGroup.productUrl}
         onClick={mockButtonGroup.onClick}
-        sku={mockButtonGroup.sku}
       />
     );
 
diff --git a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
index 73f99be2..7fd94902 100644
--- a/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
+++ b/src/components/SwatchButtonGroup/SwatchButtonGroup.tsx
@@ -11,16 +11,25 @@ import { FunctionComponent } from 'preact';
 import { useRef } from 'preact/hooks';
 import { useEffect, useState } from 'react';
 
-import { SwatchValues } from '../../types/interface';
+import { SwatchType } from '../../types/interface';
 import { SwatchButton } from '../SwatchButton';
 
+export type Swatch = {
+    id: string;
+    title: string;
+    type: SwatchType;
+    value: string;
+    sku: string;
+    inStock?: boolean
+    configId?: string;
+};
+
 export interface SwatchButtonGroupProps {
   isSelected: (id: string) => boolean | undefined;
-  swatches: SwatchValues[];
+  swatches: Swatch[];
   showMore: () => any;
   productUrl: string;
   onClick: (optionIds: string[], sku: string) => any;
-  sku: string;
 }
 
 export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
@@ -29,7 +38,6 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
   showMore,
   productUrl,
   onClick,
-  sku
 }: SwatchButtonGroupProps) => {
   const [visibleCount, setVisibleCount] = useState<number|null>(null);
   const swatchButtonContainerRef = useRef<HTMLDivElement>(null);
@@ -63,7 +71,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
       evt.preventDefault();
       evt.stopPropagation();
 
-      onClick([swatch.id], sku);
+      onClick([swatch.id], swatch.sku);
     }
 
     const checked = isSelected(swatch.id);
@@ -71,7 +79,7 @@ export const SwatchButtonGroup: FunctionComponent<SwatchButtonGroupProps> = ({
     const outOfStockClass = swatch.inStock ? '' : 'out-of-stock';
     const wrapperClasses = `ds-sdk-product-item__product-swatch-item text-sm text-brand-700${swatch.type == 'COLOR_HEX' ? ' mr-2': ''} ${selectedClass} ${outOfStockClass}`;
     return (
-      <div className={wrapperClasses} key={swatch.id} ref={index === 0  ? swatchButtonRef : null}>
+      <div className={wrapperClasses} key={swatch.id} ref={index === 0  ? swatchButtonRef : null} data-config-id={swatch.configId || ''}>
           <SwatchButton
             id={swatch.id}
             value={swatch.value}
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 0f4cd2e4..6a234640 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -184,6 +184,72 @@ export interface AttributeMetadataResponse {
   };
 }
 
+export interface ColorSwatchFromAttribute {
+  id: string;
+  config_id: string;
+  config_sku: string;
+  simple_id: string;
+  simple_sku: string;
+  label: string;
+  url: string;
+  image: string;
+  swatch_image: string;
+  back_view_image: string;
+}
+
+export interface ProductView {
+  __typename: string;
+  id: number;
+  uid: string;
+  name: string;
+  sku: string;
+  inStock?: boolean | undefined;
+  description: null | ComplexTextValue;
+  short_description: null | ComplexTextValue;
+  attribute_set_id: null | number;
+  meta_title: null | string;
+  meta_keyword: null | string;
+  meta_description: null | string;
+  images: null | ProductViewMedia[];
+  new_from_date: null | string;
+  new_to_date: null | string;
+  created_at: null | string;
+  updated_at: null | string;
+  attributes: Array<{
+    label: string
+    name: string
+    roles: string[]
+    value: string
+  }>;
+  price: {
+    final: ProductViewPrice;
+    regular: ProductViewPrice;
+  };
+  priceRange: {
+    minimum: {
+      final: ProductViewPrice;
+      regular: ProductViewPrice;
+    };
+    maximum: {
+      final: ProductViewPrice;
+      regular: ProductViewPrice;
+    };
+  };
+  gift_message_available: null | string;
+  url: null | string;
+  urlKey: null | string;
+  media_gallery: null | ProductViewMedia;
+  custom_attributes: null | CustomAttribute;
+  add_to_cart_allowed: null | boolean;
+  options:
+    | null
+    | {
+        id: null | string;
+        title: null | string;
+        values: null | SwatchValues[];
+      }[];
+};
+
 export interface Product {
   product: {
     __typename: string;
@@ -214,58 +280,7 @@ export interface Product {
     custom_attributes: null | CustomAttribute;
     add_to_cart_allowed: null | boolean;
   };
-  productView: {
-    __typename: string;
-    id: number;
-    uid: string;
-    name: string;
-    sku: string;
-    inStock?: boolean | undefined;
-    description: null | ComplexTextValue;
-    short_description: null | ComplexTextValue;
-    attribute_set_id: null | number;
-    meta_title: null | string;
-    meta_keyword: null | string;
-    meta_description: null | string;
-    images: null | ProductViewMedia[];
-    new_from_date: null | string;
-    new_to_date: null | string;
-    created_at: null | string;
-    updated_at: null | string;
-    attributes: Array<{
-      label: string
-      name: string
-      roles: string[]
-      value: string
-    }>;
-    price: {
-      final: ProductViewPrice;
-      regular: ProductViewPrice;
-    };
-    priceRange: {
-      minimum: {
-        final: ProductViewPrice;
-        regular: ProductViewPrice;
-      };
-      maximum: {
-        final: ProductViewPrice;
-        regular: ProductViewPrice;
-      };
-    };
-    gift_message_available: null | string;
-    url: null | string;
-    urlKey: null | string;
-    media_gallery: null | ProductViewMedia;
-    custom_attributes: null | CustomAttribute;
-    add_to_cart_allowed: null | boolean;
-    options:
-      | null
-      | {
-          id: null | string;
-          title: null | string;
-          values: null | SwatchValues[];
-        }[];
-  };
+  productView: ProductView;
   highlights: Array<Highlights>;
 }
 
@@ -276,6 +291,7 @@ export interface RefinedProduct {
     uid: string;
     name: string;
     sku: string;
+    inStock?: boolean | undefined;
     description: null | ComplexTextValue;
     short_description: null | ComplexTextValue;
     attribute_set_id: null | number;
@@ -303,6 +319,7 @@ export interface RefinedProduct {
     };
     gift_message_available: null | string;
     url: null | string;
+    urlKey: null | string;
     media_gallery: null | ProductViewMedia;
     custom_attributes: null | CustomAttribute;
     add_to_cart_allowed: null | boolean;
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 314fdcf5..6e3db5bb 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -6,8 +6,12 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
 accordance with the terms of the Adobe license agreement accompanying
 it.
 */
-import { Product, ProductViewMedia } from '../types/interface';
-import { getSegmentedOptions,isSportsWear } from './productUtils';
+import { ProductView, ProductViewMedia } from '../types/interface';
+import { 
+  getColorOptionsFromProductOptions,
+  getImageConfigsFromAttribute,
+  getSegmentedOptions,
+  isSportsWear} from './productUtils';
 
 
 const getProductImageURLs = (
@@ -121,38 +125,30 @@ const generateOptimizedImages = (
 * 6. If the product is sports wear, get the images from the option with same the variant id as in product view options found in step 1.
 * 7. If the product is not sports wear, get the images from the first option.
 */
-function getProductImagesFromAttribute(item: Product, categoryId?: string) {
-  const { productView } = item;
-  const attributeId = productView?.options?.[0].id;
-  if (!attributeId) {
-    return [];
+function getProductImagesFromAttribute(productView: ProductView, categoryId?: string) {
+  const colorOptionsFromProductOptions = getColorOptionsFromProductOptions(productView);
+  const imageConfigs = getImageConfigsFromAttribute(productView);
+
+  const colorOptionsFromAttribute = imageConfigs.find((config: any) => config.attribute_id === colorOptionsFromProductOptions?.id);
+  let colorVariantId = colorOptionsFromProductOptions?.values?.[0].id;
+  if (isSportsWear(productView)) {
+    colorVariantId = colorOptionsFromProductOptions?.values?.[0].id;
+    const defaultColorOption = colorOptionsFromAttribute.images.find((colorOption: any) => colorOption.id === colorVariantId)
+      || colorOptionsFromAttribute.images[0];
+  
+    return getAbsoluteImageUrl(productView, [defaultColorOption.image, defaultColorOption.back_view_image]);
   }
-
-  const imageAttributes = productView?.attributes?.find(({ name }) => name === 'eds_images');
-  if (imageAttributes) {
-    const options = JSON.parse(imageAttributes.value);
-    const defaultOption = options.find((option: any) => option.attribute_id === attributeId);
-    if (!defaultOption) {
-      return [];
-    }
-
-    const variantId = productView?.options?.[0].values?.[0].id;
-    if (isSportsWear(item) && defaultOption.images) {
-      const imageConfig = defaultOption.images.find((image: any) => image.id === variantId);
-      return getAbsoluteImageUrl(item, [imageConfig.image, imageConfig.back_view_image]);
-    }
-
-    if (defaultOption && defaultOption.images.length > 0) {
-      const segmentedOptions = categoryId ? getSegmentedOptions(item, defaultOption['attribute_id'] || null, categoryId) : null;
-      const imageConfig = defaultOption.images.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id));
-      return getAbsoluteImageUrl(item, [imageConfig.image, imageConfig.back_view_image]);
-    }
+    
+  if (colorOptionsFromAttribute && colorOptionsFromAttribute.images.length > 0) {
+    const segmentedOptions = categoryId ? getSegmentedOptions(productView, colorOptionsFromProductOptions?.id || null, categoryId) : null;
+    const defaultColorOption = colorOptionsFromAttribute.images.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id));
+    return getAbsoluteImageUrl(productView, [defaultColorOption.image, defaultColorOption.back_view_image]);
   }
 
   return [];
 }
 
-function getAbsoluteImageUrl(item: Product, urls: string[]) {
+function getAbsoluteImageUrl(productView: ProductView, urls: string[]) {
   return urls.map((url) => {
     if (url.startsWith('http')) {
       return url;
@@ -162,7 +158,6 @@ function getAbsoluteImageUrl(item: Product, urls: string[]) {
       url = url.slice(1);
     }
 
-    const { productView } = item;
     const baseUrl = productView?.url?.replace(productView?.urlKey || '', '');
     return baseUrl + url;
   });
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index e292a90a..045066fc 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -1,39 +1,31 @@
-import { Product } from '../types/interface';
+import { ColorSwatchFromAttribute,ProductView } from '../types/interface';
 
-function isSportsWear(product: Product) {
-  const { productView } = product;
+function isSportsWear(productView: ProductView) {
   const department = productView?.attributes?.find(({ name }) => name === 'pim_department_name');
 
   return department?.value.includes('Sportswear');
 }
 
-function getColorSwatchesConfigFromAttribute(item: Product) {
-  if (isSportsWear(item)) {
-    return null;
-  }
+export function getColorOptionsFromProductOptions(productView: ProductView) {
+  // First pim_axis option in product option is a color options config
+  const productOptions = productView?.options?.find((option) => option.id?.startsWith('pim_axis'));
+  return productOptions;
+}
 
-  const { productView } = item;
+export function getImageConfigsFromAttribute(productView: ProductView) {
   const imageAttributes = productView?.attributes?.find(({ name }) => name === 'eds_images');
   if (!imageAttributes) {
-    return null;
+    return [];
   }
 
-  let options;
   try {
-    options = JSON.parse(imageAttributes.value);
+    return JSON.parse(imageAttributes.value);
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error('Error parsing image attributes', e);
-    return null;
   }
 
-  const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
-  const colorOptions =  productOptions?.[0];
-  const attributeId = colorOptions?.id;
-
-  return options.find((option: any) => option.attribute_id === attributeId
-  && option.attribute_type === 'visual'
-  && option.show_swatches);
+  return [];
 }
 
 /*
@@ -41,42 +33,30 @@ function getColorSwatchesConfigFromAttribute(item: Product) {
 * Ref: https://adobe-dx-support.slack.com/archives/C04CQH83BME/p1719261375238899
 *
 * Following steps are taken to get the color swatches:
-* 1. If the product is sports wear, return an empty array since there are no color swatches for sports wear
-* 2. Get the attribute id from the product view options by selecting the first option
-* 3. Find the attribute with name "eds_images" in product view attributes
-* 4. Parse the value of the attribute
-* 5. Find the option with the same attribute id as found in step 1
+* 1. Find the attribute with name "eds_images" in product view attributes
+* 2. Parse the value of the attribute
+* 3. Get the attribute id from the product view options by selecting the first option
+* 5. Find the option in "eds_images" with the same attribute id as found in step 3
 * 6. Validate if the option has the attribute type as "visual" and show_swatches is true
 * 7. If the above condition is met, return the image options
 */
-function getColorSwatchesFromAttribute(item: Product, categoryId?: string) {
-  if (isSportsWear(item)) {
-    return null;
-  }
-
-  const colorOptionsFromAttribute = getColorSwatchesConfigFromAttribute(item);
-  if (!colorOptionsFromAttribute) {
-    return null;
-  }
-
-  const { productView } = item;
-  const productOptions = productView?.options?.filter((option) => option.id?.startsWith('pim_axis'));
-  const colorOptions = productOptions?.[0];
-  if (!colorOptions) {
-    return null;
-  }
-  const segmentedOptions = categoryId ? getSegmentedOptions(item, colorOptions.id, categoryId) : null;
-
-  return colorOptions?.values?.filter((option: any) => !segmentedOptions || segmentedOptions.includes(option.id))
-    .map((option: any) => {
-    const imagConfig = colorOptionsFromAttribute.images && colorOptionsFromAttribute.images.find((image: any) => image.id === option.id);
-    const defaultImage = '/en-us/media/image/media_1ccf88b21200e64fed7e7e93e0cf2d0a76fa007a8.png';
-    const swatchImage = (imagConfig && imagConfig.swatch_image) || defaultImage
-    return {
-      ...option,
-      image: swatchImage,
-    };
-  });
+function getColorSwatchesFromAttribute(productView: ProductView, categoryId?: string): ColorSwatchFromAttribute[] {
+  const imageConfigsFromAttribute = getImageConfigsFromAttribute(productView);
+  const colorOptionsFromAttribute = imageConfigsFromAttribute.find((config: any) => config.attribute_type === 'visual'
+    && config.show_swatches);
+
+  const segmentedOptions = categoryId ? getSegmentedOptions(productView, colorOptionsFromAttribute?.id, categoryId) : null;
+  return (colorOptionsFromAttribute?.images ?? [])
+    .filter((colorOption: any) => !segmentedOptions || segmentedOptions.includes(colorOption.id))
+    .map((colorOption: any) => {
+      const defaultImage = '/en-us/media/image/media_1ccf88b21200e64fed7e7e93e0cf2d0a76fa007a8.png';
+      const swatchImage = colorOption?.swatch_image || defaultImage
+
+      return {
+        ...colorOption,
+        swatch_image: swatchImage
+      }
+    });
 }
 
 /**
@@ -96,11 +76,11 @@ function getColorSwatchesFromAttribute(item: Product, categoryId?: string) {
  *
  * For more information see https://amersports.atlassian.net/browse/WAF-116
  */
-function getSegmentedOptions(item: Product, optionId: string | null, categoryId: string) {
+function getSegmentedOptions(productView: ProductView, optionId: string | null, categoryId: string) {
   if (!categoryId) {
     return null;
   }
-  const edsSegmentation = item.productView?.attributes?.find(({name}) => name === 'eds_segmentation')?.value;
+  const edsSegmentation = productView?.attributes?.find(({name}) => name === 'eds_segmentation')?.value;
   if (!edsSegmentation) {
     return null;
   }
@@ -116,13 +96,14 @@ function getSegmentedOptions(item: Product, optionId: string | null, categoryId:
 }
 
 
-function getDefaultColorSwatchId(item: Product, categoryId?: string) {
-  const colorOptionsFromAttribute = getColorSwatchesConfigFromAttribute(item);
-  if (colorOptionsFromAttribute && categoryId) {
-    const segmentedOptions = getSegmentedOptions(item, colorOptionsFromAttribute.attribute_id, categoryId);
-    return colorOptionsFromAttribute?.images?.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id))?.id;
+function getDefaultColorSwatchId(productView: ProductView, swatches: ColorSwatchFromAttribute[]): string | undefined {
+  if (isSportsWear(productView)) {
+    // There will be single color option for sportswear
+    const colorOptionsFromProductOptions = getColorOptionsFromProductOptions(productView);
+    return swatches?.find((swatch: any) => swatch.id === colorOptionsFromProductOptions?.values?.[0].id)?.id;
   }
-  return colorOptionsFromAttribute?.images?.[0]?.id;
+
+  return swatches[0].id;
 }
 
 export { isSportsWear, getColorSwatchesFromAttribute, getDefaultColorSwatchId, getSegmentedOptions };

From 6e398689e96a6622203bc415a2bf23f0019d1f45 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Wed, 11 Sep 2024 15:51:09 +0530
Subject: [PATCH 108/160] Fix sportwear PDP navigation from PLP and
 non-sportswear swatch selection in PLP

---
 src/components/ProductItem/ProductItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 22baf441..8e477d14 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -190,7 +190,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
   };
 
   const handleColorSelection = async (optionIds: string[], sku: string) => {
-    if (selectedColorSwatch?.optionId !== optionIds[0] && selectedColorSwatch?.sku !== sku) {
+    if (selectedColorSwatch?.optionId !== optionIds[0]) {
       setSelectedColorSwatch({
         sku,
         optionId: optionIds[0],
@@ -261,7 +261,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     ? setRoute({
         sku: productSku,
         urlKey: refinedProduct?.refineProduct?.urlKey || productView?.urlKey,
-        optionsUIDs: selectedColorSwatch ? [selectedColorSwatch.optionId] : null,
+        optionsUIDs: !isSportsWear(productView) && selectedColorSwatch ? [selectedColorSwatch.optionId] : null,
       })
     : refinedProduct?.refineProduct?.url || product?.canonical_url;
 

From 72367a482fba9869fb18e21fd751828dbaf97276 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 12 Sep 2024 14:17:01 +0530
Subject: [PATCH 109/160] Fix teams PLP

---
 src/components/ProductItem/ProductItem.tsx | 4 ++--
 src/utils/productUtils.ts                  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 8e477d14..38bd4d3b 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -93,13 +93,13 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     const colorSwatches: Swatch[] = colorSwatchesFromAttribute.map((swatch: ColorSwatchFromAttribute) => {
       const {
         id,
-        image,
+        swatch_image,
         label,
         config_sku: sku,
         config_id: configId,
       } = swatch;
 
-      let imageUrl = generateOptimizedImages([image], 44, imageBackgroundColor || '', '1:1')[0]?.src;
+      let imageUrl = generateOptimizedImages([swatch_image], 44, imageBackgroundColor || '', '1:1')[0]?.src;
       imageUrl = `${imageUrl}&dpr=${Math.round(window.devicePixelRatio)}`;
 
       return {
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 045066fc..215aec68 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -45,7 +45,7 @@ function getColorSwatchesFromAttribute(productView: ProductView, categoryId?: st
   const colorOptionsFromAttribute = imageConfigsFromAttribute.find((config: any) => config.attribute_type === 'visual'
     && config.show_swatches);
 
-  const segmentedOptions = categoryId ? getSegmentedOptions(productView, colorOptionsFromAttribute?.id, categoryId) : null;
+  const segmentedOptions = categoryId ? getSegmentedOptions(productView, colorOptionsFromAttribute?.attribute_id, categoryId) : null;
   return (colorOptionsFromAttribute?.images ?? [])
     .filter((colorOption: any) => !segmentedOptions || segmentedOptions.includes(colorOption.id))
     .map((colorOption: any) => {

From b5d6b4e26fce40223c60839f5407cf22d37737bf Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 12 Sep 2024 16:28:58 +0530
Subject: [PATCH 110/160] Fix PLP page performance

---
 src/components/ProductItem/ProductItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index 38bd4d3b..d91e0f6d 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -147,7 +147,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     let isSwatchUpdated = false;
     async function fetchData() {
       try {
-          if (!selectedColorSwatch) {
+          if (!selectedColorSwatch || prevSelectedSwatch.current?.optionId === selectedColorSwatch.optionId) {
             return;
           }
           

From 7573dc30525b2268db50c578c5d1f464056ae522 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Mon, 16 Sep 2024 19:47:19 +0530
Subject: [PATCH 111/160] Fix null pointer exception when some search results
 doesn't have color swatches

---
 src/utils/productUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 215aec68..035e7a86 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -103,7 +103,7 @@ function getDefaultColorSwatchId(productView: ProductView, swatches: ColorSwatch
     return swatches?.find((swatch: any) => swatch.id === colorOptionsFromProductOptions?.values?.[0].id)?.id;
   }
 
-  return swatches[0].id;
+  return swatches?.[0]?.id;
 }
 
 export { isSportsWear, getColorSwatchesFromAttribute, getDefaultColorSwatchId, getSegmentedOptions };

From 9fef2d1823b3bd54f8d291056a7b64236d914b96 Mon Sep 17 00:00:00 2001
From: Yugandhar Yashwantrao Kamdi <yugandharya@adobe.com>
Date: Thu, 26 Sep 2024 17:39:13 +0530
Subject: [PATCH 112/160] WAF:434: Fix product cards with invalid secondary
 images

---
 src/components/ImageHover/ImageHover.css      |  4 ++--
 src/components/ImageHover/ImageHover.test.tsx |  2 +-
 src/components/ImageHover/ImageHover.tsx      | 11 +++++++----
 src/styles/index.css                          |  6 +-----
 src/styles/tokens.css                         |  2 +-
 src/utils/getProductImage.ts                  | 11 ++++++++++-
 6 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/ImageHover/ImageHover.css b/src/components/ImageHover/ImageHover.css
index 4cef2885..aca4d6c1 100644
--- a/src/components/ImageHover/ImageHover.css
+++ b/src/components/ImageHover/ImageHover.css
@@ -1,7 +1,7 @@
-.ds-sdk-product-image-hover {
+.ds-sdk-product-image {
   background-image: var(--image-url);
 }
 
-.ds-sdk-product-image-hover:hover {
+.ds-sdk-product-image.hover-enabled:hover {
   background-image: var(--hover-url);
 }
\ No newline at end of file
diff --git a/src/components/ImageHover/ImageHover.test.tsx b/src/components/ImageHover/ImageHover.test.tsx
index 6654c887..296b0fee 100644
--- a/src/components/ImageHover/ImageHover.test.tsx
+++ b/src/components/ImageHover/ImageHover.test.tsx
@@ -19,7 +19,7 @@ describe('WidgetSDK - UIKit/ImageCarousel', () => {
       />
     );
 
-    const elem = container.querySelector('.ds-sdk-product-image-hover');
+    const elem = container.querySelector('.ds-sdk-product-image');
 
     expect(!!elem).toEqual(true);
   });
diff --git a/src/components/ImageHover/ImageHover.tsx b/src/components/ImageHover/ImageHover.tsx
index f063cc4c..ffad083d 100644
--- a/src/components/ImageHover/ImageHover.tsx
+++ b/src/components/ImageHover/ImageHover.tsx
@@ -18,18 +18,21 @@ export interface ImageCarouselProps {
 export const ImageHover: FunctionComponent<ImageCarouselProps> = ({
   images,
 }) => {
+    const backImage = images.length > 1 
+    ? (typeof images[1] === 'object' ? images[1].src : images[1])
+    : '';
 
     return (
       <>
-        {images.length > 1 && (
-          <link rel="preload" as="image" href={typeof images[1] === 'object' ? images[1].src : images[1]} />
+        {backImage && (
+          <link rel="preload" as="image" href={backImage} />
         )}
           <meta itemProp="image" content={typeof images[0] === 'object' ? images[0].src : images[0]} />
         <div class="relative w-full pb-[122.22%]">
-          <div class="ds-sdk-product-image-hover absolute h-full w-full m-auto bg-cover bg-no-repeat bg-position-center"
+          <div class={`ds-sdk-product-image ${backImage ? 'hover-enabled' : ''} absolute h-full w-full m-auto bg-cover bg-no-repeat bg-position-center`}
               style={{
                 '--image-url': `url('${typeof images[0] === 'object' ? images[0].src : images[0]}')`,
-                '--hover-url': `url('${typeof images[1] === 'object' ? images[1].src : images[1]}')`,
+                '--hover-url': `url('${backImage}')`,
               }}
             />
         </div>
diff --git a/src/styles/index.css b/src/styles/index.css
index 09d88b7a..40d07584 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1974,10 +1974,6 @@ video {
   height: 100%;
 }
 
-.ds-sdk-product-image-hover {
-  transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
-}
-
 .first\:ml-0:first-child {
   margin-left: 0px;
 }
@@ -2128,7 +2124,7 @@ video {
   content: '✕';
 }
 
-.ds-sdk-product-image-hover {
+.ds-sdk-product-image {
   transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
 
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 2d8ca1ec..faf9e2fc 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -340,6 +340,6 @@
 }
 
 
-.ds-sdk-product-image-hover {
+.ds-sdk-product-image {
   transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 6e3db5bb..39347652 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -13,6 +13,7 @@ import {
   getSegmentedOptions,
   isSportsWear} from './productUtils';
 
+const isValidImageUrl = (url: string | undefined) => url && !url.includes('product/no_selection');
 
 const getProductImageURLs = (
   images: ProductViewMedia[],
@@ -26,7 +27,7 @@ const getProductImageURLs = (
   // const topImageUrl = "http://master-7rqtwti-wdxwuaerh4gbm.eu-4.magentosite.cloud/media/catalog/product/3/1/31t0a-sopll._ac_.jpg";
   for (const image of images) {
     const imageUrl = image.url?.replace(/^https?:\/\//, '');
-    if (imageUrl) {
+    if (isValidImageUrl(imageUrl)) {
       if (image.roles?.includes('image')) {
         topImageUrl = imageUrl;
       } else {
@@ -61,6 +62,10 @@ export interface ResolveImageUrlOptions {
 }
 
 const resolveImageUrl = (url: string, opts: ResolveImageUrlOptions): string => {
+  if (!isValidImageUrl(url)) {
+    return '';
+  }
+
   const [base, query] = url.split('?');
   const params = new URLSearchParams(query);
 
@@ -150,6 +155,10 @@ function getProductImagesFromAttribute(productView: ProductView, categoryId?: st
 
 function getAbsoluteImageUrl(productView: ProductView, urls: string[]) {
   return urls.map((url) => {
+    if (!isValidImageUrl(url)) {
+      return '';
+    }
+
     if (url.startsWith('http')) {
       return url;
     }

From da38b6b958ad98ff4f0c74259b48b97e1d404206 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Thu, 5 Sep 2024 14:43:00 +0200
Subject: [PATCH 113/160] WAF-396 - Filters

---
 .../CategoryFilters/CategoryFilters.tsx       |   6 +-
 src/components/Drawer/Drawer.tsx              |  27 +--
 src/components/Facets/Facets.tsx              | 181 ++++++++++++------
 .../Facets/FranchiseViewSelector.tsx          |   2 +-
 src/components/Facets/Scalar/ScalarFacet.tsx  |   9 +-
 src/components/Facets/SelectedFilters.tsx     | 143 +++++++-------
 src/components/Facets/filters.css             |  93 +++++++++
 src/components/FilterButton/FilterButton.tsx  |   6 +-
 .../FilterSelection/FilterSelection.tsx       |  75 +++++++-
 .../FilterSelection/FilterSelectionGroup.tsx  |   6 +-
 .../InputButtonGroup/InputButtonGroup.tsx     |  76 +++++---
 .../LabelledInput/LabelledInput.tsx           | 146 +++++++++-----
 src/components/MobileFacets/MobileFacets.tsx  |  71 ++++---
 .../MobileFacets/Range/RangeFacet.tsx         |   1 +
 .../MobileFacets/Scalar/ScalarFacet.tsx       |   1 +
 src/components/Pill/Pill.tsx                  |   2 +-
 src/components/ProductList/ProductList.tsx    |   2 +-
 src/components/SortDropdown/SortDropdown.tsx  |  91 ++++-----
 src/containers/App.tsx                        |  37 ++--
 src/containers/MobileFilterHeader.tsx         |  67 ++++---
 src/hooks/useRangeFacet.ts                    |  14 +-
 src/i18n/en_US.ts                             |   2 +-
 src/icons/sortfilter.svg                      |   1 +
 src/styles/index.css                          |  98 ++++++++++
 24 files changed, 792 insertions(+), 365 deletions(-)
 create mode 100644 src/icons/sortfilter.svg

diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 994552f0..96ceee7b 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -21,6 +21,7 @@ interface CategoryFiltersProps {
   phrase: string;
   showFilters: boolean;
   setShowFilters: (showFilters: boolean) => void;
+  displayFilter: () => void;
   filterCount: number;
 }
 
@@ -28,12 +29,13 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
   pageLoading,
   totalCount,
   facets,
+  displayFilter,
 }) => {
 
   return (
-    <div className="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col">
+    <div className="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] flex-col">
       {!pageLoading && facets.length > 0 && (
-        <Facets searchFacets={facets} totalCount={totalCount} />
+        <Facets searchFacets={facets} totalCount={totalCount} displayFilter={displayFilter} />
       )}
     </div>
   );
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 884d8384..fcb3df30 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -2,43 +2,44 @@ import { FunctionComponent } from 'preact';
 import { useEffect } from 'preact/hooks';
 
 import CloseIcon from '../../icons/plus.svg';
+import {useSearch} from "../../context";
 
 interface DrawerProps {
   isOpen: boolean;
   onClose: () => void;
+  totalCount: number;
 }
 
 export const Drawer: FunctionComponent<DrawerProps> = ({
   isOpen,
   onClose,
+  totalCount,
   children,
 }) => {
+  const searchCtx = useSearch();
+
   useEffect(() => {
     if (isOpen) {
       document.body.classList.add('no-scroll');
+      document.body.style.overflow = 'hidden';
     } else {
       document.body.classList.remove('no-scroll');
+      document.body.style.overflow = 'visible';
     }
   }, [isOpen]);
 
   return (
     <>
       {isOpen && (
-        <div className="fixed inset-0 z-50 flex">
-          <div
-            className="fixed inset-0 bg-black bg-opacity-50"
-            onClick={onClose}
-          />
-          <div className="relative mt-auto w-full bg-white h-[80%] shadow-lg overflow-auto animate-slideUp">
-            <div className="flex items-center justify-between p-4">
-              <CloseIcon
-                className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer fill-neutral-800"
-                onClick={onClose}
-              />
+          <div className="fixed inset-0 z-50 flex bg-black bg-opacity-50">
+            <div className="relative mt-auto w-full bg-white h-[80%] md:h-full shadow-lg overflow-auto animate-slideUp md:animate-slideRight">
+              <div className="p-12">{children}</div>
+            </div>
+            <div class="apply-buttons md:animate-slideRight">
+              <button class="apply-buttons_button" onClick={() => searchCtx.clearFilters()}>clear filters</button>
+              <button class="apply-buttons_button apply-buttons_button--view" onClick={onClose}>view {totalCount} results</button>
             </div>
-            <div className="p-4">{children}</div>
           </div>
-        </div>
       )}
     </>
   );
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 5110b3eb..2316e604 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -25,20 +25,20 @@ import {
 } from '../../context';
 import { Facet as FacetType, PriceFacet } from '../../types/interface';
 import FilterSelectionGroup from '../FilterSelection';
-import SliderDoubleControl from '../SliderDoubleControl';
-import SortDropdown from '../SortDropdown';
-import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
 import { SelectedFilters } from './SelectedFilters';
+import SortFilterIcon from "../../icons/sortfilter.svg";
 
 interface FacetsProps {
   searchFacets: FacetType[];
   totalCount?: number;
+  displayFilter: () => void;
 }
 
 export const Facets: FunctionComponent<FacetsProps> = ({
   searchFacets,
   totalCount,
+  displayFilter,
 }: FacetsProps) => {
   const { config } = useStore();
   const searchCtx = useSearch();
@@ -51,6 +51,8 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     'price',
   ];
 
+  const searchFacetsSliced = searchFacets?.slice(0, 4)
+
   const filteredAttributes = attributeMetadata?.sortable.filter((item) =>
     attributesToFilter.includes(item.attribute)
   );
@@ -87,8 +89,14 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     searchCtx.setSort(generateGQLSortInput(sortOption));
     handleUrlSort(sortOption);
   };
-
-  const handleTesting = (facet: FacetType) => {
+  const wait = async (time) => {
+    return new Promise(resolve => {
+      setTimeout(resolve, time);
+    });
+  }
+  const handleTesting = async (facet: FacetType) => {
+    document.querySelector('.ds-sdk-filterGroup')?.classList.remove('open');
+    await wait(257);
     setSelectedFacet((prevFacet) => {
       if (!prevFacet || prevFacet.title !== facet.title) {
         return facet;
@@ -117,68 +125,119 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     onChange(value, selected);
   }
 
+  const scrollFilter = (event) => {
+    displayFilter?.();
+
+    const clicked = event.target;
+    const filterNumber = Number(clicked.id.split('-')[1])
+    const targetNode = document.querySelector('.mobile-filters-container');
+    const config = { attributes: false, childList: true, subtree: true };
+
+    const wait = async (time) => {
+      return new Promise(resolve => {
+        setTimeout(resolve, time);
+      });
+    }
+    const callback = async (mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+          await wait(300);
+          const filterToShow = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input')[filterNumber]
+          const filterToHide = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input fieldset:not(.none-display)')
+
+          filterToHide.forEach(element => {
+            element.closest('.ds-sdk-input')?.classList.remove('active')
+            element.classList.add('none-display')
+            element.nextElementSibling?.classList.remove('mt-md')
+          })
+
+          filterToShow.classList.add('active');
+          filterToShow.querySelector('fieldset')?.classList.remove('none-display');
+          filterToShow.querySelector('.ds-sdk-input__border')?.classList.add('mt-md');
+          break;
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
+  }
+
   return (
     <div className="ds-plp-facets flex flex-col">
-      <div className="border-t border-b border-neutral-500">
-        <div className="flex justify-between items-center px-[12px] md:px-[24px] lg:px-[48px] mx-auto w-full max-w-[1600px]">
-          <form className="ds-plp-facets__list flex gap-x-6">
-            {searchFacets?.map((facet) => {
-              const bucketType = facet?.buckets[0]?.__typename;
-              switch (bucketType) {
-                case 'ScalarBucket':
-                  return (
+      <div className="border-t border-b border-neutral-450">
+        <div className={'flex flex-row items-center px-[12px] md:px-[24px] lg:px-[48px] mx-auto w-full'}>
+          <div className="flex justify-between">
+            <form className="ds-plp-facets__list flex gap-x-3.2rem">
+              <div class="ds-sdk-input py-md">
+                <div class="flex items-center gap-x-1 cursor-pointer" onClick={scrollFilter}>
+                  <label id={'filter-0'}
+                         className="flex flex-row gap-4 ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer">
+                    <SortFilterIcon className="h-[18px] w-[18px] fill-neutral-800" />
+                    {translation.Filter.title}
+                  </label>
+                </div>
+              </div>
+              {searchFacetsSliced?.map((facet, index) => {
+                const bucketType = facet?.buckets[0]?.__typename;
+                switch (bucketType) {
+                  case 'ScalarBucket':
+                    return (
+                        <ScalarFacet
+                            key={facet.attribute}
+                            filterData={facet}
+                            iteration={index}
+                            handleFilter={() => handleTesting(facet)}
+                            selectedNumber={getSelectedFilters(facet)}
+                            selectedFacet={selectedFacet}
+                            displayFilter={displayFilter}
+                        />
+                    );
+                  case 'RangeBucket':
                     <ScalarFacet
-                      key={facet.attribute}
-                      filterData={facet}
-                      handleFilter={() => handleTesting(facet)}
-                      selectedNumber={getSelectedFilters(facet)}
-                      selectedFacet={selectedFacet}
+                        key={facet.attribute}
+                        filterData={facet}
+                        iteration={index}
+                        handleFilter={() => handleTesting(facet)}
+                        selectedNumber={getSelectedFilters(facet)}
+                        selectedFacet={selectedFacet}
+                        displayFilter={displayFilter}
                     />
-                  );
-                case 'RangeBucket':
-                  return config?.priceSlider ? (
-                    <SliderDoubleControl filterData={facet as PriceFacet} />
-                  ) : (
-                    <RangeFacet
-                      key={facet.attribute}
-                      filterData={facet as PriceFacet}
-                    />
-                  );
-                case 'CategoryView':
-                  return (
-                    <ScalarFacet
-                      key={facet.attribute}
-                      filterData={facet}
-                      handleFilter={() => handleTesting(facet)}
-                      selectedNumber={getSelectedFilters(facet)}
-                      selectedFacet={selectedFacet}
-                    />
-                  );
-                default:
-                  return null;
-              }
-            })}
-          </form>
-          <SortDropdown
-            sortOptions={sortOptions}
-            value={sortBy}
-            onChange={onSortChange}
-          />
+                  case 'CategoryView':
+                    return (
+                        <ScalarFacet
+                            key={facet.attribute}
+                            filterData={facet}
+                            iteration={index}
+                            handleFilter={() => handleTesting(facet)}
+                            selectedNumber={getSelectedFilters(facet)}
+                            selectedFacet={selectedFacet}
+                            displayFilter={displayFilter}
+                        />
+                    );
+                  default:
+                    return null;
+                }
+              })}
+            </form>
+          </div>
+          <div className="ml-auto filters-count">
+            <SelectedFilters totalCount={totalCount} isCount={true}/>
+          </div>
+        </div>
+        <div className="px-[12px] md:px-[24px] lg:px-[48px] w-full filters-facets">
+          {selectedFacet && (
+              <FilterSelectionGroup
+                  title={selectedFacet.title}
+                  attribute={selectedFacet.attribute}
+                  buckets={selectedFacet.buckets as any}
+                  isSelected={isSelected}
+                  onChange={(args) => onFacetChange(args.value, args.selected, args.type)}
+                  type={isCategory && selectedFacet?.buckets[0]?.__typename === 'CategoryView' ? 'link' : 'checkbox'}
+              />
+          )}
         </div>
       </div>
-      <div className="px-[12px] md:px-[24px] lg:px-[48px] mx-auto w-full max-w-[1600px]">
-      {selectedFacet && (
-        <FilterSelectionGroup
-          title={selectedFacet.title}
-          attribute={selectedFacet.attribute}
-          buckets={selectedFacet.buckets as any}
-          isSelected={isSelected}
-          onChange={(args) => onFacetChange(args.value, args.selected, args.type)}
-          type={isCategory && selectedFacet?.buckets[0]?.__typename  === 'CategoryView' ? 'link' : 'checkbox'}
-        />
-      )}
-      <SelectedFilters totalCount={totalCount} />
-      </div>
+      <SelectedFilters totalCount={totalCount} isCount={false}/>
     </div>
   );
 };
diff --git a/src/components/Facets/FranchiseViewSelector.tsx b/src/components/Facets/FranchiseViewSelector.tsx
index 0ed769cd..444a6c2f 100644
--- a/src/components/Facets/FranchiseViewSelector.tsx
+++ b/src/components/Facets/FranchiseViewSelector.tsx
@@ -9,7 +9,7 @@ export const FranchiseViewSelector: FunctionComponent = () => {
   const searchCtx = useSearch();
 
   return (
-    <div className="flex gap-[10px] franchise-selector">
+    <div className="flex gap-[10px] pl-24 franchise-selector">
       <button disabled={searchCtx.displayFranchises} onClick={() => searchCtx.toggleFranchiseView(true)}>
         <FranchiseView/>
       </button>
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 564f0fc4..28cc8145 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -11,19 +11,24 @@ import { FilterSelection } from 'src/components/FilterSelection';
 
 import { Facet as FacetType, PriceFacet } from '../../../types/interface';
 export type HandleFilterType = () => void;
+export type DisplayFilterType = () => void;
 
 interface ScalarFacetProps {
   filterData: FacetType | PriceFacet;
+  iteration: number;
   handleFilter?: HandleFilterType;
+  displayFilter?: DisplayFilterType;
   selectedNumber?: number;
   selectedFacet?: FacetType | PriceFacet | null;
 }
 
 export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   filterData,
+  iteration,
   handleFilter,
   selectedNumber,
-  selectedFacet
+  selectedFacet,
+  displayFilter,
 }) => {
   return (
     <>
@@ -31,8 +36,10 @@ export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
         title={filterData.title}
         attribute={filterData.attribute}
         handleFilter={handleFilter}
+        displayFilter={displayFilter}
         selectedNumber={selectedNumber}
         selectedFacet={selectedFacet}
+        iteration={iteration}
       />
     </>
   );
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 5a324999..16635d2f 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -18,77 +18,90 @@ import {FranchiseViewSelector} from "./FranchiseViewSelector";
 
 interface SelectedFiltersProps {
   totalCount?: number;
+  isCount: boolean
 }
 
 export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
   totalCount,
+  isCount
 }) => {
-  const searchCtx = useSearch();
-  const productsCtx = useProducts();
-  const storeCtx = useStore();
-  const translation = useTranslation();
+    const searchCtx = useSearch();
+    const productsCtx = useProducts();
+    const storeCtx = useStore();
+    const translation = useTranslation();
 
-  return (
-    <div className="w-full h-full flex justify-between items-center sm:pb-6 py-md">
-      <div className="ds-plp-facets__pills flex flex-wrap justify-start items-center gap-[16px]">
-        {searchCtx.filters?.length > 0 && searchCtx.filters.map((filter) => (
-          <div
-            key={filter.attribute}
-            className="flex items-center gap-[16px]"
-          >
-            {filter.in?.map((option) => (
-              <Pill
-                key={formatBinaryLabel(
-                  filter,
-                  option,
-                  searchCtx.categoryNames,
-                  productsCtx.categoryPath
-                )}
-                label={formatBinaryLabel(
-                  filter,
-                  option,
-                  searchCtx.categoryNames,
-                  productsCtx.categoryPath
-                )}
-                type="filter"
-                onClick={() => searchCtx.updateFilterOptions(filter, option)}
-              />
-            ))}
-            {filter.range && (
-              <Pill
-                label={formatRangeLabel(
-                  filter,
-                  productsCtx.currencyRate,
-                  productsCtx.currencySymbol
-                )}
-                type="transparent"
-                onClick={() => {
-                  searchCtx.removeFilter(filter.attribute);
-                }}
-              />
+    return (
+    <>
+        {isCount && (
+            <div className="h-full flex justify-between items-center py-md flex-row">
+                {!searchCtx.displayFranchises && (
+                    <p className="result-count">{totalCount} Results</p>
             )}
-          </div>
-        ))}
-        {searchCtx.filters?.length > 0 && (
-          <div className="py-1">
-            <button
-              className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
-              focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
-              onClick={() => searchCtx.clearFilters()}
-            >
-              <span className="font-button-2 text-sm underline hover:no-underline">
-                {translation.Filter.clearAll}
-              </span>
-            </button>
-          </div>
+
+            {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '1' && (
+                <FranchiseViewSelector/>
+            )}
+            </div>
+        )}
+
+        {!isCount && (
+            <div className="w-full h-full flex justify-between items-center sm:pb-6 py-md flex-wrap px-[12px] md:px-[24px] lg:px-[48px]">
+                <div className="ds-plp-facets__pills flex flex-wrap justify-start items-center gap-[16px]">
+                    {searchCtx.filters?.length > 0 && searchCtx.filters.map((filter) => (
+                        <div
+                            key={filter.attribute}
+                            className="flex items-center gap-[16px]"
+                        >
+                            {filter.in?.map((option) => (
+                                <Pill
+                                    key={formatBinaryLabel(
+                                        filter,
+                                        option,
+                                        searchCtx.categoryNames,
+                                        productsCtx.categoryPath
+                                    )}
+                                    label={formatBinaryLabel(
+                                        filter,
+                                        option,
+                                        searchCtx.categoryNames,
+                                        productsCtx.categoryPath
+                                    )}
+                                    type="filter"
+                                    onClick={() => searchCtx.updateFilterOptions(filter, option)}
+                                />
+                            ))}
+                            {filter.range && (
+                                <Pill
+                                    label={formatRangeLabel(
+                                        filter,
+                                        productsCtx.currencyRate,
+                                        productsCtx.currencySymbol
+                                    )}
+                                    type="transparent"
+                                    onClick={() => {
+                                        searchCtx.removeFilter(filter.attribute);
+                                    }}
+                                />
+                            )}
+                        </div>
+                    ))}
+                    {searchCtx.filters?.length > 0 && (
+                        <div className="py-1">
+                            <button
+                                className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
+                          focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
+                                onClick={() => searchCtx.clearFilters()}
+                            >
+                          <span className="font-button-2 text-sm underline hover:no-underline">
+                            {translation.Filter.clearAll}
+                          </span>
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
         )}
-      </div>
-      {!searchCtx.displayFranchises && (
-        <p className="result-count">{totalCount} Results</p>
-      )}
-      {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '1' && (
-        <FranchiseViewSelector />
-      )}
-    </div>
-  );
+    </>
+)
+    ;
 };
diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
index f53fea8f..55661213 100644
--- a/src/components/Facets/filters.css
+++ b/src/components/Facets/filters.css
@@ -12,13 +12,106 @@
 
 .franchise-selector {
   align-items: start;
+  float: right
+}
+
+.mobile-filters-container{
+  z-index: 900;
+}
+
+.mobile-filters-container{
+  h1 {
+    font-size: var(--font-2xl);
+    margin-bottom: 2rem;
+  }
+}
+
+.mobile-filters-container{
+  .animate-slideUp {
+    padding-bottom: 5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .mobile-filters-container {
+    .md\:animate-slideRight {
+      max-width: 500px;
+    }
+  }
+}
+
+.mobile-filters-container .apply-buttons {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  padding: 1rem;
+  gap: 1rem;
+  background: rgba(255,255,255,0.25);
+}
+
+.mobile-filters-container form .ds-sdk-input > label::after {
+  content: '+';
+  display: inline-block;
+  margin-left: auto;
+  margin-right: 10px;
+  font-size: 20px;
+  line-height: 12px;
+}
+
+.mobile-filters-container form .ds-sdk-input.active > label::after {
+  content: '-';
+}
+
+@media (min-width: 768px) {
+  .mobile-filters-container .apply-buttons {
+    max-width: 485px;
+  }
+}
+
+.mobile-filters-container .apply-buttons .apply-buttons_button {
+  flex: 1 1 0;
+  border: 1px solid #000;
+  display: grid;
+  width: 100%;
+  align-content: center;
+  height: 4rem;
+  background-color: #fff;
+}
+
+.mobile-filters-container .apply-buttons .apply-buttons_button--view {
+  background-color: #000;
+  color: #fff;
+}
+
+.ds-plp-facets__pills .ds-sdk-pill {
+  padding: .5rem 1rem;
+}
+
+.ds-plp-facets__pills .ds-sdk-pill__cta svg {
+  position: relative;
+  top: -3px
+}
+
+@media (min-width: 768px) {
+  .grid-setting {
+    flex: 1 0 100%;
+  }
 }
 
 @media (max-width: 768px) {
   .franchise-selector {
+    float: none;
     align-self: end;
     padding-right: 12px;
     margin-top: 15px;
     margin-bottom: 15px;
   }
 }
+
+.ds-sdk-input:after {
+  content: '';
+  display: block;
+
+}
diff --git a/src/components/FilterButton/FilterButton.tsx b/src/components/FilterButton/FilterButton.tsx
index bab39d6d..106b83bc 100644
--- a/src/components/FilterButton/FilterButton.tsx
+++ b/src/components/FilterButton/FilterButton.tsx
@@ -27,11 +27,11 @@ export const FilterButton: FunctionComponent<FilterButtonProps> = ({
   return type == 'mobile' ? (
     <div className="ds-sdk-filter-button flex justify-center items-center ">
       <button
-        className="flex justify-center items-center gap-x-1 bg-background"
+        className="flex justify-center items-center gap-x-1 bg-black"
         onClick={displayFilter}
       >
-        <AdjustmentsIcon className="w-md" />
-        <span className="font-button-2 text-sm uppercase">{translation.Filter.title}</span>
+        <AdjustmentsIcon className="w-md stroke-neutral-50" />
+        <span className="text-white font-button-2 text-sm uppercase">{translation.Filter.title}</span>
       </button>
     </div>
   ) : (
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index f141bd7d..ca2ebfe3 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -11,23 +11,82 @@ export interface FilterSelectionProps {
   attribute?: string;
   filterSelectionTitleSlot?: FilterSelectionTitleSlot;
   handleFilter?: () => void;
+  displayFilter?: () => void;
   selectedNumber?: number;
   selectedFacet?: FacetType | PriceFacet | null;
+  iteration: number;
 }
 
 export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
   title,
   filterSelectionTitleSlot,
   handleFilter,
+  displayFilter,
   selectedNumber,
   selectedFacet,
+  iteration,
 }) => {
   const handleOptions = () => {
     handleFilter?.();
+
+    const targetNode = document.querySelector('.filters-facets');
+    const config = { attributes: false, childList: true, subtree: true };
+    const wait = async (time) => {
+      return new Promise(resolve => {
+        setTimeout(resolve, time);
+      });
+    }
+    const callback = async (mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "childList" && mutation.addedNodes.length > 0 && !document.querySelector('.ds-sdk-filterGroup')?.classList.contains('open')) {
+          await wait(5);
+          document.querySelector('.ds-sdk-filterGroup')?.classList.add('open');
+          break;
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
   };
 
-  const isSelected = title === selectedFacet?.title;
+  const scrollFilter = (event) => {
+    displayFilter?.();
+
+    const clicked = event.target;
+    const filterNumber = Number(clicked.id.split('-')[1])
+    const targetNode = document.querySelector('.mobile-filters-container');
+    const config = { attributes: false, childList: true, subtree: true };
+
+    const wait = async (time) => {
+      return new Promise(resolve => {
+        setTimeout(resolve, time);
+      });
+    }
+    const callback = async (mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+          await wait(300);
+          const filterToShow = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input')[filterNumber]
+          const filterToHide = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input fieldset:not(.none-display)')
 
+          filterToHide.forEach(element => {
+            element.closest('.ds-sdk-input')?.classList.remove('active')
+            element.classList.add('none-display')
+            element.nextElementSibling?.classList.remove('mt-md')
+          })
+
+          filterToShow.classList.add('active');
+          filterToShow.querySelector('fieldset')?.classList.remove('none-display');
+          filterToShow.querySelector('.ds-sdk-input__border')?.classList.add('mt-md');
+          break;
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
+  }
+
+  const isSelected = title === selectedFacet?.title;
   return (
     <div className="ds-sdk-input py-md">
       {filterSelectionTitleSlot ? (
@@ -35,19 +94,17 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
       ) : (
         <div
           className="flex items-center gap-x-1 cursor-pointer"
-          onClick={handleOptions}
+          onClick={scrollFilter}
         >
-          <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer">
+          <label
+              id={`filter-${iteration+1}`}
+              className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer"
+          >
             {title}{' '}
             {!!selectedNumber && (
-              <span className="font-normal text-neutral-700">{`${selectedNumber} Selected`}</span>
+              <span className="font-normal text-neutral-700">{`(${selectedNumber})`}</span>
             )}
           </label>
-          {isSelected ? (
-            <MinusIcon className="h-sm w-sm fill-neutral-800" />
-          ) : (
-            <PlusIcon className="h-sm w-sm fill-neutral-800" />
-          )}
         </div>
       )}
     </div>
diff --git a/src/components/FilterSelection/FilterSelectionGroup.tsx b/src/components/FilterSelection/FilterSelectionGroup.tsx
index 9ebbceb2..e23a87c3 100644
--- a/src/components/FilterSelection/FilterSelectionGroup.tsx
+++ b/src/components/FilterSelection/FilterSelectionGroup.tsx
@@ -91,9 +91,9 @@ export const FilterSelectionGroup: FunctionComponent<
   };
 
   return (
-    <div className="ds-sdk-input py-md">
-      <fieldset className="ds-sdk-input__options">
-        <div>
+    <div className="mx-auto w-full max-w-[1600px] ds-sdk-input py-md">
+      <fieldset className="ds-sdk-input__options ds-sdk-filterGroup">
+        <div className="flex md:grid md:grid-cols-4 grid-flow-row gap-4">
           {buckets.slice(0, numberOfOptions).map((option) => {
             const checked = isSelected(option.title);
             const noShowPriceBucketCount = option.__typename === 'RangeBucket';
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 68cb557f..4b7ec0ce 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -32,9 +32,9 @@ export interface InputButtonGroupProps {
   onChange: InputButtonGroupOnChange;
   type: 'radio' | 'checkbox';
   inputGroupTitleSlot?: InputButtonGroupTitleSlot;
+  isHidden: boolean;
 }
 
-const numberOfOptionsShown = 5;
 export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   title,
   attribute,
@@ -43,16 +43,11 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
   onChange,
   type,
   inputGroupTitleSlot,
+  isHidden
 }) => {
   const translation = useTranslation();
   const productsCtx = useProducts();
 
-  const [showMore, setShowMore] = useState(
-    buckets.length < numberOfOptionsShown
-  );
-
-  const numberOfOptions = showMore ? buckets.length : numberOfOptionsShown;
-
   const formatLabel = (title: string, bucket: Bucket) => {
     const {
       currencyRate = '1',
@@ -95,18 +90,44 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
     return bucket.title;
   };
 
+  const toggleFilters = (event) => {
+    const clicked = event.target;
+    const toBeActiveFilterBlock = clicked.nextElementSibling;
+    const parrentDiv = clicked.closest('.ds-sdk-input')
+    const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
+
+    if (toBeActiveFilterBlock.classList.contains('none-display')) {
+      const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
+      currentFilterBlock?.classList.add('none-display')
+      currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
+      toBeActiveFilterBlock?.classList.remove('none-display')
+      borderDiv.classList.add('mt-md');
+      parrentDiv.classList.add('active');
+    } else {
+      toBeActiveFilterBlock?.classList.add('none-display')
+      borderDiv.classList.remove('mt-md');
+      parrentDiv.classList.remove('active');
+    }
+  }
+
   return (
-    <div className="ds-sdk-input pt-md">
+    <div className="ds-sdk-input">
       {inputGroupTitleSlot ? (
         inputGroupTitleSlot(title)
       ) : (
-        <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold">
-          {title}
-        </label>
+          (isHidden ? (
+              <label
+                  className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row"
+                  onClick={toggleFilters}>
+                {title}
+              </label>
+          ) : (
+              <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display flex flex-row">{title}</label>
+          ))
       )}
-      <fieldset className="ds-sdk-input__options">
+      <fieldset className={`ds-sdk-input__options mt-4 md:mt-0 ${isHidden ? 'none-display' : ''}`}>
         <div className="space-y-4">
-          {buckets.slice(0, numberOfOptions).map((option) => {
+          {buckets.map((option) => {
             const checked = isSelected(option.title);
             const noShowPriceBucketCount = option.__typename === 'RangeBucket';
             return (
@@ -123,25 +144,22 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
               />
             );
           })}
-          {!showMore && buckets.length > numberOfOptionsShown && (
-            <div
-              className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
-              onClick={() => setShowMore(true)}
-            >
-              <PlusIcon className="h-md w-md fill-neutral-800" />
-              <button
-                type="button"
-                className="ml-sm cursor-pointer border-none bg-transparent hover:border-none	hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
-              >
-                <span className="font-button-2 text-[12px]">
-                  {translation.InputButtonGroup.showmore}
-                </span>
-              </button>
-            </div>
+          {attribute === 'price' && (
+              <LabelledInput
+                name={`range-radio-${attribute}`}
+                attribute={attribute}
+                label={'Range price'}
+                checked={false}
+                value={'125.0-555.0'}
+                count={null}
+                onChange={onChange}
+                type={type}
+                isRangeInput={true}
+              />
           )}
         </div>
       </fieldset>
-      <div className="ds-sdk-input__border border-t mt-md border-neutral-500" />
+      <div className="ds-sdk-input__border border-t border-neutral-500" />
     </div>
   );
 };
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 677f4f98..c186eb3c 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -7,7 +7,7 @@ accordance with the terms of the Adobe license agreement accompanying
 it.
 */
 
-import { FunctionComponent } from 'preact';
+import {FunctionComponent} from 'preact';
 
 export type LabelledInputOnChangeProps = {
     value: string;
@@ -25,59 +25,107 @@ export interface LabelledInputProps {
   label: string;
   value: string;
   count?: number | null;
+  isRangeInput?: boolean | null
 }
 
 export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
-  type,
-  checked,
-  onChange,
-  name,
-  label,
-  attribute,
-  value,
-  count,
-}) => {
-  return(
-    type === 'link' ? (
-            <div className="ds-sdk-labelled-input flex items-center">
-        <a href={value} onClick={(e) => {
-            e.preventDefault();
-            onChange({value, type})
-        }}>
-            {label}
-            {count && (
-                <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
+     type,
+     checked,
+     onChange,
+     name,
+     label,
+     attribute,
+     value,
+     count,
+     key,
+     isRangeInput
+ }) => {
+    const href = `${window.location.origin}/${window.location.pathname.split('/')[1]}/${value}`
+    return (
+        type === 'link' || attribute === 'categories' ? (
+            <div className="ds-sdk-labelled-input flex gap-4 items-center">
+                <a href={href}
+                   onClick={(e) => {
+                       if (type === 'link') {
+                           e.preventDefault();
+                           onChange({value, type})
+                       }
+                   }}>
+                    {label}
+                    {count && (
+                        <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
                 {`(${count})`}
                 </span>
-            )}
-        </a>
+                    )}
+                </a>
             </div>
         ) : (
-            <div className="ds-sdk-labelled-input flex items-center">
-      <input
-        id={name}
-        name={
-          type === 'checkbox'
-            ? `checkbox-group-${attribute}`
-            : `radio-group-${attribute}`
-        }
-        type={type}
-        className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
-        checked={checked}
-        aria-checked={checked}
-        onInput={(e) => onChange({ value, selected: e.currentTarget.checked, type })}
-        value={value}
-      />
-      <label
-        htmlFor={name}
-        className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
-      >
-        {label}
-        {count && (
-          <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
-            {`(${count})`}
-          </span>
-        )}
-      </label>
-            </div>));
+            <>
+                {isRangeInput && (
+                    <div className="ds-sdk-labelled-input flex gap-4 items-center">
+                        <input type={'number'} value={''} id={'from-price'} />
+                        <input type={'number'} value={''} id={'to-price'} />
+aa
+                        <input
+                            id={name}
+                            name={
+                                type === 'checkbox'
+                                    ? `checkbox-group-${attribute}`
+                                    : `radio-group-${attribute}`
+                            }
+                            type={type}
+                            className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
+                            checked={checked}
+                            aria-checked={checked}
+                            onInput={(e) => {console.log(e.currentTarget.value); onChange({value: e.currentTarget.value, selected: e.currentTarget.checked, type})}}
+                            value={value}
+                        />
+                        <label
+                            htmlFor={name}
+                            className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
+                        >
+                            {label}
+                            {count && (
+                                <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
+                    {`(${count})`}
+                  </span>
+                            )}
+                        </label>
+
+                    </div>
+                )}
+
+                {!isRangeInput && (
+                    <div className="ds-sdk-labelled-input flex gap-4 items-center">
+                        <input
+                            id={name}
+                            name={
+                                type === 'checkbox'
+                                    ? `checkbox-group-${attribute}`
+                                    : `radio-group-${attribute}`
+                            }
+                            type={type}
+                            className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
+                            checked={checked}
+                            aria-checked={checked}
+                            onInput={(e) => onChange({value, selected: e.currentTarget.checked, type})}
+                            value={value}
+                        />
+                        <label
+                            htmlFor={name}
+                            className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
+                        >
+                            {label}
+                            {count && (
+                                <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
+                    {`(${count})`}
+                  </span>
+                            )}
+                        </label>
+
+                    </div>
+                )}
+            </>
+        )
+    );
 };
diff --git a/src/components/MobileFacets/MobileFacets.tsx b/src/components/MobileFacets/MobileFacets.tsx
index dfd7d2ed..e909ebb1 100644
--- a/src/components/MobileFacets/MobileFacets.tsx
+++ b/src/components/MobileFacets/MobileFacets.tsx
@@ -10,17 +10,29 @@ it.
 import { FunctionComponent } from 'preact';
 
 import { useStore } from '../../context';
-import { Facet as FacetType, PriceFacet } from '../../types/interface';
+import {Facet as FacetType, PriceFacet, SortOption} from '../../types/interface';
 import SliderDoubleControl from '../SliderDoubleControl';
 import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
+import CloseIcon from "../../icons/plus.svg";
+import {SortDropdown} from "../SortDropdown";
 
 interface FacetsProps {
   searchFacets: FacetType[];
+  onClose: () => void;
+  value: string;
+  sortOptions: SortOption[];
+  onChange: (sortBy: string) => void;
+  mobile?: boolean;
 }
 
 export const MobileFacets: FunctionComponent<FacetsProps> = ({
   searchFacets,
+  onClose,
+  value,
+  sortOptions,
+  onChange,
+  mobile
 }: FacetsProps) => {
   const {
     config: { priceSlider },
@@ -28,28 +40,41 @@ export const MobileFacets: FunctionComponent<FacetsProps> = ({
 
   return (
     <div className="ds-plp-facets flex flex-col">
-      <h1>Filter Products</h1>
-      <form className="ds-plp-facets__list border-t border-neutral-500">
-        {searchFacets?.map((facet) => {
-          const bucketType = facet?.buckets[0]?.__typename;
-          switch (bucketType) {
-            case 'ScalarBucket':
-              return <ScalarFacet key={facet.attribute} filterData={facet} />;
-            case 'RangeBucket':
-              return priceSlider ? (
-                <SliderDoubleControl filterData={facet as PriceFacet} />
-              ) : (
-                <RangeFacet
-                  key={facet.attribute}
-                  filterData={facet as PriceFacet}
-                />
-              );
-            case 'CategoryView':
-              return <ScalarFacet key={facet.attribute} filterData={facet} />;
-            default:
-              return null;
-          }
-        })}
+        <div className={'flex flex-row'}>
+            <h1>Sort&Filter</h1>
+            <CloseIcon
+                className="h-[28px] w-[28px] rotate-45 inline-block cursor-pointer fill-neutral-800 ml-auto"
+                onClick={onClose}
+            />
+        </div>
+
+        <form className="ds-plp-facets__list border-t border-neutral-500">
+            <SortDropdown
+              sortOptions={sortOptions}
+              value={value}
+              onChange={onChange}
+              mobile
+            />
+            {searchFacets?.map((facet) => {
+              const bucketType = facet?.buckets[0]?.__typename;
+              switch (bucketType) {
+                case 'ScalarBucket':
+                  return <ScalarFacet key={facet.attribute} filterData={facet} />;
+                case 'RangeBucket':
+                  return priceSlider ? (
+                    <SliderDoubleControl filterData={facet as PriceFacet} />
+                  ) : (
+                    <RangeFacet
+                      key={facet.attribute}
+                      filterData={facet as PriceFacet}
+                    />
+                  );
+                case 'CategoryView':
+                  return <ScalarFacet key={facet.attribute} filterData={facet} />;
+                default:
+                  return null;
+              }
+            })}
       </form>
     </div>
   );
diff --git a/src/components/MobileFacets/Range/RangeFacet.tsx b/src/components/MobileFacets/Range/RangeFacet.tsx
index 4890fa87..c26ee24c 100644
--- a/src/components/MobileFacets/Range/RangeFacet.tsx
+++ b/src/components/MobileFacets/Range/RangeFacet.tsx
@@ -29,6 +29,7 @@ export const RangeFacet: FunctionComponent<RangeFacetProps> = ({
       buckets={filterData.buckets}
       type={'radio'}
       isSelected={isSelected}
+      isHidden={true}
       onChange={(e) => {
         onChange(e.value);
       }}
diff --git a/src/components/MobileFacets/Scalar/ScalarFacet.tsx b/src/components/MobileFacets/Scalar/ScalarFacet.tsx
index 1233a6ed..368ffa0c 100644
--- a/src/components/MobileFacets/Scalar/ScalarFacet.tsx
+++ b/src/components/MobileFacets/Scalar/ScalarFacet.tsx
@@ -29,6 +29,7 @@ export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
       buckets={filterData.buckets as any}
       type={'checkbox'}
       isSelected={isSelected}
+      isHidden={true}
       onChange={(args) => onChange(args.value, args.selected)}
     />
   );
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index b43baf1c..e8f58cdf 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -32,7 +32,7 @@ export const Pill: FunctionComponent<PillProps> = ({
 }) => {
   const typeStyles: { [key in NonNullable<PillProps['type']>]: string } = {
     transparent: 'rounded-full px-4 py-1',
-    filter: 'border border-black-50 px-2 py-1',
+    filter: 'border border-neutral-450 px-2 py-1',
   };
 
   const baseStyles =
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 8e525e87..8aab2fe6 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -147,7 +147,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
   const {displayFranchises } = useSearch();
 
   const className = showFilters
-    ? 'ds-sdk-product-list bg-body max-w-full pb-2xl sm:pb-24'
+    ? 'ds-sdk-product-list bg-body w-full max-w-full pb-2xl sm:pb-24'
     : 'ds-sdk-product-list bg-body w-full mx-auto pb-2xl sm:pb-24';
 
   useEffect(() => {
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index c55687b5..b85743b3 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -12,7 +12,6 @@ import { useEffect, useRef } from 'preact/hooks';
 
 import { useTranslation } from '../../context/translation';
 import { useAccessibleDropdown } from '../../hooks/useAccessibleDropdown';
-import Chevron from '../../icons/chevron.svg';
 import { SortOption } from '../../types/interface';
 
 export interface SortDropdownProps {
@@ -79,62 +78,54 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     };
   }, [sortOptionMenu]);
 
+  const toggleFilters = (event) => {
+    const clicked = event.target;
+    const toBeActiveFilterBlock = clicked.nextElementSibling;
+    const parrentDiv = clicked.closest('.ds-sdk-input')
+    const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
+
+    if (toBeActiveFilterBlock.classList.contains('none-display')) {
+      const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
+      currentFilterBlock?.classList.add('none-display')
+      currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
+      toBeActiveFilterBlock?.classList.remove('none-display')
+      borderDiv.classList.add('mt-md');
+    } else {
+      toBeActiveFilterBlock?.classList.add('none-display')
+      borderDiv.classList.remove('mt-md');
+    }
+  }
+
   return (
     <>
-      <div
-        ref={sortOptionMenu}
-        class="ds-sdk-sort-dropdown flex items-center gap-x-2 shrink-0 relative inline-block text-left bg-neutral-50 z-9"
-      >
-        {!mobile && <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold">
-          {translation.SortDropdown.title}
-        </label>}
-        <button
-          className="group flex justify-center items-center gap-x-1 hover:cursor-pointer bg-background h-full"
-          ref={sortOptionButton}
-          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-          onFocus={() => setIsFocus(false)}
-          onBlur={() => setIsFocus(false)}
+      <div ref={sortOptionMenu} class="ds-sdk-input">
+        <label
+            className={'ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row'}
+            onClick={toggleFilters}
         >
-          <span className={`font-headline-1 text-sm ${!mobile ? 'text-neutral-700' : ''}`}>
-            {selectedOption ? sortOption : translation.SortDropdown.title}
-          </span>
-          <Chevron
-            className={`flex-shrink-0 h-sm w-sm stroke-1 stroke-brand-700 ${
-              isDropdownOpen ? 'rotate-180' : ''
-            }`}
-          />
-        </button>
-        {isDropdownOpen && (
-          <ul
-            ref={listRef}
-            tabIndex={-1}
-            className="ds-sdk-sort-dropdown__items top-full absolute hover:cursor-pointer right-0 w-28 rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
-          >
+          {translation.SortDropdown.title}
+        </label>
+        <fieldset className={'ds-sdk-input__options mt-4 md:mt-0 none-display'}>
+          <div className={'space-y-4'}>
             {sortOptions.map((option, i) => (
-              <li
-                key={i}
-                aria-selected={option.value === selectedOption?.value}
-                onMouseOver={() => setActiveIndex(i)}
-                className={`py-xs hover:bg-neutral-200 hover:text-neutral-900 ${
-                  i === activeIndex ? 'bg-neutral-200 text-neutral-900' : ''
-                }}`}
-              >
-                <a
-                  className={`ds-sdk-sort-dropdown__items--item block-display px-md py-sm text-sm mb-0
-              no-underline active:no-underline focus:no-underline hover:no-underline
-              hover:text-neutral-900 ${
-                option.value === selectedOption?.value
-                  ? 'ds-sdk-sort-dropdown__items--item-selected font-semibold text-neutral-900'
-                  : 'font-normal text-neutral-800'
-              }`}
-                  onClick={() => select(option.value)}
+              <div className={'ds-sdk-labelled-input flex gap-4 items-center'}>
+                <input type={'radio'}
+                       value={'option.value'}
+                       checked={option.value === selectedOption?.value}
+                       onClick={() => select(option.value)}
+                       className={'ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]'}
+                />
+                <label for={'sortby-' + option.value}
+                       onClick={() => select(option.value)}
+                       className={'ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer'}
                 >
                   {option.label}
-                </a>
-              </li>
+                </label>
+              </div>
             ))}
-          </ul>
-        )}
+          </div>
+        </fieldset>
+        <div className={'ds-sdk-input__border border-t border-neutral-500'}></div>
       </div>
     </>
   );
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 497e5a5f..4482d869 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -14,7 +14,6 @@ import FilterButton from 'src/components/FilterButton';
 import Loading from 'src/components/Loading';
 import Shimmer from 'src/components/Shimmer';
 
-import { CategoryFilters } from '../components/CategoryFilters';
 import {FranchiseViewSelector} from "../components/Facets/FranchiseViewSelector";
 import {
   useProducts,
@@ -52,32 +51,27 @@ export const App: FunctionComponent = () => {
             )}
             <Enrichment position={'below-title'} />
             <div className="flex flex-col">
-              {productsCtx.totalCount && (
-                <CategoryFilters
-                  loading={productsCtx.loading}
-                  pageLoading={productsCtx.pageLoading}
-                  facets={productsCtx.facets}
-                  totalCount={productsCtx.totalCount}
-                  categoryName={productsCtx.categoryName ?? ''}
-                  phrase={productsCtx.variables.phrase ?? ''}
-                  showFilters={showFilters}
-                  setShowFilters={setShowFilters}
-                  filterCount={searchCtx.filterCount}
+              <div className="flex w-full h-full testing">
+                <MobileFilterHeader
+                    facets={productsCtx.facets}
+                    totalCount={productsCtx.totalCount}
+                    screenSize={screenSize}
                 />
-              )}
-              <Enrichment position={'above-grid'} />
+              </div>
               <div
-                className={`ds-widgets_results flex flex-col items-center flex-[75] ds-widgets-results__center-container `}
+                  className={`ds-widgets_results flex flex-col items-center flex-[75] ds-widgets-results__center-container `}
               >
-                <ProductsContainer showFilters={showFilters} />
+                <ProductsContainer showFilters={showFilters}/>
               </div>
+              <Enrichment position={'above-grid'}/>
             </div>
           </div>
         ) : (
-          <div className="ds-widgets bg-body py-2">
-            {searchCtx.phrase && (
-              <div className="product-list-page-header flex flex-col gap-4 justify-center items-center h-[180px] lg:h-[248px]">
-                <h1 className="text-center capitalize">
+            <div className="ds-widgets bg-body py-2">
+              {searchCtx.phrase && (
+                  <div
+                      className="product-list-page-header flex flex-col gap-4 justify-center items-center h-[180px] lg:h-[248px]">
+                    <h1 className="text-center capitalize">
                   {searchCtx.phrase}
                 </h1>
               </div>
@@ -117,9 +111,6 @@ export const App: FunctionComponent = () => {
                         screenSize={screenSize}
                       />
                     </div>
-                    {displayByFranchise && (
-                      <FranchiseViewSelector />
-                    )}
                     <Enrichment position={'above-grid'} />
                     <ProductsContainer
                       showFilters={showFilters && productsCtx.facets.length > 0}
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 895cf945..be9fc503 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -11,9 +11,9 @@ import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { Drawer } from 'src/components/Drawer/Drawer';
 import MobileFacets from 'src/components/MobileFacets';
+import Chevron from '../icons/chevron.svg';
 
 import { FilterButton } from '../components/FilterButton';
-import { SortDropdown } from '../components/SortDropdown';
 import {
   useAttributeMetadata,
   useProducts,
@@ -28,6 +28,7 @@ import {
   generateGQLSortInput,
   getSortOptionsfromMetadata,
 } from '../utils/sort';
+import {CategoryFilters} from "../components";
 
 interface Props {
   facets: Facet[];
@@ -99,35 +100,49 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
     return null;
   }
 
+  const [showFilters, setShowFilters] = useState(true);
   return (
-    <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
-      <div className="flex border-t border-b border-neutral-400">
-        {screenSize.mobile && (
-          <div className="flex justify-center w-1/2 py-md border-r border-neutral-400">
-            <FilterButton
-              displayFilter={() => setShowMobileFacet(!showMobileFacet)}
-              type="mobile"
+      <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
+        {!screenSize.mobile && productsCtx.totalCount && (
+            <CategoryFilters
+                loading={productsCtx.loading}
+                pageLoading={productsCtx.pageLoading}
+                facets={productsCtx.facets}
+                totalCount={productsCtx.totalCount}
+                categoryName={productsCtx.categoryName ?? ''}
+                phrase={productsCtx.variables.phrase ?? ''}
+                showFilters={showFilters}
+                setShowFilters={setShowFilters}
+                displayFilter={() => setShowMobileFacet(!showMobileFacet)}
+                filterCount={searchCtx.filterCount}
             />
-          </div>
         )}
-
-        <div className="flex justify-center w-1/2 py-md">
-          <SortDropdown
-            sortOptions={sortOptions}
-            value={sortBy}
-            onChange={onSortChange}
-            mobile
-          />
+        {screenSize.mobile && (
+            <div className="flex border-t border-b border-neutral-400 bg-black">
+              <div className="flex justify-center w-full py-md border-r border-neutral-400">
+                <FilterButton
+                    displayFilter={() => setShowMobileFacet(!showMobileFacet)}
+                    type="mobile"
+                />
+              </div>
+            </div>
+          )}
+        <div class="mobile-filters-container">
+          <Drawer
+              isOpen={showMobileFacet}
+              onClose={() => setShowMobileFacet(!showMobileFacet)}
+              totalCount={totalCount}
+          >
+            <MobileFacets
+                searchFacets={facets}
+                onClose={() => setShowMobileFacet(!showMobileFacet)}
+                sortOptions={sortOptions}
+                value={sortBy}
+                onChange={onSortChange}
+                mobile
+            />
+          </Drawer>
         </div>
       </div>
-      {screenSize.mobile && (
-        <Drawer
-          isOpen={showMobileFacet}
-          onClose={() => setShowMobileFacet(!showMobileFacet)}
-        >
-          <MobileFacets searchFacets={facets} />
-        </Drawer>
-      )}
-    </div>
   );
 };
diff --git a/src/hooks/useRangeFacet.ts b/src/hooks/useRangeFacet.ts
index d5c60f2f..9f5fa7ac 100644
--- a/src/hooks/useRangeFacet.ts
+++ b/src/hooks/useRangeFacet.ts
@@ -25,6 +25,9 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
       })
   );
 
+  console.log(buckets)
+  console.log(processedBuckets)
+
   const searchCtx = useSearch();
 
   const filter = searchCtx?.filters?.find(
@@ -40,12 +43,15 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
   };
 
   const onChange = (value: string) => {
+    const fromRange = processedBuckets[value] ? processedBuckets[value].from : parseInt(value.split('-')[0], 10)
+    const toRange = processedBuckets[value] ? processedBuckets[value].to : parseInt(value.split('-')[1], 10)
+
     if (!filter) {
       const newFilter = {
         attribute,
         range: {
-          from: processedBuckets[value].from,
-          to: processedBuckets[value].to,
+          from: fromRange,
+          to: toRange,
         },
       };
       searchCtx.createFilter(newFilter);
@@ -55,8 +61,8 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
     const newFilter = {
       ...filter,
       range: {
-        from: processedBuckets[value].from,
-        to: processedBuckets[value].to,
+        from: fromRange,
+        to: toRange,
       },
     };
     searchCtx.updateFilter(newFilter);
diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts
index 5923107e..ae562472 100644
--- a/src/i18n/en_US.ts
+++ b/src/i18n/en_US.ts
@@ -9,7 +9,7 @@ it.
 
 export const en_US = {
   Filter: {
-    title: 'Filters',
+    title: 'Sort & Filter',
     showTitle: 'Show filters',
     hideTitle: 'Hide filters',
     clearAll: 'Clear all',
diff --git a/src/icons/sortfilter.svg b/src/icons/sortfilter.svg
new file mode 100644
index 00000000..dd870309
--- /dev/null
+++ b/src/icons/sortfilter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M80 336a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm76.3 8L488 344c13.3 0 24 10.7 24 24s-10.7 24-24 24l-331.7 0c-10.2 32.5-40.5 56-76.3 56c-44.2 0-80-35.8-80-80s35.8-80 80-80c35.8 0 66.1 23.5 76.3 56zM400 144a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zm-44.3-24c10.2-32.5 40.5-56 76.3-56c44.2 0 80 35.8 80 80s-35.8 80-80 80c-35.8 0-66.1-23.5-76.3-56L24 168c-13.3 0-24-10.7-24-24s10.7-24 24-24l331.7 0z"/></svg>
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 09d88b7a..b3b6ad0d 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -606,6 +606,9 @@ video {
   .mr-xs {
     margin-right: var(--spacing-xs);
   }
+  .mt-0 {
+    margin-top: 0;
+  }
   .mt-2 {
     margin-top: 0.5rem;
   }
@@ -660,12 +663,18 @@ video {
   .h-\[15px\] {
     height: 15px;
   }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[180px\] {
     height: 180px;
   }
   .h-\[20px\] {
     height: 20px;
   }
+  .h-\[28px\] {
+    height: 28px;
+  }
   .h-\[32px\] {
     height: 32px;
   }
@@ -738,9 +747,15 @@ video {
   .w-\[15px\] {
     width: 15px;
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[20px\] {
     width: 20px;
   }
+  .w-\[28px\] {
+    width: 28px;
+  }
   .w-\[40px\] {
     width: 40px;
   }
@@ -748,6 +763,10 @@ video {
     width: -moz-fit-content;
     width: fit-content;
   }
+  .w-max {
+    width: -moz-max-content;
+    width: max-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -837,6 +856,16 @@ video {
       transform: translateY(0);
     }
   }
+
+  @keyframes slideRight {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
   .animate-slideUp {
     animation: slideUp 0.3s ease-out forwards;
   }
@@ -865,9 +894,15 @@ video {
        -moz-appearance: none;
             appearance: none;
   }
+  .grid-flow-row {
+    grid-auto-flow: row;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .grid-cols-none {
     grid-template-columns: none;
   }
@@ -938,6 +973,10 @@ video {
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
   }
+  .gap-x-3\.2rem {
+    -moz-column-gap: 3.2rem;
+         column-gap: 3.2rem;
+  }
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
          column-gap: var(--spacing-md);
@@ -1049,6 +1088,9 @@ video {
   .border-neutral-400 {
     border-color: var(--color-neutral-400);
   }
+  .border-neutral-450 {
+    border-color: var(--color-neutral-450);
+  }
   .border-neutral-500 {
     border-color: var(--color-neutral-500);
   }
@@ -1122,6 +1164,9 @@ video {
   .stroke-neutral-600 {
     stroke: var(--color-neutral-600);
   }
+  .stroke-neutral-50 {
+    stroke: var(--color-neutral-50);
+  }
   .stroke-1 {
     stroke-width: var(--shape-icon-stroke-1);
   }
@@ -1145,6 +1190,9 @@ video {
   .p-4 {
     padding: 1rem;
   }
+  .p-12 {
+    padding: 3rem;
+  }
   .p-\[14px\] {
     padding: 14px;
   }
@@ -1248,12 +1296,18 @@ video {
   .pl-8 {
     padding-left: 2rem;
   }
+  .pl-24 {
+    padding-left: 6rem;
+  }
   .pr-2 {
     padding-right: 0.5rem;
   }
   .pr-5 {
     padding-right: 1.25rem;
   }
+  .pr-24 {
+    padding-right: 6rem;
+  }
   .pr-lg {
     padding-right: var(--spacing-lg);
   }
@@ -1587,11 +1641,31 @@ video {
       padding-bottom: 1.5rem;
     }
   }
+  @media (min-width: 768px) {
+    .md\:h-full {
+      height: 100%;
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:grid {
+      display: grid;
+    }
+  }
   @media (min-width: 768px) {
     .md\:ml-6 {
       margin-left: 1.5rem;
     }
   }
+  @media (min-width: 768px) {
+    .md\:mt-md {
+      margin-top: var(--spacing-md);
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:mt-4 {
+      margin-top: 1rem;
+    }
+  }
   @media (min-width: 768px) {
     .md\:flex {
       display: flex;
@@ -1602,6 +1676,11 @@ video {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
+  @media (min-width: 768px) {
+    .md\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
   @media (min-width: 768px) {
     .md\:justify-between {
       justify-content: space-between;
@@ -1623,6 +1702,16 @@ video {
       padding-right: 24px;
     }
   }
+  @media (min-width: 768px) {
+    .md\:flex-1-0-100 {
+      flex: 1 0 100%;
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:animate-slideRight {
+      animation: slideRight 0.3s ease-out forwards;
+    }
+  }
   @media (min-width: 1024px) {
     .lg\:h-\[248px\] {
       height: 248px;
@@ -1700,6 +1789,7 @@ video {
   --color-neutral-200: #f5f5f5;
   --color-neutral-300: #e8e8e8;
   --color-neutral-400: #d6d6d6;
+  --color-neutral-450: #dddddd;
   --color-neutral-500: #b8b8b8;
   --color-neutral-600: #8f8f8f;
   --color-neutral-700: #666;
@@ -1953,6 +2043,14 @@ video {
   display: block;
 }
 
+.none-display {
+  display: none;
+}
+
+.ib-display {
+  display: inline-block;
+}
+
 .loading-spinner-on-mobile {
   position: fixed;
   top: 50%;

From e5f7df6b8fefc4e78e0d951f46c2b5ccaabac893 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Fri, 11 Oct 2024 15:37:29 +0200
Subject: [PATCH 114/160] WAF-396 - Filters cleanup work

---
 src/components/Drawer/Drawer.tsx              |   8 +-
 src/components/Facets/Facets.tsx              | 119 ++++++--------
 src/components/Facets/Scalar/ScalarFacet.tsx  |   7 -
 src/components/Facets/SelectedFilters.tsx     | 149 +++++++++---------
 src/components/Facets/filters.css             |  62 --------
 .../FilterSelection/FilterSelection.tsx       |  72 +--------
 .../InputButtonGroup/InputButtonGroup.tsx     |  27 +---
 .../LabelledInput/LabelledInput.tsx           |  41 -----
 src/components/MobileFacets/MobileFacets.tsx  |   6 +-
 src/components/Pill/Pill.tsx                  |   4 +-
 src/components/SortDropdown/SortDropdown.tsx  |  54 +++----
 src/containers/MobileFilterHeader.tsx         |   2 +-
 src/hooks/useRangeFacet.ts                    |  19 +--
 src/styles/index.css                          |  31 ++++
 14 files changed, 191 insertions(+), 410 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index fcb3df30..6104084a 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -32,12 +32,12 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
     <>
       {isOpen && (
           <div className="fixed inset-0 z-50 flex bg-black bg-opacity-50">
-            <div className="relative mt-auto w-full bg-white h-[80%] md:h-full shadow-lg overflow-auto animate-slideUp md:animate-slideRight">
+            <div className="relative mt-auto w-full bg-white h-[80%] md:h-full shadow-lg overflow-auto animate-slideUp pb-20 md:animate-slideRight md:max-w-[500px]">
               <div className="p-12">{children}</div>
             </div>
-            <div class="apply-buttons md:animate-slideRight">
-              <button class="apply-buttons_button" onClick={() => searchCtx.clearFilters()}>clear filters</button>
-              <button class="apply-buttons_button apply-buttons_button--view" onClick={onClose}>view {totalCount} results</button>
+            <div class="apply-buttons absolute left-0 right-0 bottom-0 flex p-4 gap-4 md:animate-slideRight md:max-w-[485px] ">
+              <button class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-white text-black capitalize" onClick={() => searchCtx.clearFilters()}>clear filters</button>
+              <button class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-black text-white capitalize" onClick={onClose}>view {totalCount} results</button>
             </div>
           </div>
       )}
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 2316e604..0b929940 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -10,10 +10,9 @@ it.
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import useScalarFacet from 'src/hooks/useScalarFacet';
-import { getValueFromUrl, handleUrlSort } from 'src/utils/handleUrlFilters';
+import { getValueFromUrl } from 'src/utils/handleUrlFilters';
 import {
   defaultSortOptions,
-  generateGQLSortInput,
   getSortOptionsfromMetadata,
 } from 'src/utils/sort';
 
@@ -23,7 +22,7 @@ import {
   useStore,
   useTranslation,
 } from '../../context';
-import { Facet as FacetType, PriceFacet } from '../../types/interface';
+import { Facet as FacetType } from '../../types/interface';
 import FilterSelectionGroup from '../FilterSelection';
 import { ScalarFacet } from './Scalar/ScalarFacet';
 import { SelectedFilters } from './SelectedFilters';
@@ -35,6 +34,48 @@ interface FacetsProps {
   displayFilter: () => void;
 }
 
+export const scrollFilter = (
+    event: Omit<MouseEvent, "currentTarget"> & { readonly currentTarget: HTMLDivElement },
+    displayFunction: (() => void) | undefined
+) => {
+  displayFunction?.();
+
+  const clicked = event.target;
+  const filterNumber = Number(clicked.id.split('-')[1])
+  const targetNode = document.querySelector('.mobile-filters-container');
+  const config = { attributes: false, childList: true, subtree: true };
+
+  const wait = async (time) => {
+    return new Promise(resolve => {
+      setTimeout(resolve, time);
+    });
+  }
+  const callback = async (mutationList, observer) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+        await wait(300);
+        const filterInput = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input');
+        const filterToShow = filterInput[filterNumber];
+        const filterToHide = filterInput.querySelector('fieldset:not(.none-display)');
+
+        filterToHide.forEach(element => {
+          element.closest('.ds-sdk-input')?.classList.remove('active')
+          element.classList.add('none-display')
+          element.nextElementSibling?.classList.remove('mt-md')
+        })
+
+        filterToShow.classList.add('active');
+        filterToShow.querySelector('fieldset')?.classList.remove('none-display');
+        filterToShow.querySelector('.ds-sdk-input__border')?.classList.add('mt-md');
+        break;
+      }
+    }
+  };
+
+  const observer = new MutationObserver(callback);
+  observer.observe(targetNode, config);
+}
+
 export const Facets: FunctionComponent<FacetsProps> = ({
   searchFacets,
   totalCount,
@@ -77,33 +118,6 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   }, [getSortOptions]);
 
   const isCategory = config?.currentCategoryUrlPath || config?.currentCategoryId;
-  const defaultSortOption =
-    isCategory
-      ? 'position_ASC'
-      : 'relevance_DESC';
-  const sortFromUrl = getValueFromUrl('product_list_order');
-  const sortByDefault = sortFromUrl ? sortFromUrl : defaultSortOption;
-  const [sortBy, setSortBy] = useState<string>(sortByDefault);
-  const onSortChange = (sortOption: string) => {
-    setSortBy(sortOption);
-    searchCtx.setSort(generateGQLSortInput(sortOption));
-    handleUrlSort(sortOption);
-  };
-  const wait = async (time) => {
-    return new Promise(resolve => {
-      setTimeout(resolve, time);
-    });
-  }
-  const handleTesting = async (facet: FacetType) => {
-    document.querySelector('.ds-sdk-filterGroup')?.classList.remove('open');
-    await wait(257);
-    setSelectedFacet((prevFacet) => {
-      if (!prevFacet || prevFacet.title !== facet.title) {
-        return facet;
-      }
-      return null;
-    });
-  };
 
   const getSelectedFilters = (facet: FacetType) => {
     const { attribute } = facet;
@@ -125,43 +139,6 @@ export const Facets: FunctionComponent<FacetsProps> = ({
     onChange(value, selected);
   }
 
-  const scrollFilter = (event) => {
-    displayFilter?.();
-
-    const clicked = event.target;
-    const filterNumber = Number(clicked.id.split('-')[1])
-    const targetNode = document.querySelector('.mobile-filters-container');
-    const config = { attributes: false, childList: true, subtree: true };
-
-    const wait = async (time) => {
-      return new Promise(resolve => {
-        setTimeout(resolve, time);
-      });
-    }
-    const callback = async (mutationList, observer) => {
-      for (const mutation of mutationList) {
-        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-          await wait(300);
-          const filterToShow = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input')[filterNumber]
-          const filterToHide = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input fieldset:not(.none-display)')
-
-          filterToHide.forEach(element => {
-            element.closest('.ds-sdk-input')?.classList.remove('active')
-            element.classList.add('none-display')
-            element.nextElementSibling?.classList.remove('mt-md')
-          })
-
-          filterToShow.classList.add('active');
-          filterToShow.querySelector('fieldset')?.classList.remove('none-display');
-          filterToShow.querySelector('.ds-sdk-input__border')?.classList.add('mt-md');
-          break;
-        }
-      }
-    };
-    const observer = new MutationObserver(callback);
-    observer.observe(targetNode, config);
-  }
-
   return (
     <div className="ds-plp-facets flex flex-col">
       <div className="border-t border-b border-neutral-450">
@@ -169,7 +146,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           <div className="flex justify-between">
             <form className="ds-plp-facets__list flex gap-x-3.2rem">
               <div class="ds-sdk-input py-md">
-                <div class="flex items-center gap-x-1 cursor-pointer" onClick={scrollFilter}>
+                <div class="flex items-center gap-x-1 cursor-pointer" onClick={(event) => scrollFilter(event, displayFilter)}>
                   <label id={'filter-0'}
                          className="flex flex-row gap-4 ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer">
                     <SortFilterIcon className="h-[18px] w-[18px] fill-neutral-800" />
@@ -186,9 +163,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                             key={facet.attribute}
                             filterData={facet}
                             iteration={index}
-                            handleFilter={() => handleTesting(facet)}
                             selectedNumber={getSelectedFilters(facet)}
-                            selectedFacet={selectedFacet}
                             displayFilter={displayFilter}
                         />
                     );
@@ -197,9 +172,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                         key={facet.attribute}
                         filterData={facet}
                         iteration={index}
-                        handleFilter={() => handleTesting(facet)}
                         selectedNumber={getSelectedFilters(facet)}
-                        selectedFacet={selectedFacet}
                         displayFilter={displayFilter}
                     />
                   case 'CategoryView':
@@ -208,9 +181,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                             key={facet.attribute}
                             filterData={facet}
                             iteration={index}
-                            handleFilter={() => handleTesting(facet)}
                             selectedNumber={getSelectedFilters(facet)}
-                            selectedFacet={selectedFacet}
                             displayFilter={displayFilter}
                         />
                     );
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 28cc8145..4d1b9bb3 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -10,24 +10,19 @@ import { FunctionComponent } from 'preact';
 import { FilterSelection } from 'src/components/FilterSelection';
 
 import { Facet as FacetType, PriceFacet } from '../../../types/interface';
-export type HandleFilterType = () => void;
 export type DisplayFilterType = () => void;
 
 interface ScalarFacetProps {
   filterData: FacetType | PriceFacet;
   iteration: number;
-  handleFilter?: HandleFilterType;
   displayFilter?: DisplayFilterType;
   selectedNumber?: number;
-  selectedFacet?: FacetType | PriceFacet | null;
 }
 
 export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   filterData,
   iteration,
-  handleFilter,
   selectedNumber,
-  selectedFacet,
   displayFilter,
 }) => {
   return (
@@ -35,10 +30,8 @@ export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
       <FilterSelection
         title={filterData.title}
         attribute={filterData.attribute}
-        handleFilter={handleFilter}
         displayFilter={displayFilter}
         selectedNumber={selectedNumber}
-        selectedFacet={selectedFacet}
         iteration={iteration}
       />
     </>
diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 16635d2f..4783e42f 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -11,10 +11,10 @@ import { FunctionComponent } from 'preact';
 
 import "./filters.css";
 
-import {useProducts, useSearch, useStore, useTranslation} from '../../context';
+import { useProducts, useSearch, useStore, useTranslation } from '../../context';
 import Pill from '../Pill';
 import { formatBinaryLabel, formatRangeLabel } from './format';
-import {FranchiseViewSelector} from "./FranchiseViewSelector";
+import { FranchiseViewSelector } from "./FranchiseViewSelector";
 
 interface SelectedFiltersProps {
   totalCount?: number;
@@ -25,83 +25,84 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
   totalCount,
   isCount
 }) => {
-    const searchCtx = useSearch();
-    const productsCtx = useProducts();
-    const storeCtx = useStore();
-    const translation = useTranslation();
+  const searchCtx = useSearch();
+  const productsCtx = useProducts();
+  const storeCtx = useStore();
+  const translation = useTranslation();
 
-    return (
+  return (
     <>
-        {isCount && (
-            <div className="h-full flex justify-between items-center py-md flex-row">
-                {!searchCtx.displayFranchises && (
-                    <p className="result-count">{totalCount} Results</p>
-            )}
+      {isCount && (
+        <div className="h-full flex justify-between items-center py-md flex-row">
+          {!searchCtx.displayFranchises && (
+            <p className="result-count">{totalCount} Results</p>
+          )}
 
-            {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '1' && (
-                <FranchiseViewSelector/>
-            )}
-            </div>
-        )}
+          {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '1' && (
+            <FranchiseViewSelector/>
+          )}
+        </div>
+      )}
 
-        {!isCount && (
-            <div className="w-full h-full flex justify-between items-center sm:pb-6 py-md flex-wrap px-[12px] md:px-[24px] lg:px-[48px]">
-                <div className="ds-plp-facets__pills flex flex-wrap justify-start items-center gap-[16px]">
-                    {searchCtx.filters?.length > 0 && searchCtx.filters.map((filter) => (
-                        <div
-                            key={filter.attribute}
-                            className="flex items-center gap-[16px]"
-                        >
-                            {filter.in?.map((option) => (
-                                <Pill
-                                    key={formatBinaryLabel(
-                                        filter,
-                                        option,
-                                        searchCtx.categoryNames,
-                                        productsCtx.categoryPath
-                                    )}
-                                    label={formatBinaryLabel(
-                                        filter,
-                                        option,
-                                        searchCtx.categoryNames,
-                                        productsCtx.categoryPath
-                                    )}
-                                    type="filter"
-                                    onClick={() => searchCtx.updateFilterOptions(filter, option)}
-                                />
-                            ))}
-                            {filter.range && (
-                                <Pill
-                                    label={formatRangeLabel(
-                                        filter,
-                                        productsCtx.currencyRate,
-                                        productsCtx.currencySymbol
-                                    )}
-                                    type="transparent"
-                                    onClick={() => {
-                                        searchCtx.removeFilter(filter.attribute);
-                                    }}
-                                />
-                            )}
-                        </div>
-                    ))}
-                    {searchCtx.filters?.length > 0 && (
-                        <div className="py-1">
-                            <button
-                                className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
-                          focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
-                                onClick={() => searchCtx.clearFilters()}
-                            >
-                          <span className="font-button-2 text-sm underline hover:no-underline">
-                            {translation.Filter.clearAll}
-                          </span>
-                            </button>
-                        </div>
+      {!isCount && (
+        <div
+          className="w-full h-full flex justify-between items-center sm:pb-6 py-md flex-wrap px-[12px] md:px-[24px] lg:px-[48px]">
+          <div className="ds-plp-facets__pills flex flex-wrap justify-start items-center gap-[16px]">
+            {searchCtx.filters?.length > 0 && searchCtx.filters.map((filter) => (
+              <div
+                key={filter.attribute}
+                className="flex items-center gap-[16px]"
+              >
+                {filter.in?.map((option) => (
+                  <Pill
+                    key={formatBinaryLabel(
+                      filter,
+                      option,
+                      searchCtx.categoryNames,
+                      productsCtx.categoryPath
+                    )}
+                    label={formatBinaryLabel(
+                      filter,
+                      option,
+                      searchCtx.categoryNames,
+                      productsCtx.categoryPath
                     )}
-                </div>
-            </div>
-        )}
+                    type="filter"
+                    onClick={() => searchCtx.updateFilterOptions(filter, option)}
+                  />
+                ))}
+                {filter.range && (
+                  <Pill
+                    label={formatRangeLabel(
+                      filter,
+                      productsCtx.currencyRate,
+                      productsCtx.currencySymbol
+                    )}
+                    type="transparent"
+                    onClick={() => {
+                      searchCtx.removeFilter(filter.attribute);
+                    }}
+                  />
+                )}
+              </div>
+            ))}
+            {searchCtx.filters?.length > 0 && (
+              <div className="py-1">
+                <button
+                  className="ds-plp-facets__header__clear-all border-none bg-transparent hover:border-none	hover:bg-transparent
+                          focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
+                  onClick={() => searchCtx.clearFilters()}
+                >
+                  <span className="font-button-2 text-sm underline hover:no-underline">
+                    {translation.Filter.clearAll}
+                  </span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </>
-)
+  )
     ;
 };
diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
index 55661213..c57b4439 100644
--- a/src/components/Facets/filters.css
+++ b/src/components/Facets/filters.css
@@ -15,39 +15,7 @@
   float: right
 }
 
-.mobile-filters-container{
-  z-index: 900;
-}
-
-.mobile-filters-container{
-  h1 {
-    font-size: var(--font-2xl);
-    margin-bottom: 2rem;
-  }
-}
-
-.mobile-filters-container{
-  .animate-slideUp {
-    padding-bottom: 5rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .mobile-filters-container {
-    .md\:animate-slideRight {
-      max-width: 500px;
-    }
-  }
-}
-
 .mobile-filters-container .apply-buttons {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  padding: 1rem;
-  gap: 1rem;
   background: rgba(255,255,255,0.25);
 }
 
@@ -64,36 +32,6 @@
   content: '-';
 }
 
-@media (min-width: 768px) {
-  .mobile-filters-container .apply-buttons {
-    max-width: 485px;
-  }
-}
-
-.mobile-filters-container .apply-buttons .apply-buttons_button {
-  flex: 1 1 0;
-  border: 1px solid #000;
-  display: grid;
-  width: 100%;
-  align-content: center;
-  height: 4rem;
-  background-color: #fff;
-}
-
-.mobile-filters-container .apply-buttons .apply-buttons_button--view {
-  background-color: #000;
-  color: #fff;
-}
-
-.ds-plp-facets__pills .ds-sdk-pill {
-  padding: .5rem 1rem;
-}
-
-.ds-plp-facets__pills .ds-sdk-pill__cta svg {
-  position: relative;
-  top: -3px
-}
-
 @media (min-width: 768px) {
   .grid-setting {
     flex: 1 0 100%;
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index ca2ebfe3..340a0867 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -1,8 +1,5 @@
 import { FunctionComponent } from 'preact';
-
-import MinusIcon from '../../icons/minus.svg';
-import PlusIcon from '../../icons/plus.svg';
-import { Facet as FacetType, PriceFacet } from '../../types/interface';
+import { scrollFilter } from "../Facets";
 
 export type FilterSelectionTitleSlot = (label: string) => FunctionComponent;
 
@@ -10,83 +7,18 @@ export interface FilterSelectionProps {
   title: string;
   attribute?: string;
   filterSelectionTitleSlot?: FilterSelectionTitleSlot;
-  handleFilter?: () => void;
   displayFilter?: () => void;
   selectedNumber?: number;
-  selectedFacet?: FacetType | PriceFacet | null;
   iteration: number;
 }
 
 export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
   title,
   filterSelectionTitleSlot,
-  handleFilter,
   displayFilter,
   selectedNumber,
-  selectedFacet,
   iteration,
 }) => {
-  const handleOptions = () => {
-    handleFilter?.();
-
-    const targetNode = document.querySelector('.filters-facets');
-    const config = { attributes: false, childList: true, subtree: true };
-    const wait = async (time) => {
-      return new Promise(resolve => {
-        setTimeout(resolve, time);
-      });
-    }
-    const callback = async (mutationList, observer) => {
-      for (const mutation of mutationList) {
-        if (mutation.type === "childList" && mutation.addedNodes.length > 0 && !document.querySelector('.ds-sdk-filterGroup')?.classList.contains('open')) {
-          await wait(5);
-          document.querySelector('.ds-sdk-filterGroup')?.classList.add('open');
-          break;
-        }
-      }
-    };
-    const observer = new MutationObserver(callback);
-    observer.observe(targetNode, config);
-  };
-
-  const scrollFilter = (event) => {
-    displayFilter?.();
-
-    const clicked = event.target;
-    const filterNumber = Number(clicked.id.split('-')[1])
-    const targetNode = document.querySelector('.mobile-filters-container');
-    const config = { attributes: false, childList: true, subtree: true };
-
-    const wait = async (time) => {
-      return new Promise(resolve => {
-        setTimeout(resolve, time);
-      });
-    }
-    const callback = async (mutationList, observer) => {
-      for (const mutation of mutationList) {
-        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-          await wait(300);
-          const filterToShow = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input')[filterNumber]
-          const filterToHide = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input fieldset:not(.none-display)')
-
-          filterToHide.forEach(element => {
-            element.closest('.ds-sdk-input')?.classList.remove('active')
-            element.classList.add('none-display')
-            element.nextElementSibling?.classList.remove('mt-md')
-          })
-
-          filterToShow.classList.add('active');
-          filterToShow.querySelector('fieldset')?.classList.remove('none-display');
-          filterToShow.querySelector('.ds-sdk-input__border')?.classList.add('mt-md');
-          break;
-        }
-      }
-    };
-    const observer = new MutationObserver(callback);
-    observer.observe(targetNode, config);
-  }
-
-  const isSelected = title === selectedFacet?.title;
   return (
     <div className="ds-sdk-input py-md">
       {filterSelectionTitleSlot ? (
@@ -94,7 +26,7 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
       ) : (
         <div
           className="flex items-center gap-x-1 cursor-pointer"
-          onClick={scrollFilter}
+          onClick={(event) => scrollFilter(event, displayFilter)}
         >
           <label
               id={`filter-${iteration+1}`}
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 4b7ec0ce..081da300 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -1,10 +1,8 @@
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/compat';
-
 import { useProducts, useTranslation } from '../../context';
-import PlusIcon from '../../icons/plus.svg';
 import { BOOLEAN_NO, BOOLEAN_YES } from '../../utils/constants';
 import { LabelledInput } from '../LabelledInput';
+import { toggleFilters } from "../SortDropdown";
 
 export type InputButtonGroupOnChangeProps = {
   value: string;
@@ -90,26 +88,6 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
     return bucket.title;
   };
 
-  const toggleFilters = (event) => {
-    const clicked = event.target;
-    const toBeActiveFilterBlock = clicked.nextElementSibling;
-    const parrentDiv = clicked.closest('.ds-sdk-input')
-    const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
-
-    if (toBeActiveFilterBlock.classList.contains('none-display')) {
-      const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
-      currentFilterBlock?.classList.add('none-display')
-      currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
-      toBeActiveFilterBlock?.classList.remove('none-display')
-      borderDiv.classList.add('mt-md');
-      parrentDiv.classList.add('active');
-    } else {
-      toBeActiveFilterBlock?.classList.add('none-display')
-      borderDiv.classList.remove('mt-md');
-      parrentDiv.classList.remove('active');
-    }
-  }
-
   return (
     <div className="ds-sdk-input">
       {inputGroupTitleSlot ? (
@@ -118,7 +96,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
           (isHidden ? (
               <label
                   className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row"
-                  onClick={toggleFilters}>
+                  onClick={(event) => toggleFilters(event)}>
                 {title}
               </label>
           ) : (
@@ -154,7 +132,6 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
                 count={null}
                 onChange={onChange}
                 type={type}
-                isRangeInput={true}
               />
           )}
         </div>
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index c186eb3c..14043113 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -25,7 +25,6 @@ export interface LabelledInputProps {
   label: string;
   value: string;
   count?: number | null;
-  isRangeInput?: boolean | null
 }
 
 export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
@@ -37,8 +36,6 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
      attribute,
      value,
      count,
-     key,
-     isRangeInput
  }) => {
     const href = `${window.location.origin}/${window.location.pathname.split('/')[1]}/${value}`
     return (
@@ -60,42 +57,6 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
                 </a>
             </div>
         ) : (
-            <>
-                {isRangeInput && (
-                    <div className="ds-sdk-labelled-input flex gap-4 items-center">
-                        <input type={'number'} value={''} id={'from-price'} />
-                        <input type={'number'} value={''} id={'to-price'} />
-aa
-                        <input
-                            id={name}
-                            name={
-                                type === 'checkbox'
-                                    ? `checkbox-group-${attribute}`
-                                    : `radio-group-${attribute}`
-                            }
-                            type={type}
-                            className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
-                            checked={checked}
-                            aria-checked={checked}
-                            onInput={(e) => {console.log(e.currentTarget.value); onChange({value: e.currentTarget.value, selected: e.currentTarget.checked, type})}}
-                            value={value}
-                        />
-                        <label
-                            htmlFor={name}
-                            className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
-                        >
-                            {label}
-                            {count && (
-                                <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
-                    {`(${count})`}
-                  </span>
-                            )}
-                        </label>
-
-                    </div>
-                )}
-
-                {!isRangeInput && (
                     <div className="ds-sdk-labelled-input flex gap-4 items-center">
                         <input
                             id={name}
@@ -124,8 +85,6 @@ aa
                         </label>
 
                     </div>
-                )}
-            </>
         )
     );
 };
diff --git a/src/components/MobileFacets/MobileFacets.tsx b/src/components/MobileFacets/MobileFacets.tsx
index e909ebb1..8d957e97 100644
--- a/src/components/MobileFacets/MobileFacets.tsx
+++ b/src/components/MobileFacets/MobileFacets.tsx
@@ -23,7 +23,6 @@ interface FacetsProps {
   value: string;
   sortOptions: SortOption[];
   onChange: (sortBy: string) => void;
-  mobile?: boolean;
 }
 
 export const MobileFacets: FunctionComponent<FacetsProps> = ({
@@ -31,8 +30,7 @@ export const MobileFacets: FunctionComponent<FacetsProps> = ({
   onClose,
   value,
   sortOptions,
-  onChange,
-  mobile
+  onChange
 }: FacetsProps) => {
   const {
     config: { priceSlider },
@@ -41,7 +39,7 @@ export const MobileFacets: FunctionComponent<FacetsProps> = ({
   return (
     <div className="ds-plp-facets flex flex-col">
         <div className={'flex flex-row'}>
-            <h1>Sort&Filter</h1>
+            <h1 className={'text-2xl mb-8'}>Sort & Filter</h1>
             <CloseIcon
                 className="h-[28px] w-[28px] rotate-45 inline-block cursor-pointer fill-neutral-800 ml-auto"
                 onClick={onClose}
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index e8f58cdf..d3fdbc03 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -20,7 +20,7 @@ export interface PillProps {
 }
 
 const defaultIcon = (
-  <CloseIcon className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer  fill-neutral-800" />
+  <CloseIcon className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer relative top-[-3px] fill-neutral-800" />
 );
 
 // TODO: add support later to pass classes to the container div
@@ -36,7 +36,7 @@ export const Pill: FunctionComponent<PillProps> = ({
   };
 
   const baseStyles =
-    'ds-sdk-pill inline-flex justify-content items-center w-fit min-h-[32px]';
+    'ds-sdk-pill inline-flex justify-content items-center w-fit min-h-[32px] px-4 py-2';
 
   const typeClass = type
     ? typeStyles[type]
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index b85743b3..2a04ace4 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -21,32 +21,38 @@ export interface SortDropdownProps {
   mobile?: boolean;
 }
 
+export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & { readonly currentTarget: HTMLLabelElement }) => {
+  const clicked = event.target;
+  const toBeActiveFilterBlock = clicked.nextElementSibling;
+  const parrentDiv = clicked.closest('.ds-sdk-input')
+  const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
+
+  if (toBeActiveFilterBlock.classList.contains('none-display')) {
+    const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
+    currentFilterBlock?.classList.add('none-display')
+    currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
+    toBeActiveFilterBlock?.classList.remove('none-display')
+    borderDiv.classList.add('mt-md');
+    parrentDiv.classList.add('active');
+  } else {
+    toBeActiveFilterBlock?.classList.add('none-display')
+    borderDiv.classList.remove('mt-md');
+    parrentDiv.classList.remove('active');
+  }
+}
+
 export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
   value,
   sortOptions,
   onChange,
-  mobile
 }: SortDropdownProps) => {
-  const sortOptionButton = useRef<HTMLButtonElement | null>(null);
   const sortOptionMenu = useRef<HTMLDivElement | null>(null);
-
   const selectedOption = sortOptions.find((e) => e.value === value);
-
   const translation = useTranslation();
-  const sortOptionTranslation = translation.SortDropdown.option;
-  const sortOption = sortOptionTranslation.replace(
-    '{selectedOption}',
-    `${selectedOption?.label}`
-  );
-
   const {
-    isDropdownOpen,
     setIsDropdownOpen,
-    activeIndex,
-    setActiveIndex,
     select,
     setIsFocus,
-    listRef,
   } = useAccessibleDropdown({
     options: sortOptions,
     value,
@@ -78,30 +84,12 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     };
   }, [sortOptionMenu]);
 
-  const toggleFilters = (event) => {
-    const clicked = event.target;
-    const toBeActiveFilterBlock = clicked.nextElementSibling;
-    const parrentDiv = clicked.closest('.ds-sdk-input')
-    const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
-
-    if (toBeActiveFilterBlock.classList.contains('none-display')) {
-      const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
-      currentFilterBlock?.classList.add('none-display')
-      currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
-      toBeActiveFilterBlock?.classList.remove('none-display')
-      borderDiv.classList.add('mt-md');
-    } else {
-      toBeActiveFilterBlock?.classList.add('none-display')
-      borderDiv.classList.remove('mt-md');
-    }
-  }
-
   return (
     <>
       <div ref={sortOptionMenu} class="ds-sdk-input">
         <label
             className={'ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row'}
-            onClick={toggleFilters}
+            onClick={(event) => toggleFilters(event)}
         >
           {translation.SortDropdown.title}
         </label>
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index be9fc503..fd20d309 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -127,7 +127,7 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
               </div>
             </div>
           )}
-        <div class="mobile-filters-container">
+        <div class="mobile-filters-container z-900">
           <Drawer
               isOpen={showMobileFacet}
               onClose={() => setShowMobileFacet(!showMobileFacet)}
diff --git a/src/hooks/useRangeFacet.ts b/src/hooks/useRangeFacet.ts
index 9f5fa7ac..642bd23c 100644
--- a/src/hooks/useRangeFacet.ts
+++ b/src/hooks/useRangeFacet.ts
@@ -24,10 +24,6 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
         to: bucket.to,
       })
   );
-
-  console.log(buckets)
-  console.log(processedBuckets)
-
   const searchCtx = useSearch();
 
   const filter = searchCtx?.filters?.find(
@@ -36,22 +32,19 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
 
   const isSelected = (title: string) => {
     const selected = filter
-      ? processedBuckets[title].from === filter.range?.from &&
+        ? processedBuckets[title].from === filter.range?.from &&
         processedBuckets[title].to === filter.range?.to
-      : false;
+        : false;
     return selected;
   };
 
   const onChange = (value: string) => {
-    const fromRange = processedBuckets[value] ? processedBuckets[value].from : parseInt(value.split('-')[0], 10)
-    const toRange = processedBuckets[value] ? processedBuckets[value].to : parseInt(value.split('-')[1], 10)
-
     if (!filter) {
       const newFilter = {
         attribute,
         range: {
-          from: fromRange,
-          to: toRange,
+          from: processedBuckets[value].from,
+          to: processedBuckets[value].to,
         },
       };
       searchCtx.createFilter(newFilter);
@@ -61,8 +54,8 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
     const newFilter = {
       ...filter,
       range: {
-        from: fromRange,
-        to: toRange,
+        from: processedBuckets[value].from,
+        to: processedBuckets[value].to,
       },
     };
     searchCtx.updateFilter(newFilter);
diff --git a/src/styles/index.css b/src/styles/index.css
index b3b6ad0d..62f4b3a4 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -543,12 +543,18 @@ video {
   .top-full {
     top: 100%;
   }
+  .top-\[\-3px\] {
+    top: -3px;
+  }
   .z-20 {
     z-index: 20;
   }
   .z-50 {
     z-index: 50;
   }
+  .z-900 {
+    z-index: 900;
+  }
   .m-4 {
     margin: 1rem;
   }
@@ -576,6 +582,9 @@ video {
   .mb-\[1px\] {
     margin-bottom: 1px;
   }
+  .mb-8 {
+    margin-bottom: 2rem;
+  }
   .mb-md {
     margin-bottom: var(--spacing-md);
   }
@@ -657,6 +666,9 @@ video {
   .h-5 {
     height: 1.25rem;
   }
+  .h-16 {
+    height: 4rem;
+  }
   .h-\[100\%\] {
     height: 100%;
   }
@@ -800,6 +812,9 @@ video {
   .max-w-\[21rem\] {
     max-width: 21rem;
   }
+  .max-w-\[500px\] {
+     max-width: 500px;
+   }
   .max-w-\[1600px\] {
     max-width: 1600px;
   }
@@ -921,6 +936,9 @@ video {
   .items-center {
     align-items: center;
   }
+  .content-center {
+    align-content: center;
+  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -1287,6 +1305,9 @@ video {
   .pb-\[122\.22\%\] {
     padding-bottom: 122.22%;
   }
+  .pb-20 {
+    padding-bottom: 5rem;
+  }
   .pb-24 {
     padding-bottom: 2.4rem;
   }
@@ -1712,6 +1733,16 @@ video {
       animation: slideRight 0.3s ease-out forwards;
     }
   }
+  @media (min-width: 768px) {
+    .md\:max-w-\[485px\] {
+      max-width: 485px;
+    }
+  }
+  @media (min-width: 768px) {
+    .md\:max-w-\[500px\] {
+      max-width: 500px;
+    }
+  }
   @media (min-width: 1024px) {
     .lg\:h-\[248px\] {
       height: 248px;

From 610d17705cd419b836a30f1898af91ebb7620c6c Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Sun, 13 Oct 2024 21:45:32 +0200
Subject: [PATCH 115/160] WAF-396 - Code reformat

---
 src/components/Drawer/Drawer.tsx              |  26 +-
 src/components/Facets/Facets.tsx              |  73 +-
 src/components/Facets/Scalar/ScalarFacet.tsx  |   2 +-
 src/components/Facets/filters.css             |   2 +-
 .../FilterSelection/FilterSelection.tsx       |   4 +-
 .../InputButtonGroup/InputButtonGroup.tsx     |  50 +-
 .../LabelledInput/LabelledInput.tsx           | 116 +--
 src/components/MobileFacets/MobileFacets.tsx  |  74 +-
 src/components/Pill/Pill.tsx                  |   4 +-
 src/components/SortDropdown/SortDropdown.tsx  |   8 +-
 src/containers/MobileFilterHeader.tsx         |  81 +-
 src/hooks/useRangeFacet.ts                    |  10 +-
 src/styles/index.css                          | 692 +++++++++++++-----
 13 files changed, 762 insertions(+), 380 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 6104084a..7dae061e 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent } from 'preact';
 import { useEffect } from 'preact/hooks';
 
 import CloseIcon from '../../icons/plus.svg';
-import {useSearch} from "../../context";
+import { useSearch } from "../../context";
 
 interface DrawerProps {
   isOpen: boolean;
@@ -31,15 +31,23 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
   return (
     <>
       {isOpen && (
-          <div className="fixed inset-0 z-50 flex bg-black bg-opacity-50">
-            <div className="relative mt-auto w-full bg-white h-[80%] md:h-full shadow-lg overflow-auto animate-slideUp pb-20 md:animate-slideRight md:max-w-[500px]">
-              <div className="p-12">{children}</div>
-            </div>
-            <div class="apply-buttons absolute left-0 right-0 bottom-0 flex p-4 gap-4 md:animate-slideRight md:max-w-[485px] ">
-              <button class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-white text-black capitalize" onClick={() => searchCtx.clearFilters()}>clear filters</button>
-              <button class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-black text-white capitalize" onClick={onClose}>view {totalCount} results</button>
-            </div>
+        <div className="fixed inset-0 z-50 flex bg-black bg-opacity-50">
+          <div
+            className="relative mt-auto w-full bg-white h-[80%] md:h-full shadow-lg overflow-auto animate-slideUp pb-20 md:animate-slideRight md:max-w-[500px]">
+            <div className="p-12">{children}</div>
           </div>
+          <div
+            class="apply-buttons absolute left-0 right-0 bottom-0 flex p-4 gap-4 md:animate-slideRight md:max-w-[485px] ">
+            <button
+              class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-white text-black capitalize"
+              onClick={() => searchCtx.clearFilters()}>clear filters
+            </button>
+            <button
+              class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-black text-white capitalize"
+              onClick={onClose}>view {totalCount} results
+            </button>
+          </div>
+        </div>
       )}
     </>
   );
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 0b929940..abef99b7 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -10,7 +10,6 @@ it.
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import useScalarFacet from 'src/hooks/useScalarFacet';
-import { getValueFromUrl } from 'src/utils/handleUrlFilters';
 import {
   defaultSortOptions,
   getSortOptionsfromMetadata,
@@ -35,15 +34,15 @@ interface FacetsProps {
 }
 
 export const scrollFilter = (
-    event: Omit<MouseEvent, "currentTarget"> & { readonly currentTarget: HTMLDivElement },
-    displayFunction: (() => void) | undefined
+  event: Omit<MouseEvent, "currentTarget"> & { readonly currentTarget: HTMLDivElement },
+  displayFunction: (() => void) | undefined
 ) => {
   displayFunction?.();
 
   const clicked = event.target;
   const filterNumber = Number(clicked.id.split('-')[1])
   const targetNode = document.querySelector('.mobile-filters-container');
-  const config = { attributes: false, childList: true, subtree: true };
+  const config = {attributes: false, childList: true, subtree: true};
 
   const wait = async (time) => {
     return new Promise(resolve => {
@@ -73,7 +72,10 @@ export const scrollFilter = (
   };
 
   const observer = new MutationObserver(callback);
-  observer.observe(targetNode, config);
+
+  if (targetNode) {
+    observer.observe(targetNode, config);
+    }
 }
 
 export const Facets: FunctionComponent<FacetsProps> = ({
@@ -81,7 +83,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   totalCount,
   displayFilter,
 }: FacetsProps) => {
-  const { config } = useStore();
+  const {config} = useStore();
   const searchCtx = useSearch();
   const attributeMetadata = useAttributeMetadata();
   const translation = useTranslation();
@@ -120,14 +122,14 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   const isCategory = config?.currentCategoryUrlPath || config?.currentCategoryId;
 
   const getSelectedFilters = (facet: FacetType) => {
-    const { attribute } = facet;
+    const {attribute} = facet;
     const categoryFiltered = searchCtx.filters.find(
       (item) => item.attribute === attribute
     );
     return categoryFiltered?.in?.length ?? 0;
   };
 
-  const { isSelected, onChange } = useScalarFacet(selectedFacet);
+  const {isSelected, onChange} = useScalarFacet(selectedFacet);
 
   const onFacetChange = (value: string, selected?: boolean, type?: string) => {
     if (type?.includes('link')) {
@@ -146,10 +148,11 @@ export const Facets: FunctionComponent<FacetsProps> = ({
           <div className="flex justify-between">
             <form className="ds-plp-facets__list flex gap-x-3.2rem">
               <div class="ds-sdk-input py-md">
-                <div class="flex items-center gap-x-1 cursor-pointer" onClick={(event) => scrollFilter(event, displayFilter)}>
+                <div class="flex items-center gap-x-1 cursor-pointer"
+                     onClick={(event) => scrollFilter(event, displayFilter)}>
                   <label id={'filter-0'}
                          className="flex flex-row gap-4 ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer">
-                    <SortFilterIcon className="h-[18px] w-[18px] fill-neutral-800" />
+                    <SortFilterIcon className="h-[18px] w-[18px] fill-neutral-800"/>
                     {translation.Filter.title}
                   </label>
                 </div>
@@ -159,31 +162,31 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                 switch (bucketType) {
                   case 'ScalarBucket':
                     return (
-                        <ScalarFacet
-                            key={facet.attribute}
-                            filterData={facet}
-                            iteration={index}
-                            selectedNumber={getSelectedFilters(facet)}
-                            displayFilter={displayFilter}
-                        />
-                    );
-                  case 'RangeBucket':
-                    <ScalarFacet
+                      <ScalarFacet
                         key={facet.attribute}
                         filterData={facet}
                         iteration={index}
                         selectedNumber={getSelectedFilters(facet)}
                         displayFilter={displayFilter}
+                      />
+                    );
+                  case 'RangeBucket':
+                    <ScalarFacet
+                      key={facet.attribute}
+                      filterData={facet}
+                      iteration={index}
+                      selectedNumber={getSelectedFilters(facet)}
+                      displayFilter={displayFilter}
                     />
                   case 'CategoryView':
                     return (
-                        <ScalarFacet
-                            key={facet.attribute}
-                            filterData={facet}
-                            iteration={index}
-                            selectedNumber={getSelectedFilters(facet)}
-                            displayFilter={displayFilter}
-                        />
+                      <ScalarFacet
+                        key={facet.attribute}
+                        filterData={facet}
+                        iteration={index}
+                        selectedNumber={getSelectedFilters(facet)}
+                        displayFilter={displayFilter}
+                      />
                     );
                   default:
                     return null;
@@ -197,14 +200,14 @@ export const Facets: FunctionComponent<FacetsProps> = ({
         </div>
         <div className="px-[12px] md:px-[24px] lg:px-[48px] w-full filters-facets">
           {selectedFacet && (
-              <FilterSelectionGroup
-                  title={selectedFacet.title}
-                  attribute={selectedFacet.attribute}
-                  buckets={selectedFacet.buckets as any}
-                  isSelected={isSelected}
-                  onChange={(args) => onFacetChange(args.value, args.selected, args.type)}
-                  type={isCategory && selectedFacet?.buckets[0]?.__typename === 'CategoryView' ? 'link' : 'checkbox'}
-              />
+            <FilterSelectionGroup
+              title={selectedFacet.title}
+              attribute={selectedFacet.attribute}
+              buckets={selectedFacet.buckets as any}
+              isSelected={isSelected}
+              onChange={(args) => onFacetChange(args.value, args.selected, args.type)}
+              type={isCategory && selectedFacet?.buckets[0]?.__typename === 'CategoryView' ? 'link' : 'checkbox'}
+            />
           )}
         </div>
       </div>
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 4d1b9bb3..26e98739 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -8,8 +8,8 @@ it.
 */
 import { FunctionComponent } from 'preact';
 import { FilterSelection } from 'src/components/FilterSelection';
-
 import { Facet as FacetType, PriceFacet } from '../../../types/interface';
+
 export type DisplayFilterType = () => void;
 
 interface ScalarFacetProps {
diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
index c57b4439..4bc5d3ad 100644
--- a/src/components/Facets/filters.css
+++ b/src/components/Facets/filters.css
@@ -16,7 +16,7 @@
 }
 
 .mobile-filters-container .apply-buttons {
-  background: rgba(255,255,255,0.25);
+  background: rgba(255, 255, 255, 0.25);
 }
 
 .mobile-filters-container form .ds-sdk-input > label::after {
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index 340a0867..645a04ad 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -29,8 +29,8 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
           onClick={(event) => scrollFilter(event, displayFilter)}
         >
           <label
-              id={`filter-${iteration+1}`}
-              className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer"
+            id={`filter-${iteration + 1}`}
+            className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer"
           >
             {title}{' '}
             {!!selectedNumber && (
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 081da300..b5ec2f6d 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -22,6 +22,7 @@ export type Bucket = {
   name?: string;
   __typename: 'ScalarBucket' | 'RangeBucket' | 'CategoryView';
 };
+
 export interface InputButtonGroupProps {
   title: string;
   attribute: string;
@@ -59,13 +60,13 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
     if (bucket.__typename === 'RangeBucket') {
       const fromPrice = bucket.from
         ? `${currencySymbol}${formatPrice(
-            parseInt(bucket.from.toFixed(0), 10)
-          )}`
+          parseInt(bucket.from.toFixed(0), 10)
+        )}`
         : '0';
       const toPrice = bucket.to
         ? ` - ${currencySymbol}${formatPrice(
-            parseInt(bucket.to.toFixed(0), 10)
-          )}`
+          parseInt(bucket.to.toFixed(0), 10)
+        )}`
         : translation.InputButtonGroup.priceRange;
       return `${fromPrice}${toPrice}`;
     }
@@ -93,15 +94,16 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
       {inputGroupTitleSlot ? (
         inputGroupTitleSlot(title)
       ) : (
-          (isHidden ? (
-              <label
-                  className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row"
-                  onClick={(event) => toggleFilters(event)}>
-                {title}
-              </label>
-          ) : (
-              <label className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display flex flex-row">{title}</label>
-          ))
+        (isHidden ? (
+          <label
+            className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row"
+            onClick={(event) => toggleFilters(event)}>
+            {title}
+          </label>
+        ) : (
+          <label
+            className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display flex flex-row">{title}</label>
+        ))
       )}
       <fieldset className={`ds-sdk-input__options mt-4 md:mt-0 ${isHidden ? 'none-display' : ''}`}>
         <div className="space-y-4">
@@ -123,20 +125,20 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
             );
           })}
           {attribute === 'price' && (
-              <LabelledInput
-                name={`range-radio-${attribute}`}
-                attribute={attribute}
-                label={'Range price'}
-                checked={false}
-                value={'125.0-555.0'}
-                count={null}
-                onChange={onChange}
-                type={type}
-              />
+            <LabelledInput
+              name={`range-radio-${attribute}`}
+              attribute={attribute}
+              label={'Range price'}
+              checked={false}
+              value={'125.0-555.0'}
+              count={null}
+              onChange={onChange}
+              type={type}
+            />
           )}
         </div>
       </fieldset>
-      <div className="ds-sdk-input__border border-t border-neutral-500" />
+      <div className="ds-sdk-input__border border-t border-neutral-500"/>
     </div>
   );
 };
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 14043113..f85af33b 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -7,12 +7,12 @@ accordance with the terms of the Adobe license agreement accompanying
 it.
 */
 
-import {FunctionComponent} from 'preact';
+import { FunctionComponent } from 'preact';
 
 export type LabelledInputOnChangeProps = {
-    value: string;
-    selected?: boolean;
-    type?: string;
+  value: string;
+  selected?: boolean;
+  type?: string;
 };
 
 // Maybe someday extend the `type` field to allow more inputs like `range` or `time`
@@ -28,63 +28,63 @@ export interface LabelledInputProps {
 }
 
 export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
-     type,
-     checked,
-     onChange,
-     name,
-     label,
-     attribute,
-     value,
-     count,
- }) => {
-    const href = `${window.location.origin}/${window.location.pathname.split('/')[1]}/${value}`
-    return (
-        type === 'link' || attribute === 'categories' ? (
-            <div className="ds-sdk-labelled-input flex gap-4 items-center">
-                <a href={href}
-                   onClick={(e) => {
-                       if (type === 'link') {
-                           e.preventDefault();
-                           onChange({value, type})
-                       }
-                   }}>
-                    {label}
-                    {count && (
-                        <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
+  type,
+  checked,
+  onChange,
+  name,
+  label,
+  attribute,
+  value,
+  count,
+}) => {
+  const href = `${window.location.origin}/${window.location.pathname.split('/')[1]}/${value}`
+  return (
+    type === 'link' || attribute === 'categories' ? (
+      <div className="ds-sdk-labelled-input flex gap-4 items-center">
+        <a href={href}
+           onClick={(e) => {
+             if (type === 'link') {
+               e.preventDefault();
+               onChange({value, type})
+             }
+           }}>
+          {label}
+          {count && (
+            <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
                 {`(${count})`}
                 </span>
-                    )}
-                </a>
-            </div>
-        ) : (
-                    <div className="ds-sdk-labelled-input flex gap-4 items-center">
-                        <input
-                            id={name}
-                            name={
-                                type === 'checkbox'
-                                    ? `checkbox-group-${attribute}`
-                                    : `radio-group-${attribute}`
-                            }
-                            type={type}
-                            className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
-                            checked={checked}
-                            aria-checked={checked}
-                            onInput={(e) => onChange({value, selected: e.currentTarget.checked, type})}
-                            value={value}
-                        />
-                        <label
-                            htmlFor={name}
-                            className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
-                        >
-                            {label}
-                            {count && (
-                                <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
+          )}
+        </a>
+      </div>
+    ) : (
+      <div className="ds-sdk-labelled-input flex gap-4 items-center">
+        <input
+          id={name}
+          name={
+            type === 'checkbox'
+              ? `checkbox-group-${attribute}`
+              : `radio-group-${attribute}`
+          }
+          type={type}
+          className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
+          checked={checked}
+          aria-checked={checked}
+          onInput={(e) => onChange({value, selected: e.currentTarget.checked, type})}
+          value={value}
+        />
+        <label
+          htmlFor={name}
+          className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
+        >
+          {label}
+          {count && (
+            <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
                     {`(${count})`}
                   </span>
-                            )}
-                        </label>
+          )}
+        </label>
 
-                    </div>
-        )
-    );
+      </div>
+    )
+  );
 };
diff --git a/src/components/MobileFacets/MobileFacets.tsx b/src/components/MobileFacets/MobileFacets.tsx
index 8d957e97..64a3ef0e 100644
--- a/src/components/MobileFacets/MobileFacets.tsx
+++ b/src/components/MobileFacets/MobileFacets.tsx
@@ -10,12 +10,12 @@ it.
 import { FunctionComponent } from 'preact';
 
 import { useStore } from '../../context';
-import {Facet as FacetType, PriceFacet, SortOption} from '../../types/interface';
+import { Facet as FacetType, PriceFacet, SortOption } from '../../types/interface';
 import SliderDoubleControl from '../SliderDoubleControl';
 import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
 import CloseIcon from "../../icons/plus.svg";
-import {SortDropdown} from "../SortDropdown";
+import { SortDropdown } from "../SortDropdown";
 
 interface FacetsProps {
   searchFacets: FacetType[];
@@ -33,46 +33,46 @@ export const MobileFacets: FunctionComponent<FacetsProps> = ({
   onChange
 }: FacetsProps) => {
   const {
-    config: { priceSlider },
+    config: {priceSlider},
   } = useStore();
 
   return (
     <div className="ds-plp-facets flex flex-col">
-        <div className={'flex flex-row'}>
-            <h1 className={'text-2xl mb-8'}>Sort & Filter</h1>
-            <CloseIcon
-                className="h-[28px] w-[28px] rotate-45 inline-block cursor-pointer fill-neutral-800 ml-auto"
-                onClick={onClose}
-            />
-        </div>
+      <div className={'flex flex-row'}>
+        <h1 className={'text-2xl mb-8'}>Sort & Filter</h1>
+        <CloseIcon
+          className="h-[28px] w-[28px] rotate-45 inline-block cursor-pointer fill-neutral-800 ml-auto"
+          onClick={onClose}
+        />
+      </div>
 
-        <form className="ds-plp-facets__list border-t border-neutral-500">
-            <SortDropdown
-              sortOptions={sortOptions}
-              value={value}
-              onChange={onChange}
-              mobile
-            />
-            {searchFacets?.map((facet) => {
-              const bucketType = facet?.buckets[0]?.__typename;
-              switch (bucketType) {
-                case 'ScalarBucket':
-                  return <ScalarFacet key={facet.attribute} filterData={facet} />;
-                case 'RangeBucket':
-                  return priceSlider ? (
-                    <SliderDoubleControl filterData={facet as PriceFacet} />
-                  ) : (
-                    <RangeFacet
-                      key={facet.attribute}
-                      filterData={facet as PriceFacet}
-                    />
-                  );
-                case 'CategoryView':
-                  return <ScalarFacet key={facet.attribute} filterData={facet} />;
-                default:
-                  return null;
-              }
-            })}
+      <form className="ds-plp-facets__list border-t border-neutral-500">
+        <SortDropdown
+          sortOptions={sortOptions}
+          value={value}
+          onChange={onChange}
+          mobile
+        />
+        {searchFacets?.map((facet) => {
+          const bucketType = facet?.buckets[0]?.__typename;
+          switch (bucketType) {
+            case 'ScalarBucket':
+              return <ScalarFacet key={facet.attribute} filterData={facet}/>;
+            case 'RangeBucket':
+              return priceSlider ? (
+                <SliderDoubleControl filterData={facet as PriceFacet}/>
+              ) : (
+                <RangeFacet
+                  key={facet.attribute}
+                  filterData={facet as PriceFacet}
+                />
+              );
+            case 'CategoryView':
+              return <ScalarFacet key={facet.attribute} filterData={facet}/>;
+            default:
+              return null;
+          }
+        })}
       </form>
     </div>
   );
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index d3fdbc03..755a0303 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -11,6 +11,7 @@ import { FunctionComponent } from 'preact';
 import { JSXInternal } from 'preact/src/jsx';
 
 import CloseIcon from '../../icons/plus.svg';
+
 export interface PillProps {
   label: string;
   onClick: () => void;
@@ -20,7 +21,8 @@ export interface PillProps {
 }
 
 const defaultIcon = (
-  <CloseIcon className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer relative top-[-3px] fill-neutral-800" />
+  <CloseIcon
+    className="h-[20px] w-[20px] rotate-45 inline-block ml-sm cursor-pointer relative top-[-3px] fill-neutral-800"/>
 );
 
 // TODO: add support later to pass classes to the container div
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 2a04ace4..e4255f75 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -21,7 +21,9 @@ export interface SortDropdownProps {
   mobile?: boolean;
 }
 
-export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & { readonly currentTarget: HTMLLabelElement }) => {
+export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & {
+  readonly currentTarget: HTMLLabelElement
+}) => {
   const clicked = event.target;
   const toBeActiveFilterBlock = clicked.nextElementSibling;
   const parrentDiv = clicked.closest('.ds-sdk-input')
@@ -88,8 +90,8 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     <>
       <div ref={sortOptionMenu} class="ds-sdk-input">
         <label
-            className={'ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row'}
-            onClick={(event) => toggleFilters(event)}
+          className={'ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row'}
+          onClick={(event) => toggleFilters(event)}
         >
           {translation.SortDropdown.title}
         </label>
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index fd20d309..89af37b4 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -28,7 +28,7 @@ import {
   generateGQLSortInput,
   getSortOptionsfromMetadata,
 } from '../utils/sort';
-import {CategoryFilters} from "../components";
+import { CategoryFilters } from "../components";
 
 interface Props {
   facets: Facet[];
@@ -40,6 +40,7 @@ interface Props {
     columns: number;
   };
 }
+
 export const MobileFilterHeader: FunctionComponent<Props> = ({
   facets,
   totalCount,
@@ -102,47 +103,47 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
 
   const [showFilters, setShowFilters] = useState(true);
   return (
-      <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
-        {!screenSize.mobile && productsCtx.totalCount && (
-            <CategoryFilters
-                loading={productsCtx.loading}
-                pageLoading={productsCtx.pageLoading}
-                facets={productsCtx.facets}
-                totalCount={productsCtx.totalCount}
-                categoryName={productsCtx.categoryName ?? ''}
-                phrase={productsCtx.variables.phrase ?? ''}
-                showFilters={showFilters}
-                setShowFilters={setShowFilters}
-                displayFilter={() => setShowMobileFacet(!showMobileFacet)}
-                filterCount={searchCtx.filterCount}
-            />
-        )}
-        {screenSize.mobile && (
-            <div className="flex border-t border-b border-neutral-400 bg-black">
-              <div className="flex justify-center w-full py-md border-r border-neutral-400">
-                <FilterButton
-                    displayFilter={() => setShowMobileFacet(!showMobileFacet)}
-                    type="mobile"
-                />
-              </div>
-            </div>
-          )}
-        <div class="mobile-filters-container z-900">
-          <Drawer
-              isOpen={showMobileFacet}
-              onClose={() => setShowMobileFacet(!showMobileFacet)}
-              totalCount={totalCount}
-          >
-            <MobileFacets
-                searchFacets={facets}
-                onClose={() => setShowMobileFacet(!showMobileFacet)}
-                sortOptions={sortOptions}
-                value={sortBy}
-                onChange={onSortChange}
-                mobile
+    <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
+      {!screenSize.mobile && productsCtx.totalCount && (
+        <CategoryFilters
+          loading={productsCtx.loading}
+          pageLoading={productsCtx.pageLoading}
+          facets={productsCtx.facets}
+          totalCount={productsCtx.totalCount}
+          categoryName={productsCtx.categoryName ?? ''}
+          phrase={productsCtx.variables.phrase ?? ''}
+          showFilters={showFilters}
+          setShowFilters={setShowFilters}
+          displayFilter={() => setShowMobileFacet(!showMobileFacet)}
+          filterCount={searchCtx.filterCount}
+        />
+      )}
+      {screenSize.mobile && (
+        <div className="flex border-t border-b border-neutral-400 bg-black">
+          <div className="flex justify-center w-full py-md border-r border-neutral-400">
+            <FilterButton
+              displayFilter={() => setShowMobileFacet(!showMobileFacet)}
+              type="mobile"
             />
-          </Drawer>
+          </div>
         </div>
+      )}
+      <div class="mobile-filters-container z-900">
+        <Drawer
+          isOpen={showMobileFacet}
+          onClose={() => setShowMobileFacet(!showMobileFacet)}
+          totalCount={totalCount}
+        >
+          <MobileFacets
+            searchFacets={facets}
+            onClose={() => setShowMobileFacet(!showMobileFacet)}
+            sortOptions={sortOptions}
+            value={sortBy}
+            onChange={onSortChange}
+            mobile
+          />
+        </Drawer>
       </div>
+    </div>
   );
 };
diff --git a/src/hooks/useRangeFacet.ts b/src/hooks/useRangeFacet.ts
index 642bd23c..6abd6273 100644
--- a/src/hooks/useRangeFacet.ts
+++ b/src/hooks/useRangeFacet.ts
@@ -12,7 +12,7 @@ import { FacetFilter, PriceFacet } from '../types/interface';
 
 type ProcessedBucket = { from: number; to: number };
 
-const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
+const useRangeFacet = ({attribute, buckets}: PriceFacet) => {
   const processedBuckets: {
     [key: string]: ProcessedBucket;
   } = {};
@@ -32,9 +32,9 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
 
   const isSelected = (title: string) => {
     const selected = filter
-        ? processedBuckets[title].from === filter.range?.from &&
-        processedBuckets[title].to === filter.range?.to
-        : false;
+      ? processedBuckets[title].from === filter.range?.from &&
+      processedBuckets[title].to === filter.range?.to
+      : false;
     return selected;
   };
 
@@ -61,7 +61,7 @@ const useRangeFacet = ({ attribute, buckets }: PriceFacet) => {
     searchCtx.updateFilter(newFilter);
   };
 
-  return { isSelected, onChange };
+  return {isSelected, onChange};
 };
 
 export default useRangeFacet;
diff --git a/src/styles/index.css b/src/styles/index.css
index 62f4b3a4..8eaee37e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-::before,
-::after {
+  ::before,
+  ::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -18,10 +18,12 @@
     border-color: #e5e7eb;
     /* 2 */
   }
+
   ::before,
-::after {
+  ::after {
     --tw-content: '';
   }
+
   /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -32,7 +34,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-:host {
+  :host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -40,7 +42,7 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-       tab-size: 4;
+    tab-size: 4;
     /* 3 */
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
@@ -51,6 +53,7 @@
     -webkit-tap-highlight-color: transparent;
     /* 7 */
   }
+
   /*
 1. Remove the margin in all browsers.
 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
@@ -61,6 +64,7 @@
     line-height: inherit;
     /* 2 */
   }
+
   /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
@@ -74,25 +78,28 @@
     border-top-width: 1px;
     /* 3 */
   }
+
   /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-            text-decoration: underline dotted;
+    text-decoration: underline dotted;
   }
+
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-size: inherit;
     font-weight: inherit;
   }
+
   /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
@@ -100,13 +107,15 @@ Reset links to optimize for opt-in styling instead of opt-out.
     color: inherit;
     text-decoration: inherit;
   }
+
   /*
 Add the correct font weight in Edge and Safari.
 */
   b,
-strong {
+  strong {
     font-weight: bolder;
   }
+
   /*
 1. Use the user's configured `mono` font-family by default.
 2. Use the user's configured `mono` font-feature-settings by default.
@@ -114,9 +123,9 @@ strong {
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-kbd,
-samp,
-pre {
+  kbd,
+  samp,
+  pre {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
     font-feature-settings: normal;
@@ -126,25 +135,29 @@ pre {
     font-size: 1em;
     /* 4 */
   }
+
   /*
 Add the correct font size in all browsers.
 */
   small {
     font-size: 80%;
   }
+
   /*
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-sup {
+  sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
+
   sub {
     bottom: -0.25em;
   }
+
   sup {
     top: -0.5em;
   }
@@ -153,6 +166,7 @@ sup {
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
+
   table {
     text-indent: 0;
     /* 1 */
@@ -161,16 +175,17 @@ sup {
     border-collapse: collapse;
     /* 3 */
   }
+
   /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
   button,
-input,
-optgroup,
-select,
-textarea {
+  input,
+  optgroup,
+  select,
+  textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -190,21 +205,23 @@ textarea {
     padding: 0;
     /* 3 */
   }
+
   /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-select {
+  select {
     text-transform: none;
   }
+
   /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
   button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -212,31 +229,36 @@ select {
     background-image: none;
     /* 2 */
   }
+
   /*
 Use the modern Firefox focus style for all focusable elements.
 */
   :-moz-focusring {
     outline: auto;
   }
+
   /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
   :-moz-ui-invalid {
     box-shadow: none;
   }
+
   /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
   progress {
     vertical-align: baseline;
   }
+
   /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
+  ::-webkit-outer-spin-button {
     height: auto;
   }
+
   /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
@@ -247,12 +269,14 @@ Correct the cursor style of increment and decrement buttons in Safari.
     outline-offset: -2px;
     /* 2 */
   }
+
   /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
   ::-webkit-search-decoration {
     -webkit-appearance: none;
   }
+
   /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to `inherit` in Safari.
@@ -263,56 +287,64 @@ Remove the inner padding in Chrome and Safari on macOS.
     font: inherit;
     /* 2 */
   }
+
   /*
 Add the correct display in Chrome and Safari.
 */
   summary {
     display: list-item;
   }
+
   /*
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
     margin: 0;
   }
+
   fieldset {
     margin: 0;
     padding: 0;
   }
+
   legend {
     padding: 0;
   }
+
   ol,
-ul,
-menu {
+  ul,
+  menu {
     list-style: none;
     margin: 0;
     padding: 0;
   }
+
   /*
 Reset default styling for dialogs.
 */
   dialog {
     padding: 0;
   }
+
   /*
 Prevent resizing textareas horizontally by default.
 */
   textarea {
     resize: vertical;
   }
+
   /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
@@ -323,56 +355,63 @@ Prevent resizing textareas horizontally by default.
     color: #9ca3af;
     /* 2 */
   }
+
   input::placeholder,
-textarea::placeholder {
+  textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
+
   /*
 Set the default cursor for buttons.
 */
   button,
-[role="button"] {
+  [role="button"] {
     cursor: pointer;
   }
+
   /*
 Make sure disabled buttons don't get the pointer cursor.
 */
   :disabled {
     cursor: default;
   }
+
   /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
     display: block;
     /* 1 */
     vertical-align: middle;
     /* 2 */
   }
+
   /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-video {
+  video {
     max-width: 100%;
     height: auto;
   }
+
   /* Make elements with the HTML hidden attribute stay hidden by default */
   [hidden] {
     display: none;
   }
+
   *, ::before, ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
@@ -383,19 +422,19 @@ video {
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -403,25 +442,26 @@ video {
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
   }
+
   ::backdrop {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
@@ -432,19 +472,19 @@ video {
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -452,28 +492,30 @@ video {
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
   }
+
   .container {
     width: 100%;
   }
+
   @media (min-width: 640px) {
     .container {
       max-width: 640px;
@@ -499,6 +541,7 @@ video {
       max-width: 1536px;
     }
   }
+
   .sr-only {
     position: absolute;
     width: 1px;
@@ -510,358 +553,473 @@ video {
     white-space: nowrap;
     border-width: 0;
   }
+
   .visible {
     visibility: visible;
   }
+
   .invisible {
     visibility: hidden;
   }
+
   .fixed {
     position: fixed;
   }
+
   .absolute {
     position: absolute;
   }
+
   .relative {
     position: relative;
   }
+
   .inset-0 {
     inset: 0px;
   }
+
   .bottom-0 {
     bottom: 0px;
   }
+
   .left-0 {
     left: 0px;
   }
+
   .left-1\/2 {
     left: 50%;
   }
+
   .right-0 {
     right: 0px;
   }
+
   .top-full {
     top: 100%;
   }
+
   .top-\[\-3px\] {
     top: -3px;
   }
+
   .z-20 {
     z-index: 20;
   }
+
   .z-50 {
     z-index: 50;
   }
+
   .z-900 {
     z-index: 900;
   }
+
   .m-4 {
     margin: 1rem;
   }
+
   .m-auto {
     margin: auto;
   }
+
   .mx-auto {
     margin-left: auto;
     margin-right: auto;
   }
+
   .my-0 {
     margin-top: 0px;
     margin-bottom: 0px;
   }
+
   .my-lg {
     margin-top: var(--spacing-lg);
     margin-bottom: var(--spacing-lg);
   }
+
   .mb-0 {
     margin-bottom: 0px;
   }
+
   .mb-0\.5 {
     margin-bottom: 0.125rem;
   }
+
   .mb-\[1px\] {
     margin-bottom: 1px;
   }
+
   .mb-8 {
     margin-bottom: 2rem;
   }
+
   .mb-md {
     margin-bottom: var(--spacing-md);
   }
+
   .ml-1 {
     margin-left: 0.25rem;
   }
+
   .ml-2 {
     margin-left: 0.5rem;
   }
+
   .ml-3 {
     margin-left: 0.75rem;
   }
+
   .ml-auto {
     margin-left: auto;
   }
+
   .ml-sm {
     margin-left: var(--spacing-sm);
   }
+
   .ml-xs {
     margin-left: var(--spacing-xs);
   }
+
   .mr-2 {
     margin-right: 0.5rem;
   }
+
   .mr-auto {
     margin-right: auto;
   }
+
   .mr-xs {
     margin-right: var(--spacing-xs);
   }
+
   .mt-0 {
     margin-top: 0;
   }
+
   .mt-2 {
     margin-top: 0.5rem;
   }
+
   .mt-4 {
     margin-top: 1rem;
   }
+
   .mt-8 {
     margin-top: 2rem;
   }
+
   .mt-auto {
     margin-top: auto;
   }
+
   .mt-md {
     margin-top: var(--spacing-md);
   }
+
   .mt-sm {
     margin-top: var(--spacing-sm);
   }
+
   .mt-xs {
     margin-top: var(--spacing-xs);
   }
+
   .inline-block {
     display: inline-block;
   }
+
   .inline {
     display: inline;
   }
+
   .flex {
     display: flex;
   }
+
   .inline-flex {
     display: inline-flex;
   }
+
   .grid {
     display: grid;
   }
+
   .aspect-auto {
     aspect-ratio: auto;
   }
+
   .h-28 {
     height: 7rem;
   }
+
   .h-3 {
     height: 0.75rem;
   }
+
   .h-5 {
     height: 1.25rem;
   }
+
   .h-16 {
     height: 4rem;
   }
+
   .h-\[100\%\] {
     height: 100%;
   }
+
   .h-\[15px\] {
     height: 15px;
   }
+
   .h-\[18px\] {
     height: 18px;
   }
+
   .h-\[180px\] {
     height: 180px;
   }
+
   .h-\[20px\] {
     height: 20px;
   }
+
   .h-\[28px\] {
     height: 28px;
   }
+
   .h-\[32px\] {
     height: 32px;
   }
+
   .h-\[36px\] {
     height: 36px;
   }
+
   .h-\[38px\] {
     height: 38px;
   }
+
   .h-\[40px\] {
     height: 40px;
   }
+
   .h-\[445px\] {
     height: 445px;
   }
+
   .h-\[44px\] {
     height: 44px;
   }
+
   .h-\[56px\] {
     height: 56px;
   }
+
   .h-\[80\%\] {
     height: 80%;
   }
+
   .h-auto {
     height: auto;
   }
+
   .h-full {
     height: 100%;
   }
+
   .h-md {
     height: var(--spacing-md);
   }
+
   .h-screen {
     height: 100vh;
   }
+
   .h-sm {
     height: var(--spacing-sm);
   }
+
   .h-small {
     height: var(--spacing-small);
   }
+
   .max-h-\[250px\] {
     max-height: 250px;
   }
+
   .max-h-\[45rem\] {
     max-height: 45rem;
   }
+
   .min-h-\[32px\] {
     min-height: 32px;
   }
+
   .w-1\/2 {
     width: 50%;
   }
+
   .w-1\/3 {
     width: 33.333333%;
   }
+
   .w-28 {
     width: 7rem;
   }
+
   .w-5 {
     width: 1.25rem;
   }
+
   .w-96 {
     width: 24rem;
   }
+
   .w-\[14px\] {
     width: 14px;
   }
+
   .w-\[15px\] {
     width: 15px;
   }
+
   .w-\[18px\] {
     width: 18px;
   }
+
   .w-\[20px\] {
     width: 20px;
   }
+
   .w-\[28px\] {
     width: 28px;
   }
+
   .w-\[40px\] {
     width: 40px;
   }
+
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;
   }
+
   .w-max {
     width: -moz-max-content;
     width: max-content;
   }
+
   .w-full {
     width: 100%;
   }
+
   .w-md {
     width: var(--spacing-md);
   }
+
   .w-sm {
     width: var(--spacing-sm);
   }
+
   .w-small {
     width: var(--spacing-small);
   }
+
   .min-w-\[16px\] {
     min-width: 16px;
   }
+
   .min-w-\[32px\] {
     min-width: 32px;
   }
+
   .min-w-\[44px\] {
     min-width: 44px;
   }
+
   .max-w-2xl {
     max-width: 42rem;
   }
+
   .max-w-5xl {
     max-width: 64rem;
   }
+
   .max-w-\[200px\] {
     max-width: 200px;
   }
+
   .max-w-\[21rem\] {
     max-width: 21rem;
   }
+
   .max-w-\[500px\] {
-     max-width: 500px;
-   }
+    max-width: 500px;
+  }
+
   .max-w-\[1600px\] {
     max-width: 1600px;
   }
+
   .max-w-full {
     max-width: 100%;
   }
+
   .flex-1 {
     flex: 1 1 0%;
   }
+
   .flex-\[25\] {
     flex: 25;
   }
+
   .flex-\[75\] {
     flex: 75;
   }
+
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+
   .shrink-0 {
     flex-shrink: 0;
   }
+
   .origin-top-right {
     transform-origin: top right;
   }
+
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+
   .-rotate-90 {
     --tw-rotate: -90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+
   .rotate-180 {
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+
   .rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+
   .rotate-90 {
     --tw-rotate: 90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+
   .transform {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+
   @keyframes slideUp {
     0% {
       transform: translateY(100%);
@@ -881,661 +1039,856 @@ video {
       transform: translateX(0);
     }
   }
+
   .animate-slideUp {
     animation: slideUp 0.3s ease-out forwards;
   }
+
   @keyframes spin {
     to {
       transform: rotate(360deg);
     }
   }
+
   .animate-spin {
     animation: spin 1s linear infinite;
   }
+
   .cursor-not-allowed {
     cursor: not-allowed;
   }
+
   .cursor-pointer {
     cursor: pointer;
   }
+
   .resize {
     resize: both;
   }
+
   .list-none {
     list-style-type: none;
   }
+
   .appearance-none {
     -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
+
   .grid-flow-row {
     grid-auto-flow: row;
   }
+
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
   .grid-cols-none {
     grid-template-columns: none;
   }
+
   .flex-row {
     flex-direction: row;
   }
+
   .flex-col {
     flex-direction: column;
   }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
+
   .flex-nowrap {
     flex-wrap: nowrap;
   }
+
   .items-center {
     align-items: center;
   }
+
   .content-center {
     align-content: center;
   }
+
   .justify-start {
     justify-content: flex-start;
   }
+
   .justify-end {
     justify-content: flex-end;
   }
+
   .justify-center {
     justify-content: center;
   }
+
   .justify-between {
     justify-content: space-between;
   }
+
   .gap-2 {
     gap: 0.5rem;
   }
+
   .gap-4 {
     gap: 1rem;
   }
+
   .gap-8 {
     gap: 2rem;
   }
+
   .gap-\[10px\] {
     gap: 10px;
   }
+
   .gap-\[12px\] {
     gap: 12px;
   }
+
   .gap-\[16px\] {
     gap: 16px;
   }
+
   .gap-\[6px\] {
     gap: 6px;
   }
+
   .gap-xxsmall {
     gap: var(--spacing-xxsmall);
   }
+
   .gap-x-1 {
     -moz-column-gap: 0.25rem;
-         column-gap: 0.25rem;
+    column-gap: 0.25rem;
   }
+
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-         column-gap: 0.5rem;
+    column-gap: 0.5rem;
   }
+
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-         column-gap: 0.625rem;
+    column-gap: 0.625rem;
   }
+
   .gap-x-6 {
     -moz-column-gap: 1.5rem;
-         column-gap: 1.5rem;
+    column-gap: 1.5rem;
   }
+
   .gap-x-3\.2rem {
     -moz-column-gap: 3.2rem;
-         column-gap: 3.2rem;
+    column-gap: 3.2rem;
   }
+
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-         column-gap: var(--spacing-md);
+    column-gap: var(--spacing-md);
   }
+
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-         column-gap: var(--spacing-sm);
+    column-gap: var(--spacing-sm);
   }
+
   .gap-x-9 {
-     column-gap: 2.4rem;
-   }
+    column-gap: 2.4rem;
+  }
+
   .gap-y-8 {
     row-gap: 2rem;
   }
+
   .gap-y-9 {
     row-gap: 2.4rem;
   }
+
   .space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
+
   .space-x-3 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));
     margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
   }
+
   .space-y-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(1rem * var(--tw-space-y-reverse));
   }
+
   .overflow-auto {
     overflow: auto;
   }
+
   .overflow-hidden {
     overflow: hidden;
   }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
+
   .whitespace-nowrap {
     white-space: nowrap;
   }
+
   .rounded-2 {
     border-radius: var(--shape-border-radius-2);
   }
+
   .rounded-3 {
     border-radius: var(--shape-border-radius-3);
   }
+
   .rounded-full {
     border-radius: 9999px;
   }
+
   .rounded-lg {
     border-radius: 0.5rem;
   }
+
   .border {
     border-width: 1px;
   }
+
   .border-0 {
     border-width: 0px;
   }
+
   .border-3 {
     border-width: var(--shape-border-width-3);
   }
+
   .border-\[1\.5px\] {
     border-width: 1.5px;
   }
+
   .border-b {
     border-bottom-width: 1px;
   }
+
   .border-r {
     border-right-width: 1px;
   }
+
   .border-t {
     border-top-width: 1px;
   }
+
   .border-solid {
     border-style: solid;
   }
+
   .border-none {
     border-style: none;
   }
+
   .border-\[\#ddd\] {
     --tw-border-opacity: 1;
     border-color: rgb(221 221 221 / var(--tw-border-opacity));
   }
+
   .border-black {
     --tw-border-opacity: 1;
     border-color: rgb(0 0 0 / var(--tw-border-opacity));
   }
+
   .border-brand-700 {
     border-color: var(--color-brand-700);
   }
+
   .border-gray-200 {
     --tw-border-opacity: 1;
     border-color: rgb(229 231 235 / var(--tw-border-opacity));
   }
+
   .border-gray-300 {
     --tw-border-opacity: 1;
     border-color: rgb(209 213 219 / var(--tw-border-opacity));
   }
+
   .border-neutral-200 {
     border-color: var(--color-neutral-200);
   }
+
   .border-neutral-300 {
     border-color: var(--color-neutral-300);
   }
+
   .border-neutral-400 {
     border-color: var(--color-neutral-400);
   }
+
   .border-neutral-450 {
     border-color: var(--color-neutral-450);
   }
+
   .border-neutral-500 {
     border-color: var(--color-neutral-500);
   }
+
   .border-transparent {
     border-color: transparent;
   }
+
   .bg-background {
     background-color: var(--background-color);
   }
+
   .bg-black {
     --tw-bg-opacity: 1;
     background-color: rgb(0 0 0 / var(--tw-bg-opacity));
   }
+
   .bg-blue-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(239 246 255 / var(--tw-bg-opacity));
   }
+
   .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   }
+
   .bg-green-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(240 253 244 / var(--tw-bg-opacity));
   }
+
   .bg-neutral-200 {
     background-color: var(--color-neutral-200);
   }
+
   .bg-neutral-300 {
     background-color: var(--color-neutral-300);
   }
+
   .bg-neutral-400 {
     background-color: var(--color-neutral-400);
   }
+
   .bg-neutral-50 {
     background-color: var(--color-neutral-50);
   }
+
   .bg-red-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 242 242 / var(--tw-bg-opacity));
   }
+
   .bg-transparent {
     background-color: transparent;
   }
+
   .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
+
   .bg-yellow-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 252 232 / var(--tw-bg-opacity));
   }
+
   .bg-opacity-50 {
     --tw-bg-opacity: 0.5;
   }
+
   .bg-cover {
     background-size: cover;
   }
+
   .bg-no-repeat {
     background-repeat: no-repeat;
   }
+
   .fill-brand-300 {
     fill: var(--color-brand-300);
   }
+
   .fill-neutral-800 {
     fill: var(--color-neutral-800);
   }
+
   .stroke-brand-700 {
     stroke: var(--color-brand-700);
   }
+
   .stroke-neutral-600 {
     stroke: var(--color-neutral-600);
   }
+
   .stroke-neutral-50 {
     stroke: var(--color-neutral-50);
   }
+
   .stroke-1 {
     stroke-width: var(--shape-icon-stroke-1);
   }
+
   .object-cover {
     -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
+
   .object-center {
     -o-object-position: center;
-       object-position: center;
+    object-position: center;
   }
+
   .p-1 {
     padding: 0.25rem;
   }
+
   .p-1\.5 {
     padding: 0.375rem;
   }
+
   .p-2 {
     padding: 0.5rem;
   }
+
   .p-4 {
     padding: 1rem;
   }
+
   .p-12 {
     padding: 3rem;
   }
+
   .p-\[14px\] {
     padding: 14px;
   }
+
   .p-sm {
     padding: var(--spacing-sm);
   }
+
   .p-xs {
     padding: var(--spacing-xs);
   }
+
   .p-xsmall {
     padding: var(--spacing-xsmall);
   }
+
   .px-1 {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
   }
+
   .px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
   .px-\[12px\] {
     padding-left: 12px;
     padding-right: 12px;
   }
+
   .px-md {
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-md);
   }
+
   .px-sm {
     padding-left: var(--spacing-sm);
     padding-right: var(--spacing-sm);
   }
+
   .px-xsmall {
     padding-left: var(--spacing-xsmall);
     padding-right: var(--spacing-xsmall);
   }
+
   .py-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
   }
+
   .py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
+
   .py-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+
   .py-\[10px\] {
     padding-top: 10px;
     padding-bottom: 10px;
   }
+
   .py-md {
     padding-top: var(--spacing-md);
     padding-bottom: var(--spacing-md);
   }
+
   .py-sm {
     padding-top: var(--spacing-sm);
     padding-bottom: var(--spacing-sm);
   }
+
   .py-small {
     padding-top: var(--spacing-small);
     padding-bottom: var(--spacing-small);
   }
+
   .py-xs {
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
   }
+
   .py-xsmall {
     padding-top: var(--spacing-xsmall);
     padding-bottom: var(--spacing-xsmall);
   }
+
   .pb-2 {
     padding-bottom: 0.5rem;
   }
+
   .pb-2xl {
     padding-bottom: var(--spacing-2xl);
   }
+
   .pb-3 {
     padding-bottom: 0.75rem;
   }
+
   .pb-4 {
     padding-bottom: 1rem;
   }
+
   .pb-6 {
     padding-bottom: 1.5rem;
   }
+
   .pb-\[122\.22\%\] {
     padding-bottom: 122.22%;
   }
+
   .pb-20 {
     padding-bottom: 5rem;
   }
+
   .pb-24 {
     padding-bottom: 2.4rem;
   }
+
   .pl-3 {
     padding-left: 0.75rem;
   }
+
   .pl-8 {
     padding-left: 2rem;
   }
+
   .pl-24 {
     padding-left: 6rem;
   }
+
   .pr-2 {
     padding-right: 0.5rem;
   }
+
   .pr-5 {
     padding-right: 1.25rem;
   }
+
   .pr-24 {
     padding-right: 6rem;
   }
+
   .pr-lg {
     padding-right: var(--spacing-lg);
   }
+
   .pt-16 {
     padding-top: 4rem;
   }
+
   .pt-\[15px\] {
     padding-top: 15px;
   }
+
   .pt-md {
     padding-top: var(--spacing-md);
   }
+
   .text-left {
     text-align: left;
   }
+
   .text-center {
     text-align: center;
   }
+
   .text-2xl {
     font-size: var(--font-2xl);
     line-height: var(--leading-loose);
   }
+
   .text-\[12px\] {
     font-size: 12px;
   }
+
   .text-\[14px\] {
     font-size: 14px;
   }
+
   .text-base {
     font-size: var(--font-md);
     line-height: var(--leading-snug);
   }
+
   .text-lg {
     font-size: var(--font-lg);
     line-height: var(--leading-normal);
   }
+
   .text-sm {
     font-size: var(--font-sm);
     line-height: var(--leading-tight);
   }
+
   .font-light {
     font-weight: var(--font-light);
   }
+
   .font-medium {
     font-weight: var(--font-medium);
   }
+
   .font-normal {
     font-weight: var(--font-normal);
   }
+
   .font-semibold {
     font-weight: var(--font-semibold);
   }
+
   .uppercase {
     text-transform: uppercase;
   }
+
   .capitalize {
     text-transform: capitalize;
   }
+
   .\!text-brand-700 {
     color: var(--color-brand-700) !important;
   }
+
   .text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));
   }
+
   .text-blue-400 {
     --tw-text-opacity: 1;
     color: rgb(96 165 250 / var(--tw-text-opacity));
   }
+
   .text-blue-700 {
     --tw-text-opacity: 1;
     color: rgb(29 78 216 / var(--tw-text-opacity));
   }
+
   .text-blue-800 {
     --tw-text-opacity: 1;
     color: rgb(30 64 175 / var(--tw-text-opacity));
   }
+
   .text-brand-300 {
     color: var(--color-brand-300);
   }
+
   .text-brand-600 {
     color: var(--color-brand-600);
   }
+
   .text-brand-700 {
     color: var(--color-brand-700);
   }
+
   .text-green-400 {
     --tw-text-opacity: 1;
     color: rgb(74 222 128 / var(--tw-text-opacity));
   }
+
   .text-green-500 {
     --tw-text-opacity: 1;
     color: rgb(34 197 94 / var(--tw-text-opacity));
   }
+
   .text-green-700 {
     --tw-text-opacity: 1;
     color: rgb(21 128 61 / var(--tw-text-opacity));
   }
+
   .text-green-800 {
     --tw-text-opacity: 1;
     color: rgb(22 101 52 / var(--tw-text-opacity));
   }
+
   .text-neutral-600 {
     color: var(--color-neutral-600);
   }
+
   .text-neutral-700 {
     color: var(--color-neutral-700);
   }
+
   .text-neutral-800 {
     color: var(--color-neutral-800);
   }
+
   .text-neutral-900 {
     color: var(--color-neutral-900);
   }
+
   .text-red-400 {
     --tw-text-opacity: 1;
     color: rgb(248 113 113 / var(--tw-text-opacity));
   }
+
   .text-red-700 {
     --tw-text-opacity: 1;
     color: rgb(185 28 28 / var(--tw-text-opacity));
   }
+
   .text-red-800 {
     --tw-text-opacity: 1;
     color: rgb(153 27 27 / var(--tw-text-opacity));
   }
+
   .text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
+
   .text-yellow-400 {
     --tw-text-opacity: 1;
     color: rgb(250 204 21 / var(--tw-text-opacity));
   }
+
   .text-yellow-700 {
     --tw-text-opacity: 1;
     color: rgb(161 98 7 / var(--tw-text-opacity));
   }
+
   .text-yellow-800 {
     --tw-text-opacity: 1;
     color: rgb(133 77 14 / var(--tw-text-opacity));
   }
+
   .underline {
     text-decoration-line: underline;
   }
+
   .line-through {
     text-decoration-line: line-through;
   }
+
   .no-underline {
     text-decoration-line: none;
   }
+
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+
   .accent-neutral-800 {
     accent-color: var(--color-neutral-800);
   }
+
   .opacity-0 {
     opacity: 0;
   }
+
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+
   .outline {
     outline-style: solid;
   }
+
   .outline-brand-700 {
     outline-color: var(--color-brand-700);
   }
+
   .outline-gray-200 {
     outline-color: #e5e7eb;
   }
+
   .outline-neutral-300 {
     outline-color: var(--color-neutral-300);
   }
+
   .outline-transparent {
     outline-color: transparent;
   }
+
   .ring-1 {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
+
   .ring-black {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
   }
+
   .ring-opacity-5 {
     --tw-ring-opacity: 0.05;
   }
+
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
+
   .\!filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
+
   .filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
+
   .transition {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1543,99 +1896,127 @@ video {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
+
   .transition-opacity {
     transition-property: opacity;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
+
   .ease-out {
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
+
   .first\:ml-0:first-child {
     margin-left: 0px;
   }
+
   .hover\:cursor-pointer:hover {
     cursor: pointer;
   }
+
   .hover\:border-none:hover {
     border-style: none;
   }
+
   .hover\:bg-green-100:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(220 252 231 / var(--tw-bg-opacity));
   }
+
   .hover\:bg-neutral-200:hover {
     background-color: var(--color-neutral-200);
   }
+
   .hover\:bg-transparent:hover {
     background-color: transparent;
   }
+
   .hover\:text-blue-600:hover {
     --tw-text-opacity: 1;
     color: rgb(37 99 235 / var(--tw-text-opacity));
   }
+
   .hover\:text-brand-700:hover {
     color: var(--color-brand-700);
   }
+
   .hover\:text-neutral-900:hover {
     color: var(--color-neutral-900);
   }
+
   .hover\:underline:hover {
     text-decoration-line: underline;
   }
+
   .hover\:no-underline:hover {
     text-decoration-line: none;
   }
+
   .focus\:border-none:focus {
     border-style: none;
   }
+
   .focus\:bg-transparent:focus {
     background-color: transparent;
   }
+
   .focus\:no-underline:focus {
     text-decoration-line: none;
   }
+
   .focus\:outline-none:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+
   .focus\:ring-0:focus {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
+
   .focus\:ring-2:focus {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
+
   .focus\:ring-green-600:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
   }
+
   .focus\:ring-offset-2:focus {
     --tw-ring-offset-width: 2px;
   }
+
   .focus\:ring-offset-green-50:focus {
     --tw-ring-offset-color: #f0fdf4;
   }
+
   .active\:border-none:active {
     border-style: none;
   }
+
   .active\:bg-transparent:active {
     background-color: transparent;
   }
+
   .active\:no-underline:active {
     text-decoration-line: none;
   }
+
   .active\:shadow-none:active {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+
   .group:hover .group-hover\:opacity-100 {
     opacity: 1;
   }
+
   @media (min-width: 640px) {
     .sm\:flex {
       display: flex;
@@ -1795,13 +2176,13 @@ video {
   @media (min-width: 1280px) {
     .xl\:gap-x-4 {
       -moz-column-gap: 1rem;
-           column-gap: 1rem;
+      column-gap: 1rem;
     }
   }
   @media (min-width: 1280px) {
     .xl\:gap-x-6 {
       -moz-column-gap: 1.5rem;
-           column-gap: 1.5rem;
+      column-gap: 1.5rem;
     }
   }
   @media (prefers-color-scheme: dark) {
@@ -1849,60 +2230,43 @@ video {
   --shape-border-width-3: 2px;
   --shape-border-width-4: 4px;
   --type-base-font-family: 'Roboto', sans-serif;
-  --type-display-1-font: normal normal 300 6rem/7.2rem
-    var(--type-base-font-family);
+  --type-display-1-font: normal normal 300 6rem/7.2rem var(--type-base-font-family);
   --type-display-1-letter-spacing: 0.04em;
-  --type-display-2-font: normal normal 300 4.8rem/5.6rem
-    var(--type-base-font-family);
+  --type-display-2-font: normal normal 300 4.8rem/5.6rem var(--type-base-font-family);
   --type-display-2-letter-spacing: 0.04em;
-  --type-display-3-font: normal normal 300 3.4rem/4rem
-    var(--type-base-font-family);
+  --type-display-3-font: normal normal 300 3.4rem/4rem var(--type-base-font-family);
   --type-display-3-letter-spacing: 0.04em;
-  --type-headline-1-font: normal normal 400 2.4rem/3.2rem
-    var(--type-base-font-family);
+  --type-headline-1-font: normal normal 400 2.4rem/3.2rem var(--type-base-font-family);
   --type-headline-1-letter-spacing: 0.04em;
-  --type-headline-2-default-font: normal normal 300 2rem/2.4rem
-    var(--type-base-font-family);
+  --type-headline-2-default-font: normal normal 300 2rem/2.4rem var(--type-base-font-family);
   --type-headline-2-default-letter-spacing: 0.04em;
-  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem
-    var(--type-base-font-family);
+  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem var(--type-base-font-family);
   --type-headline-2-strong-letter-spacing: 0.04em;
-  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem
-    var(--type-base-font-family);
+  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem var(--type-base-font-family);
   --type-body-1-default-letter-spacing: 0.04em;
-  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem
-    var(--type-base-font-family);
+  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
   --type-body-1-strong-letter-spacing: 0.04em;
-  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem
-    var(--type-base-font-family);
+  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
   --type-body-1-emphasized-letter-spacing: 0.04em;
-  --type-body-2-default-font: normal normal 300 1.4rem/2rem
-    var(--type-base-font-family);
+  --type-body-2-default-font: normal normal 300 1.4rem/2rem var(--type-base-font-family);
   --type-body-2-default-letter-spacing: 0.04em;
-  --type-body-2-strong-font: normal normal 400 1.4rem/2rem
-    var(--type-base-font-family);
+  --type-body-2-strong-font: normal normal 400 1.4rem/2rem var(--type-base-font-family);
   --type-body-2-strong-letter-spacing: 0.04em;
-  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem
-    var(--type-base-font-family);
+  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
   --type-body-2-emphasized-letter-spacing: 0.04em;
-  --type-button-1-font: normal normal 400 2rem/2.6rem
-    var(--type-base-font-family);
+  --type-button-1-font: normal normal 400 2rem/2.6rem var(--type-base-font-family);
   --type-button-1-letter-spacing: 0.08em;
-  --type-button-2-font: normal normal 400 1.6rem/2.4rem
-    var(--type-base-font-family);
+  --type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
   --type-button-2-letter-spacing: 0.08em;
-  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem
-    var(--type-base-font-family);
+  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
   --type-details-caption-1-letter-spacing: 0.08em;
-  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem
-    var(--type-base-font-family);
+  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem var(--type-base-font-family);
   --type-details-caption-2-letter-spacing: 0.08em;
-  --type-details-overline-font: normal normal 400 1.2rem/2rem
-    var(--type-base-font-family);
+  --type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family);
   --type-details-overline-letter-spacing: 0.16em;
   /* Additional tokens */
   --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono',
-    monospace;
+  monospace;
   --background-color: var(--color-neutral-50);
   --nav-height: 6.4rem;
   --spacing-xxsmall: 4px;
@@ -1991,7 +2355,7 @@ video {
 
 .font-display-3 {
   font: var(--type-display-3-font);
-  letter-spacing: var(---type-display-3-letter-spacing);
+  letter-spacing: var(--type-display-3-letter-spacing);
 }
 
 .font-headline-1 {
@@ -2264,11 +2628,11 @@ video {
 @media (min-width: 1280px) {
   .xl\:gap-x-4 {
     -moz-column-gap: 1rem;
-         column-gap: 1rem;
+    column-gap: 1rem;
   }
 
   .xl\:gap-x-6 {
     -moz-column-gap: 1.5rem;
-         column-gap: 1.5rem;
+    column-gap: 1.5rem;
   }
 }

From 43c8c508ee88735f5e5c6e1e8d21bc536e95f0ca Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Sun, 13 Oct 2024 22:09:14 +0200
Subject: [PATCH 116/160] WAF-396 - Lint fixes

---
 .../CategoryFilters/CategoryFilters.test.tsx  |  6 ------
 .../CategoryFilters/CategoryFilters.tsx       |  6 ------
 src/components/Drawer/Drawer.tsx              |  1 -
 src/components/Facets/Facets.tsx              | 20 ++++++++++---------
 src/components/Facets/Scalar/ScalarFacet.tsx  |  1 +
 .../FilterSelection/FilterSelection.tsx       |  1 +
 .../InputButtonGroup/InputButtonGroup.tsx     |  1 +
 src/components/MobileFacets/MobileFacets.tsx  |  4 ++--
 src/components/SortDropdown/SortDropdown.tsx  | 12 +++++++----
 src/containers/App.tsx                        |  2 --
 src/containers/MobileFilterHeader.tsx         | 11 +---------
 11 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/src/components/CategoryFilters/CategoryFilters.test.tsx b/src/components/CategoryFilters/CategoryFilters.test.tsx
index 717fa744..b9c94b5d 100644
--- a/src/components/CategoryFilters/CategoryFilters.test.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.test.tsx
@@ -16,15 +16,9 @@ describe('PLP widget/CategoryFilters', () => {
   it('renders', () => {
     const { container } = render(
       <CategoryFilters
-        loading={true}
         pageLoading={false}
         totalCount={1}
         facets={[]}
-        categoryName=""
-        phrase=""
-        showFilters={true}
-        setShowFilters={() => true}
-        filterCount={0}
       />
     );
 
diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 96ceee7b..18692803 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -13,16 +13,10 @@ import { Facet } from '../../types/interface';
 import { Facets } from '../Facets';
 
 interface CategoryFiltersProps {
-  loading: boolean;
   pageLoading: boolean;
   totalCount: number;
   facets: Facet[];
-  categoryName: string;
-  phrase: string;
-  showFilters: boolean;
-  setShowFilters: (showFilters: boolean) => void;
   displayFilter: () => void;
-  filterCount: number;
 }
 
 export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 7dae061e..9148c161 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -1,7 +1,6 @@
 import { FunctionComponent } from 'preact';
 import { useEffect } from 'preact/hooks';
 
-import CloseIcon from '../../icons/plus.svg';
 import { useSearch } from "../../context";
 
 interface DrawerProps {
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index abef99b7..1b5adec7 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -21,11 +21,11 @@ import {
   useStore,
   useTranslation,
 } from '../../context';
+import SortFilterIcon from "../../icons/sortfilter.svg";
 import { Facet as FacetType } from '../../types/interface';
 import FilterSelectionGroup from '../FilterSelection';
 import { ScalarFacet } from './Scalar/ScalarFacet';
 import { SelectedFilters } from './SelectedFilters';
-import SortFilterIcon from "../../icons/sortfilter.svg";
 
 interface FacetsProps {
   searchFacets: FacetType[];
@@ -49,7 +49,7 @@ export const scrollFilter = (
       setTimeout(resolve, time);
     });
   }
-  const callback = async (mutationList, observer) => {
+  const callback = async (mutationList) => {
     for (const mutation of mutationList) {
       if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
         await wait(300);
@@ -171,13 +171,15 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                       />
                     );
                   case 'RangeBucket':
-                    <ScalarFacet
-                      key={facet.attribute}
-                      filterData={facet}
-                      iteration={index}
-                      selectedNumber={getSelectedFilters(facet)}
-                      displayFilter={displayFilter}
-                    />
+                    return(
+                      <ScalarFacet
+                        key={facet.attribute}
+                        filterData={facet}
+                        iteration={index}
+                        selectedNumber={getSelectedFilters(facet)}
+                        displayFilter={displayFilter}
+                      />
+                    );
                   case 'CategoryView':
                     return (
                       <ScalarFacet
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 26e98739..928304c5 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -8,6 +8,7 @@ it.
 */
 import { FunctionComponent } from 'preact';
 import { FilterSelection } from 'src/components/FilterSelection';
+
 import { Facet as FacetType, PriceFacet } from '../../../types/interface';
 
 export type DisplayFilterType = () => void;
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index 645a04ad..9b3b8a7d 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'preact';
+
 import { scrollFilter } from "../Facets";
 
 export type FilterSelectionTitleSlot = (label: string) => FunctionComponent;
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index b5ec2f6d..81dec65e 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'preact';
+
 import { useProducts, useTranslation } from '../../context';
 import { BOOLEAN_NO, BOOLEAN_YES } from '../../utils/constants';
 import { LabelledInput } from '../LabelledInput';
diff --git a/src/components/MobileFacets/MobileFacets.tsx b/src/components/MobileFacets/MobileFacets.tsx
index 64a3ef0e..6a40033e 100644
--- a/src/components/MobileFacets/MobileFacets.tsx
+++ b/src/components/MobileFacets/MobileFacets.tsx
@@ -10,12 +10,12 @@ it.
 import { FunctionComponent } from 'preact';
 
 import { useStore } from '../../context';
+import CloseIcon from "../../icons/plus.svg";
 import { Facet as FacetType, PriceFacet, SortOption } from '../../types/interface';
 import SliderDoubleControl from '../SliderDoubleControl';
+import { SortDropdown } from "../SortDropdown";
 import { RangeFacet } from './Range/RangeFacet';
 import { ScalarFacet } from './Scalar/ScalarFacet';
-import CloseIcon from "../../icons/plus.svg";
-import { SortDropdown } from "../SortDropdown";
 
 interface FacetsProps {
   searchFacets: FacetType[];
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index e4255f75..e5fce743 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -98,14 +98,18 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
         <fieldset className={'ds-sdk-input__options mt-4 md:mt-0 none-display'}>
           <div className={'space-y-4'}>
             {sortOptions.map((option, i) => (
-              <div className={'ds-sdk-labelled-input flex gap-4 items-center'}>
-                <input type={'radio'}
+              <div
+                key={`div-${i}`}
+                className={'ds-sdk-labelled-input flex gap-4 items-center'}>
+                <input key={`input-${i}`}
+                       type={'radio'}
                        value={'option.value'}
                        checked={option.value === selectedOption?.value}
                        onClick={() => select(option.value)}
                        className={'ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]'}
                 />
-                <label for={'sortby-' + option.value}
+                <label key={`label-${i}`}
+                       for={`sortby-${  option.value}`}
                        onClick={() => select(option.value)}
                        className={'ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer'}
                 >
@@ -115,7 +119,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
             ))}
           </div>
         </fieldset>
-        <div className={'ds-sdk-input__border border-t border-neutral-500'}></div>
+        <div className={'ds-sdk-input__border border-t border-neutral-500'} />
       </div>
     </>
   );
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 4482d869..d7aa1bf2 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -14,7 +14,6 @@ import FilterButton from 'src/components/FilterButton';
 import Loading from 'src/components/Loading';
 import Shimmer from 'src/components/Shimmer';
 
-import {FranchiseViewSelector} from "../components/Facets/FranchiseViewSelector";
 import {
   useProducts,
   useSearch,
@@ -35,7 +34,6 @@ export const App: FunctionComponent = () => {
   const [showFilters, setShowFilters] = useState(true);
 
   const loadingLabel = translation.Loading.title;
-  const displayByFranchise = categoryConfig?.pcm_display_by_franchise === '1';
 
   return (
     <>
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 89af37b4..ec41a70f 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -11,8 +11,8 @@ import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { Drawer } from 'src/components/Drawer/Drawer';
 import MobileFacets from 'src/components/MobileFacets';
-import Chevron from '../icons/chevron.svg';
 
+import { CategoryFilters } from "../components";
 import { FilterButton } from '../components/FilterButton';
 import {
   useAttributeMetadata,
@@ -28,7 +28,6 @@ import {
   generateGQLSortInput,
   getSortOptionsfromMetadata,
 } from '../utils/sort';
-import { CategoryFilters } from "../components";
 
 interface Props {
   facets: Facet[];
@@ -101,21 +100,14 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
     return null;
   }
 
-  const [showFilters, setShowFilters] = useState(true);
   return (
     <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
       {!screenSize.mobile && productsCtx.totalCount && (
         <CategoryFilters
-          loading={productsCtx.loading}
           pageLoading={productsCtx.pageLoading}
           facets={productsCtx.facets}
           totalCount={productsCtx.totalCount}
-          categoryName={productsCtx.categoryName ?? ''}
-          phrase={productsCtx.variables.phrase ?? ''}
-          showFilters={showFilters}
-          setShowFilters={setShowFilters}
           displayFilter={() => setShowMobileFacet(!showMobileFacet)}
-          filterCount={searchCtx.filterCount}
         />
       )}
       {screenSize.mobile && (
@@ -140,7 +132,6 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
             sortOptions={sortOptions}
             value={sortBy}
             onChange={onSortChange}
-            mobile
           />
         </Drawer>
       </div>

From e554aa29a8d66e508eb132df8f5d5de83555b25d Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 14 Oct 2024 07:31:01 +0200
Subject: [PATCH 117/160] WAF-396 - Fixed linters and removed unneccssary code

---
 src/components/Facets/Facets.tsx              | 53 +------------------
 src/components/Facets/Scalar/ScalarFacet.tsx  |  3 --
 .../FilterSelection/FilterSelection.tsx       |  7 +--
 src/containers/App.tsx                        |  2 +-
 4 files changed, 4 insertions(+), 61 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 1b5adec7..76ededd3 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -8,16 +8,10 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import useScalarFacet from 'src/hooks/useScalarFacet';
-import {
-  defaultSortOptions,
-  getSortOptionsfromMetadata,
-} from 'src/utils/sort';
 
 import {
-  useAttributeMetadata,
-  useSearch,
   useStore,
   useTranslation,
 } from '../../context';
@@ -84,51 +78,11 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   displayFilter,
 }: FacetsProps) => {
   const {config} = useStore();
-  const searchCtx = useSearch();
-  const attributeMetadata = useAttributeMetadata();
   const translation = useTranslation();
-
-  const attributesToFilter = [
-    'featured',
-    'new',
-    'price',
-  ];
-
   const searchFacetsSliced = searchFacets?.slice(0, 4)
-
-  const filteredAttributes = attributeMetadata?.sortable.filter((item) =>
-    attributesToFilter.includes(item.attribute)
-  );
-
-  const [selectedFacet, setSelectedFacet] = useState<FacetType | null>(null);
-  const [sortOptions, setSortOptions] = useState(defaultSortOptions());
-
-  const getSortOptions = useCallback(() => {
-    setSortOptions(
-      getSortOptionsfromMetadata(
-        translation,
-        filteredAttributes,
-        config?.displayOutOfStock,
-        config?.currentCategoryUrlPath,
-        config?.currentCategoryId
-      )
-    );
-  }, [config, translation, attributeMetadata]);
-
-  useEffect(() => {
-    getSortOptions();
-  }, [getSortOptions]);
-
+  const [selectedFacet] = useState<FacetType | null>(null);
   const isCategory = config?.currentCategoryUrlPath || config?.currentCategoryId;
 
-  const getSelectedFilters = (facet: FacetType) => {
-    const {attribute} = facet;
-    const categoryFiltered = searchCtx.filters.find(
-      (item) => item.attribute === attribute
-    );
-    return categoryFiltered?.in?.length ?? 0;
-  };
-
   const {isSelected, onChange} = useScalarFacet(selectedFacet);
 
   const onFacetChange = (value: string, selected?: boolean, type?: string) => {
@@ -166,7 +120,6 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                         key={facet.attribute}
                         filterData={facet}
                         iteration={index}
-                        selectedNumber={getSelectedFilters(facet)}
                         displayFilter={displayFilter}
                       />
                     );
@@ -176,7 +129,6 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                         key={facet.attribute}
                         filterData={facet}
                         iteration={index}
-                        selectedNumber={getSelectedFilters(facet)}
                         displayFilter={displayFilter}
                       />
                     );
@@ -186,7 +138,6 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                         key={facet.attribute}
                         filterData={facet}
                         iteration={index}
-                        selectedNumber={getSelectedFilters(facet)}
                         displayFilter={displayFilter}
                       />
                     );
diff --git a/src/components/Facets/Scalar/ScalarFacet.tsx b/src/components/Facets/Scalar/ScalarFacet.tsx
index 928304c5..41359b65 100644
--- a/src/components/Facets/Scalar/ScalarFacet.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.tsx
@@ -17,13 +17,11 @@ interface ScalarFacetProps {
   filterData: FacetType | PriceFacet;
   iteration: number;
   displayFilter?: DisplayFilterType;
-  selectedNumber?: number;
 }
 
 export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
   filterData,
   iteration,
-  selectedNumber,
   displayFilter,
 }) => {
   return (
@@ -32,7 +30,6 @@ export const ScalarFacet: FunctionComponent<ScalarFacetProps> = ({
         title={filterData.title}
         attribute={filterData.attribute}
         displayFilter={displayFilter}
-        selectedNumber={selectedNumber}
         iteration={iteration}
       />
     </>
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index 9b3b8a7d..bc519c84 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -9,7 +9,6 @@ export interface FilterSelectionProps {
   attribute?: string;
   filterSelectionTitleSlot?: FilterSelectionTitleSlot;
   displayFilter?: () => void;
-  selectedNumber?: number;
   iteration: number;
 }
 
@@ -17,7 +16,6 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
   title,
   filterSelectionTitleSlot,
   displayFilter,
-  selectedNumber,
   iteration,
 }) => {
   return (
@@ -33,10 +31,7 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
             id={`filter-${iteration + 1}`}
             className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer"
           >
-            {title}{' '}
-            {!!selectedNumber && (
-              <span className="font-normal text-neutral-700">{`(${selectedNumber})`}</span>
-            )}
+            {title}
           </label>
         </div>
       )}
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index d7aa1bf2..36d4381e 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -30,7 +30,7 @@ export const App: FunctionComponent = () => {
   const productsCtx = useProducts();
   const { screenSize } = useSensor();
   const translation = useTranslation();
-  const { displayMode, categoryConfig } = useStore().config;
+  const { displayMode } = useStore().config;
   const [showFilters, setShowFilters] = useState(true);
 
   const loadingLabel = translation.Loading.title;

From 0a8508f077397a1d64ffb7a1fd6d34df62b65e10 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 14 Oct 2024 07:50:30 +0200
Subject: [PATCH 118/160] WAF-396 - Erika requests

---
 src/components/LabelledInput/LabelledInput.tsx | 10 +++++-----
 src/components/SortDropdown/SortDropdown.tsx   |  2 +-
 src/styles/index.css                           |  4 ++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index f85af33b..5e8e0f46 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -40,7 +40,7 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
   const href = `${window.location.origin}/${window.location.pathname.split('/')[1]}/${value}`
   return (
     type === 'link' || attribute === 'categories' ? (
-      <div className="ds-sdk-labelled-input flex gap-4 items-center">
+      <div className="ds-sdk-labelled-input flex gap-4 text-[12px] leading-12 items-center">
         <a href={href}
            onClick={(e) => {
              if (type === 'link') {
@@ -74,13 +74,13 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
         />
         <label
           htmlFor={name}
-          className="ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer"
+          className="ds-sdk-labelled-input__label block-display h-max-content text-[12px] leading-12 cursor-pointer"
         >
           {label}
           {count && (
-            <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
-                    {`(${count})`}
-                  </span>
+            <span className="text-[12px] ml-1 font-details-overline">
+              {`(${count})`}
+            </span>
           )}
         </label>
 
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index e5fce743..b01b9910 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -111,7 +111,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
                 <label key={`label-${i}`}
                        for={`sortby-${  option.value}`}
                        onClick={() => select(option.value)}
-                       className={'ds-sdk-labelled-input__label ml-sm block-display h-max-content text-neutral-800 font-body-1-default text-[12px] cursor-pointer'}
+                       className={'ds-sdk-labelled-input__label block-display h-max-content leading-12 text-[12px] cursor-pointer'}
                 >
                   {option.label}
                 </label>
diff --git a/src/styles/index.css b/src/styles/index.css
index 8eaee37e..aed5042e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1674,6 +1674,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     line-height: var(--leading-tight);
   }
 
+  .leading-12 {
+    line-height: 2.5rem;
+  }
+
   .font-light {
     font-weight: var(--font-light);
   }

From 7cc04daeeedc22020458432fa3fedb4327b6713c Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 14 Oct 2024 07:57:26 +0200
Subject: [PATCH 119/160] WAF-396 - Error switch fix

---
 src/components/SortDropdown/SortDropdown.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index b01b9910..6346c836 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -33,6 +33,7 @@ export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & {
     const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
     currentFilterBlock?.classList.add('none-display')
     currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
+    currentFilterBlock?.closest('.ds-sdk-input').classList.remove('active')
     toBeActiveFilterBlock?.classList.remove('none-display')
     borderDiv.classList.add('mt-md');
     parrentDiv.classList.add('active');

From 41aae901468ff3e4d22b5a47be2ea53d834a80a0 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 16 Oct 2024 14:35:02 +0200
Subject: [PATCH 120/160] WAF-396 - Fix and changes requested at code review

---
 src/components/Facets/Facets.tsx              |  6 ++---
 src/components/Facets/ToggleFilters.tsx       | 27 +++++++++++++++++++
 .../FilterSelection/FilterSelection.tsx       |  2 +-
 .../InputButtonGroup/InputButtonGroup.tsx     | 18 +++----------
 src/components/SortDropdown/SortDropdown.tsx  | 26 ++----------------
 5 files changed, 36 insertions(+), 43 deletions(-)
 create mode 100644 src/components/Facets/ToggleFilters.tsx

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 76ededd3..d0f9642c 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -49,9 +49,9 @@ export const scrollFilter = (
         await wait(300);
         const filterInput = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input');
         const filterToShow = filterInput[filterNumber];
-        const filterToHide = filterInput.querySelector('fieldset:not(.none-display)');
+        const filterToHide = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input fieldset:not(.none-display)');
 
-        filterToHide.forEach(element => {
+        filterToHide?.forEach(element => {
           element.closest('.ds-sdk-input')?.classList.remove('active')
           element.classList.add('none-display')
           element.nextElementSibling?.classList.remove('mt-md')
@@ -105,7 +105,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
                 <div class="flex items-center gap-x-1 cursor-pointer"
                      onClick={(event) => scrollFilter(event, displayFilter)}>
                   <label id={'filter-0'}
-                         className="flex flex-row gap-4 ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer">
+                         className="flex flex-row gap-4 ds-sdk-input__label text-neutral-900 text-sm font-semibold cursor-pointer">
                     <SortFilterIcon className="h-[18px] w-[18px] fill-neutral-800"/>
                     {translation.Filter.title}
                   </label>
diff --git a/src/components/Facets/ToggleFilters.tsx b/src/components/Facets/ToggleFilters.tsx
new file mode 100644
index 00000000..59d9fb46
--- /dev/null
+++ b/src/components/Facets/ToggleFilters.tsx
@@ -0,0 +1,27 @@
+/**
+ * Toggles filters modal
+ *
+ * @param event
+ */
+export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & {
+  readonly currentTarget: HTMLLabelElement
+}) => {
+  const clicked = event.target;
+  const toBeActiveFilterBlock = clicked.nextElementSibling;
+  const parrentDiv = clicked.closest('.ds-sdk-input')
+  const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
+
+  if (toBeActiveFilterBlock.classList.contains('none-display')) {
+    const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
+    currentFilterBlock?.classList.add('none-display')
+    currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
+    currentFilterBlock?.closest('.ds-sdk-input').classList.remove('active')
+    toBeActiveFilterBlock?.classList.remove('none-display')
+    borderDiv.classList.add('mt-md');
+    parrentDiv.classList.add('active');
+  } else {
+    toBeActiveFilterBlock?.classList.add('none-display')
+    borderDiv.classList.remove('mt-md');
+    parrentDiv.classList.remove('active');
+  }
+}
\ No newline at end of file
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index bc519c84..e3b6cfc0 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -29,7 +29,7 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
         >
           <label
             id={`filter-${iteration + 1}`}
-            className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold cursor-pointer"
+            className="ds-sdk-input__label text-neutral-900 text-sm font-semibold cursor-pointer"
           >
             {title}
           </label>
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 81dec65e..9ba830e4 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent } from 'preact';
 import { useProducts, useTranslation } from '../../context';
 import { BOOLEAN_NO, BOOLEAN_YES } from '../../utils/constants';
 import { LabelledInput } from '../LabelledInput';
-import { toggleFilters } from "../SortDropdown";
+import { toggleFilters } from "../Facets/ToggleFilters";
 
 export type InputButtonGroupOnChangeProps = {
   value: string;
@@ -97,13 +97,13 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
       ) : (
         (isHidden ? (
           <label
-            className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row"
+            className="ds-sdk-input__label text-neutral-900 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row"
             onClick={(event) => toggleFilters(event)}>
             {title}
           </label>
         ) : (
           <label
-            className="ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display flex flex-row">{title}</label>
+            className="ds-sdk-input__label text-neutral-900 text-sm font-semibold py-md w-full h-full ib-display flex flex-row">{title}</label>
         ))
       )}
       <fieldset className={`ds-sdk-input__options mt-4 md:mt-0 ${isHidden ? 'none-display' : ''}`}>
@@ -125,18 +125,6 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
               />
             );
           })}
-          {attribute === 'price' && (
-            <LabelledInput
-              name={`range-radio-${attribute}`}
-              attribute={attribute}
-              label={'Range price'}
-              checked={false}
-              value={'125.0-555.0'}
-              count={null}
-              onChange={onChange}
-              type={type}
-            />
-          )}
         </div>
       </fieldset>
       <div className="ds-sdk-input__border border-t border-neutral-500"/>
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 6346c836..68dc9f57 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -13,6 +13,7 @@ import { useEffect, useRef } from 'preact/hooks';
 import { useTranslation } from '../../context/translation';
 import { useAccessibleDropdown } from '../../hooks/useAccessibleDropdown';
 import { SortOption } from '../../types/interface';
+import { toggleFilters } from '../Facets/ToggleFilters';
 
 export interface SortDropdownProps {
   value: string;
@@ -21,29 +22,6 @@ export interface SortDropdownProps {
   mobile?: boolean;
 }
 
-export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & {
-  readonly currentTarget: HTMLLabelElement
-}) => {
-  const clicked = event.target;
-  const toBeActiveFilterBlock = clicked.nextElementSibling;
-  const parrentDiv = clicked.closest('.ds-sdk-input')
-  const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
-
-  if (toBeActiveFilterBlock.classList.contains('none-display')) {
-    const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
-    currentFilterBlock?.classList.add('none-display')
-    currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
-    currentFilterBlock?.closest('.ds-sdk-input').classList.remove('active')
-    toBeActiveFilterBlock?.classList.remove('none-display')
-    borderDiv.classList.add('mt-md');
-    parrentDiv.classList.add('active');
-  } else {
-    toBeActiveFilterBlock?.classList.add('none-display')
-    borderDiv.classList.remove('mt-md');
-    parrentDiv.classList.remove('active');
-  }
-}
-
 export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
   value,
   sortOptions,
@@ -91,7 +69,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
     <>
       <div ref={sortOptionMenu} class="ds-sdk-input">
         <label
-          className={'ds-sdk-input__label text-neutral-900 font-headline-1 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row'}
+          className={'ds-sdk-input__label text-neutral-900 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row'}
           onClick={(event) => toggleFilters(event)}
         >
           {translation.SortDropdown.title}

From 95d84f52a4eacf9b31acf7c1b312b57bd054fb9e Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 23 Oct 2024 15:53:09 +0200
Subject: [PATCH 121/160] WAF-498 - Franchise header changes

---
 src/components/ProductList/product-list.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/ProductList/product-list.css b/src/components/ProductList/product-list.css
index fa56e55a..81038f43 100644
--- a/src/components/ProductList/product-list.css
+++ b/src/components/ProductList/product-list.css
@@ -1,6 +1,6 @@
 /* https://cssguidelin.es/#bem-like-naming */
 .ds-sdk-product-list .franchises h2 {
-  font-size: var(--heading-font-size-xxxs);
+  font-size: var(--heading-font-size-xs);
   font-family: var(--ff-gt-america-expanded-bold);
   margin-bottom: 10px;
 }
@@ -22,23 +22,22 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 30px;
+  margin: 32px 12px 24px;
 }
 
 .ds-sdk-product-list .franchises .franchise-header a {
+  font-size: var(--body-font-size-mobile-m);
   text-decoration: underline;
 }
 
 @media only screen and (min-width: 1025px) {
   .ds-sdk-product-list .franchises h2 {
-    font-size: var(--heading-font-size-l);
+    font-size: var(--heading-font-size-m);
     margin-bottom: 0;
   }
 
   .ds-sdk-product-list .franchises .franchise-header {
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 50px;
+    margin: 16px 12px 24px;
   }
 }
 

From 238c9575b6f994e2a8a8d023f0ebc3baa9da0cb3 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Fri, 25 Oct 2024 11:35:06 +0200
Subject: [PATCH 122/160] WAF-498 - Requested changes

---
 src/components/ProductList/ProductList.tsx  | 13 +++++++++----
 src/components/ProductList/product-list.css |  3 ++-
 src/utils/constants.ts                      |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 8aab2fe6..a1b6ff11 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -14,7 +14,7 @@ import {useEffect, useState} from 'preact/hooks';
 import './product-list.css';
 
 import {Alert} from '../../components/Alert';
-import {useProducts, useSearch, useStore} from '../../context';
+import {useProducts, useSearch, useStore, useSensor} from '../../context';
 import {Product} from '../../types/interface';
 import {classNames} from '../../utils/dom';
 import ProductItem, {ProductProps} from '../ProductItem';
@@ -48,6 +48,8 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
   const storeCtx = useStore();
 
   const totalProductsCount = franchises[franchise]?.count;
+  const { screenSize } = useSensor();
+  const styleColumnNumber = screenSize.mobile ? numberOfColumns/2 : numberOfColumns;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -83,7 +85,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
         }) ?? franchises[franchise].title}>View all {totalProductsCount} results</a>
       </div>
       <div style={{
-        gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
+        gridTemplateColumns: `repeat(${styleColumnNumber}, minmax(0, 1fr))`,
       }}
            className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6">
         {franchises[franchise].items.slice(0, numberOfColumns * page).map((item: Product) => (
@@ -104,7 +106,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
         ))}
       </div>
       {page * numberOfColumns < totalProductsCount &&
-        <button onClick={() => setPage((p) => p + NEXT_NUMBER_OF_ROWS)} className="button secondary load-more">Load More</button>
+        <button onClick={() => setPage((p) => p + NEXT_NUMBER_OF_ROWS)} className="button primary load-more">Load More</button>
       }
 
     </div>
@@ -150,6 +152,9 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
     ? 'ds-sdk-product-list bg-body w-full max-w-full pb-2xl sm:pb-24'
     : 'ds-sdk-product-list bg-body w-full mx-auto pb-2xl sm:pb-24';
 
+  const { screenSize } = useSensor();
+  const styleColumnNumber = screenSize.mobile ? numberOfColumns/2 : numberOfColumns;
+
   useEffect(() => {
     refreshCart && refreshCart();
   }, [itemAdded]);
@@ -229,7 +234,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
       ) : (
         <div
           style={{
-            gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
+            gridTemplateColumns: `repeat(${styleColumnNumber}, minmax(0, 1fr))`,
           }}
           className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm md:gap-x-9 md:gap-y-9"
         >
diff --git a/src/components/ProductList/product-list.css b/src/components/ProductList/product-list.css
index 81038f43..85ac794c 100644
--- a/src/components/ProductList/product-list.css
+++ b/src/components/ProductList/product-list.css
@@ -2,7 +2,7 @@
 .ds-sdk-product-list .franchises h2 {
   font-size: var(--heading-font-size-xs);
   font-family: var(--ff-gt-america-expanded-bold);
-  margin-bottom: 10px;
+  margin-bottom: 4px;
 }
 
 .ds-sdk-product-list .franchises {
@@ -28,6 +28,7 @@
 .ds-sdk-product-list .franchises .franchise-header a {
   font-size: var(--body-font-size-mobile-m);
   text-decoration: underline;
+  text-transform: capitalize;
 }
 
 @media only screen and (min-width: 1025px) {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index f9be93a8..e5ed11cc 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -15,7 +15,7 @@ export const DEFAULT_MIN_QUERY_LENGTH = 3;
 export const PRODUCT_COLUMNS = {
   desktop: 4,
   tablet: 3,
-  mobile: 2,
+  mobile: 4,
 };
 
 export const SEARCH_SORT_DEFAULT: ProductSearchSortInput[] = [

From c708d64a19170c2e5c553205e9925df1eb7667b7 Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Tue, 29 Oct 2024 14:05:18 +0530
Subject: [PATCH 123/160] waf-406 article and model ccde fix

---
 src/components/ProductItem/ProductItem.tsx | 1 +
 src/context/events.tsx                     | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx
index d91e0f6d..f1ac33c5 100644
--- a/src/components/ProductItem/ProductItem.tsx
+++ b/src/components/ProductItem/ProductItem.tsx
@@ -251,6 +251,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
         eventInfo: {
           ...dl.getState(),
           sku: productSku,
+          optionID: selectedColorSwatch?.optionId,
           searchUnitId: SEARCH_UNIT_ID,
         },
       });
diff --git a/src/context/events.tsx b/src/context/events.tsx
index 54c34f98..1c171c45 100644
--- a/src/context/events.tsx
+++ b/src/context/events.tsx
@@ -126,8 +126,7 @@ const createProducts = (
     rank: index,
     ratingCount: item?.productView?.attributes.find((attr) => attr.name === 'bv_rating_count')?.value ?? '0',
     ratingAverage: item?.productView?.attributes.find((attr) => attr.name === 'bv_rating_average')?.value ?? '0',
-    articleNumber: item?.productView?.attributes.find((attr) => attr.name === 'pim_article_code')?.value || '',
-    modelNumber: item?.productView?.attributes.find((attr) => attr.name === 'pim_model_code')?.value || '',
+    optionID: item?.productView?.options?.[0]?.values?.[0]?.id,
     season: item?.productView?.attributes.find((attr) => attr.name === 'pim_season_dev')?.value || '',
   }));
 

From 6cd51c462ce07b2353eb03a6a87db14aded98754 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 21 Oct 2024 16:42:50 +0200
Subject: [PATCH 124/160] WAF-396 - Range filter work

---
 .../CategoryFilters/CategoryFilters.tsx       |  2 +-
 src/components/Facets/Facets.tsx              |  8 +-
 src/components/Facets/Range/RangeFacet.tsx    |  1 +
 .../Facets/Scalar/ScalarFacet.test.tsx        |  2 +-
 src/components/Facets/ToggleFilters.tsx       | 31 ++++--
 src/components/Facets/filters.css             |  8 ++
 .../FilterSelection/FilterSelection.test.tsx  |  6 +-
 .../InputButtonGroup.test.tsx                 |  7 +-
 .../InputButtonGroup/InputButtonGroup.tsx     | 16 ++-
 .../LabelledInput/LabelledInput.tsx           | 98 ++++++++++++++-----
 src/hooks/useRangeFacet.ts                    | 15 ++-
 src/styles/index.css                          |  9 ++
 12 files changed, 151 insertions(+), 52 deletions(-)

diff --git a/src/components/CategoryFilters/CategoryFilters.tsx b/src/components/CategoryFilters/CategoryFilters.tsx
index 18692803..23d0d3de 100644
--- a/src/components/CategoryFilters/CategoryFilters.tsx
+++ b/src/components/CategoryFilters/CategoryFilters.tsx
@@ -16,7 +16,7 @@ interface CategoryFiltersProps {
   pageLoading: boolean;
   totalCount: number;
   facets: Facet[];
-  displayFilter: () => void;
+  displayFilter?: () => void;
 }
 
 export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index d0f9642c..fa134de0 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -24,7 +24,7 @@ import { SelectedFilters } from './SelectedFilters';
 interface FacetsProps {
   searchFacets: FacetType[];
   totalCount?: number;
-  displayFilter: () => void;
+  displayFilter?: () => void;
 }
 
 export const scrollFilter = (
@@ -33,17 +33,17 @@ export const scrollFilter = (
 ) => {
   displayFunction?.();
 
-  const clicked = event.target;
+  const clicked = event.currentTarget;
   const filterNumber = Number(clicked.id.split('-')[1])
   const targetNode = document.querySelector('.mobile-filters-container');
   const config = {attributes: false, childList: true, subtree: true};
 
-  const wait = async (time) => {
+  const wait = async (time:number) => {
     return new Promise(resolve => {
       setTimeout(resolve, time);
     });
   }
-  const callback = async (mutationList) => {
+  const callback = async (mutationList:MutationRecord[]) => {
     for (const mutation of mutationList) {
       if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
         await wait(300);
diff --git a/src/components/Facets/Range/RangeFacet.tsx b/src/components/Facets/Range/RangeFacet.tsx
index 4890fa87..ec1b94a9 100644
--- a/src/components/Facets/Range/RangeFacet.tsx
+++ b/src/components/Facets/Range/RangeFacet.tsx
@@ -32,6 +32,7 @@ export const RangeFacet: FunctionComponent<RangeFacetProps> = ({
       onChange={(e) => {
         onChange(e.value);
       }}
+      isHidden={false}
     />
   );
 };
diff --git a/src/components/Facets/Scalar/ScalarFacet.test.tsx b/src/components/Facets/Scalar/ScalarFacet.test.tsx
index 400e9b2f..9a93d491 100644
--- a/src/components/Facets/Scalar/ScalarFacet.test.tsx
+++ b/src/components/Facets/Scalar/ScalarFacet.test.tsx
@@ -15,7 +15,7 @@ import { ScalarFacet } from './ScalarFacet';
 
 describe('PLP widget/RangeFacet', () => {
   it('renders', () => {
-    const { container } = render(<ScalarFacet filterData={{} as PriceFacet} />);
+    const { container } = render(<ScalarFacet iteration={1} filterData={{} as PriceFacet} />);
 
     const elem = container.querySelector('.ds-sdk-input');
 
diff --git a/src/components/Facets/ToggleFilters.tsx b/src/components/Facets/ToggleFilters.tsx
index 59d9fb46..d459b5a6 100644
--- a/src/components/Facets/ToggleFilters.tsx
+++ b/src/components/Facets/ToggleFilters.tsx
@@ -6,22 +6,35 @@
 export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & {
   readonly currentTarget: HTMLLabelElement
 }) => {
-  const clicked = event.target;
+  const clicked = event.currentTarget;
   const toBeActiveFilterBlock = clicked.nextElementSibling;
   const parrentDiv = clicked.closest('.ds-sdk-input')
-  const borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
+  let borderDiv: any
+  if (parrentDiv && "querySelector" in parrentDiv) {
+    borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
+  }
+
+  if (!(toBeActiveFilterBlock) || toBeActiveFilterBlock.classList.contains('none-display')) {
+    const clickedForm = clicked.closest('form')
+    let currentFilterBlock: any
+    if (clickedForm && "querySelector" in clickedForm) {
+      currentFilterBlock = clickedForm.querySelector('fieldset:not(.none-display)');
+    }
+
+      currentFilterBlock?.classList.add('none-display')
+      currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
+      currentFilterBlock?.closest('.ds-sdk-input').classList.remove('active')
 
-  if (toBeActiveFilterBlock.classList.contains('none-display')) {
-    const currentFilterBlock = clicked.closest('form').querySelector('fieldset:not(.none-display)')
-    currentFilterBlock?.classList.add('none-display')
-    currentFilterBlock?.nextElementSibling?.classList.remove('mt-md')
-    currentFilterBlock?.closest('.ds-sdk-input').classList.remove('active')
     toBeActiveFilterBlock?.classList.remove('none-display')
     borderDiv.classList.add('mt-md');
-    parrentDiv.classList.add('active');
+    if (parrentDiv && "classList" in parrentDiv) {
+      parrentDiv.classList.add('active');
+    }
   } else {
     toBeActiveFilterBlock?.classList.add('none-display')
     borderDiv.classList.remove('mt-md');
-    parrentDiv.classList.remove('active');
+    if (parrentDiv && "classList" in parrentDiv) {
+      parrentDiv.classList.remove('active');
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
index 4bc5d3ad..c338a795 100644
--- a/src/components/Facets/filters.css
+++ b/src/components/Facets/filters.css
@@ -32,6 +32,14 @@
   content: '-';
 }
 
+.mobile-filters-container .range-input {
+  border: 1px solid rgba(0, 0, 0, 0.1)
+}
+
+.mobile-filters-container .price-range-submit {
+  font-family: var(--ff-gt-america-expanded)
+}
+
 @media (min-width: 768px) {
   .grid-setting {
     flex: 1 0 100%;
diff --git a/src/components/FilterSelection/FilterSelection.test.tsx b/src/components/FilterSelection/FilterSelection.test.tsx
index cc232c82..ad6b7625 100644
--- a/src/components/FilterSelection/FilterSelection.test.tsx
+++ b/src/components/FilterSelection/FilterSelection.test.tsx
@@ -4,8 +4,7 @@ import { FilterSelection, FilterSelectionProps } from './FilterSelection';
 
 const mockFilterSelectionProps: FilterSelectionProps = {
   title: 'Filter Title',
-  handleFilter: () => {},
-  selectedNumber: 5,
+  iteration: 1,
 };
 
 describe('WidgetSDK - FilterSelection', () => {
@@ -13,8 +12,7 @@ describe('WidgetSDK - FilterSelection', () => {
     const { container } = render(
       <FilterSelection
         title={mockFilterSelectionProps.title}
-        handleFilter={mockFilterSelectionProps.handleFilter}
-        selectedNumber={mockFilterSelectionProps.selectedNumber}
+        iteration={mockFilterSelectionProps.iteration}
       />
     );
 
diff --git a/src/components/InputButtonGroup/InputButtonGroup.test.tsx b/src/components/InputButtonGroup/InputButtonGroup.test.tsx
index 518cf3af..d97a1eea 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.test.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.test.tsx
@@ -9,7 +9,10 @@ it.
 
 import { render } from '@testing-library/preact';
 
-import { InputButtonGroup, InputButtonGroupProps } from './InputButtonGroup';
+import {
+  InputButtonGroup,
+  InputButtonGroupProps,
+} from './InputButtonGroup';
 
 const mockButtonGroup: InputButtonGroupProps = {
   title: 'button',
@@ -18,6 +21,7 @@ const mockButtonGroup: InputButtonGroupProps = {
   isSelected: () => true,
   onChange: () => {},
   type: 'radio',
+  isHidden: true,
 };
 
 describe('WidgetSDK - UIKit/InputButtonGroup', () => {
@@ -30,6 +34,7 @@ describe('WidgetSDK - UIKit/InputButtonGroup', () => {
         isSelected={mockButtonGroup.isSelected}
         onChange={mockButtonGroup.onChange}
         type={mockButtonGroup.type}
+        isHidden={mockButtonGroup.isHidden}
       />
     );
 
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 9ba830e4..dbdc960e 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -2,8 +2,8 @@ import { FunctionComponent } from 'preact';
 
 import { useProducts, useTranslation } from '../../context';
 import { BOOLEAN_NO, BOOLEAN_YES } from '../../utils/constants';
-import { LabelledInput } from '../LabelledInput';
 import { toggleFilters } from "../Facets/ToggleFilters";
+import { LabelledInput } from '../LabelledInput';
 
 export type InputButtonGroupOnChangeProps = {
   value: string;
@@ -47,6 +47,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
 }) => {
   const translation = useTranslation();
   const productsCtx = useProducts();
+  const fullPriceRange = '0-*';
 
   const formatLabel = (title: string, bucket: Bucket) => {
     const {
@@ -125,6 +126,19 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
               />
             );
           })}
+          {attribute === 'price' && (
+            <LabelledInput
+              name={`range-radio-${attribute}`}
+              attribute={attribute}
+              label={'Range price'}
+              checked={false}
+              value={fullPriceRange}
+              count={null}
+              onChange={onChange}
+              type={type}
+              isRangeInput={true}
+            />
+          )}
         </div>
       </fieldset>
       <div className="ds-sdk-input__border border-t border-neutral-500"/>
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 5e8e0f46..40e19330 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -8,6 +8,7 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
+import { Input } from "postcss";
 
 export type LabelledInputOnChangeProps = {
   value: string;
@@ -25,6 +26,7 @@ export interface LabelledInputProps {
   label: string;
   value: string;
   count?: number | null;
+  isRangeInput?: boolean | null;
 }
 
 export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
@@ -36,8 +38,27 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
   attribute,
   value,
   count,
+  isRangeInput,
 }) => {
   const href = `${window.location.origin}/${window.location.pathname.split('/')[1]}/${value}`
+
+  const getRangeValue = (rangePosition: number) => {
+    let params = new URLSearchParams(document.location.search)
+
+    if (params.has('price')) {
+      return (params.get('price') as string).split('--')[rangePosition]
+    }
+
+    return '';
+  }
+  const onPriceRange = (event: Event) => {
+    event.preventDefault();
+    const fromPrice = (document.querySelector('#from-price') as HTMLInputElement)?.value || '0'
+    const toPrice = (document.querySelector('#to-price') as HTMLInputElement)?.value || '999'
+
+    onChange({value: `${fromPrice}.0-${toPrice}.0`, selected: true, type})
+  }
+
   return (
     type === 'link' || attribute === 'categories' ? (
       <div className="ds-sdk-labelled-input flex gap-4 text-[12px] leading-12 items-center">
@@ -57,34 +78,57 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
         </a>
       </div>
     ) : (
-      <div className="ds-sdk-labelled-input flex gap-4 items-center">
-        <input
-          id={name}
-          name={
-            type === 'checkbox'
-              ? `checkbox-group-${attribute}`
-              : `radio-group-${attribute}`
-          }
-          type={type}
-          className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
-          checked={checked}
-          aria-checked={checked}
-          onInput={(e) => onChange({value, selected: e.currentTarget.checked, type})}
-          value={value}
-        />
-        <label
-          htmlFor={name}
-          className="ds-sdk-labelled-input__label block-display h-max-content text-[12px] leading-12 cursor-pointer"
-        >
-          {label}
-          {count && (
-            <span className="text-[12px] ml-1 font-details-overline">
-              {`(${count})`}
-            </span>
-          )}
-        </label>
+      <>
+        {isRangeInput && (
+          <div className="ds-sdk-labelled-input flex gap-4 items-center">
+            <input className={'range-input text-black text-center text-[12px] leading-12'} type={'number'} value={getRangeValue(0)} id={'from-price'}/>
+            <input className={'range-input text-black text-center text-[12px] leading-12'} type={'number'} value={getRangeValue(1)} id={'to-price'}/>
 
-      </div>
+            <label
+              onClick={onPriceRange}
+              htmlFor={`from-price`}
+              className="button primary text-[12px] font-normal m-0 py-3 px-4 cursor-pointer price-range-submit"
+            >
+              {label}
+              {count && (
+                <span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
+                    {`(${count})`}
+                  </span>
+              )}
+            </label>
+          </div>
+        )}
+
+        {!isRangeInput && (
+          <div className="ds-sdk-labelled-input flex gap-4 items-center">
+            <input
+              id={name}
+              name={
+                type === 'checkbox'
+                  ? `checkbox-group-${attribute}`
+                  : `radio-group-${attribute}`
+              }
+              type={type}
+              className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
+              checked={checked}
+              aria-checked={checked}
+              onInput={(e) => onChange({value, selected: e.currentTarget.checked, type})}
+              value={value}
+            />
+            <label
+              htmlFor={name}
+              className="ds-sdk-labelled-input__label block-display h-max-content text-[12px] leading-12 cursor-pointer"
+            >
+              {label}
+              {count && (
+                <span className="text-[12px] ml-1 font-details-overline">
+                {`(${count})`}
+              </span>
+              )}
+            </label>
+          </div>
+        )}
+      </>
     )
   );
 };
diff --git a/src/hooks/useRangeFacet.ts b/src/hooks/useRangeFacet.ts
index 6abd6273..ed00f0eb 100644
--- a/src/hooks/useRangeFacet.ts
+++ b/src/hooks/useRangeFacet.ts
@@ -24,6 +24,10 @@ const useRangeFacet = ({attribute, buckets}: PriceFacet) => {
         to: bucket.to,
       })
   );
+
+  console.log(buckets)
+  console.log(processedBuckets)
+
   const searchCtx = useSearch();
 
   const filter = searchCtx?.filters?.find(
@@ -39,12 +43,15 @@ const useRangeFacet = ({attribute, buckets}: PriceFacet) => {
   };
 
   const onChange = (value: string) => {
+    const fromRange = processedBuckets[value] ? processedBuckets[value].from : parseInt(value.split('-')[0], 10)
+    const toRange = processedBuckets[value] ? processedBuckets[value].to : parseInt(value.split('-')[1], 10)
+
     if (!filter) {
       const newFilter = {
         attribute,
         range: {
-          from: processedBuckets[value].from,
-          to: processedBuckets[value].to,
+          from: fromRange,
+          to: toRange,
         },
       };
       searchCtx.createFilter(newFilter);
@@ -54,8 +61,8 @@ const useRangeFacet = ({attribute, buckets}: PriceFacet) => {
     const newFilter = {
       ...filter,
       range: {
-        from: processedBuckets[value].from,
-        to: processedBuckets[value].to,
+        from: fromRange,
+        to: toRange,
       },
     };
     searchCtx.updateFilter(newFilter);
diff --git a/src/styles/index.css b/src/styles/index.css
index 343b9603..3648dc93 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -614,6 +614,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     z-index: 900;
   }
 
+  .m-0 {
+    margin: 0;
+  }
+
   .m-4 {
     margin: 1rem;
   }
@@ -1536,6 +1540,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 0.5rem;
   }
 
+  .py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
   .py-\[10px\] {
     padding-top: 10px;
     padding-bottom: 10px;

From b764fecdb1b7e60cd1c48c55376c1c9444605361 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 23 Oct 2024 15:44:20 +0200
Subject: [PATCH 125/160] WAF-396 - Fixes and changes

---
 src/components/Drawer/Drawer.tsx              | 22 +++++++++++++++----
 .../LabelledInput/LabelledInput.tsx           |  4 ++--
 src/components/Pill/Pill.tsx                  |  2 +-
 src/styles/index.css                          |  4 ++++
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 9148c161..48b1b83a 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -27,10 +27,24 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
     }
   }, [isOpen]);
 
+  const onClearFilter = () => {
+    searchCtx.clearFilters();
+    onClose();
+  }
+
+  const greyFilterClose = (event) => {
+    const target = event.target
+
+    if (target.classList.contains('mainBgContainer')) {
+      onClose()
+    }
+  }
+
   return (
     <>
       {isOpen && (
-        <div className="fixed inset-0 z-50 flex bg-black bg-opacity-50">
+        <div className="fixed inset-0 z-50 flex bg-black bg-opacity-50 mainBgContainer"
+          onClick={greyFilterClose}>
           <div
             className="relative mt-auto w-full bg-white h-[80%] md:h-full shadow-lg overflow-auto animate-slideUp pb-20 md:animate-slideRight md:max-w-[500px]">
             <div className="p-12">{children}</div>
@@ -38,11 +52,11 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
           <div
             class="apply-buttons absolute left-0 right-0 bottom-0 flex p-4 gap-4 md:animate-slideRight md:max-w-[485px] ">
             <button
-              class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-white text-black capitalize"
-              onClick={() => searchCtx.clearFilters()}>clear filters
+              class="apply-buttons_button border border-solid border-black content-center h-20 flex-1 bg-white text-black capitalize"
+              onClick={onClearFilter}>clear filters
             </button>
             <button
-              class="apply-buttons_button border border-solid border-black content-center h-16 flex-1 bg-black text-white capitalize"
+              class="apply-buttons_button border border-solid border-black content-center h-20 flex-1 bg-black text-white capitalize"
               onClick={onClose}>view {totalCount} results
             </button>
           </div>
diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 40e19330..767c78b9 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -117,11 +117,11 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
             />
             <label
               htmlFor={name}
-              className="ds-sdk-labelled-input__label block-display h-max-content text-[12px] leading-12 cursor-pointer"
+              className="ds-sdk-labelled-input__label block-display h-max-content text-[14px] leading-12 cursor-pointer"
             >
               {label}
               {count && (
-                <span className="text-[12px] ml-1 font-details-overline">
+                <span className="text-[14px] ml-1 font-details-overline">
                 {`(${count})`}
               </span>
               )}
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 755a0303..dc06b75c 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -33,7 +33,7 @@ export const Pill: FunctionComponent<PillProps> = ({
   type,
 }) => {
   const typeStyles: { [key in NonNullable<PillProps['type']>]: string } = {
-    transparent: 'rounded-full px-4 py-1',
+    transparent: 'border border-neutral-450 px-4 py-1',
     filter: 'border border-neutral-450 px-2 py-1',
   };
 
diff --git a/src/styles/index.css b/src/styles/index.css
index 3648dc93..a74abe97 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -769,6 +769,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 4rem;
   }
 
+  .h-20 {
+    height: 5rem;
+  }
+
   .h-\[100\%\] {
     height: 100%;
   }

From 18d6a2c2f15b2d80d53213b723669bd3a7875c2e Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 28 Oct 2024 15:43:29 +0100
Subject: [PATCH 126/160] WAF-396 - Changes for styling

---
 src/components/Facets/Facets.tsx      | 2 +-
 src/containers/MobileFilterHeader.tsx | 2 +-
 src/styles/index.css                  | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index fa134de0..1d6685ce 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -79,7 +79,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
 }: FacetsProps) => {
   const {config} = useStore();
   const translation = useTranslation();
-  const searchFacetsSliced = searchFacets?.slice(0, 4)
+  const searchFacetsSliced = searchFacets?.slice(0, 3)
   const [selectedFacet] = useState<FacetType | null>(null);
   const isCategory = config?.currentCategoryUrlPath || config?.currentCategoryId;
 
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index ec41a70f..9c1e092d 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -120,7 +120,7 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
           </div>
         </div>
       )}
-      <div class="mobile-filters-container z-900">
+      <div class="mobile-filters-container z-1000">
         <Drawer
           isOpen={showMobileFacet}
           onClose={() => setShowMobileFacet(!showMobileFacet)}
diff --git a/src/styles/index.css b/src/styles/index.css
index a74abe97..6f244d00 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -614,6 +614,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     z-index: 900;
   }
 
+  .z-1000 {
+    z-index: 1000;
+  }
+
   .m-0 {
     margin: 0;
   }

From 8242e4141d50019dec634374e625c8f09fc46e9f Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 29 Oct 2024 11:51:47 +0100
Subject: [PATCH 127/160] WAF-396 - Fioxes

---
 src/components/Drawer/Drawer.tsx              |  2 +-
 src/components/Facets/Facets.tsx              | 40 ++++++++++++-------
 .../FilterSelection/FilterSelection.tsx       |  2 +-
 src/hooks/useRangeFacet.ts                    |  3 --
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 48b1b83a..a26b0bb9 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -32,7 +32,7 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
     onClose();
   }
 
-  const greyFilterClose = (event) => {
+  const greyFilterClose = (event:any) => {
     const target = event.target
 
     if (target.classList.contains('mainBgContainer')) {
diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 1d6685ce..b58542d7 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -28,12 +28,15 @@ interface FacetsProps {
 }
 
 export const scrollFilter = (
-  event: Omit<MouseEvent, "currentTarget"> & { readonly currentTarget: HTMLDivElement },
-  displayFunction: (() => void) | undefined
+  event: any,
+  displayFunction: (() => void) | undefined,
+  click?: boolean
 ) => {
   displayFunction?.();
-
-  const clicked = event.currentTarget;
+  console.log(event.target)
+  console.log(event.currentTarget)
+  console.log(click)
+  const clicked = event.target;
   const filterNumber = Number(clicked.id.split('-')[1])
   const targetNode = document.querySelector('.mobile-filters-container');
   const config = {attributes: false, childList: true, subtree: true};
@@ -48,18 +51,27 @@ export const scrollFilter = (
       if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
         await wait(300);
         const filterInput = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input');
-        const filterToShow = filterInput[filterNumber];
+        const filterToShow = filterInput[filterNumber] || null;
         const filterToHide = document.querySelectorAll('.mobile-filters-container form .ds-sdk-input fieldset:not(.none-display)');
 
-        filterToHide?.forEach(element => {
-          element.closest('.ds-sdk-input')?.classList.remove('active')
-          element.classList.add('none-display')
-          element.nextElementSibling?.classList.remove('mt-md')
-        })
+        if (filterToShow !== null) {
+          filterToHide?.forEach(element => {
+            element.closest('.ds-sdk-input')?.contains(clicked.querySelector('input'))
+            element.closest('.ds-sdk-input')?.classList.remove('active')
+            element.classList.add('none-display')
+            element.nextElementSibling?.classList.remove('mt-md')
+          })
+
+          if ("classList" in filterToShow) {
+            filterToShow.classList.add('active');
+          }
 
-        filterToShow.classList.add('active');
-        filterToShow.querySelector('fieldset')?.classList.remove('none-display');
-        filterToShow.querySelector('.ds-sdk-input__border')?.classList.add('mt-md');
+          if ("querySelector" in filterToShow) {
+            filterToShow.querySelector('fieldset')?.classList.remove('none-display');
+            filterToShow.querySelector('.ds-sdk-input__border')?.classList.add('mt-md');
+          }
+        }
+        observer.disconnect()
         break;
       }
     }
@@ -69,7 +81,7 @@ export const scrollFilter = (
 
   if (targetNode) {
     observer.observe(targetNode, config);
-    }
+  }
 }
 
 export const Facets: FunctionComponent<FacetsProps> = ({
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index e3b6cfc0..4c05c637 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -25,7 +25,7 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
       ) : (
         <div
           className="flex items-center gap-x-1 cursor-pointer"
-          onClick={(event) => scrollFilter(event, displayFilter)}
+          onClick={(event) => scrollFilter(event, displayFilter, true)}
         >
           <label
             id={`filter-${iteration + 1}`}
diff --git a/src/hooks/useRangeFacet.ts b/src/hooks/useRangeFacet.ts
index ed00f0eb..ac62256e 100644
--- a/src/hooks/useRangeFacet.ts
+++ b/src/hooks/useRangeFacet.ts
@@ -25,9 +25,6 @@ const useRangeFacet = ({attribute, buckets}: PriceFacet) => {
       })
   );
 
-  console.log(buckets)
-  console.log(processedBuckets)
-
   const searchCtx = useSearch();
 
   const filter = searchCtx?.filters?.find(

From 669013b39b9c4e99efea026927bbae76f203bfaf Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 29 Oct 2024 11:53:10 +0100
Subject: [PATCH 128/160] WAF-396 - Fix

---
 src/components/LabelledInput/LabelledInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LabelledInput/LabelledInput.tsx b/src/components/LabelledInput/LabelledInput.tsx
index 767c78b9..f4a55245 100644
--- a/src/components/LabelledInput/LabelledInput.tsx
+++ b/src/components/LabelledInput/LabelledInput.tsx
@@ -61,7 +61,7 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
 
   return (
     type === 'link' || attribute === 'categories' ? (
-      <div className="ds-sdk-labelled-input flex gap-4 text-[12px] leading-12 items-center">
+      <div className="ds-sdk-labelled-input flex gap-4 text-[14px] leading-12 items-center">
         <a href={href}
            onClick={(e) => {
              if (type === 'link') {

From 46bec5f8e42e484fadfc752386c03a9584b02545 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 29 Oct 2024 11:54:33 +0100
Subject: [PATCH 129/160] WAF-396 - Fix 2

---
 src/components/SortDropdown/SortDropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 68dc9f57..96b1abd3 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -90,7 +90,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
                 <label key={`label-${i}`}
                        for={`sortby-${  option.value}`}
                        onClick={() => select(option.value)}
-                       className={'ds-sdk-labelled-input__label block-display h-max-content leading-12 text-[12px] cursor-pointer'}
+                       className={'ds-sdk-labelled-input__label block-display h-max-content leading-12 text-[14px] cursor-pointer'}
                 >
                   {option.label}
                 </label>

From c32f5c7cea2f42f62b23c6c5b32e7cc4ef2cce04 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 29 Oct 2024 12:00:11 +0100
Subject: [PATCH 130/160] WAF-396 - Price range lable change

---
 src/components/InputButtonGroup/InputButtonGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index dbdc960e..3fa376a9 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -130,7 +130,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
             <LabelledInput
               name={`range-radio-${attribute}`}
               attribute={attribute}
-              label={'Range price'}
+              label={'Go'}
               checked={false}
               value={fullPriceRange}
               count={null}

From 7981ed9f4b8cba845c97e6a80dd52f11adb50322 Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Wed, 30 Oct 2024 16:15:58 +0100
Subject: [PATCH 131/160] waf-526 - disable salability filter for slugger

---
 dev-template.html |  3 +++
 src/api/search.ts | 26 +++++++++++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index e5adc436..f72e3119 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -78,6 +78,9 @@
         allowAllProducts: false,
         currentCategoryUrlPath: 'sportswear/women', // current category url path, please prefer using currentCategoryId
         currentCategoryId: '488', // current category id
+        /** FRANCHISE VIEW
+        categoryConfig: { 'pcm_display_by_franchise': '1' },
+        **/
         /** TEAM SPECIFIC PLP SETTINGS **/
         // currentCategoryUrlPath: 'basketball/basketballs/chicago-bulls',
         // currentCategoryId: '3197', // current category id
diff --git a/src/api/search.ts b/src/api/search.ts
index 38a2b2be..e3a01383 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -41,6 +41,18 @@ const getHeaders = (headers: MagentoHeaders) => {
   };
 };
 
+
+const discontinuedFilter = {
+  attribute: 'pcm_product_salability',
+  in: ['STANDARD','COMING_SOON','DRAW_CAMPAIGN','EARLY_ACCESS','SOLD_OUT','PRE_ORDER','NOT_SOLD_ONLINE'],
+};
+
+const discontinuedFilterString = `{
+              attribute: "pcm_product_salability",
+              in: ["STANDARD", "COMING_SOON", "DRAW_CAMPAIGN", "EARLY_ACCESS", "SOLD_OUT", "PRE_ORDER", "NOT_SOLD_ONLINE"],
+            }`;
+const isSlugger = window.location.hostname.indexOf('slugger') !== -1;
+
 const getFranchiseSearch = async ({
   environmentId,
   websiteCode,
@@ -88,10 +100,7 @@ const getFranchiseSearch = async ({
           current_page: $currentPage
           filter: [
             { attribute: "categoryPath", eq: "${category}" },
-            { 
-              attribute: "pcm_product_salability",
-              in: ["STANDARD", "COMING_SOON", "DRAW_CAMPAIGN", "EARLY_ACCESS", "SOLD_OUT", "PRE_ORDER", "NOT_SOLD_ONLINE"],
-            }
+            ${isSlugger ? '' : discontinuedFilterString}
           ]
         ) {
           items {
@@ -104,7 +113,8 @@ const getFranchiseSearch = async ({
     ${ProductView}
     ${FranchiseQueryFragment}
   `;
-
+  console.log('franchisequery');
+  console.log(query);
   const variables = {
     pageSize,
     currentPage,
@@ -172,12 +182,10 @@ const getProductSearch = async ({
     eq: 'true',
   };
 
-  const discontinuedFilter = {
-    attribute: 'pcm_product_salability',
-    in: ['STANDARD','COMING_SOON','DRAW_CAMPAIGN','EARLY_ACCESS','SOLD_OUT','PRE_ORDER','NOT_SOLD_ONLINE'],
-  };
 
+  if (!isSlugger) {
   variables.filter?.push(discontinuedFilter);
+  }
 
   if (displayInStockOnly) {
     variables.filter.push(inStockFilter);

From 1dc7215d7a61507ee9383c1cd99ca7cec01df741 Mon Sep 17 00:00:00 2001
From: Francisco Chicharro Sanz <chicharr@adobe.com>
Date: Wed, 30 Oct 2024 16:17:55 +0100
Subject: [PATCH 132/160] waf-526 - remove console

---
 src/api/search.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/api/search.ts b/src/api/search.ts
index e3a01383..6b0a7071 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -113,8 +113,6 @@ const getFranchiseSearch = async ({
     ${ProductView}
     ${FranchiseQueryFragment}
   `;
-  console.log('franchisequery');
-  console.log(query);
   const variables = {
     pageSize,
     currentPage,

From 45c768e6c96716019f2b434fcc64b5e3f63ccf3c Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Mon, 4 Nov 2024 19:16:18 +0530
Subject: [PATCH 133/160] First Commit for in grid promo

---
 src/components/ProductList/ProductList.tsx | 88 +++++++++++++---------
 src/components/ProductList/merchandise.tsx | 31 ++++++++
 src/containers/App.tsx                     | 12 ++-
 3 files changed, 95 insertions(+), 36 deletions(-)
 create mode 100644 src/components/ProductList/merchandise.tsx

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 8aab2fe6..3cecf790 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -9,7 +9,7 @@ it.
 
 import {FunctionComponent} from 'preact';
 import {HTMLAttributes} from 'preact/compat';
-import {useEffect, useState} from 'preact/hooks';
+import {useEffect, useRef,useState} from 'preact/hooks';
 
 import './product-list.css';
 
@@ -18,6 +18,7 @@ import {useProducts, useSearch, useStore} from '../../context';
 import {Product} from '../../types/interface';
 import {classNames} from '../../utils/dom';
 import ProductItem, {ProductProps} from '../ProductItem';
+import useMerchandisingData from "./merchandise";
 
 type FranchiseProps = Omit<ProductProps, "item"> & {
   franchise: string;
@@ -28,6 +29,25 @@ type FranchiseProps = Omit<ProductProps, "item"> & {
 
 const NEXT_NUMBER_OF_ROWS = 4;
 
+const renderProductList = (products: Product[], setError: (error: boolean) => void, currencySymbol: string, currencyRate: string, categoryConfig: any, setRoute: any, refineProduct: any, setCartUpdated: (updated: boolean) => void, setItemAdded: (item: string) => void, addToCart: any, disableAllPurchases: boolean) => {
+  return products.map((product) => (
+      <ProductItem
+          key={product.productView.id}
+          item={product}
+          setError={setError}
+          currencySymbol={currencySymbol}
+          currencyRate={currencyRate}
+          categoryConfig={categoryConfig}
+          setRoute={setRoute}
+          refineProduct={refineProduct}
+          setCartUpdated={setCartUpdated}
+          setItemAdded={setItemAdded}
+          addToCart={addToCart}
+          disableAllPurchases={disableAllPurchases}
+      />
+  ));
+};
+
 const Franchises : FunctionComponent<FranchiseProps> = ({
    currencySymbol,
    currencyRate,
@@ -136,10 +156,11 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
     addToCart,
     getMoreFranchiseProducts,
     disableAllPurchases = false,
+
   } = productsCtx;
   const [cartUpdated, setCartUpdated] = useState(false);
   const [itemAdded, setItemAdded] = useState('');
-  const {viewType} = useProducts();
+  const {viewType, currentPage} = useProducts();
   const [error, setError] = useState<boolean>(false);
   const {
     config: {listview},
@@ -154,6 +175,35 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
     refreshCart && refreshCart();
   }, [itemAdded]);
 
+  // eslint-disable-next-line no-undef
+  const insertMerchandise = (productList: JSX.Element[], merchandise:{positions:string}[], currentPage:number) => {
+    merchandise.forEach((merchandise) => {
+      const positionsArray = JSON.parse(merchandise.positions);
+      positionsArray.forEach((position: string) => {
+        if(currentPage === 1) {
+          const merchandiseElement = (
+              <div className={`enrichment-container position-${position}`}/>
+          );
+          productList.splice(Number(position) - 1, 0, merchandiseElement);
+        }
+      });
+    });
+    return productList;
+  };
+
+  const merchandisingData = useMerchandisingData();
+  const finalProductList = insertMerchandise(renderProductList(products ?? [], setError, currencySymbol, currencyRate, categoryConfig, setRoute, refineProduct, setCartUpdated, setItemAdded, addToCart, disableAllPurchases), merchandisingData, currentPage);
+  const hasRendered = useRef(false);
+  useEffect(() => {
+    if (hasRendered.current) {
+      // custom event
+      const event = new CustomEvent('product-list-rendered');
+      window.dispatchEvent(event);
+    } else {
+      hasRendered.current = true;
+    }
+  }, [finalProductList]);
+
   return (
     <div
       className={classNames(
@@ -208,22 +258,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
       {!displayFranchises && (listview && viewType === 'listview' ? (
         <div className="w-full">
           <div className="ds-sdk-product-list__list-view-default mt-md grid grid-cols-none pt-[15px] w-full gap-[10px]">
-            {products?.map((product) => (
-              <ProductItem
-                item={product}
-                setError={setError}
-                key={product?.productView?.id}
-                currencySymbol={currencySymbol}
-                currencyRate={currencyRate}
-                categoryConfig={categoryConfig}
-                setRoute={setRoute}
-                refineProduct={refineProduct}
-                setCartUpdated={setCartUpdated}
-                setItemAdded={setItemAdded}
-                addToCart={addToCart}
-                disableAllPurchases={disableAllPurchases}
-              />
-            ))}
+            {finalProductList}
           </div>
         </div>
       ) : (
@@ -233,22 +268,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
           }}
           className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm md:gap-x-9 md:gap-y-9"
         >
-          {products?.map((product) => (
-            <ProductItem
-              item={product}
-              setError={setError}
-              key={product?.productView?.id}
-              currencySymbol={currencySymbol}
-              currencyRate={currencyRate}
-              categoryConfig={categoryConfig}
-              setRoute={setRoute}
-              refineProduct={refineProduct}
-              setCartUpdated={setCartUpdated}
-              setItemAdded={setItemAdded}
-              addToCart={addToCart}
-              disableAllPurchases={disableAllPurchases}
-            />
-          ))}
+          {finalProductList}
         </div>
       ))}
     </div>
diff --git a/src/components/ProductList/merchandise.tsx b/src/components/ProductList/merchandise.tsx
new file mode 100644
index 00000000..0ac9e7d7
--- /dev/null
+++ b/src/components/ProductList/merchandise.tsx
@@ -0,0 +1,31 @@
+import {useEffect, useState} from 'preact/hooks';
+const fetchMerchandiseData = async () => {
+    const response = await fetch(`/en-us/enrichment/enrichment.json`);
+    const merchandisingData = await response.json();
+
+    // Filter merchandisingData.data based on phrase
+    return merchandisingData.data.filter((item: any) => {
+        let positions = [];
+        try {
+            positions = JSON.parse(item.positions);
+        } catch (e) {
+        }
+        return Array.isArray(positions) && positions.length > 0 && positions.every((position => !isNaN(Number(position))))
+    });
+};
+
+const useMerchandisingData = () => {
+    const [merchandisingData, setMerchandisingData] = useState<Array<{ positions: string}>>([]);
+
+    useEffect(() => {
+        const getMerchandisingData = async () => {
+            setMerchandisingData(await fetchMerchandiseData());
+        };
+
+        getMerchandisingData();
+    }, []);
+
+    return merchandisingData;
+};
+
+export default useMerchandisingData;
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 36d4381e..d33cd28f 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -8,7 +8,7 @@ it.
 */
 
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useState, useEffect } from 'preact/hooks';
 import Enrichment from 'src/components/Enrichment';
 import FilterButton from 'src/components/FilterButton';
 import Loading from 'src/components/Loading';
@@ -35,6 +35,14 @@ export const App: FunctionComponent = () => {
 
   const loadingLabel = translation.Loading.title;
 
+  useEffect(() => {
+    if (!productsCtx.loading) {
+      // trigger an event when the product list is loaded
+      const event = new CustomEvent('product-list-loaded');
+      window.dispatchEvent(event);
+    }
+  });
+
   return (
     <>
       {!(displayMode === 'PAGE') &&
@@ -56,12 +64,12 @@ export const App: FunctionComponent = () => {
                     screenSize={screenSize}
                 />
               </div>
+              <Enrichment position={'above-grid'}/>
               <div
                   className={`ds-widgets_results flex flex-col items-center flex-[75] ds-widgets-results__center-container `}
               >
                 <ProductsContainer showFilters={showFilters}/>
               </div>
-              <Enrichment position={'above-grid'}/>
             </div>
           </div>
         ) : (

From ea15e60f69ae979c747e15a1b4797f497f7179b5 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 5 Nov 2024 14:33:18 +0100
Subject: [PATCH 134/160] WAF-545 - Franchise selector for mobile change

---
 src/components/Facets/FranchiseViewSelector.tsx | 2 +-
 src/components/Facets/filters.css               | 1 -
 src/containers/MobileFilterHeader.tsx           | 6 ++++++
 src/styles/index.css                            | 5 +++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Facets/FranchiseViewSelector.tsx b/src/components/Facets/FranchiseViewSelector.tsx
index 444a6c2f..62c45ba3 100644
--- a/src/components/Facets/FranchiseViewSelector.tsx
+++ b/src/components/Facets/FranchiseViewSelector.tsx
@@ -9,7 +9,7 @@ export const FranchiseViewSelector: FunctionComponent = () => {
   const searchCtx = useSearch();
 
   return (
-    <div className="flex gap-[10px] pl-24 franchise-selector">
+    <div className="flex gap-[10px] md:pl-24 franchise-selector">
       <button disabled={searchCtx.displayFranchises} onClick={() => searchCtx.toggleFranchiseView(true)}>
         <FranchiseView/>
       </button>
diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
index c338a795..04bf1151 100644
--- a/src/components/Facets/filters.css
+++ b/src/components/Facets/filters.css
@@ -48,7 +48,6 @@
 
 @media (max-width: 768px) {
   .franchise-selector {
-    float: none;
     align-self: end;
     padding-right: 12px;
     margin-top: 15px;
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 9c1e092d..6412f005 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -28,6 +28,7 @@ import {
   generateGQLSortInput,
   getSortOptionsfromMetadata,
 } from '../utils/sort';
+import { FranchiseViewSelector } from "../components/Facets/FranchiseViewSelector";
 
 interface Props {
   facets: Facet[];
@@ -120,6 +121,11 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
           </div>
         </div>
       )}
+      {screenSize.mobile && (
+        <div className={'mobile-franchise'}>
+          <FranchiseViewSelector/>
+        </div>
+      )}
       <div class="mobile-filters-container z-1000">
         <Drawer
           isOpen={showMobileFacet}
diff --git a/src/styles/index.css b/src/styles/index.css
index 6f244d00..93a93128 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2089,6 +2089,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-top: 1rem;
     }
   }
+  @media (min-width: 768px) {
+    .md\:pl-24 {
+      padding-left: 6rem;
+    }
+  }
   @media (min-width: 768px) {
     .md\:flex {
       display: flex;

From 04dc6585505929991b6a358df7f5921d298e707b Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 6 Nov 2024 14:57:10 +0100
Subject: [PATCH 135/160] WAF-518 - Changing stroke weight on pagination

---
 src/components/Pagination/Pagination.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 1a6578cd..8fac5221 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -163,8 +163,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
           onClick={onLast}>
           {screenSize.desktop && <span>Last</span>}
           <Guillemet
-            className={`h-small w-small transform rotate-180 ${
-              currentPage === totalPages ? 'stroke-neutral-600' : 'stroke-brand-700'
+            className={`h-small w-small transform rotate-180 stroke-neutral-600'
             }`}
           />
         </a>

From 55191a63ff7394bb6f0803e6dc0f3aed2707861b Mon Sep 17 00:00:00 2001
From: Ravi Verma <ravverma@adobe.com>
Date: Fri, 8 Nov 2024 21:22:23 +0530
Subject: [PATCH 136/160] removing merchandise file

---
 src/components/ProductList/ProductList.tsx | 31 +++++++++-------------
 src/components/ProductList/merchandise.tsx | 31 ----------------------
 src/context/store.tsx                      |  6 ++++-
 src/utils/validateStoreDetails.ts          |  1 +
 4 files changed, 18 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/ProductList/merchandise.tsx

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 3cecf790..ea14e4f8 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -18,7 +18,6 @@ import {useProducts, useSearch, useStore} from '../../context';
 import {Product} from '../../types/interface';
 import {classNames} from '../../utils/dom';
 import ProductItem, {ProductProps} from '../ProductItem';
-import useMerchandisingData from "./merchandise";
 
 type FranchiseProps = Omit<ProductProps, "item"> & {
   franchise: string;
@@ -176,32 +175,26 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
   }, [itemAdded]);
 
   // eslint-disable-next-line no-undef
-  const insertMerchandise = (productList: JSX.Element[], merchandise:{positions:string}[], currentPage:number) => {
-    merchandise.forEach((merchandise) => {
-      const positionsArray = JSON.parse(merchandise.positions);
-      positionsArray.forEach((position: string) => {
-        if(currentPage === 1) {
-          const merchandiseElement = (
-              <div className={`enrichment-container position-${position}`}/>
-          );
-          productList.splice(Number(position) - 1, 0, merchandiseElement);
-        }
-      });
-    });
+  const insertMerchandise = (productList: JSX.Element[], positions:Array<number>, currentPage:number) => {
+    for (const position of positions) {
+      if (currentPage === 1) {
+        const merchandiseElement = (
+            <div className={`enrichment-container position-${position}`}/>
+        );
+        productList.splice(position - 1, 0, merchandiseElement);
+      }
+    }
     return productList;
   };
 
-  const merchandisingData = useMerchandisingData();
+  const merchandisingData = useStore().inGridPromoIndexes || [];
   const finalProductList = insertMerchandise(renderProductList(products ?? [], setError, currencySymbol, currencyRate, categoryConfig, setRoute, refineProduct, setCartUpdated, setItemAdded, addToCart, disableAllPurchases), merchandisingData, currentPage);
-  const hasRendered = useRef(false);
   useEffect(() => {
-    if (hasRendered.current) {
+
       // custom event
       const event = new CustomEvent('product-list-rendered');
       window.dispatchEvent(event);
-    } else {
-      hasRendered.current = true;
-    }
+
   }, [finalProductList]);
 
   return (
diff --git a/src/components/ProductList/merchandise.tsx b/src/components/ProductList/merchandise.tsx
deleted file mode 100644
index 0ac9e7d7..00000000
--- a/src/components/ProductList/merchandise.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {useEffect, useState} from 'preact/hooks';
-const fetchMerchandiseData = async () => {
-    const response = await fetch(`/en-us/enrichment/enrichment.json`);
-    const merchandisingData = await response.json();
-
-    // Filter merchandisingData.data based on phrase
-    return merchandisingData.data.filter((item: any) => {
-        let positions = [];
-        try {
-            positions = JSON.parse(item.positions);
-        } catch (e) {
-        }
-        return Array.isArray(positions) && positions.length > 0 && positions.every((position => !isNaN(Number(position))))
-    });
-};
-
-const useMerchandisingData = () => {
-    const [merchandisingData, setMerchandisingData] = useState<Array<{ positions: string}>>([]);
-
-    useEffect(() => {
-        const getMerchandisingData = async () => {
-            setMerchandisingData(await fetchMerchandiseData());
-        };
-
-        getMerchandisingData();
-    }, []);
-
-    return merchandisingData;
-};
-
-export default useMerchandisingData;
diff --git a/src/context/store.tsx b/src/context/store.tsx
index 6bbcb352..9940c94b 100644
--- a/src/context/store.tsx
+++ b/src/context/store.tsx
@@ -32,6 +32,7 @@ export interface StoreDetailsProps extends WithChildrenProps {
   apiKey: string;
   route?: RedirectRouteFunc; // optional product redirect func prop
   searchQuery?: string; // 'q' default search query param if not provided.
+  inGridPromoIndexes?:Array<number>;
 }
 
 const StoreContext = createContext<StoreDetailsProps>({
@@ -49,6 +50,7 @@ const StoreContext = createContext<StoreDetailsProps>({
   context: {},
   route: undefined,
   searchQuery: 'q',
+  inGridPromoIndexes: [],
 });
 
 const StoreContextProvider = ({
@@ -63,6 +65,7 @@ const StoreContextProvider = ({
   apiKey,
   route,
   searchQuery,
+  inGridPromoIndexes,
 }: StoreDetailsProps) => {
   const storeProps = useMemo(
     () => ({
@@ -83,8 +86,9 @@ const StoreContextProvider = ({
           : apiKey,
       route,
       searchQuery,
+      inGridPromoIndexes,
     }),
-    [environmentId, websiteCode, storeCode, storeViewCode]
+    [environmentId, websiteCode, storeCode, storeViewCode, inGridPromoIndexes]
   );
 
   const storeContext = {
diff --git a/src/utils/validateStoreDetails.ts b/src/utils/validateStoreDetails.ts
index a971044e..3d02a7f5 100644
--- a/src/utils/validateStoreDetails.ts
+++ b/src/utils/validateStoreDetails.ts
@@ -12,6 +12,7 @@ const validStoreDetailsKeys: Array<keyof StoreDetailsProps> = [
   'apiKey',
   'route',
   'searchQuery',
+  'inGridPromoIndexes',
 ];
 
 export const sanitizeString = (value: any) => {

From 076e867df6d2b4393b01523f2b027da0f3c0d063 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 11 Nov 2024 19:00:45 +0100
Subject: [PATCH 137/160] WAF-507 - Keyboard navigation for filters

---
 src/components/Facets/Facets.tsx                | 17 +++++++++++------
 src/components/Facets/ToggleFilters.tsx         | 10 +++++++---
 .../FilterSelection/FilterSelection.tsx         |  3 ++-
 .../InputButtonGroup/InputButtonGroup.tsx       |  4 +++-
 src/components/SortDropdown/SortDropdown.tsx    |  1 +
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index b58542d7..024a8514 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -29,13 +29,15 @@ interface FacetsProps {
 
 export const scrollFilter = (
   event: any,
-  displayFunction: (() => void) | undefined,
-  click?: boolean
+  displayFunction: (() => void) | undefined
 ) => {
+  const activateEvent = event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter') || false;
+
+  if (!activateEvent) {
+    return;
+  }
+
   displayFunction?.();
-  console.log(event.target)
-  console.log(event.currentTarget)
-  console.log(click)
   const clicked = event.target;
   const filterNumber = Number(clicked.id.split('-')[1])
   const targetNode = document.querySelector('.mobile-filters-container');
@@ -115,7 +117,10 @@ export const Facets: FunctionComponent<FacetsProps> = ({
             <form className="ds-plp-facets__list flex gap-x-3.2rem">
               <div class="ds-sdk-input py-md">
                 <div class="flex items-center gap-x-1 cursor-pointer"
-                     onClick={(event) => scrollFilter(event, displayFilter)}>
+                     tabindex={0}
+                     onClick={(event) => scrollFilter(event, displayFilter)}
+                     onKeyDown={(event) => scrollFilter(event, displayFilter)}
+                     >
                   <label id={'filter-0'}
                          className="flex flex-row gap-4 ds-sdk-input__label text-neutral-900 text-sm font-semibold cursor-pointer">
                     <SortFilterIcon className="h-[18px] w-[18px] fill-neutral-800"/>
diff --git a/src/components/Facets/ToggleFilters.tsx b/src/components/Facets/ToggleFilters.tsx
index d459b5a6..72664dd3 100644
--- a/src/components/Facets/ToggleFilters.tsx
+++ b/src/components/Facets/ToggleFilters.tsx
@@ -3,9 +3,13 @@
  *
  * @param event
  */
-export const toggleFilters = (event: Omit<MouseEvent, "currentTarget"> & {
-  readonly currentTarget: HTMLLabelElement
-}) => {
+export const toggleFilters = (event: any) => {
+  const activateEvent = event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter') || false;
+
+  if (!activateEvent) {
+    return;
+  }
+
   const clicked = event.currentTarget;
   const toBeActiveFilterBlock = clicked.nextElementSibling;
   const parrentDiv = clicked.closest('.ds-sdk-input')
diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index 4c05c637..02cb96df 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -25,7 +25,8 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
       ) : (
         <div
           className="flex items-center gap-x-1 cursor-pointer"
-          onClick={(event) => scrollFilter(event, displayFilter, true)}
+          onClick={(event) => scrollFilter(event, displayFilter)}
+          onKeyDown={(event) => scrollFilter(event, displayFilter)}
         >
           <label
             id={`filter-${iteration + 1}`}
diff --git a/src/components/InputButtonGroup/InputButtonGroup.tsx b/src/components/InputButtonGroup/InputButtonGroup.tsx
index 3fa376a9..4a0326d4 100644
--- a/src/components/InputButtonGroup/InputButtonGroup.tsx
+++ b/src/components/InputButtonGroup/InputButtonGroup.tsx
@@ -98,8 +98,10 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
       ) : (
         (isHidden ? (
           <label
+            tabindex={0}
             className="ds-sdk-input__label text-neutral-900 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row"
-            onClick={(event) => toggleFilters(event)}>
+            onClick={(event) => toggleFilters(event)}
+            onKeyDown={(event) => toggleFilters(event)}>
             {title}
           </label>
         ) : (
diff --git a/src/components/SortDropdown/SortDropdown.tsx b/src/components/SortDropdown/SortDropdown.tsx
index 96b1abd3..a69c32c5 100644
--- a/src/components/SortDropdown/SortDropdown.tsx
+++ b/src/components/SortDropdown/SortDropdown.tsx
@@ -71,6 +71,7 @@ export const SortDropdown: FunctionComponent<SortDropdownProps> = ({
         <label
           className={'ds-sdk-input__label text-neutral-900 text-sm font-semibold py-md w-full h-full ib-display cursor-pointer flex flex-row'}
           onClick={(event) => toggleFilters(event)}
+          onKeyDown={(event) => toggleFilters(event)}
         >
           {translation.SortDropdown.title}
         </label>

From a0cc908c2b6ad619b904af00d38c8475fc87dbb6 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 27 Nov 2024 15:28:45 +0100
Subject: [PATCH 138/160] WAF-580 - Replacing ASCI with sign

---
 src/components/SwatchButton/SwatchButton.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/SwatchButton/SwatchButton.tsx b/src/components/SwatchButton/SwatchButton.tsx
index 61d5d498..378f321d 100644
--- a/src/components/SwatchButton/SwatchButton.tsx
+++ b/src/components/SwatchButton/SwatchButton.tsx
@@ -53,7 +53,7 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
       </div>
     );
   }
-  
+
   if (type === 'COLOR_HEX') {
     const color = value.toLowerCase();
     const className = `min-w-[32px] rounded-full p-sm border border-[1.5px] ${outlineColor} h-[32px] outline-transparent`;
@@ -76,6 +76,8 @@ export const SwatchButton: FunctionComponent<SwatchButtonProps> = ({
   }
 
   if (type === 'IMAGE' && value) {
+    value = value.replace('&quot;', '"');
+    
     const className = `object-cover object-center min-w-[32px] rounded-full p-sm border border-[1.5px] ${outlineColor} h-[32px] outline-transparent`;
     const style = `background: url(${value}) no-repeat center; background-size: contain;`;
     return (

From c008fc22fa72812b6d2fceea796e9e0e7572453c Mon Sep 17 00:00:00 2001
From: James Fong <jafong@adobe.com>
Date: Wed, 27 Nov 2024 16:59:11 -0600
Subject: [PATCH 139/160] WAF-473 - filter side bar visibility change

filter side bar are now always hidden by default. most noticeably in cases of custom categories.
---
 src/containers/MobileFilterHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 9c1e092d..5c9ba726 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -62,7 +62,7 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
   );
 
   const [showMobileFacet, setShowMobileFacet] = useState(
-    !!productsCtx.variables.filter?.length
+    false
   );
   const [sortOptions, setSortOptions] = useState(defaultSortOptions());
 

From 3691dee65fba639109735ec12fa2309bc002e610 Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Mon, 2 Dec 2024 12:52:23 +0200
Subject: [PATCH 140/160] WAF-633 - Sort franchise based on categoryExtraInfo
 order

---
 dev-template.html        | 46 +++++++++++++++++++++++++++++++++++++---
 src/context/products.tsx | 15 +++++++++++--
 src/types/interface.ts   |  7 ++++++
 3 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/dev-template.html b/dev-template.html
index f72e3119..6cae8d27 100644
--- a/dev-template.html
+++ b/dev-template.html
@@ -78,13 +78,53 @@
         allowAllProducts: false,
         currentCategoryUrlPath: 'sportswear/women', // current category url path, please prefer using currentCategoryId
         currentCategoryId: '488', // current category id
-        /** FRANCHISE VIEW
-        categoryConfig: { 'pcm_display_by_franchise': '1' },
-        **/
+
+        /** FRANCHISE VIEW SETTINGS **/
+        // currentCategoryUrlPath: 'baseball', // current category url path, please prefer using currentCategoryId
+        // currentCategoryId: '107', // current category id
+        // categoryConfig: { 'pcm_display_by_franchise': '1' },
+        // categoriesExtraInfo: [
+        //   {
+        //     "url": "baseball/baseball-gloves",
+        //     "id": "677",
+        //   },
+        //   {
+        //     "url": "baseball/limited-edition",
+        //     "id": "5704",
+        //   },
+        //   {
+        //     "url": "baseball/baseball-gear-bags",
+        //     "id": "3134",
+        //   },
+        //   {
+        //     "url": "baseball/baseballs",
+        //     "id": "674",
+        //   },
+        //   {
+        //     "url": "baseball/baseball-protective-gear",
+        //     "id": "680",
+        //   },
+        //   {
+        //     "url": "baseball/baseball-apparel",
+        //     "id": "665",
+        //   },
+        //   {
+        //     "url": "baseball/stock-uniforms",
+        //     "id": "668",
+        //   },
+        //
+        //   {
+        //     "url": "baseball/baseball-accessories",
+        //     "id": "671",
+        //   },
+        // ],
+        /** END FRANCHISE VIEW SETTINGS **/
+
         /** TEAM SPECIFIC PLP SETTINGS **/
         // currentCategoryUrlPath: 'basketball/basketballs/chicago-bulls',
         // currentCategoryId: '3197', // current category id
         /** END TEAM SPECIFIC PLP **/
+
         // preCheckedFilters: [{key: 'pim_axis_article_techspec_hand_code_pim_20786' , value: 'Right-hand throw'}],
         // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
diff --git a/src/context/products.tsx b/src/context/products.tsx
index 276f1b64..ced39fdf 100644
--- a/src/context/products.tsx
+++ b/src/context/products.tsx
@@ -184,6 +184,7 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
   const categoryPath = storeCtx.config?.currentCategoryUrlPath;
   const categoryId = storeCtx.config?.currentCategoryId;
   const categoryConfig = storeCtx.config?.categoryConfig;
+  const categoriesExtraInfo = storeCtx.config?.categoriesExtraInfo;
 
   const viewTypeFromUrl = getValueFromUrl('view_type');
   const [viewType, setViewType] = useState<string>(
@@ -310,17 +311,27 @@ const ProductsContextProvider = ({ children }: WithChildrenProps) => {
       return;
     }
 
+    let sortedCategories = categories;
+    /* Sort categories based on id from categoriesExtraInfo */
+    if (categoriesExtraInfo) {
+      sortedCategories = categories.sort((a, b) => {
+        const idA = categoriesExtraInfo.findIndex(item => item.url === a.path);
+        const idB = categoriesExtraInfo.findIndex(item => item.url === b.path)
+        return idA - idB;
+      });
+    }
+
     const result = await getFranchiseSearch({
       ...variables,
       ...storeCtx,
       pageSize: 20,
       currentPage: 1,
       apiUrl: storeCtx.apiUrl,
-      categories: categories.map((c) => c.title),
+      categories: sortedCategories.map((c) => c.title),
     });
 
     Object.keys(result).forEach((key) => {
-      const category = categories.find((c) => c.title.replaceAll('-', '').endsWith(key));
+      const category = sortedCategories.find((c) => c.title.replaceAll('-', '').endsWith(key));
       result[key] = {
         ...category,
         ...result[key],
diff --git a/src/types/interface.ts b/src/types/interface.ts
index 6a234640..23963c2e 100644
--- a/src/types/interface.ts
+++ b/src/types/interface.ts
@@ -28,6 +28,12 @@ export interface ClientProps {
   xRequestId?: string;
 }
 
+export interface CategoryExtraInfo {
+  id: string;
+  url: string;
+  [key: string]: any;
+}
+
 export interface StoreDetailsConfig {
   allowAllProducts?: string | boolean;
   perPageConfig?: { pageSizeOptions?: string; defaultPageSizeOption?: string };
@@ -39,6 +45,7 @@ export interface StoreDetailsConfig {
   currentCategoryId?: string;
   categoryName?: string;
   categoryConfig?: Record<string, any>;
+  categoriesExtraInfo?: Array<CategoryExtraInfo>;
   displaySearchBox?: boolean;
   displayOutOfStock?: string | boolean; // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
   displayMode?: string;

From c2468145582c0a76d6089410d612169b1f35d60c Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 12 Nov 2024 10:00:35 +0100
Subject: [PATCH 141/160] WAF-552 - Solving slice issue of facets at Slugger
 and also removing unneccessary consoles

---
 src/components/Facets/Facets.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 024a8514..619392c7 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -29,7 +29,7 @@ interface FacetsProps {
 
 export const scrollFilter = (
   event: any,
-  displayFunction: (() => void) | undefined
+  displayFunction: (() => void) | undefined,
 ) => {
   const activateEvent = event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter') || false;
 
@@ -38,6 +38,7 @@ export const scrollFilter = (
   }
 
   displayFunction?.();
+
   const clicked = event.target;
   const filterNumber = Number(clicked.id.split('-')[1])
   const targetNode = document.querySelector('.mobile-filters-container');
@@ -93,6 +94,16 @@ export const Facets: FunctionComponent<FacetsProps> = ({
 }: FacetsProps) => {
   const {config} = useStore();
   const translation = useTranslation();
+
+  let i = 0;
+  for (let facet of searchFacets) {
+    if (facet.buckets.length < 1) {
+      searchFacets.splice(i, 1);
+    }
+
+    i++;
+  }
+
   const searchFacetsSliced = searchFacets?.slice(0, 3)
   const [selectedFacet] = useState<FacetType | null>(null);
   const isCategory = config?.currentCategoryUrlPath || config?.currentCategoryId;

From 1bf181c517b7d0b54e4d056cad22c8c82f186547 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 12 Nov 2024 10:54:17 +0100
Subject: [PATCH 142/160] WAF-552 - Included code review fixes from PR 47

---
 src/components/Facets/ToggleFilters.tsx | 16 ++++++++--------
 src/components/Facets/filters.css       |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Facets/ToggleFilters.tsx b/src/components/Facets/ToggleFilters.tsx
index 72664dd3..95787c9d 100644
--- a/src/components/Facets/ToggleFilters.tsx
+++ b/src/components/Facets/ToggleFilters.tsx
@@ -12,16 +12,16 @@ export const toggleFilters = (event: any) => {
 
   const clicked = event.currentTarget;
   const toBeActiveFilterBlock = clicked.nextElementSibling;
-  const parrentDiv = clicked.closest('.ds-sdk-input')
+  const parentDiv = clicked.closest('.ds-sdk-input')
   let borderDiv: any
-  if (parrentDiv && "querySelector" in parrentDiv) {
-    borderDiv = parrentDiv.querySelector('.ds-sdk-input__border')
+  if (parentDiv) {
+    borderDiv = parentDiv.querySelector('.ds-sdk-input__border')
   }
 
   if (!(toBeActiveFilterBlock) || toBeActiveFilterBlock.classList.contains('none-display')) {
     const clickedForm = clicked.closest('form')
     let currentFilterBlock: any
-    if (clickedForm && "querySelector" in clickedForm) {
+    if (clickedForm) {
       currentFilterBlock = clickedForm.querySelector('fieldset:not(.none-display)');
     }
 
@@ -31,14 +31,14 @@ export const toggleFilters = (event: any) => {
 
     toBeActiveFilterBlock?.classList.remove('none-display')
     borderDiv.classList.add('mt-md');
-    if (parrentDiv && "classList" in parrentDiv) {
-      parrentDiv.classList.add('active');
+    if (parentDiv) {
+      parentDiv.classList.add('active');
     }
   } else {
     toBeActiveFilterBlock?.classList.add('none-display')
     borderDiv.classList.remove('mt-md');
-    if (parrentDiv && "classList" in parrentDiv) {
-      parrentDiv.classList.remove('active');
+    if (parentDiv) {
+      parentDiv.classList.remove('active');
     }
   }
 }
\ No newline at end of file
diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
index 04bf1151..eccb565d 100644
--- a/src/components/Facets/filters.css
+++ b/src/components/Facets/filters.css
@@ -37,7 +37,7 @@
 }
 
 .mobile-filters-container .price-range-submit {
-  font-family: var(--ff-gt-america-expanded)
+  font-family: var(--body-font-family)
 }
 
 @media (min-width: 768px) {

From 0de6f3fe9f52b4f7cc6daf41d698952afb0b940c Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 4 Dec 2024 17:50:22 +0100
Subject: [PATCH 143/160] WAF-552 - Code review change

---
 src/components/Facets/Facets.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 619392c7..cd859de0 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -95,14 +95,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   const {config} = useStore();
   const translation = useTranslation();
 
-  let i = 0;
-  for (let facet of searchFacets) {
-    if (facet.buckets.length < 1) {
-      searchFacets.splice(i, 1);
-    }
-
-    i++;
-  }
+  searchFacets.filter(facet => facet.buckets.length > 0);
 
   const searchFacetsSliced = searchFacets?.slice(0, 3)
   const [selectedFacet] = useState<FacetType | null>(null);

From 285c1bb47763b448c44164561684498af0caba52 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Thu, 5 Dec 2024 08:34:33 +0100
Subject: [PATCH 144/160] WAF-552 - Code review change v2

---
 src/components/Facets/Facets.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index cd859de0..0aafda0d 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -95,7 +95,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
   const {config} = useStore();
   const translation = useTranslation();
 
-  searchFacets.filter(facet => facet.buckets.length > 0);
+  searchFacets = searchFacets.filter(facet => facet.buckets.length > 0);
 
   const searchFacetsSliced = searchFacets?.slice(0, 3)
   const [selectedFacet] = useState<FacetType | null>(null);

From aab0165987b22d3f36812bf9e47929eccfacbd1f Mon Sep 17 00:00:00 2001
From: Tiffany Pecaud <pecaud.tiffany.external@amersports.com>
Date: Thu, 5 Dec 2024 15:23:49 +0100
Subject: [PATCH 145/160] WAF-628 - Update search and remove error js when no
 color options

---
 src/utils/getProductImage.ts | 7 ++++---
 src/utils/productUtils.ts    | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 39347652..89777f1e 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -135,9 +135,10 @@ function getProductImagesFromAttribute(productView: ProductView, categoryId?: st
   const imageConfigs = getImageConfigsFromAttribute(productView);
 
   const colorOptionsFromAttribute = imageConfigs.find((config: any) => config.attribute_id === colorOptionsFromProductOptions?.id);
-  let colorVariantId = colorOptionsFromProductOptions?.values?.[0].id;
-  if (isSportsWear(productView)) {
-    colorVariantId = colorOptionsFromProductOptions?.values?.[0].id;
+  const firstColorOptionsFromProductOptions = colorOptionsFromProductOptions?.values?.[0];
+
+  if (isSportsWear(productView) && firstColorOptionsFromProductOptions) {
+    const colorVariantId = firstColorOptionsFromProductOptions.id;
     const defaultColorOption = colorOptionsFromAttribute.images.find((colorOption: any) => colorOption.id === colorVariantId)
       || colorOptionsFromAttribute.images[0];
   
diff --git a/src/utils/productUtils.ts b/src/utils/productUtils.ts
index 035e7a86..8dc9c7f2 100644
--- a/src/utils/productUtils.ts
+++ b/src/utils/productUtils.ts
@@ -19,7 +19,7 @@ export function getImageConfigsFromAttribute(productView: ProductView) {
   }
 
   try {
-    return JSON.parse(imageAttributes.value);
+    return imageAttributes.value ? JSON.parse(imageAttributes.value) : [];
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error('Error parsing image attributes', e);

From 6d38a2cddcb44f59446431a9538b7ddf95b111d6 Mon Sep 17 00:00:00 2001
From: Tiffany Pecaud <pecaud.tiffany.external@amersports.com>
Date: Thu, 5 Dec 2024 17:13:33 +0100
Subject: [PATCH 146/160] WAF-628 - Update after review

---
 src/utils/getProductImage.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/utils/getProductImage.ts b/src/utils/getProductImage.ts
index 89777f1e..44f0a03a 100644
--- a/src/utils/getProductImage.ts
+++ b/src/utils/getProductImage.ts
@@ -137,15 +137,15 @@ function getProductImagesFromAttribute(productView: ProductView, categoryId?: st
   const colorOptionsFromAttribute = imageConfigs.find((config: any) => config.attribute_id === colorOptionsFromProductOptions?.id);
   const firstColorOptionsFromProductOptions = colorOptionsFromProductOptions?.values?.[0];
 
-  if (isSportsWear(productView) && firstColorOptionsFromProductOptions) {
-    const colorVariantId = firstColorOptionsFromProductOptions.id;
-    const defaultColorOption = colorOptionsFromAttribute.images.find((colorOption: any) => colorOption.id === colorVariantId)
-      || colorOptionsFromAttribute.images[0];
-  
-    return getAbsoluteImageUrl(productView, [defaultColorOption.image, defaultColorOption.back_view_image]);
-  }
-    
   if (colorOptionsFromAttribute && colorOptionsFromAttribute.images.length > 0) {
+    if (isSportsWear(productView)) {
+      const colorVariantId = firstColorOptionsFromProductOptions?.id;
+      const defaultColorOption = colorOptionsFromAttribute.images.find((colorOption: any) => colorOption.id === colorVariantId)
+        || colorOptionsFromAttribute.images[0];
+    
+      return getAbsoluteImageUrl(productView, [defaultColorOption.image, defaultColorOption.back_view_image]);
+    }
+    
     const segmentedOptions = categoryId ? getSegmentedOptions(productView, colorOptionsFromProductOptions?.id || null, categoryId) : null;
     const defaultColorOption = colorOptionsFromAttribute.images.find((option: any) => !segmentedOptions || segmentedOptions.includes(option.id));
     return getAbsoluteImageUrl(productView, [defaultColorOption.image, defaultColorOption.back_view_image]);

From 4c82029d05cfff1dfb4054f1318e973f603c8403 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 9 Dec 2024 09:04:31 +0100
Subject: [PATCH 147/160] WAF-587 - Spinner instead of shimmer for plp

---
 src/containers/App.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index d33cd28f..394c531e 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -36,7 +36,7 @@ export const App: FunctionComponent = () => {
   const loadingLabel = translation.Loading.title;
 
   useEffect(() => {
-    if (!productsCtx.loading) {
+    if (productsCtx.loading) {
       // trigger an event when the product list is loaded
       const event = new CustomEvent('product-list-loaded');
       window.dispatchEvent(event);
@@ -103,11 +103,7 @@ export const App: FunctionComponent = () => {
                     )}
                 </div>
                 {productsCtx.loading ? (
-                  screenSize.mobile ? (
-                    <Loading label={loadingLabel} />
-                  ) : (
-                    <Shimmer />
-                  )
+                  <Loading label={loadingLabel} />
                 ) : (
                   <>
                     <div className="flex w-full h-full testing">

From 5d6dfc5d961012ec22af7b5de6c3eddae8bc13f6 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 9 Dec 2024 09:09:20 +0100
Subject: [PATCH 148/160] WAF-587 - Spinner instead of shimmer for plp missed
 check fix

---
 src/containers/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 394c531e..2883bd52 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -36,7 +36,7 @@ export const App: FunctionComponent = () => {
   const loadingLabel = translation.Loading.title;
 
   useEffect(() => {
-    if (productsCtx.loading) {
+    if (!productsCtx.loading) {
       // trigger an event when the product list is loaded
       const event = new CustomEvent('product-list-loaded');
       window.dispatchEvent(event);

From 68afbb53ea5427ba8abe94463c93ca8835098de3 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Thu, 12 Dec 2024 14:14:19 +0100
Subject: [PATCH 149/160] WAF-653 - Mobile filter pills return

---
 src/components/Facets/filters.css     |  4 ++++
 src/containers/MobileFilterHeader.tsx | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Facets/filters.css b/src/components/Facets/filters.css
index eccb565d..b37b2b99 100644
--- a/src/components/Facets/filters.css
+++ b/src/components/Facets/filters.css
@@ -15,6 +15,10 @@
   float: right
 }
 
+.mobile-franchise .result-count {
+  padding-left: 12px;
+}
+
 .mobile-filters-container .apply-buttons {
   background: rgba(255, 255, 255, 0.25);
 }
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 2ac1dd3f..2be46273 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -12,7 +12,7 @@ import { useCallback, useEffect, useState } from 'preact/hooks';
 import { Drawer } from 'src/components/Drawer/Drawer';
 import MobileFacets from 'src/components/MobileFacets';
 
-import { CategoryFilters } from "../components";
+import { CategoryFilters, SelectedFilters } from "../components";
 import { FilterButton } from '../components/FilterButton';
 import {
   useAttributeMetadata,
@@ -123,7 +123,13 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
       )}
       {screenSize.mobile && (
         <div className={'mobile-franchise'}>
-          <FranchiseViewSelector/>
+          <div className={'franchise-counter'}>
+            <FranchiseViewSelector/>
+            <SelectedFilters totalCount={totalCount} isCount={true}/>
+          </div>
+          <div className={'mobile-pills'}>
+            <SelectedFilters totalCount={totalCount} isCount={false}/>
+          </div>
         </div>
       )}
       <div class="mobile-filters-container z-1000">

From 69fab4ed6ca394b719c50535bd20c7674ec70659 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Thu, 12 Dec 2024 15:59:38 +0100
Subject: [PATCH 150/160] WAF-713 - Added filter bar for no results and
 modified texts

---
 src/containers/MobileFilterHeader.tsx | 6 +-----
 src/containers/ProductsContainer.tsx  | 2 +-
 src/i18n/en_US.ts                     | 3 ++-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 2ac1dd3f..19b39158 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -97,13 +97,9 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
     handleUrlSort(sortOption);
   };
 
-  if (totalCount === 0) {
-    return null;
-  }
-
   return (
     <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
-      {!screenSize.mobile && productsCtx.totalCount && (
+      {!screenSize.mobile && (
         <CategoryFilters
           pageLoading={productsCtx.pageLoading}
           facets={productsCtx.facets}
diff --git a/src/containers/ProductsContainer.tsx b/src/containers/ProductsContainer.tsx
index a2febaf9..55ffafe2 100644
--- a/src/containers/ProductsContainer.tsx
+++ b/src/containers/ProductsContainer.tsx
@@ -84,7 +84,7 @@ export const ProductsContainer: FunctionComponent<Props> = ({
             {storeCtx.config.noResultsLinks.map((link) => (
               <li key={link.text} className="inline-block p-[14px] bg-black text-white uppercase">
                 <a href={link.url} className="">
-                  {link.text}
+                  {translation.ProductContainers.noresultsEgift.replace('{variables.egift}', link.text)}
                 </a>
               </li>
             ))}
diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts
index ae562472..43f26666 100644
--- a/src/i18n/en_US.ts
+++ b/src/i18n/en_US.ts
@@ -61,7 +61,8 @@ export const en_US = {
     minquery:
       'Your search term {variables.phrase} has not reached the minimum of {minQueryLength} characters.',
     resultsText: 'Results',
-    noresults: 'We couldn\'t find any products that match your search. Here are a few other destinations that might help.',
+    noresults: 'Unfortunately, your refinement has no matching result. Please remove a filter or try another category.',
+    noresultsEgift: 'Check out our {variables.egift} for endless options!',
     pagePicker: 'Show {pageSize} per page',
     showAll: 'all',
   },

From 952f37feba0a078cca3052d8dad4869f1d039d3c Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Fri, 13 Dec 2024 08:02:51 +0100
Subject: [PATCH 151/160] WAF-518 - Stroke change

---
 src/components/Pagination/Pagination.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 8fac5221..7d7623b4 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -83,9 +83,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
           }
           onClick={onFirst}>
           <Guillemet
-            className={`h-small w-small transform ${
-              currentPage === 1 ? 'stroke-neutral-600' : 'stroke-brand-700'
-            }`}
+            className={'h-small w-small transform stroke-neutral-600'}
           />
           {screenSize.desktop && <span>First</span>}
         </a>

From f3a105dd0faa87a496ca2fcdaaad4bf059f8509f Mon Sep 17 00:00:00 2001
From: Hannes Hertach <hanneshertach@gmail.com>
Date: Fri, 13 Dec 2024 14:16:09 +0100
Subject: [PATCH 152/160] remove below-title enrichment

---
 src/components/Loading/Loading.tsx | 2 +-
 src/containers/App.tsx             | 2 --
 src/styles/index.css               | 5 +----
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
index 02876c9c..099d6c28 100644
--- a/src/components/Loading/Loading.tsx
+++ b/src/components/Loading/Loading.tsx
@@ -21,7 +21,7 @@ export const Loading: FunctionComponent<LoadingProps> = ({ label }) => {
   ).matches;
   return (
     <div
-      className={`ds-sdk-loading flex h-screen justify-center items-center ${
+      className={`ds-sdk-loading flex justify-center items-center ${
         isMobile ? 'loading-spinner-on-mobile' : ''
       }`}
     >
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index d33cd28f..5ef11647 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -55,7 +55,6 @@ export const App: FunctionComponent = () => {
                 </h1>
               </div>
             )}
-            <Enrichment position={'below-title'} />
             <div className="flex flex-col">
               <div className="flex w-full h-full testing">
                 <MobileFilterHeader
@@ -82,7 +81,6 @@ export const App: FunctionComponent = () => {
                 </h1>
               </div>
             )}
-            <Enrichment position={'below-title'} />
             <div className="flex flex-col">
               <div className="ds-widgets_results flex flex-col items-center flex-[75]">
                 <div className="flex w-full h-full">
diff --git a/src/styles/index.css b/src/styles/index.css
index 93a93128..bceb8a9e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2473,10 +2473,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 }
 
 .loading-spinner-on-mobile {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  min-height: 50vh;
 }
 
 .ds-sdk-product-item__product-swatch-item .swatch-color-port-royale {

From 8ca483b76d6ba4d33425019f7f796bf605a321df Mon Sep 17 00:00:00 2001
From: Tiffany Pecaud <pecaud.tiffany.external@amersports.com>
Date: Wed, 18 Dec 2024 10:34:14 +0100
Subject: [PATCH 153/160] WAF-720 - Fix error js

---
 src/components/ProductList/ProductList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 54dac739..1dbba390 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -96,7 +96,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
   return (
     <div className="franchises" key={franchise}>
       <div className="franchise-header">
-        <h2>{franchises[franchise].name.toUpperCase()}</h2>
+        <h2>{franchises[franchise].name?.toUpperCase()}</h2>
         <a href={storeCtx.route?.({
           sku: "",
           urlKey: franchises[franchise].title,
@@ -107,7 +107,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
         gridTemplateColumns: `repeat(${styleColumnNumber}, minmax(0, 1fr))`,
       }}
            className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6">
-        {franchises[franchise].items.slice(0, numberOfColumns * page).map((item: Product) => (
+        {franchises[franchise].items?.slice(0, numberOfColumns * page).map((item: Product) => (
           <ProductItem
             item={item}
             setError={setError}

From 7676e5cc7f656354360ea3b9ca4c33043bb638d2 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Mon, 9 Dec 2024 09:19:13 +0100
Subject: [PATCH 154/160] WAF-649 - Fix for tablet/mobile look

---
 src/containers/MobileFilterHeader.tsx | 2 +-
 src/containers/ProductsHeader.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 19b39158..d02f0c70 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -98,7 +98,7 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
   };
 
   return (
-    <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
+    <div className="flex flex-col max-w-full ml-auto w-full h-full">
       {!screenSize.mobile && (
         <CategoryFilters
           pageLoading={productsCtx.pageLoading}
diff --git a/src/containers/ProductsHeader.tsx b/src/containers/ProductsHeader.tsx
index b5f9db98..540f6ea2 100644
--- a/src/containers/ProductsHeader.tsx
+++ b/src/containers/ProductsHeader.tsx
@@ -86,7 +86,7 @@ export const ProductsHeader: FunctionComponent<Props> = ({
   };
 
   return (
-    <div className="flex flex-col max-w-5xl lg:max-w-full ml-auto w-full h-full">
+    <div className="flex flex-col max-w-full ml-auto w-full h-full">
       <div
         className={`flex gap-x-2.5 mb-[1px] ${
           screenSize.mobile ? 'justify-between' : 'justify-between'

From 7f41f8ac4ad1ff8cade3c2285927db2095415bc2 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Tue, 10 Dec 2024 08:38:50 +0100
Subject: [PATCH 155/160] WAF-649 - Sneaking in keyboard nav fix

---
 src/components/FilterSelection/FilterSelection.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/FilterSelection/FilterSelection.tsx b/src/components/FilterSelection/FilterSelection.tsx
index 02cb96df..cd55ae48 100644
--- a/src/components/FilterSelection/FilterSelection.tsx
+++ b/src/components/FilterSelection/FilterSelection.tsx
@@ -24,6 +24,7 @@ export const FilterSelection: FunctionComponent<FilterSelectionProps> = ({
         filterSelectionTitleSlot(title)
       ) : (
         <div
+          tabindex={0}
           className="flex items-center gap-x-1 cursor-pointer"
           onClick={(event) => scrollFilter(event, displayFilter)}
           onKeyDown={(event) => scrollFilter(event, displayFilter)}

From 3a8abef30b7d1547f13c3161c48b4bad3ba363b8 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Wed, 18 Dec 2024 16:25:34 +0100
Subject: [PATCH 156/160] WAF-518 - QuickFix for missed classname template
 error

---
 src/components/Pagination/Pagination.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 7d7623b4..00d3e297 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -83,7 +83,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
           }
           onClick={onFirst}>
           <Guillemet
-            className={'h-small w-small transform stroke-neutral-600'}
+            className={'h-small w-small transform'}
           />
           {screenSize.desktop && <span>First</span>}
         </a>
@@ -161,8 +161,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
           onClick={onLast}>
           {screenSize.desktop && <span>Last</span>}
           <Guillemet
-            className={`h-small w-small transform rotate-180 stroke-neutral-600'
-            }`}
+            className={'h-small w-small transform rotate-180'}
           />
         </a>
       </li>

From c752cd19912e2a9e3434d1d1afba9e46d1197f12 Mon Sep 17 00:00:00 2001
From: Jerzy Jablonski <jerzy.jablonski.external@amersports.com>
Date: Thu, 19 Dec 2024 10:58:18 +0100
Subject: [PATCH 157/160] WAF-653 - Double franchise fix

---
 src/components/Facets/SelectedFilters.tsx | 16 ++++++++++------
 src/containers/MobileFilterHeader.tsx     |  4 +++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Facets/SelectedFilters.tsx b/src/components/Facets/SelectedFilters.tsx
index 4783e42f..d9aa6be8 100644
--- a/src/components/Facets/SelectedFilters.tsx
+++ b/src/components/Facets/SelectedFilters.tsx
@@ -11,24 +11,25 @@ import { FunctionComponent } from 'preact';
 
 import "./filters.css";
 
-import { useProducts, useSearch, useStore, useTranslation } from '../../context';
+import { useProducts, useSearch, useSensor, useStore, useTranslation } from '../../context';
 import Pill from '../Pill';
 import { formatBinaryLabel, formatRangeLabel } from './format';
 import { FranchiseViewSelector } from "./FranchiseViewSelector";
 
 interface SelectedFiltersProps {
   totalCount?: number;
-  isCount: boolean
+  isCount: boolean;
 }
 
 export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
   totalCount,
-  isCount
+  isCount,
 }) => {
   const searchCtx = useSearch();
   const productsCtx = useProducts();
   const storeCtx = useStore();
   const translation = useTranslation();
+  const { screenSize } = useSensor();
 
   return (
     <>
@@ -37,9 +38,12 @@ export const SelectedFilters: FunctionComponent<SelectedFiltersProps> = ({
           {!searchCtx.displayFranchises && (
             <p className="result-count">{totalCount} Results</p>
           )}
-
-          {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '1' && (
-            <FranchiseViewSelector/>
+          {!screenSize.mobile && (
+            <>
+              {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '0' && (
+                <FranchiseViewSelector/>
+              )}
+            </>
           )}
         </div>
       )}
diff --git a/src/containers/MobileFilterHeader.tsx b/src/containers/MobileFilterHeader.tsx
index 2be46273..a32d2a67 100644
--- a/src/containers/MobileFilterHeader.tsx
+++ b/src/containers/MobileFilterHeader.tsx
@@ -124,7 +124,9 @@ export const MobileFilterHeader: FunctionComponent<Props> = ({
       {screenSize.mobile && (
         <div className={'mobile-franchise'}>
           <div className={'franchise-counter'}>
-            <FranchiseViewSelector/>
+            {storeCtx.config.categoryConfig?.pcm_display_by_franchise === '0' && (
+              <FranchiseViewSelector/>
+            )}
             <SelectedFilters totalCount={totalCount} isCount={true}/>
           </div>
           <div className={'mobile-pills'}>

From c4618254d56d39b5d7e6cb541c1e4d816cfbe71c Mon Sep 17 00:00:00 2001
From: johnnyung-wilson <johnny.ung@wilson.com>
Date: Tue, 7 Jan 2025 15:17:41 -0800
Subject: [PATCH 158/160] WAF-355 - spacing fix

---
 src/components/ProductList/ProductList.tsx |    4 +-
 src/styles/index.css                       | 1019 +++++---------------
 2 files changed, 229 insertions(+), 794 deletions(-)

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 1dbba390..9a9b777a 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -106,7 +106,7 @@ const Franchises : FunctionComponent<FranchiseProps> = ({
       <div style={{
         gridTemplateColumns: `repeat(${styleColumnNumber}, minmax(0, 1fr))`,
       }}
-           className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm xl:gap-x-6">
+           className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-xs md:gap-x-4">
         {franchises[franchise].items?.slice(0, numberOfColumns * page).map((item: Product) => (
           <ProductItem
             item={item}
@@ -264,7 +264,7 @@ export const ProductList: FunctionComponent<ProductListProps> = ({
           style={{
             gridTemplateColumns: `repeat(${styleColumnNumber}, minmax(0, 1fr))`,
           }}
-          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-sm md:gap-x-9 md:gap-y-9"
+          className="ds-sdk-product-list__grid mt-md grid gap-y-8 gap-x-xs md:gap-x-4 md:gap-y-9"
         >
           {finalProductList}
         </div>
diff --git a/src/styles/index.css b/src/styles/index.css
index bceb8a9e..9ff78928 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -7,8 +7,8 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
   *,
-  ::before,
-  ::after {
+::before,
+::after {
     box-sizing: border-box;
     /* 1 */
     border-width: 0;
@@ -18,12 +18,10 @@
     border-color: #e5e7eb;
     /* 2 */
   }
-
   ::before,
-  ::after {
+::after {
     --tw-content: '';
   }
-
   /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -34,7 +32,7 @@
 7. Disable tap highlights on iOS
 */
   html,
-  :host {
+:host {
     line-height: 1.5;
     /* 1 */
     -webkit-text-size-adjust: 100%;
@@ -42,7 +40,7 @@
     -moz-tab-size: 4;
     /* 3 */
     -o-tab-size: 4;
-    tab-size: 4;
+       tab-size: 4;
     /* 3 */
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
@@ -53,7 +51,6 @@
     -webkit-tap-highlight-color: transparent;
     /* 7 */
   }
-
   /*
 1. Remove the margin in all browsers.
 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
@@ -64,7 +61,6 @@
     line-height: inherit;
     /* 2 */
   }
-
   /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
@@ -78,28 +74,25 @@
     border-top-width: 1px;
     /* 3 */
   }
-
   /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
+            text-decoration: underline dotted;
   }
-
   /*
 Remove the default font size and weight for headings.
 */
   h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-size: inherit;
     font-weight: inherit;
   }
-
   /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
@@ -107,15 +100,13 @@ Reset links to optimize for opt-in styling instead of opt-out.
     color: inherit;
     text-decoration: inherit;
   }
-
   /*
 Add the correct font weight in Edge and Safari.
 */
   b,
-  strong {
+strong {
     font-weight: bolder;
   }
-
   /*
 1. Use the user's configured `mono` font-family by default.
 2. Use the user's configured `mono` font-feature-settings by default.
@@ -123,9 +114,9 @@ Add the correct font weight in Edge and Safari.
 4. Correct the odd `em` font sizing in all browsers.
 */
   code,
-  kbd,
-  samp,
-  pre {
+kbd,
+samp,
+pre {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
     font-feature-settings: normal;
@@ -135,29 +126,25 @@ Add the correct font weight in Edge and Safari.
     font-size: 1em;
     /* 4 */
   }
-
   /*
 Add the correct font size in all browsers.
 */
   small {
     font-size: 80%;
   }
-
   /*
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
   sub,
-  sup {
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
-
   sub {
     bottom: -0.25em;
   }
-
   sup {
     top: -0.5em;
   }
@@ -166,7 +153,6 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
-
   table {
     text-indent: 0;
     /* 1 */
@@ -175,17 +161,16 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
     border-collapse: collapse;
     /* 3 */
   }
-
   /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
   button,
-  input,
-  optgroup,
-  select,
-  textarea {
+input,
+optgroup,
+select,
+textarea {
     font-family: inherit;
     /* 1 */
     font-feature-settings: inherit;
@@ -205,23 +190,21 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
     padding: 0;
     /* 3 */
   }
-
   /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
   button,
-  select {
+select {
     text-transform: none;
   }
-
   /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
   button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
     -webkit-appearance: button;
     /* 1 */
     background-color: transparent;
@@ -229,36 +212,31 @@ Remove the inheritance of text transform in Edge and Firefox.
     background-image: none;
     /* 2 */
   }
-
   /*
 Use the modern Firefox focus style for all focusable elements.
 */
   :-moz-focusring {
     outline: auto;
   }
-
   /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
   :-moz-ui-invalid {
     box-shadow: none;
   }
-
   /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
   progress {
     vertical-align: baseline;
   }
-
   /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
   ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+::-webkit-outer-spin-button {
     height: auto;
   }
-
   /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
@@ -269,14 +247,12 @@ Correct the cursor style of increment and decrement buttons in Safari.
     outline-offset: -2px;
     /* 2 */
   }
-
   /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
   ::-webkit-search-decoration {
     -webkit-appearance: none;
   }
-
   /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to `inherit` in Safari.
@@ -287,64 +263,56 @@ Remove the inner padding in Chrome and Safari on macOS.
     font: inherit;
     /* 2 */
   }
-
   /*
 Add the correct display in Chrome and Safari.
 */
   summary {
     display: list-item;
   }
-
   /*
 Removes the default spacing and border for appropriate elements.
 */
   blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
     margin: 0;
   }
-
   fieldset {
     margin: 0;
     padding: 0;
   }
-
   legend {
     padding: 0;
   }
-
   ol,
-  ul,
-  menu {
+ul,
+menu {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-
   /*
 Reset default styling for dialogs.
 */
   dialog {
     padding: 0;
   }
-
   /*
 Prevent resizing textareas horizontally by default.
 */
   textarea {
     resize: vertical;
   }
-
   /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
@@ -355,63 +323,56 @@ Prevent resizing textareas horizontally by default.
     color: #9ca3af;
     /* 2 */
   }
-
   input::placeholder,
-  textarea::placeholder {
+textarea::placeholder {
     opacity: 1;
     /* 1 */
     color: #9ca3af;
     /* 2 */
   }
-
   /*
 Set the default cursor for buttons.
 */
   button,
-  [role="button"] {
+[role="button"] {
     cursor: pointer;
   }
-
   /*
 Make sure disabled buttons don't get the pointer cursor.
 */
   :disabled {
     cursor: default;
   }
-
   /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
   img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
     display: block;
     /* 1 */
     vertical-align: middle;
     /* 2 */
   }
-
   /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
   img,
-  video {
+video {
     max-width: 100%;
     height: auto;
   }
-
   /* Make elements with the HTML hidden attribute stay hidden by default */
   [hidden] {
     display: none;
   }
-
   *, ::before, ::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
@@ -422,19 +383,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -442,26 +403,25 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
-
   ::backdrop {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
@@ -472,19 +432,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -492,30 +452,28 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
-
   .container {
     width: 100%;
   }
-
   @media (min-width: 640px) {
     .container {
       max-width: 640px;
@@ -541,7 +499,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       max-width: 1536px;
     }
   }
-
   .sr-only {
     position: absolute;
     width: 1px;
@@ -553,485 +510,339 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     white-space: nowrap;
     border-width: 0;
   }
-
   .visible {
     visibility: visible;
   }
-
   .invisible {
     visibility: hidden;
   }
-
   .fixed {
     position: fixed;
   }
-
   .absolute {
     position: absolute;
   }
-
   .relative {
     position: relative;
   }
-
   .inset-0 {
     inset: 0px;
   }
-
   .bottom-0 {
     bottom: 0px;
   }
-
   .left-0 {
     left: 0px;
   }
-
   .left-1\/2 {
     left: 50%;
   }
-
   .right-0 {
     right: 0px;
   }
-
-  .top-full {
-    top: 100%;
-  }
-
-  .top-\[\-3px\] {
+  .top-\[-3px\] {
     top: -3px;
   }
-
   .z-20 {
     z-index: 20;
   }
-
   .z-50 {
     z-index: 50;
   }
-
-  .z-900 {
-    z-index: 900;
-  }
-
-  .z-1000 {
-    z-index: 1000;
-  }
-
   .m-0 {
-    margin: 0;
+    margin: 0px;
   }
-
   .m-4 {
     margin: 1rem;
   }
-
   .m-auto {
     margin: auto;
   }
-
   .mx-auto {
     margin-left: auto;
     margin-right: auto;
   }
-
   .my-0 {
     margin-top: 0px;
     margin-bottom: 0px;
   }
-
   .my-lg {
     margin-top: var(--spacing-lg);
     margin-bottom: var(--spacing-lg);
   }
-
   .mb-0 {
     margin-bottom: 0px;
   }
-
   .mb-0\.5 {
     margin-bottom: 0.125rem;
   }
-
-  .mb-\[1px\] {
-    margin-bottom: 1px;
-  }
-
   .mb-8 {
     margin-bottom: 2rem;
   }
-
+  .mb-\[1px\] {
+    margin-bottom: 1px;
+  }
   .mb-md {
     margin-bottom: var(--spacing-md);
   }
-
   .ml-1 {
     margin-left: 0.25rem;
   }
-
   .ml-2 {
     margin-left: 0.5rem;
   }
-
   .ml-3 {
     margin-left: 0.75rem;
   }
-
   .ml-auto {
     margin-left: auto;
   }
-
   .ml-sm {
     margin-left: var(--spacing-sm);
   }
-
   .ml-xs {
     margin-left: var(--spacing-xs);
   }
-
   .mr-2 {
     margin-right: 0.5rem;
   }
-
   .mr-auto {
     margin-right: auto;
   }
-
   .mr-xs {
     margin-right: var(--spacing-xs);
   }
-
-  .mt-0 {
-    margin-top: 0;
-  }
-
   .mt-2 {
     margin-top: 0.5rem;
   }
-
   .mt-4 {
     margin-top: 1rem;
   }
-
   .mt-8 {
     margin-top: 2rem;
   }
-
   .mt-auto {
     margin-top: auto;
   }
-
   .mt-md {
     margin-top: var(--spacing-md);
   }
-
   .mt-sm {
     margin-top: var(--spacing-sm);
   }
-
   .mt-xs {
     margin-top: var(--spacing-xs);
   }
-
   .inline-block {
     display: inline-block;
   }
-
   .inline {
     display: inline;
   }
-
   .flex {
     display: flex;
   }
-
   .inline-flex {
     display: inline-flex;
   }
-
   .grid {
     display: grid;
   }
-
+  .hidden {
+    display: none;
+  }
   .aspect-auto {
     aspect-ratio: auto;
   }
-
+  .h-20 {
+    height: 5rem;
+  }
   .h-28 {
     height: 7rem;
   }
-
   .h-3 {
     height: 0.75rem;
   }
-
   .h-5 {
     height: 1.25rem;
   }
-
-  .h-16 {
-    height: 4rem;
-  }
-
-  .h-20 {
-    height: 5rem;
-  }
-
   .h-\[100\%\] {
     height: 100%;
   }
-
   .h-\[15px\] {
     height: 15px;
   }
-
-  .h-\[18px\] {
-    height: 18px;
-  }
-
   .h-\[180px\] {
     height: 180px;
   }
-
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[20px\] {
     height: 20px;
   }
-
   .h-\[28px\] {
     height: 28px;
   }
-
   .h-\[32px\] {
     height: 32px;
   }
-
   .h-\[36px\] {
     height: 36px;
   }
-
   .h-\[38px\] {
     height: 38px;
   }
-
   .h-\[40px\] {
     height: 40px;
   }
-
   .h-\[445px\] {
     height: 445px;
   }
-
   .h-\[44px\] {
     height: 44px;
   }
-
   .h-\[56px\] {
     height: 56px;
   }
-
   .h-\[80\%\] {
     height: 80%;
   }
-
   .h-auto {
     height: auto;
   }
-
   .h-full {
     height: 100%;
   }
-
   .h-md {
     height: var(--spacing-md);
   }
-
-  .h-screen {
-    height: 100vh;
-  }
-
   .h-sm {
     height: var(--spacing-sm);
   }
-
   .h-small {
     height: var(--spacing-small);
   }
-
   .max-h-\[250px\] {
     max-height: 250px;
   }
-
   .max-h-\[45rem\] {
     max-height: 45rem;
   }
-
   .min-h-\[32px\] {
     min-height: 32px;
   }
-
-  .w-1\/2 {
-    width: 50%;
-  }
-
   .w-1\/3 {
     width: 33.333333%;
   }
-
   .w-28 {
     width: 7rem;
   }
-
   .w-5 {
     width: 1.25rem;
   }
-
   .w-96 {
     width: 24rem;
   }
-
   .w-\[14px\] {
     width: 14px;
   }
-
   .w-\[15px\] {
     width: 15px;
   }
-
   .w-\[18px\] {
     width: 18px;
   }
-
   .w-\[20px\] {
     width: 20px;
   }
-
   .w-\[28px\] {
     width: 28px;
   }
-
   .w-\[40px\] {
     width: 40px;
   }
-
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;
   }
-
-  .w-max {
-    width: -moz-max-content;
-    width: max-content;
-  }
-
   .w-full {
     width: 100%;
   }
-
   .w-md {
     width: var(--spacing-md);
   }
-
   .w-sm {
     width: var(--spacing-sm);
   }
-
   .w-small {
     width: var(--spacing-small);
   }
-
   .min-w-\[16px\] {
     min-width: 16px;
   }
-
   .min-w-\[32px\] {
     min-width: 32px;
   }
-
   .min-w-\[44px\] {
     min-width: 44px;
   }
-
   .max-w-2xl {
     max-width: 42rem;
   }
-
   .max-w-5xl {
     max-width: 64rem;
   }
-
+  .max-w-\[1600px\] {
+    max-width: 1600px;
+  }
   .max-w-\[200px\] {
     max-width: 200px;
   }
-
   .max-w-\[21rem\] {
     max-width: 21rem;
   }
-
-  .max-w-\[500px\] {
-    max-width: 500px;
-  }
-
-  .max-w-\[1600px\] {
-    max-width: 1600px;
-  }
-
   .max-w-full {
     max-width: 100%;
   }
-
   .flex-1 {
     flex: 1 1 0%;
   }
-
   .flex-\[25\] {
     flex: 25;
   }
-
   .flex-\[75\] {
     flex: 75;
   }
-
   .flex-shrink-0 {
     flex-shrink: 0;
   }
-
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-
   .origin-top-right {
     transform-origin: top right;
   }
-
   .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-
   .-rotate-90 {
     --tw-rotate: -90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-
   .rotate-180 {
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-
   .rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-
   .rotate-90 {
     --tw-rotate: 90deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-
   .transform {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-
   @keyframes slideUp {
     0% {
       transform: translateY(100%);
@@ -1041,875 +852,640 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       transform: translateY(0);
     }
   }
-
-  @keyframes slideRight {
-    0% {
-      transform: translateX(-100%);
-    }
-
-    100% {
-      transform: translateX(0);
-    }
-  }
-
   .animate-slideUp {
     animation: slideUp 0.3s ease-out forwards;
   }
-
   @keyframes spin {
     to {
       transform: rotate(360deg);
     }
   }
-
   .animate-spin {
     animation: spin 1s linear infinite;
   }
-
   .cursor-not-allowed {
     cursor: not-allowed;
   }
-
   .cursor-pointer {
     cursor: pointer;
   }
-
   .resize {
     resize: both;
   }
-
   .list-none {
     list-style-type: none;
   }
-
   .appearance-none {
     -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+       -moz-appearance: none;
+            appearance: none;
   }
-
   .grid-flow-row {
     grid-auto-flow: row;
   }
-
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-
-  .grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
   .grid-cols-none {
     grid-template-columns: none;
   }
-
   .flex-row {
     flex-direction: row;
   }
-
   .flex-col {
     flex-direction: column;
   }
-
   .flex-wrap {
     flex-wrap: wrap;
   }
-
   .flex-nowrap {
     flex-wrap: nowrap;
   }
-
-  .items-center {
-    align-items: center;
-  }
-
   .content-center {
     align-content: center;
   }
-
+  .items-center {
+    align-items: center;
+  }
   .justify-start {
     justify-content: flex-start;
   }
-
   .justify-end {
     justify-content: flex-end;
   }
-
   .justify-center {
     justify-content: center;
   }
-
   .justify-between {
     justify-content: space-between;
   }
-
   .gap-2 {
     gap: 0.5rem;
   }
-
   .gap-4 {
     gap: 1rem;
   }
-
   .gap-8 {
     gap: 2rem;
   }
-
   .gap-\[10px\] {
     gap: 10px;
   }
-
   .gap-\[12px\] {
     gap: 12px;
   }
-
   .gap-\[16px\] {
     gap: 16px;
   }
-
   .gap-\[6px\] {
     gap: 6px;
   }
-
   .gap-xxsmall {
     gap: var(--spacing-xxsmall);
   }
-
   .gap-x-1 {
     -moz-column-gap: 0.25rem;
-    column-gap: 0.25rem;
+         column-gap: 0.25rem;
   }
-
   .gap-x-2 {
     -moz-column-gap: 0.5rem;
-    column-gap: 0.5rem;
+         column-gap: 0.5rem;
   }
-
   .gap-x-2\.5 {
     -moz-column-gap: 0.625rem;
-    column-gap: 0.625rem;
+         column-gap: 0.625rem;
   }
-
-  .gap-x-6 {
-    -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
+  .gap-x-3 {
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
   }
-
-  .gap-x-3\.2rem {
-    -moz-column-gap: 3.2rem;
-    column-gap: 3.2rem;
-  }
-
   .gap-x-md {
     -moz-column-gap: var(--spacing-md);
-    column-gap: var(--spacing-md);
+         column-gap: var(--spacing-md);
   }
-
   .gap-x-sm {
     -moz-column-gap: var(--spacing-sm);
-    column-gap: var(--spacing-sm);
+         column-gap: var(--spacing-sm);
   }
-
-  .gap-x-9 {
-    column-gap: 2.4rem;
+  .gap-x-xs {
+    -moz-column-gap: var(--spacing-xs);
+         column-gap: var(--spacing-xs);
   }
-
   .gap-y-8 {
     row-gap: 2rem;
   }
-
-  .gap-y-9 {
-    row-gap: 2.4rem;
-  }
-
   .space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
-
   .space-x-3 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));
     margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
   }
-
   .space-y-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(1rem * var(--tw-space-y-reverse));
   }
-
   .overflow-auto {
     overflow: auto;
   }
-
   .overflow-hidden {
     overflow: hidden;
   }
-
   .overflow-y-auto {
     overflow-y: auto;
   }
-
   .whitespace-nowrap {
     white-space: nowrap;
   }
-
   .rounded-2 {
     border-radius: var(--shape-border-radius-2);
   }
-
   .rounded-3 {
     border-radius: var(--shape-border-radius-3);
   }
-
   .rounded-full {
     border-radius: 9999px;
   }
-
   .rounded-lg {
     border-radius: 0.5rem;
   }
-
   .border {
     border-width: 1px;
   }
-
   .border-0 {
     border-width: 0px;
   }
-
   .border-3 {
     border-width: var(--shape-border-width-3);
   }
-
   .border-\[1\.5px\] {
     border-width: 1.5px;
   }
-
   .border-b {
     border-bottom-width: 1px;
   }
-
   .border-r {
     border-right-width: 1px;
   }
-
   .border-t {
     border-top-width: 1px;
   }
-
   .border-solid {
     border-style: solid;
   }
-
   .border-none {
     border-style: none;
   }
-
   .border-\[\#ddd\] {
     --tw-border-opacity: 1;
     border-color: rgb(221 221 221 / var(--tw-border-opacity));
   }
-
   .border-black {
     --tw-border-opacity: 1;
     border-color: rgb(0 0 0 / var(--tw-border-opacity));
   }
-
   .border-brand-700 {
     border-color: var(--color-brand-700);
   }
-
   .border-gray-200 {
     --tw-border-opacity: 1;
     border-color: rgb(229 231 235 / var(--tw-border-opacity));
   }
-
   .border-gray-300 {
     --tw-border-opacity: 1;
     border-color: rgb(209 213 219 / var(--tw-border-opacity));
   }
-
   .border-neutral-200 {
     border-color: var(--color-neutral-200);
   }
-
   .border-neutral-300 {
     border-color: var(--color-neutral-300);
   }
-
   .border-neutral-400 {
     border-color: var(--color-neutral-400);
   }
-
-  .border-neutral-450 {
-    border-color: var(--color-neutral-450);
-  }
-
   .border-neutral-500 {
     border-color: var(--color-neutral-500);
   }
-
   .border-transparent {
     border-color: transparent;
   }
-
   .bg-background {
     background-color: var(--background-color);
   }
-
   .bg-black {
     --tw-bg-opacity: 1;
     background-color: rgb(0 0 0 / var(--tw-bg-opacity));
   }
-
   .bg-blue-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(239 246 255 / var(--tw-bg-opacity));
   }
-
   .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   }
-
   .bg-green-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(240 253 244 / var(--tw-bg-opacity));
   }
-
   .bg-neutral-200 {
     background-color: var(--color-neutral-200);
   }
-
   .bg-neutral-300 {
     background-color: var(--color-neutral-300);
   }
-
   .bg-neutral-400 {
     background-color: var(--color-neutral-400);
   }
-
   .bg-neutral-50 {
     background-color: var(--color-neutral-50);
   }
-
   .bg-red-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 242 242 / var(--tw-bg-opacity));
   }
-
   .bg-transparent {
     background-color: transparent;
   }
-
   .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
-
   .bg-yellow-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 252 232 / var(--tw-bg-opacity));
   }
-
   .bg-opacity-50 {
     --tw-bg-opacity: 0.5;
   }
-
   .bg-cover {
     background-size: cover;
   }
-
   .bg-no-repeat {
     background-repeat: no-repeat;
   }
-
   .fill-brand-300 {
     fill: var(--color-brand-300);
   }
-
   .fill-neutral-800 {
     fill: var(--color-neutral-800);
   }
-
   .stroke-brand-700 {
     stroke: var(--color-brand-700);
   }
-
-  .stroke-neutral-600 {
-    stroke: var(--color-neutral-600);
-  }
-
   .stroke-neutral-50 {
     stroke: var(--color-neutral-50);
   }
-
+  .stroke-neutral-600 {
+    stroke: var(--color-neutral-600);
+  }
   .stroke-1 {
     stroke-width: var(--shape-icon-stroke-1);
   }
-
   .object-cover {
     -o-object-fit: cover;
-    object-fit: cover;
+       object-fit: cover;
   }
-
   .object-center {
     -o-object-position: center;
-    object-position: center;
+       object-position: center;
   }
-
   .p-1 {
     padding: 0.25rem;
   }
-
   .p-1\.5 {
     padding: 0.375rem;
   }
-
+  .p-12 {
+    padding: 3rem;
+  }
   .p-2 {
     padding: 0.5rem;
   }
-
   .p-4 {
     padding: 1rem;
   }
-
-  .p-12 {
-    padding: 3rem;
-  }
-
   .p-\[14px\] {
     padding: 14px;
   }
-
   .p-sm {
     padding: var(--spacing-sm);
   }
-
   .p-xs {
     padding: var(--spacing-xs);
   }
-
   .p-xsmall {
     padding: var(--spacing-xsmall);
   }
-
   .px-1 {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
   }
-
   .px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
-
   .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
-
   .px-\[12px\] {
     padding-left: 12px;
     padding-right: 12px;
   }
-
   .px-md {
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-md);
   }
-
   .px-sm {
     padding-left: var(--spacing-sm);
     padding-right: var(--spacing-sm);
   }
-
   .px-xsmall {
     padding-left: var(--spacing-xsmall);
     padding-right: var(--spacing-xsmall);
   }
-
   .py-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
   }
-
   .py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
-
   .py-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-
   .py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
   }
-
-  .py-\[10px\] {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
   .py-md {
     padding-top: var(--spacing-md);
     padding-bottom: var(--spacing-md);
   }
-
   .py-sm {
     padding-top: var(--spacing-sm);
     padding-bottom: var(--spacing-sm);
   }
-
   .py-small {
     padding-top: var(--spacing-small);
     padding-bottom: var(--spacing-small);
   }
-
   .py-xs {
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
   }
-
   .py-xsmall {
     padding-top: var(--spacing-xsmall);
     padding-bottom: var(--spacing-xsmall);
   }
-
   .pb-2 {
     padding-bottom: 0.5rem;
   }
-
+  .pb-20 {
+    padding-bottom: 5rem;
+  }
+  .pb-24 {
+    padding-bottom: 6rem;
+  }
   .pb-2xl {
     padding-bottom: var(--spacing-2xl);
   }
-
   .pb-3 {
     padding-bottom: 0.75rem;
   }
-
   .pb-4 {
     padding-bottom: 1rem;
   }
-
   .pb-6 {
     padding-bottom: 1.5rem;
   }
-
   .pb-\[122\.22\%\] {
     padding-bottom: 122.22%;
   }
-
-  .pb-20 {
-    padding-bottom: 5rem;
-  }
-
-  .pb-24 {
-    padding-bottom: 2.4rem;
-  }
-
-  .pl-3 {
-    padding-left: 0.75rem;
-  }
-
   .pl-8 {
     padding-left: 2rem;
   }
-
-  .pl-24 {
-    padding-left: 6rem;
-  }
-
   .pr-2 {
     padding-right: 0.5rem;
   }
-
   .pr-5 {
     padding-right: 1.25rem;
   }
-
-  .pr-24 {
-    padding-right: 6rem;
-  }
-
   .pr-lg {
     padding-right: var(--spacing-lg);
   }
-
   .pt-16 {
     padding-top: 4rem;
   }
-
   .pt-\[15px\] {
     padding-top: 15px;
   }
-
   .pt-md {
     padding-top: var(--spacing-md);
   }
-
   .text-left {
     text-align: left;
   }
-
   .text-center {
     text-align: center;
   }
-
   .text-2xl {
     font-size: var(--font-2xl);
     line-height: var(--leading-loose);
   }
-
   .text-\[12px\] {
     font-size: 12px;
   }
-
   .text-\[14px\] {
     font-size: 14px;
   }
-
   .text-base {
     font-size: var(--font-md);
     line-height: var(--leading-snug);
   }
-
   .text-lg {
     font-size: var(--font-lg);
     line-height: var(--leading-normal);
   }
-
   .text-sm {
     font-size: var(--font-sm);
     line-height: var(--leading-tight);
   }
-
-  .leading-12 {
-    line-height: 2.5rem;
-  }
-
   .font-light {
     font-weight: var(--font-light);
   }
-
   .font-medium {
     font-weight: var(--font-medium);
   }
-
   .font-normal {
     font-weight: var(--font-normal);
   }
-
   .font-semibold {
     font-weight: var(--font-semibold);
   }
-
   .uppercase {
     text-transform: uppercase;
   }
-
   .capitalize {
     text-transform: capitalize;
   }
-
   .\!text-brand-700 {
     color: var(--color-brand-700) !important;
   }
-
   .text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));
   }
-
   .text-blue-400 {
     --tw-text-opacity: 1;
     color: rgb(96 165 250 / var(--tw-text-opacity));
   }
-
   .text-blue-700 {
     --tw-text-opacity: 1;
     color: rgb(29 78 216 / var(--tw-text-opacity));
   }
-
   .text-blue-800 {
     --tw-text-opacity: 1;
     color: rgb(30 64 175 / var(--tw-text-opacity));
   }
-
   .text-brand-300 {
     color: var(--color-brand-300);
   }
-
   .text-brand-600 {
     color: var(--color-brand-600);
   }
-
   .text-brand-700 {
     color: var(--color-brand-700);
   }
-
   .text-green-400 {
     --tw-text-opacity: 1;
     color: rgb(74 222 128 / var(--tw-text-opacity));
   }
-
   .text-green-500 {
     --tw-text-opacity: 1;
     color: rgb(34 197 94 / var(--tw-text-opacity));
   }
-
   .text-green-700 {
     --tw-text-opacity: 1;
     color: rgb(21 128 61 / var(--tw-text-opacity));
   }
-
   .text-green-800 {
     --tw-text-opacity: 1;
     color: rgb(22 101 52 / var(--tw-text-opacity));
   }
-
   .text-neutral-600 {
     color: var(--color-neutral-600);
   }
-
   .text-neutral-700 {
     color: var(--color-neutral-700);
   }
-
   .text-neutral-800 {
     color: var(--color-neutral-800);
   }
-
   .text-neutral-900 {
     color: var(--color-neutral-900);
   }
-
   .text-red-400 {
     --tw-text-opacity: 1;
     color: rgb(248 113 113 / var(--tw-text-opacity));
   }
-
   .text-red-700 {
     --tw-text-opacity: 1;
     color: rgb(185 28 28 / var(--tw-text-opacity));
   }
-
   .text-red-800 {
     --tw-text-opacity: 1;
     color: rgb(153 27 27 / var(--tw-text-opacity));
   }
-
   .text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
-
   .text-yellow-400 {
     --tw-text-opacity: 1;
     color: rgb(250 204 21 / var(--tw-text-opacity));
   }
-
   .text-yellow-700 {
     --tw-text-opacity: 1;
     color: rgb(161 98 7 / var(--tw-text-opacity));
   }
-
   .text-yellow-800 {
     --tw-text-opacity: 1;
     color: rgb(133 77 14 / var(--tw-text-opacity));
   }
-
   .underline {
     text-decoration-line: underline;
   }
-
   .line-through {
     text-decoration-line: line-through;
   }
-
   .no-underline {
     text-decoration-line: none;
   }
-
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
-
   .accent-neutral-800 {
     accent-color: var(--color-neutral-800);
   }
-
   .opacity-0 {
     opacity: 0;
   }
-
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
   .outline {
     outline-style: solid;
   }
-
   .outline-brand-700 {
     outline-color: var(--color-brand-700);
   }
-
   .outline-gray-200 {
     outline-color: #e5e7eb;
   }
-
   .outline-neutral-300 {
     outline-color: var(--color-neutral-300);
   }
-
   .outline-transparent {
     outline-color: transparent;
   }
-
   .ring-1 {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
-
   .ring-black {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
   }
-
   .ring-opacity-5 {
     --tw-ring-opacity: 0.05;
   }
-
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
-
   .\!filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
   }
-
   .filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
-
   .transition {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1917,127 +1493,96 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
-
   .transition-opacity {
     transition-property: opacity;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
-
   .ease-out {
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
-
   .first\:ml-0:first-child {
     margin-left: 0px;
   }
-
   .hover\:cursor-pointer:hover {
     cursor: pointer;
   }
-
   .hover\:border-none:hover {
     border-style: none;
   }
-
   .hover\:bg-green-100:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(220 252 231 / var(--tw-bg-opacity));
   }
-
   .hover\:bg-neutral-200:hover {
     background-color: var(--color-neutral-200);
   }
-
   .hover\:bg-transparent:hover {
     background-color: transparent;
   }
-
   .hover\:text-blue-600:hover {
     --tw-text-opacity: 1;
     color: rgb(37 99 235 / var(--tw-text-opacity));
   }
-
-  .hover\:text-brand-700:hover {
-    color: var(--color-brand-700);
-  }
-
   .hover\:text-neutral-900:hover {
     color: var(--color-neutral-900);
   }
-
   .hover\:underline:hover {
     text-decoration-line: underline;
   }
-
   .hover\:no-underline:hover {
     text-decoration-line: none;
   }
-
   .focus\:border-none:focus {
     border-style: none;
   }
-
   .focus\:bg-transparent:focus {
     background-color: transparent;
   }
-
   .focus\:no-underline:focus {
     text-decoration-line: none;
   }
-
   .focus\:outline-none:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
-
   .focus\:ring-0:focus {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
-
   .focus\:ring-2:focus {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   }
-
   .focus\:ring-green-600:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
   }
-
   .focus\:ring-offset-2:focus {
     --tw-ring-offset-width: 2px;
   }
-
   .focus\:ring-offset-green-50:focus {
     --tw-ring-offset-color: #f0fdf4;
   }
-
   .active\:border-none:active {
     border-style: none;
   }
-
   .active\:bg-transparent:active {
     background-color: transparent;
   }
-
   .active\:no-underline:active {
     text-decoration-line: none;
   }
-
   .active\:shadow-none:active {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
   .group:hover .group-hover\:opacity-100 {
     opacity: 1;
   }
-
   @media (min-width: 640px) {
     .sm\:flex {
       display: flex;
@@ -2065,38 +1610,38 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     }
   }
   @media (min-width: 768px) {
-    .md\:h-full {
-      height: 100%;
+    .md\:ml-6 {
+      margin-left: 1.5rem;
     }
   }
   @media (min-width: 768px) {
-    .md\:grid {
-      display: grid;
+    .md\:mt-0 {
+      margin-top: 0px;
     }
   }
   @media (min-width: 768px) {
-    .md\:ml-6 {
-      margin-left: 1.5rem;
+    .md\:flex {
+      display: flex;
     }
   }
   @media (min-width: 768px) {
-    .md\:mt-md {
-      margin-top: var(--spacing-md);
+    .md\:grid {
+      display: grid;
     }
   }
   @media (min-width: 768px) {
-    .md\:mt-4 {
-      margin-top: 1rem;
+    .md\:h-full {
+      height: 100%;
     }
   }
   @media (min-width: 768px) {
-    .md\:pl-24 {
-      padding-left: 6rem;
+    .md\:max-w-\[485px\] {
+      max-width: 485px;
     }
   }
   @media (min-width: 768px) {
-    .md\:flex {
-      display: flex;
+    .md\:max-w-\[500px\] {
+      max-width: 500px;
     }
   }
   @media (min-width: 768px) {
@@ -2115,13 +1660,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     }
   }
   @media (min-width: 768px) {
+    .md\:gap-x-4 {
+      -moz-column-gap: 0.8rem;
+           column-gap: 0.8rem;
+    }
     .md\:gap-x-9 {
-      column-gap: 2.4rem;
+      -moz-column-gap: 2.25rem;
+           column-gap: 2.25rem;
     }
   }
   @media (min-width: 768px) {
     .md\:gap-y-9 {
-      row-gap: 2.4rem;
+      row-gap: 2.25rem;
     }
   }
   @media (min-width: 768px) {
@@ -2131,23 +1681,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     }
   }
   @media (min-width: 768px) {
-    .md\:flex-1-0-100 {
-      flex: 1 0 100%;
-    }
-  }
-  @media (min-width: 768px) {
-    .md\:animate-slideRight {
-      animation: slideRight 0.3s ease-out forwards;
-    }
-  }
-  @media (min-width: 768px) {
-    .md\:max-w-\[485px\] {
-      max-width: 485px;
-    }
-  }
-  @media (min-width: 768px) {
-    .md\:max-w-\[500px\] {
-      max-width: 500px;
+    .md\:pl-24 {
+      padding-left: 6rem;
     }
   }
   @media (min-width: 1024px) {
@@ -2170,17 +1705,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       max-width: 80rem;
     }
   }
-  @media (min-width: 1024px) {
-    .lg\:max-w-full {
-      max-width: 100%;
-    }
-  }
   @media (min-width: 1024px) {
     .lg\:px-8 {
       padding-left: 2rem;
       padding-right: 2rem;
     }
   }
+  @media (min-width: 1024px) {
+    .lg\:px-\[48px\] {
+      padding-left: 48px;
+      padding-right: 48px;
+    }
+  }
   @media (min-width: 1024px) {
     .lg\:px-big {
       padding-left: var(--spacing-big);
@@ -2193,22 +1729,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 10px;
     }
   }
-  @media (min-width: 1024px) {
-    .lg\:px-\[48px\] {
-      padding-left: 48px;
-      padding-right: 48px;
-    }
-  }
   @media (min-width: 1280px) {
     .xl\:gap-x-4 {
       -moz-column-gap: 1rem;
-      column-gap: 1rem;
+           column-gap: 1rem;
     }
   }
   @media (min-width: 1280px) {
     .xl\:gap-x-6 {
       -moz-column-gap: 1.5rem;
-      column-gap: 1.5rem;
+           column-gap: 1.5rem;
     }
   }
   @media (prefers-color-scheme: dark) {
@@ -2227,7 +1757,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   --color-neutral-200: #f5f5f5;
   --color-neutral-300: #e8e8e8;
   --color-neutral-400: #d6d6d6;
-  --color-neutral-450: #dddddd;
   --color-neutral-500: #b8b8b8;
   --color-neutral-600: #8f8f8f;
   --color-neutral-700: #666;
@@ -2256,43 +1785,60 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   --shape-border-width-3: 2px;
   --shape-border-width-4: 4px;
   --type-base-font-family: 'Roboto', sans-serif;
-  --type-display-1-font: normal normal 300 6rem/7.2rem var(--type-base-font-family);
+  --type-display-1-font: normal normal 300 6rem/7.2rem
+    var(--type-base-font-family);
   --type-display-1-letter-spacing: 0.04em;
-  --type-display-2-font: normal normal 300 4.8rem/5.6rem var(--type-base-font-family);
+  --type-display-2-font: normal normal 300 4.8rem/5.6rem
+    var(--type-base-font-family);
   --type-display-2-letter-spacing: 0.04em;
-  --type-display-3-font: normal normal 300 3.4rem/4rem var(--type-base-font-family);
+  --type-display-3-font: normal normal 300 3.4rem/4rem
+    var(--type-base-font-family);
   --type-display-3-letter-spacing: 0.04em;
-  --type-headline-1-font: normal normal 400 2.4rem/3.2rem var(--type-base-font-family);
+  --type-headline-1-font: normal normal 400 2.4rem/3.2rem
+    var(--type-base-font-family);
   --type-headline-1-letter-spacing: 0.04em;
-  --type-headline-2-default-font: normal normal 300 2rem/2.4rem var(--type-base-font-family);
+  --type-headline-2-default-font: normal normal 300 2rem/2.4rem
+    var(--type-base-font-family);
   --type-headline-2-default-letter-spacing: 0.04em;
-  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem var(--type-base-font-family);
+  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem
+    var(--type-base-font-family);
   --type-headline-2-strong-letter-spacing: 0.04em;
-  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem var(--type-base-font-family);
+  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-body-1-default-letter-spacing: 0.04em;
-  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
+  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-body-1-strong-letter-spacing: 0.04em;
-  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
+  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-body-1-emphasized-letter-spacing: 0.04em;
-  --type-body-2-default-font: normal normal 300 1.4rem/2rem var(--type-base-font-family);
+  --type-body-2-default-font: normal normal 300 1.4rem/2rem
+    var(--type-base-font-family);
   --type-body-2-default-letter-spacing: 0.04em;
-  --type-body-2-strong-font: normal normal 400 1.4rem/2rem var(--type-base-font-family);
+  --type-body-2-strong-font: normal normal 400 1.4rem/2rem
+    var(--type-base-font-family);
   --type-body-2-strong-letter-spacing: 0.04em;
-  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
+  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem
+    var(--type-base-font-family);
   --type-body-2-emphasized-letter-spacing: 0.04em;
-  --type-button-1-font: normal normal 400 2rem/2.6rem var(--type-base-font-family);
+  --type-button-1-font: normal normal 400 2rem/2.6rem
+    var(--type-base-font-family);
   --type-button-1-letter-spacing: 0.08em;
-  --type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
+  --type-button-2-font: normal normal 400 1.6rem/2.4rem
+    var(--type-base-font-family);
   --type-button-2-letter-spacing: 0.08em;
-  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
+  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem
+    var(--type-base-font-family);
   --type-details-caption-1-letter-spacing: 0.08em;
-  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem var(--type-base-font-family);
+  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem
+    var(--type-base-font-family);
   --type-details-caption-2-letter-spacing: 0.08em;
-  --type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family);
+  --type-details-overline-font: normal normal 400 1.2rem/2rem
+    var(--type-base-font-family);
   --type-details-overline-letter-spacing: 0.16em;
   /* Additional tokens */
   --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono',
-  monospace;
+    monospace;
   --background-color: var(--color-neutral-50);
   --nav-height: 6.4rem;
   --spacing-xxsmall: 4px;
@@ -2381,7 +1927,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 
 .font-display-3 {
   font: var(--type-display-3-font);
-  letter-spacing: var(--type-display-3-letter-spacing);
+  letter-spacing: var(---type-display-3-letter-spacing);
 }
 
 .font-headline-1 {
@@ -2464,16 +2010,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   display: block;
 }
 
-.none-display {
-  display: none;
-}
-
-.ib-display {
-  display: inline-block;
-}
-
 .loading-spinner-on-mobile {
-  min-height: 50vh;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .ds-sdk-product-item__product-swatch-item .swatch-color-port-royale {
@@ -2490,100 +2031,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   height: 100%;
 }
 
-.first\:ml-0:first-child {
-  margin-left: 0px;
-}
-
-.hover\:cursor-pointer:hover {
-  cursor: pointer;
-}
-
-.hover\:border-none:hover {
-  border-style: none;
-}
-
-.hover\:bg-green-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-200:hover {
-  background-color: var(--color-neutral-200);
-}
-
-.hover\:bg-transparent:hover {
-  background-color: transparent;
-}
-
-.hover\:text-blue-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
-.hover\:text-brand-700:hover {
-  color: var(--color-brand-700);
-  font-size: var(--font-sm);
-  font-weight: var(--font-medium);
-}
-
-.hover\:text-neutral-900:hover {
-  color: var(--color-neutral-900);
-}
-
-.hover\:underline:hover {
-  text-decoration-line: underline;
-}
-
-.hover\:no-underline:hover {
-  text-decoration-line: none;
-}
-
-.focus\:border-none:focus {
-  border-style: none;
-}
-
-.focus\:bg-transparent:focus {
-  background-color: transparent;
-}
-
-.focus\:no-underline:focus {
-  text-decoration-line: none;
-}
-
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-green-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
-.focus\:ring-offset-green-50:focus {
-  --tw-ring-offset-color: #f0fdf4;
-}
-
-.active\:border-none:active {
-  border-style: none;
-}
-
 .add-to-cart-overlay .status-container {
   background-color: var(--color-neutral-50);
   color: var(--color-brand-700);
@@ -2643,15 +2090,3 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 .ds-sdk-product-image {
   transition: background-image .2s cubic-bezier(0.455, 0.03, 0.515, 0.955) .2s;
 }
-
-@media (min-width: 1280px) {
-  .xl\:gap-x-4 {
-    -moz-column-gap: 1rem;
-    column-gap: 1rem;
-  }
-
-  .xl\:gap-x-6 {
-    -moz-column-gap: 1.5rem;
-    column-gap: 1.5rem;
-  }
-}

From 24a295da178564f77e8237f5e9ae3b05b5e4084e Mon Sep 17 00:00:00 2001
From: Raul Hudea <rhudea@adobe.com>
Date: Thu, 9 Jan 2025 15:23:51 +0200
Subject: [PATCH 159/160] Add size sorting

---
 src/components/Facets/Facets.tsx | 49 ++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/components/Facets/Facets.tsx b/src/components/Facets/Facets.tsx
index 0aafda0d..a080c183 100644
--- a/src/components/Facets/Facets.tsx
+++ b/src/components/Facets/Facets.tsx
@@ -27,6 +27,35 @@ interface FacetsProps {
   displayFilter?: () => void;
 }
 
+const sizeFacetsOrder = [
+  'A', 'AB', 'B', 'C', 'CD', 'D', 'DD', 'E', 'EF', 'F', 'GH', 'IJ',
+  'NO SIZE', 'NB8', 'NS', 'ONE SIZE',
+  'PPET', 'PTSM', 'PML', 'Q', 'Q+', 'QT',
+  'XS', 'X SMALL/SMALL', 'XS SHORT',
+  'S', 'SMALL TALL', 'S/5', 'S SHORT', 'SSHORT', 'S/D-DD', 'S/M', 'ST',
+  'M', 'M/6', 'M SHORT', 'MSHORT', 'M PLUS', 'MEDIUM TALL', 'M/T', 'MT', 'M/D-DD', 'M/DD', 'M/L', 'M-L',
+  'L', 'L/7', 'L SHORT', 'LT', 'TL', 'T', 'L PLUS', 'L-X', 'Large-Extra', 'L/D-DD', 'L/DD', 'L/XL',
+  'XL', 'XL/8', 'XL PLUS', 'XL/D-DD', 'XL/1X', 'XL/2X', 'XL SHORT', 'XLT',
+  '0-3', '0M-6M', '0M-6M', '0M-6M', '0-6M',
+  '1', '1X', '1PLUS', '1-2', '1/2X', '1X-3X', '1.5', '1X/2X', '1XT/2XT',
+  '2', '2-4', '2.5', '2T', '2X', '2XB', '2XL', 'XXL', 'XXLP', 'XXL/9', '2XL SHORT', '2XT', '2XLT', '2PLUS', '2XL PLUS', '2/3', '2X/3X', '2/3T',
+  '3', '3-6', '3P', '3MTH', '3T', '3.5', '3XL', 'XXXL/10', '3XB', '3XT', '3XT/4XT', '3X', '3PLUS', '3/4X', '3X/4X',
+  '4T', '4', '4.5', '4X', '4XB', '4XL', '4XL TAL', '4XT', '4/5', '4-5P', '4/5T', '4X-6X', '4X-7X',
+  '5', '5X', '5XL', '5XT', '5.5', '5/6', '5-6 1/2', '5/6X', '5X/6X', '5-7', '5-9',
+  '6', '6MTH', '6/6X', '6X', '6XL', '6XLT', '6PLUS', '6.5', '6/7', '6-7 1/2', '6-9', '6-9 MONTHS', '6-10', '6-12', '6-12M',
+  '7', '7XL', '7.5', '7-8', '7/8', '7-8 1/2', '7-9', '7 1/2-9',
+  '8', '8XL', '8.5', '8/9', '8-10', '8-12',
+  '9', '9MTH', '9XL', '9X', '9.5', '9-10', '9-11', '9-11_1', '9-12', '09/12/19',
+  '10', '10X', '10XL', '10.5', '10/11', '10-12', '10/12', '10-13', '10/13/19', '10-14', '10-15',
+  '11', '11.5', '11-12', '11-13',
+  '12', '12MTH', '12.5', '12/13', '12-14', '12/14', '12/14/19', '12-18M', '12-24', '12-24M',
+  '13', '13-1', '13.5', '14', '14W', '14/16', '15', '16', '16W', '16-18', '18', '18W', '18MTH', '18M-24M',
+  '20', '20W', '22', '22W', '24', '24W', '24MTH', '26', '26W', '28', '28W',
+  '30', '30W', '32', '34', '34A', '36', '38', '40', '42', '50',
+  'YS', 'YM', 'YL', 'YXL',
+  'IPHONE 11', 'IPHONE11PM', 'IPhone11PR', 'IPHONE 12', 'IPHONE12MI', 'IPHONE12PM',
+];
+
 export const scrollFilter = (
   event: any,
   displayFunction: (() => void) | undefined,
@@ -134,6 +163,26 @@ export const Facets: FunctionComponent<FacetsProps> = ({
               </div>
               {searchFacetsSliced?.map((facet, index) => {
                 const bucketType = facet?.buckets[0]?.__typename;
+                if (facet?.attribute === 'pim_sku_size_filter') {
+                    facet?.buckets.sort((a, b) => {
+                      const indexA = sizeFacetsOrder.indexOf(a.title);
+                      const indexB = sizeFacetsOrder.indexOf(b.title);
+
+                      if (indexA !== -1 && indexB !== -1) {
+                        return indexA - indexB;
+                      }
+
+                      if (indexA !== -1) {
+                        return -1;
+                      }
+
+                      if (indexB !== -1) {
+                        return 1;
+                      }
+
+                      return a.title.localeCompare(b.title);
+                    });
+                }
                 switch (bucketType) {
                   case 'ScalarBucket':
                     return (

From da6ecdd45fc2eccc9664478ea033cd2168371cd5 Mon Sep 17 00:00:00 2001
From: Tiffany Pecaud <pecaud.tiffany.external@amersports.com>
Date: Mon, 13 Jan 2025 15:15:45 +0100
Subject: [PATCH 160/160] WAF-775 - Search result page title

---
 src/containers/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 3d63078b..80c5b01e 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -77,7 +77,7 @@ export const App: FunctionComponent = () => {
                   <div
                       className="product-list-page-header flex flex-col gap-4 justify-center items-center h-[180px] lg:h-[248px]">
                     <h1 className="text-center capitalize">
-                  {searchCtx.phrase}
+                  {searchCtx.phrase} | Wilson Sporting Goods
                 </h1>
               </div>
             )}