@asantemedia-org/leybold-design-system 1.0.19 → 1.0.21

package/dist/index.esm.js

@@ -1,7 +1,8 @@
 import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe, faXmark as faXmark$1 } from '@fortawesome/free-solid-svg-icons';
 import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
+import { faChevronRight as faChevronRight$1, faArrowUpRightFromSquare as faArrowUpRightFromSquare$1 } from '@fortawesome/pro-solid-svg-icons';
 import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
 
 function _extends() {
@@ -53,7 +54,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var styles$g = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--default":"Button-module__button--default___MDa35","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--solid-red":"Button-module__button--solid-red___YPpnL","button--solid-grey":"Button-module__button--solid-grey___oRbEy","button--solid-black":"Button-module__button--solid-black___1Ma5K","button--solid-white":"Button-module__button--solid-white___bE-Z0","button--outlined-red":"Button-module__button--outlined-red___cgZXa","button--outlined-grey":"Button-module__button--outlined-grey___xWGbB","button--outlined-black":"Button-module__button--outlined-black___qfX5o","button--outlined-white":"Button-module__button--outlined-white___QLXNP","button--link-text":"Button-module__button--link-text___R2kun","button__icon":"Button-module__button__icon___hlcHo","button--link-text-alt":"Button-module__button--link-text-alt___1p7wH","button--external-link":"Button-module__button--external-link___Mhxuk","button--carousel-arrow-left":"Button-module__button--carousel-arrow-left___Wx-Jo","button--carousel-arrow-right":"Button-module__button--carousel-arrow-right___3ZtgT","button__icon__default":"Button-module__button__icon__default___0qlF1","button__icon__hover":"Button-module__button__icon__hover___3xPGT","button--extra-small":"Button-module__button--extra-small___R0QTM","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5","button__icon--left":"Button-module__button__icon--left___wMCeH","button__icon--right":"Button-module__button__icon--right___-pGHl"};
+var styles$k = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--solid-grey":"Button-module__button--solid-grey___oRbEy","button--solid-black":"Button-module__button--solid-black___1Ma5K","button--solid-white":"Button-module__button--solid-white___bE-Z0","button--outlined-grey":"Button-module__button--outlined-grey___xWGbB","button--outlined-black":"Button-module__button--outlined-black___qfX5o","button--outlined-white":"Button-module__button--outlined-white___QLXNP","button--link-text":"Button-module__button--link-text___R2kun","button__icon":"Button-module__button__icon___hlcHo","button--link-text-alt":"Button-module__button--link-text-alt___1p7wH","button--external-link":"Button-module__button--external-link___Mhxuk","button--carousel-arrow-left":"Button-module__button--carousel-arrow-left___Wx-Jo","button--carousel-arrow-right":"Button-module__button--carousel-arrow-right___3ZtgT","button__icon__default":"Button-module__button__icon__default___0qlF1","button__icon__hover":"Button-module__button__icon__hover___3xPGT","button--extra-small":"Button-module__button--extra-small___R0QTM","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5","button__icon--left":"Button-module__button__icon--left___wMCeH","button__icon--right":"Button-module__button__icon--right___-pGHl"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -180,8 +181,6 @@ var getDefaultIcon = function (variant) {
  */
 var mapVariantToClass = function (variant) {
   switch (variant) {
-    case "outline":
-      return "outlined-red";
     case "text":
       return "link-text";
     default:
@@ -219,8 +218,8 @@ var Button = function (_a) {
   var isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
   var isCarouselLeft = variant === "carousel-arrow-left";
   var isCarouselRight = variant === "carousel-arrow-right";
-  var buttonClasses = classNames(styles$g.button, styles$g["button--".concat(cssVariant)], styles$g["button--".concat(size)], (_b = {}, _b[styles$g["button--disabled"]] = disabled, _b), className);
-  var iconClasses = classNames(styles$g.button__icon, styles$g["button__icon--".concat(iconPosition)]);
+  var buttonClasses = classNames(styles$k.button, styles$k["button--".concat(cssVariant)], styles$k["button--".concat(size)], (_b = {}, _b[styles$k["button--disabled"]] = disabled, _b), className);
+  var iconClasses = classNames(styles$k.button__icon, styles$k["button__icon--".concat(iconPosition)]);
   // Generate accessible label for icon-only buttons
   var accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
   return /*#__PURE__*/React.createElement("button", _extends({
@@ -234,24 +233,24 @@ var Button = function (_a) {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeft,
-    className: styles$g.button__icon__default
+    className: styles$k.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeftLong,
-    className: styles$g.button__icon__hover
+    className: styles$k.button__icon__hover
   })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight,
-    className: styles$g.button__icon__default
+    className: styles$k.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRightLong,
-    className: styles$g.button__icon__hover
+    className: styles$k.button__icon__hover
   })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, iconElement));
 };
 
-var styles$f = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Footer-module__footer--mobile___9HQC-","footer__container":"Footer-module__footer__container___ohvnm","footer__links":"Footer-module__footer__links___DdVK8","footer__linkGroup":"Footer-module__footer__linkGroup___1B7JA","footer__linkList":"Footer-module__footer__linkList___j-DWF","footer__linkHeading":"Footer-module__footer__linkHeading___LtE6X","footer__link":"Footer-module__footer__link___G5HPW","footer__cta":"Footer-module__footer__cta___MRJLr","footer__socialIcons":"Footer-module__footer__socialIcons___j0aRp","footer__socialIcon":"Footer-module__footer__socialIcon___1uVTm","footer__countrySelector":"Footer-module__footer__countrySelector___pVtN5","footer__bottom":"Footer-module__footer__bottom___77bPL","footer__bottomLeft":"Footer-module__footer__bottomLeft___tlst1","footer__bottomLinks":"Footer-module__footer__bottomLinks___s22h7","footer__bottomLink":"Footer-module__footer__bottomLink___SLzwY","footer__copyright":"Footer-module__footer__copyright___4bZOF","footer__brandSection":"Footer-module__footer__brandSection___BBr5f","footer__logo":"Footer-module__footer__logo___mv-9M","footer__leftCol":"Footer-module__footer__leftCol___vmKNN","footer__motto":"Footer-module__footer__motto___QtB2m","footer__main":"Footer-module__footer__main___NSU9d","footer__badge":"Footer-module__footer__badge___faejb","footer__badgeIcon":"Footer-module__footer__badgeIcon___xJ519","footer__badgeText":"Footer-module__footer__badgeText___imXgG","footer__linkText":"Footer-module__footer__linkText___Gc18Z","footer__linkIcon":"Footer-module__footer__linkIcon___IZzJM","footer__countrySelectorIcon":"Footer-module__footer__countrySelectorIcon___hhEd4"};
+var styles$j = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Footer-module__footer--mobile___9HQC-","footer__container":"Footer-module__footer__container___ohvnm","footer__links":"Footer-module__footer__links___DdVK8","footer__linkGroup":"Footer-module__footer__linkGroup___1B7JA","footer__linkList":"Footer-module__footer__linkList___j-DWF","footer__linkHeading":"Footer-module__footer__linkHeading___LtE6X","footer__link":"Footer-module__footer__link___G5HPW","footer__cta":"Footer-module__footer__cta___MRJLr","footer__socialIcons":"Footer-module__footer__socialIcons___j0aRp","footer__socialIcon":"Footer-module__footer__socialIcon___1uVTm","footer__countrySelector":"Footer-module__footer__countrySelector___pVtN5","footer__bottom":"Footer-module__footer__bottom___77bPL","footer__bottomLeft":"Footer-module__footer__bottomLeft___tlst1","footer__bottomLinks":"Footer-module__footer__bottomLinks___s22h7","footer__bottomLink":"Footer-module__footer__bottomLink___SLzwY","footer__copyright":"Footer-module__footer__copyright___4bZOF","footer__brandSection":"Footer-module__footer__brandSection___BBr5f","footer__logo":"Footer-module__footer__logo___mv-9M","footer__leftCol":"Footer-module__footer__leftCol___vmKNN","footer__motto":"Footer-module__footer__motto___QtB2m","footer__main":"Footer-module__footer__main___NSU9d","footer__badge":"Footer-module__footer__badge___faejb","footer__badgeIcon":"Footer-module__footer__badgeIcon___xJ519","footer__badgeText":"Footer-module__footer__badgeText___imXgG","footer__linkText":"Footer-module__footer__linkText___Gc18Z","footer__linkIcon":"Footer-module__footer__linkIcon___IZzJM","footer__countrySelectorIcon":"Footer-module__footer__countrySelectorIcon___hhEd4"};
 
 /**
  * External link icon (↗) for footer links that open in new tabs
@@ -324,7 +323,7 @@ var FooterLink = function (_a) {
     className = _a.className,
     _b = _a.variant,
     variant = _b === void 0 ? 'default' : _b;
-  var baseClass = variant === 'bottom' ? styles$f.footer__bottomLink : styles$f.footer__link;
+  var baseClass = variant === 'bottom' ? styles$j.footer__bottomLink : styles$j.footer__link;
   var linkClasses = classNames(baseClass, className);
   var handleClick = function (e) {
     if (item.onClick) {
@@ -340,9 +339,9 @@ var FooterLink = function (_a) {
     target: '_blank',
     rel: 'noopener noreferrer'
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles$f.footer__linkText
+    className: styles$j.footer__linkText
   }, item.label), item.external && /*#__PURE__*/React.createElement("span", {
-    className: styles$f.footer__linkIcon
+    className: styles$j.footer__linkIcon
   }, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
     size: 15
   })));
@@ -353,11 +352,11 @@ var FooterLinkGroup = function (_a) {
     className = _a.className,
     children = _a.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$f.footer__linkGroup, className)
+    className: classNames(styles$j.footer__linkGroup, className)
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$f.footer__linkHeading
+    className: styles$j.footer__linkHeading
   }, heading), /*#__PURE__*/React.createElement("ul", {
-    className: styles$f.footer__linkList
+    className: styles$j.footer__linkList
   }, links.map(function (link, index) {
     return /*#__PURE__*/React.createElement("li", {
       key: index
@@ -370,12 +369,12 @@ var FooterSocialIcons = function (_a) {
   var links = _a.links,
     className = _a.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$f.footer__socialIcons, className)
+    className: classNames(styles$j.footer__socialIcons, className)
   }, links.map(function (link, index) {
     return /*#__PURE__*/React.createElement("a", {
       key: index,
       href: link.href,
-      className: styles$f.footer__socialIcon,
+      className: styles$j.footer__socialIcon,
       "aria-label": link.ariaLabel,
       target: "_blank",
       rel: "noopener noreferrer"
@@ -387,7 +386,7 @@ var FooterSocialIcons = function (_a) {
 var FooterSocialIcon = function (_a) {
   var platform = _a.platform,
     className = _a.className;
-  var iconClasses = classNames(styles$f.footer__socialIcon, className);
+  var iconClasses = classNames(styles$j.footer__socialIcon, className);
   return /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(SocialIconComponent, {
@@ -400,11 +399,11 @@ var FooterBottom = function (_a) {
     countrySelector = _a.countrySelector,
     className = _a.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$f.footer__bottom, className)
+    className: classNames(styles$j.footer__bottom, className)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.footer__bottomLeft
+    className: styles$j.footer__bottomLeft
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.footer__bottomLinks
+    className: styles$j.footer__bottomLinks
   }, links.map(function (link, index) {
     return /*#__PURE__*/React.createElement(FooterLink, {
       key: index,
@@ -412,12 +411,12 @@ var FooterBottom = function (_a) {
       variant: "bottom"
     });
   })), /*#__PURE__*/React.createElement("p", {
-    className: styles$f.footer__copyright
+    className: styles$j.footer__copyright
   }, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
     href: countrySelector.href || '#',
-    className: styles$f.footer__countrySelector
+    className: styles$j.footer__countrySelector
   }, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
-    className: styles$f.footer__countrySelectorIcon
+    className: styles$j.footer__countrySelectorIcon
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faGlobe
   })), countrySelector.label));
@@ -450,13 +449,13 @@ var Footer = function (_a) {
     countrySelector = _a.countrySelector,
     className = _a.className;
   var isMobile = variant === 'mobile';
-  var footerClasses = classNames(styles$f.footer, isMobile && styles$f['footer--mobile'], className);
+  var footerClasses = classNames(styles$j.footer, isMobile && styles$j['footer--mobile'], className);
   var LogoWrapper = logo.href ? 'a' : 'div';
   var logoProps = logo.href ? {
     href: logo.href,
-    className: styles$f.footer__logo
+    className: styles$j.footer__logo
   } : {
-    className: styles$f.footer__logo
+    className: styles$j.footer__logo
   };
   // Logo + Motto + Badge component (used in both layouts)
   var LogoSection = function () {
@@ -464,17 +463,17 @@ var Footer = function (_a) {
       src: logo.src,
       alt: logo.alt
     })), /*#__PURE__*/React.createElement("div", {
-      className: styles$f.footer__leftCol
+      className: styles$j.footer__leftCol
     }, /*#__PURE__*/React.createElement("h2", {
-      className: styles$f.footer__motto
+      className: styles$j.footer__motto
     }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
-      className: styles$f.footer__badge
+      className: styles$j.footer__badge
     }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
-      className: styles$f.footer__badgeIcon
+      className: styles$j.footer__badgeIcon
     }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
       size: 14
     })), /*#__PURE__*/React.createElement("span", {
-      className: styles$f.footer__badgeText
+      className: styles$j.footer__badgeText
     }, atlasCopcoBadge.text))));
   };
   // Mobile layout: Links at top, logo/motto at bottom
@@ -482,9 +481,9 @@ var Footer = function (_a) {
     return /*#__PURE__*/React.createElement("footer", {
       className: footerClasses
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$f.footer__container
+      className: styles$j.footer__container
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$f.footer__links
+      className: styles$j.footer__links
     }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
       heading: quickLinksHeading,
       links: quickLinks
@@ -492,7 +491,7 @@ var Footer = function (_a) {
       heading: contactHeading,
       links: contactLinks
     })), contactFormButton && /*#__PURE__*/React.createElement("div", {
-      className: styles$f.footer__cta
+      className: styles$j.footer__cta
     }, /*#__PURE__*/React.createElement("a", {
       href: contactFormButton.href,
       style: {
@@ -500,7 +499,7 @@ var Footer = function (_a) {
         width: '100%'
       }
     }, /*#__PURE__*/React.createElement(Button, {
-      variant: "solid-red",
+      variant: "primary",
       style: {
         width: '100%'
       }
@@ -511,33 +510,33 @@ var Footer = function (_a) {
       copyright: copyright,
       countrySelector: countrySelector
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$f.footer__brandSection
+      className: styles$j.footer__brandSection
     }, /*#__PURE__*/React.createElement(LogoSection, null))));
   }
   // Desktop layout: Logo at top, 3-column main content
   return /*#__PURE__*/React.createElement("footer", {
     className: footerClasses
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.footer__container
+    className: styles$j.footer__container
   }, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
     src: logo.src,
     alt: logo.alt
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$f.footer__main
+    className: styles$j.footer__main
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.footer__leftCol
+    className: styles$j.footer__leftCol
   }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$f.footer__motto
+    className: styles$j.footer__motto
   }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
-    className: styles$f.footer__badge
+    className: styles$j.footer__badge
   }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
-    className: styles$f.footer__badgeIcon
+    className: styles$j.footer__badgeIcon
   }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
     size: 14
   })), /*#__PURE__*/React.createElement("span", {
-    className: styles$f.footer__badgeText
+    className: styles$j.footer__badgeText
   }, atlasCopcoBadge.text))), /*#__PURE__*/React.createElement("div", {
-    className: styles$f.footer__links
+    className: styles$j.footer__links
   }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
     heading: quickLinksHeading,
     links: quickLinks
@@ -553,7 +552,7 @@ var Footer = function (_a) {
   })));
 };
 
-var styles$e = {"pagination":"Pagination-module__pagination___Kih79","paginationList":"Pagination-module__paginationList___-lZpm","paginationItem":"Pagination-module__paginationItem___VsGFa","pageButton":"Pagination-module__pageButton___b6UNF","pageButtonActive":"Pagination-module__pageButtonActive___D9m18","navButton":"Pagination-module__navButton___ZCIai","navIcon":"Pagination-module__navIcon___-BVJ3","navButton--previous":"Pagination-module__navButton--previous___Cy5TE","navButton--next":"Pagination-module__navButton--next___kTmgK","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
+var styles$i = {"pagination":"Pagination-module__pagination___Kih79","dividerLine":"Pagination-module__dividerLine___85LAX","paginationList":"Pagination-module__paginationList___-lZpm","paginationItem":"Pagination-module__paginationItem___VsGFa","pageButton":"Pagination-module__pageButton___b6UNF","pageButtonActive":"Pagination-module__pageButtonActive___D9m18","navButton":"Pagination-module__navButton___ZCIai","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","navIcon":"Pagination-module__navIcon___-BVJ3","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
 
 var PaginationItem = function (_a) {
   var page = _a.page,
@@ -572,12 +571,12 @@ var PaginationItem = function (_a) {
     }
   };
   return /*#__PURE__*/React.createElement("li", {
-    className: styles$e.paginationItem
+    className: styles$i.paginationItem
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    className: "".concat(styles$e.pageButton, " ").concat(isActive ? styles$e.pageButtonActive : "", " ").concat(className || ""),
+    className: "".concat(styles$i.pageButton, " ").concat(isActive ? styles$i.pageButtonActive : "", " ").concat(className || ""),
     "aria-current": isActive ? "page" : undefined,
     "aria-label": "Page ".concat(page),
     disabled: isActive,
@@ -601,53 +600,29 @@ var PaginationButton = function (_a) {
     }
   };
   return /*#__PURE__*/React.createElement("li", {
-    className: styles$e.paginationItem
+    className: styles$i.paginationItem
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
     onKeyDown: handleKeyDown,
     disabled: disabled,
-    className: "".concat(styles$e.navButton, " ").concat(styles$e["navButton--".concat(direction)], " ").concat(disabled ? styles$e.navButtonDisabled : "", " ").concat(className || ""),
+    className: "".concat(styles$i.navButton, " ").concat(styles$i["navButton--".concat(direction)], " ").concat(disabled ? styles$i.navButtonDisabled : "", " ").concat(className || ""),
     "aria-label": ariaLabel || label,
     tabIndex: disabled ? -1 : 0
-  }, direction === "previous" && /*#__PURE__*/React.createElement("svg", {
-    className: styles$e.navIcon,
-    width: "8",
-    height: "12",
-    viewBox: "0 0 8 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+  }, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faChevronRight$1,
+    className: styles$i.navIcon,
     "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6 10L2 6L6 2",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })), /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement("svg", {
-    className: styles$e.navIcon,
-    width: "8",
-    height: "12",
-    viewBox: "0 0 8 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M2 2L6 6L2 10",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }))));
+  })));
 };
 
 var PaginationEllipsis = function (_a) {
   var className = _a.className;
   return /*#__PURE__*/React.createElement("li", {
-    className: "".concat(styles$e.paginationItem, " ").concat(styles$e.ellipsis),
+    className: "".concat(styles$i.paginationItem, " ").concat(styles$i.ellipsis),
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(styles$e.ellipsisText, " ").concat(className || "")
+    className: "".concat(styles$i.ellipsisText, " ").concat(className || "")
   }, "..."));
 };
 
@@ -732,11 +707,13 @@ var Pagination = function (_a) {
     return null;
   }
   return /*#__PURE__*/React.createElement("nav", {
-    className: "".concat(styles$e.pagination, " ").concat(className || ""),
+    className: "".concat(styles$i.pagination, " ").concat(className || ""),
     "aria-label": ariaLabel,
     role: "navigation"
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$e.paginationList
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$i.dividerLine
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: styles$i.paginationList
   }, showPrevious && /*#__PURE__*/React.createElement(PaginationButton, {
     label: previousLabel,
     disabled: currentPage === 1,
@@ -764,9 +741,9 @@ var Pagination = function (_a) {
   })));
 };
 
-var styles$d = {"productCard":"ProductCardHorizontal-module__productCard___Nl4jK","productWrapper":"ProductCardHorizontal-module__productWrapper___gs8fn","withImage":"ProductCardHorizontal-module__withImage___pPFw2","productTitle":"ProductCardHorizontal-module__productTitle___xBuu7","productDescription":"ProductCardHorizontal-module__productDescription___CA35O","productPrice":"ProductCardHorizontal-module__productPrice___lf32A","productImage":"ProductCardHorizontal-module__productImage___sQsUO","productTitleDescriptionWrapper":"ProductCardHorizontal-module__productTitleDescriptionWrapper___Obv-j","productPriceCtaWrapper":"ProductCardHorizontal-module__productPriceCtaWrapper___Npkfl"};
+var styles$h = {"productCard":"ProductCardHorizontal-module__productCard___Nl4jK","productWrapper":"ProductCardHorizontal-module__productWrapper___gs8fn","withImage":"ProductCardHorizontal-module__withImage___pPFw2","productTitle":"ProductCardHorizontal-module__productTitle___xBuu7","productPrice":"ProductCardHorizontal-module__productPrice___lf32A","productImage":"ProductCardHorizontal-module__productImage___sQsUO","productId":"ProductCardHorizontal-module__productId___3oOQV","productTitleDescriptionWrapper":"ProductCardHorizontal-module__productTitleDescriptionWrapper___Obv-j","productPriceCtaWrapper":"ProductCardHorizontal-module__productPriceCtaWrapper___Npkfl","productArrowIcon":"ProductCardHorizontal-module__productArrowIcon___1-A76"};
 
-var styles$c = {"imageContainer":"Image-module__imageContainer___iD5Kd","loading":"Image-module__loading___Sh1zO","image":"Image-module__image___1pa50","error":"Image-module__error___0LGZ2","skeleton":"Image-module__skeleton___0bGS6","shimmer":"Image-module__shimmer___aanrl","errorState":"Image-module__errorState___TjV-8","errorIcon":"Image-module__errorIcon___QCKvj","errorText":"Image-module__errorText___Q8pnb"};
+var styles$g = {"imageContainer":"Image-module__imageContainer___iD5Kd","loading":"Image-module__loading___Sh1zO","image":"Image-module__image___1pa50","error":"Image-module__error___0LGZ2","skeleton":"Image-module__skeleton___0bGS6","shimmer":"Image-module__shimmer___aanrl","errorState":"Image-module__errorState___TjV-8","errorIcon":"Image-module__errorIcon___QCKvj","errorText":"Image-module__errorText___Q8pnb"};
 
 var Image = function (_a) {
   var src = _a.src,
@@ -837,15 +814,15 @@ var Image = function (_a) {
     objectPosition: objectPosition
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$c.imageContainer, " ").concat(className, " ").concat(isLoading ? styles$c.loading : "", " ").concat(hasError ? styles$c.error : ""),
+    className: "".concat(styles$g.imageContainer, " ").concat(className, " ").concat(isLoading ? styles$g.loading : "", " ").concat(hasError ? styles$g.error : ""),
     style: containerStyle
   }, isLoading && /*#__PURE__*/React.createElement("div", {
-    className: styles$c.skeleton,
+    className: styles$g.skeleton,
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.shimmer
+    className: styles$g.shimmer
   })), hasError && !fallbackSrc ? /*#__PURE__*/React.createElement("div", {
-    className: styles$c.errorState,
+    className: styles$g.errorState,
     role: "img",
     "aria-label": alt || "Image failed to load"
   }, /*#__PURE__*/React.createElement("svg", {
@@ -856,7 +833,7 @@ var Image = function (_a) {
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    className: styles$c.errorIcon,
+    className: styles$g.errorIcon,
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("rect", {
     x: "3",
@@ -872,7 +849,7 @@ var Image = function (_a) {
   }), /*#__PURE__*/React.createElement("polyline", {
     points: "21 15 16 10 5 21"
   })), /*#__PURE__*/React.createElement("span", {
-    className: styles$c.errorText
+    className: styles$g.errorText
   }, "Image unavailable")) : /*#__PURE__*/React.createElement("img", _extends({
     src: currentSrc
   }, accessibilityProps, {
@@ -882,20 +859,32 @@ var Image = function (_a) {
     decoding: decoding,
     onLoad: handleLoad,
     onError: handleError,
-    className: styles$c.image,
+    className: styles$g.image,
     style: imageStyle,
     srcSet: srcSet,
     sizes: sizes
   })));
 };
 
+/*!
+ * Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+const faArrowUpRight = {
+  prefix: 'far',
+  iconName: 'arrow-up-right',
+  icon: [384, 512, [], "e09f", "M328 96c13.3 0 24 10.7 24 24l0 240c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-182.1L73 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l231-231L88 144c-13.3 0-24-10.7-24-24s10.7-24 24-24l240 0z"]
+};
+
 var ProductCardHorizontal = function (_a) {
   _a.id;
     var imageUrl = _a.imageUrl,
     url = _a.url,
-    title = _a.title,
-    description = _a.description,
-    price = _a.price,
+    title = _a.title;
+    _a.description;
+    var price = _a.price,
+    productId = _a.productId,
     button = _a.button,
     _b = _a.className,
     className = _b === void 0 ? "" : _b;
@@ -904,41 +893,46 @@ var ProductCardHorizontal = function (_a) {
   }
   return /*#__PURE__*/React.createElement("a", {
     href: url,
-    className: "".concat(styles$d.productCard, " ").concat(className),
+    className: "".concat(styles$h.productCard, " ").concat(className),
     "aria-label": "View product: ".concat(title)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$d.productWrapper, " ").concat(imageUrl ? styles$d.withImage : "")
+    className: "".concat(styles$h.productWrapper, " ").concat(imageUrl ? styles$h.withImage : "")
   }, imageUrl && /*#__PURE__*/React.createElement("div", {
-    className: styles$d.productImage
+    className: styles$h.productImage
   }, /*#__PURE__*/React.createElement(Image, {
     src: imageUrl,
     alt: title
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$d.productTitleDescriptionWrapper
+    className: styles$h.productTitleDescriptionWrapper
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$d.productTitle
-  }, title), description && /*#__PURE__*/React.createElement("p", {
-    className: styles$d.productDescription
-  }, description)), /*#__PURE__*/React.createElement("div", {
-    className: styles$d.productPriceCtaWrapper
+    className: styles$h.productTitle
+  }, title), productId && /*#__PURE__*/React.createElement("p", {
+    className: styles$h.productId
+  }, productId)), /*#__PURE__*/React.createElement("div", {
+    className: styles$h.productPriceCtaWrapper
   }, /*#__PURE__*/React.createElement("p", {
-    className: styles$d.productPrice
-  }, price || " "), button && /*#__PURE__*/React.createElement(Button, {
-    className: styles$d.productButton,
+    className: styles$h.productPrice
+  }, price || " "), button ? /*#__PURE__*/React.createElement(Button, {
+    className: styles$h.productButton,
     onClick: button.onClick,
     size: "extra-small"
-  }, button.label))));
+  }, button.label) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowUpRight,
+    className: styles$h.productArrowIcon,
+    "aria-hidden": "true"
+  }))));
 };
 // Alias for backward compatibility
 var ProductCardHorizontalParts = ProductCardHorizontal;
 
-var styles$b = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l"};
+var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l"};
 
 // Adapter to map design system props to ProductCardHorizontalParts props
 var SpareCardAdapter = function (props) {
   var spare = props.spare,
     rest = __rest(props, ["spare"]);
   return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
+    className: styles$f.spareCard,
     url: (spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#",
     title: (spare === null || spare === void 0 ? void 0 : spare.name) || (spare === null || spare === void 0 ? void 0 : spare.title) || "",
     description: (spare === null || spare === void 0 ? void 0 : spare.description) || "",
@@ -964,7 +958,8 @@ var ProductCardDetails = function (_a) {
     hit = _a.hit,
     _b = _a.className,
     className = _b === void 0 ? "" : _b,
-    ProductCardComponent = _a.ProductCardComponent;
+    ProductCardComponent = _a.ProductCardComponent,
+    hidespares = _a.hidespares;
   // Build the hit object expected by ProductDetailsCard
   var hitData = hit || {
     id: id,
@@ -975,7 +970,7 @@ var ProductCardDetails = function (_a) {
     image: imageUrl
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$b.productDetails
+    className: styles$f.productDetails
   }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
     className: "".concat(className),
     title: title,
@@ -984,7 +979,8 @@ var ProductCardDetails = function (_a) {
     hit: hitData,
     facets: facets,
     usePlainClasses: true,
-    ProductCardComponent: ProductCardComponent || SpareCardAdapter
+    ProductCardComponent: ProductCardComponent || SpareCardAdapter,
+    hidespares: hidespares
   }));
 };
 
@@ -1032,7 +1028,8 @@ var ProductCardDetailsAdapter = function (props) {
     var className = props.className,
     code = props.code,
     facets = props.facets,
-    related_products = props.related_products;
+    related_products = props.related_products,
+    hidespares = props.hidespares;
   if (!title) {
     return null;
   }
@@ -1045,7 +1042,8 @@ var ProductCardDetailsAdapter = function (props) {
     hit: hit,
     className: className,
     facets: facets,
-    relatedProducts: (hit === null || hit === void 0 ? void 0 : hit.related_products) || related_products
+    relatedProducts: (hit === null || hit === void 0 ? void 0 : hit.related_products) || related_products,
+    hidespares: hidespares
   });
 };
 var AlgoliaDynamicSearchLeybold = function (props) {
@@ -1110,7 +1108,7 @@ var QrFormLeybold = function (props) {
   })));
 };
 
-var styles$a = {"overlay":"SearchModal-module__overlay___Vbvg9","modal":"SearchModal-module__modal___1k5gO","header":"SearchModal-module__header___I79uH","title":"SearchModal-module__title___VlmEk","closeButton":"SearchModal-module__closeButton___AN0zt","content":"SearchModal-module__content___I2SdX"};
+var styles$e = {"overlay":"SearchModal-module__overlay___Vbvg9","modal":"SearchModal-module__modal___1k5gO","closeButton":"SearchModal-module__closeButton___AN0zt","closeButton__icon":"SearchModal-module__closeButton__icon___vISSw","closeButton__text":"SearchModal-module__closeButton__text___-4EH1","closeButtonDesktop":"SearchModal-module__closeButtonDesktop___Lxxb0","closeButtonMobile":"SearchModal-module__closeButtonMobile___WIIMS","stickyHeader":"SearchModal-module__stickyHeader___wp-gA","scrollableContent":"SearchModal-module__scrollableContent___lrZP3"};
 
 var ModalCloseButton = function (_a) {
   var onClick = _a.onClick,
@@ -1122,7 +1120,9 @@ var ModalCloseButton = function (_a) {
     type: "button",
     onClick: onClick,
     "aria-label": ariaLabel,
-    className: "".concat(styles$a.closeButton, " ").concat(className)
+    className: "".concat(styles$e.closeButton, " ").concat(className)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$e.closeButton__icon
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -1142,7 +1142,9 @@ var ModalCloseButton = function (_a) {
     y1: "6",
     x2: "18",
     y2: "18"
-  })));
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: styles$e.closeButton__text
+  }, "CLOSE X"));
 };
 
 var SearchModal = function (_a) {
@@ -1152,7 +1154,8 @@ var SearchModal = function (_a) {
     title = _b === void 0 ? 'Search' : _b,
     children = _a.children,
     _c = _a.className,
-    className = _c === void 0 ? '' : _c;
+    className = _c === void 0 ? '' : _c,
+    stickyHeaderContent = _a.stickyHeaderContent;
   var modalRef = useRef(null);
   var previouslyFocusedElement = useRef(null);
   useEffect(function () {
@@ -1223,7 +1226,7 @@ var SearchModal = function (_a) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$a.overlay,
+    className: styles$e.overlay,
     onClick: handleOverlayClick,
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("div", {
@@ -1232,25 +1235,27 @@ var SearchModal = function (_a) {
     "aria-modal": "true",
     "aria-label": title,
     tabIndex: -1,
-    className: "".concat(styles$a.modal, " ").concat(className)
+    className: "".concat(styles$e.modal, " ").concat(className)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.header
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$a.title
-  }, title), /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: onClose
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$a.content
-  }, children)));
+    className: styles$e.stickyHeader
+  }, /*#__PURE__*/React.createElement(ModalCloseButton, {
+    onClick: onClose,
+    className: styles$e.closeButtonMobile
+  }), stickyHeaderContent), /*#__PURE__*/React.createElement("div", {
+    className: styles$e.scrollableContent
+  }, /*#__PURE__*/React.createElement(ModalCloseButton, {
+    onClick: onClose,
+    className: styles$e.closeButtonDesktop
+  }), children)));
 };
 
-var styles$9 = {"searchBar":"SearchBar-module__searchBar___5ak1g","inputWrapper":"SearchBar-module__inputWrapper___-4wrM","searchIcon":"SearchBar-module__searchIcon___VAuDz","searchInput":"SearchBar-module__searchInput___1K4GN","submitButton":"SearchBar-module__submitButton___DZWsQ"};
+var styles$d = {"searchBar":"SearchBar-module__searchBar___5ak1g","inputWrapper":"SearchBar-module__inputWrapper___-4wrM","searchIcon":"SearchBar-module__searchIcon___VAuDz","searchInput":"SearchBar-module__searchInput___1K4GN","clearButton":"SearchBar-module__clearButton___JQYg-","submitButton":"SearchBar-module__submitButton___DZWsQ","submitButton__text":"SearchBar-module__submitButton__text___WkUsL","submitButton__icon":"SearchBar-module__submitButton__icon___s-ltv"};
 
 var SearchIcon = function (_a) {
   var _b = _a.className,
     className = _b === void 0 ? '' : _b;
   return /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(styles$9.searchIcon, " ").concat(className),
+    className: "".concat(styles$d.searchIcon, " ").concat(className),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "none",
@@ -1289,7 +1294,7 @@ var SearchInput = function (_a) {
     placeholder: placeholder,
     autoFocus: autoFocus,
     "aria-label": "Search",
-    className: "".concat(styles$9.searchInput, " ").concat(className)
+    className: "".concat(styles$d.searchInput, " ").concat(className)
   });
 };
 
@@ -1300,16 +1305,21 @@ var SearchSubmitButton = function (_a) {
     _c = _a.ariaLabel,
     ariaLabel = _c === void 0 ? 'Search' : _c,
     _d = _a.label,
-    label = _d === void 0 ? 'Search' : _d,
-    _e = _a.className,
-    className = _e === void 0 ? '' : _e;
+    label = _d === void 0 ? 'Search' : _d;
+    _a.variant;
+    var _f = _a.className,
+    className = _f === void 0 ? '' : _f;
   return /*#__PURE__*/React.createElement("button", {
     type: "submit",
     onClick: onClick,
     disabled: disabled,
     "aria-label": ariaLabel,
-    className: "".concat(styles$9.submitButton, " ").concat(className)
-  }, label);
+    className: "".concat(styles$d.submitButton, " ").concat(className)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$d.submitButton__text
+  }, label), /*#__PURE__*/React.createElement("span", {
+    className: styles$d.submitButton__icon
+  }, /*#__PURE__*/React.createElement(SearchIcon, null)));
 };
 
 var SearchBar = function (_a) {
@@ -1320,7 +1330,9 @@ var SearchBar = function (_a) {
     _b = _a.autoFocus,
     autoFocus = _b === void 0 ? false : _b,
     _c = _a.className,
-    className = _c === void 0 ? '' : _c;
+    className = _c === void 0 ? '' : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'instant' : _d;
   var handleSubmit = function (event) {
     event.preventDefault();
     onSubmit();
@@ -1331,23 +1343,169 @@ var SearchBar = function (_a) {
       onSubmit();
     }
   };
+  var handleClear = function () {
+    onChange('');
+  };
+  var showClearButton = value.length > 0;
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit,
-    className: "".concat(styles$9.searchBar, " ").concat(className)
+    className: "".concat(styles$d.searchBar, " ").concat(className)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.inputWrapper
+    className: styles$d.inputWrapper
   }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(SearchInput, {
     value: value,
     onChange: onChange,
     onKeyDown: handleKeyDown,
     placeholder: placeholder,
     autoFocus: autoFocus
-  })), /*#__PURE__*/React.createElement(SearchSubmitButton, {
-    onClick: onSubmit
+  }), showClearButton && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: handleClear,
+    className: styles$d.clearButton,
+    "aria-label": "Clear search"
+  }, "CLEAR X")), /*#__PURE__*/React.createElement(SearchSubmitButton, {
+    onClick: onSubmit,
+    label: "SEE ALL RESULTS",
+    variant: variant
   }));
 };
 
-var styles$8 = {"resultsCount":"ResultsCount-module__resultsCount___cNM6f"};
+var styles$c = {"contentCard":"ContentCardHorizontal-module__contentCard___l-Kim","contentCard--instant-view":"ContentCardHorizontal-module__contentCard--instant-view___4wK9-","contentExcerpt":"ContentCardHorizontal-module__contentExcerpt___tqg1v","contentCard--results-view":"ContentCardHorizontal-module__contentCard--results-view___oBP2u","contentMeta":"ContentCardHorizontal-module__contentMeta___rEW-X","contentCategory":"ContentCardHorizontal-module__contentCategory___NssVD","contentMetaText":"ContentCardHorizontal-module__contentMetaText___muYBN","contentTitle":"ContentCardHorizontal-module__contentTitle___54gEo"};
+
+var ContentCardHorizontal = function (_a) {
+  _a.id;
+    var title = _a.title,
+    url = _a.url,
+    category = _a.category,
+    meta = _a.meta,
+    excerpt = _a.excerpt,
+    _b = _a.className,
+    className = _b === void 0 ? "" : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? "instant-view" : _c;
+  var cardClasses = classNames(styles$c.contentCard, styles$c["contentCard--".concat(variant)], className);
+  return /*#__PURE__*/React.createElement("a", {
+    href: url,
+    className: cardClasses,
+    "aria-label": "View content: ".concat(title)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$c.contentMeta
+  }, category && /*#__PURE__*/React.createElement("span", {
+    className: styles$c.contentCategory
+  }, category), meta && /*#__PURE__*/React.createElement("span", {
+    className: styles$c.contentMetaText
+  }, meta)), /*#__PURE__*/React.createElement("h3", {
+    className: styles$c.contentTitle
+  }, title), excerpt && /*#__PURE__*/React.createElement("p", {
+    className: styles$c.contentExcerpt
+  }, excerpt));
+};
+
+var styles$b = {"instantResultsLayout":"InstantResults-module__instantResultsLayout___oy-o4","columnsGrid":"InstantResults-module__columnsGrid___bHRUM","resultsColumn":"InstantResults-module__resultsColumn___ZBSlT","columnHeader":"InstantResults-module__columnHeader___VYYhi","showingText":"InstantResults-module__showingText___lECiA","seeAllButton":"InstantResults-module__seeAllButton___xEDAX","chevronIcon":"InstantResults-module__chevronIcon___bjb3q","resultsList":"InstantResults-module__resultsList___7s3PT","divider":"InstantResults-module__divider___Ky6zK","loadingState":"InstantResults-module__loadingState___l0fMq","errorState":"InstantResults-module__errorState___hTBbE","spinner":"InstantResults-module__spinner___85jF-"};
+
+var FederatedInstantResultsLayout = function (_a) {
+  _a.query;
+    var products = _a.products,
+    contents = _a.contents,
+    isLoadingProducts = _a.isLoadingProducts,
+    isLoadingContents = _a.isLoadingContents,
+    productsError = _a.productsError,
+    contentsError = _a.contentsError,
+    onSeeAllProducts = _a.onSeeAllProducts,
+    onSeeAllContents = _a.onSeeAllContents;
+    _a.onSeeAllCombined;
+  products.length + contents.length;
+  // Show first 3 results from each category
+  var displayProducts = products.slice(0, 3);
+  var displayContents = contents.slice(0, 3);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$b.instantResultsLayout
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$b.columnsGrid
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$b.resultsColumn
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$b.columnHeader
+  }, /*#__PURE__*/React.createElement("p", {
+    className: styles$b.showingText
+  }, "SHOWING ", displayProducts.length, " OF ", products.length, " RESULTS"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles$b.seeAllButton,
+    onClick: onSeeAllProducts
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: styles$b.chevronIcon,
+    width: "12",
+    height: "6",
+    viewBox: "0 0 12 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 1L6 5L11 1",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), /*#__PURE__*/React.createElement("span", null, "See all products"))), isLoadingProducts ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.loadingState
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$b.spinner,
+    "aria-label": "Loading..."
+  }), /*#__PURE__*/React.createElement("p", null, "Loading products...")) : productsError ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.errorState
+  }, /*#__PURE__*/React.createElement("p", null, productsError)) : displayProducts.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.resultsList
+  }, displayProducts.map(function (product, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: product.id
+    }, /*#__PURE__*/React.createElement(ProductCardHorizontal, product), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
+      className: styles$b.divider
+    }));
+  })) : null), /*#__PURE__*/React.createElement("div", {
+    className: styles$b.resultsColumn
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$b.columnHeader
+  }, /*#__PURE__*/React.createElement("p", {
+    className: styles$b.showingText
+  }, "SHOWING ", displayContents.length, " OF ", contents.length, " RESULTS"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles$b.seeAllButton,
+    onClick: onSeeAllContents
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: styles$b.chevronIcon,
+    width: "12",
+    height: "6",
+    viewBox: "0 0 12 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 1L6 5L11 1",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), /*#__PURE__*/React.createElement("span", null, "See all"))), isLoadingContents ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.loadingState
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$b.spinner,
+    "aria-label": "Loading..."
+  }), /*#__PURE__*/React.createElement("p", null, "Loading content...")) : contentsError ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.errorState
+  }, /*#__PURE__*/React.createElement("p", null, contentsError)) : displayContents.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.resultsList
+  }, displayContents.map(function (content, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: content.id
+    }, /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
+      variant: "instant-view"
+    })), index < displayContents.length - 1 && /*#__PURE__*/React.createElement("hr", {
+      className: styles$b.divider
+    }));
+  })) : null)));
+};
+
+var styles$a = {"resultsCount":"ResultsCount-module__resultsCount___cNM6f"};
 
 var ResultsCount = function (_a) {
   var count = _a.count,
@@ -1356,11 +1514,11 @@ var ResultsCount = function (_a) {
     className = _b === void 0 ? '' : _b;
   var label = count === 1 ? type.slice(0, -1) : type;
   return /*#__PURE__*/React.createElement("span", {
-    className: "".concat(styles$8.resultsCount, " ").concat(className)
+    className: "".concat(styles$a.resultsCount, " ").concat(className)
   }, count, " ", label);
 };
 
-var styles$7 = {"seeAllButton":"SeeAllLinkButton-module__seeAllButton___eAQqJ"};
+var styles$9 = {"seeAllButton":"SeeAllLinkButton-module__seeAllButton___eAQqJ"};
 
 var SeeAllLinkButton = function (_a) {
   var onClick = _a.onClick,
@@ -1371,7 +1529,7 @@ var SeeAllLinkButton = function (_a) {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
-    className: "".concat(styles$7.seeAllButton, " ").concat(className)
+    className: "".concat(styles$9.seeAllButton, " ").concat(className)
   }, label, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -1386,7 +1544,7 @@ var SeeAllLinkButton = function (_a) {
   })));
 };
 
-var styles$6 = {"resultsColumn":"ResultsColumn-module__resultsColumn___AexF5","columnHeader":"ResultsColumn-module__columnHeader___-aUWU","columnTitle":"ResultsColumn-module__columnTitle___Gddr-","resultsList":"ResultsColumn-module__resultsList___BkEie","columnFooter":"ResultsColumn-module__columnFooter___4zJUp","loadingState":"ResultsColumn-module__loadingState___wme5F","errorState":"ResultsColumn-module__errorState___NI4fW","emptyState":"ResultsColumn-module__emptyState___tvefj","spinner":"ResultsColumn-module__spinner___hhntn"};
+var styles$8 = {"resultsColumn":"ResultsColumn-module__resultsColumn___AexF5","columnHeader":"ResultsColumn-module__columnHeader___-aUWU","columnTitle":"ResultsColumn-module__columnTitle___Gddr-","resultsList":"ResultsColumn-module__resultsList___BkEie","columnFooter":"ResultsColumn-module__columnFooter___4zJUp","loadingState":"ResultsColumn-module__loadingState___wme5F","errorState":"ResultsColumn-module__errorState___NI4fW","emptyState":"ResultsColumn-module__emptyState___tvefj","spinner":"ResultsColumn-module__spinner___hhntn"};
 
 var ResultsColumn = function (_a) {
   var title = _a.title,
@@ -1398,118 +1556,51 @@ var ResultsColumn = function (_a) {
     _b = _a.className,
     className = _b === void 0 ? '' : _b;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$6.resultsColumn, " ").concat(className)
+    className: "".concat(styles$8.resultsColumn, " ").concat(className)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.columnHeader
+    className: styles$8.columnHeader
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$6.columnTitle
+    className: styles$8.columnTitle
   }, title), !isLoading && !error && count > 0 && /*#__PURE__*/React.createElement(ResultsCount, {
     count: count,
     type: title.toLowerCase().includes('product') ? 'products' : 'content'
   })), isLoading && /*#__PURE__*/React.createElement("div", {
-    className: styles$6.loadingState
+    className: styles$8.loadingState
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.spinner,
+    className: styles$8.spinner,
     "aria-label": "Loading..."
   }), /*#__PURE__*/React.createElement("p", null, "Loading ", title.toLowerCase(), "...")), error && /*#__PURE__*/React.createElement("div", {
-    className: styles$6.errorState
+    className: styles$8.errorState
   }, /*#__PURE__*/React.createElement("p", null, error)), !isLoading && !error && count === 0 && /*#__PURE__*/React.createElement("div", {
-    className: styles$6.emptyState
+    className: styles$8.emptyState
   }, /*#__PURE__*/React.createElement("p", null, "No ", title.toLowerCase(), " found")), !isLoading && !error && count > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.resultsList
+    className: styles$8.resultsList
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.columnFooter
+    className: styles$8.columnFooter
   }, /*#__PURE__*/React.createElement(SeeAllLinkButton, {
     onClick: onSeeAll,
     label: "See all ".concat(title.toLowerCase())
   }))));
 };
 
-var styles$5 = {"contentCard":"ContentCardHorizontal-module__contentCard___l-Kim","contentMeta":"ContentCardHorizontal-module__contentMeta___rEW-X","contentCategory":"ContentCardHorizontal-module__contentCategory___NssVD","contentMetaText":"ContentCardHorizontal-module__contentMetaText___muYBN","contentTitle":"ContentCardHorizontal-module__contentTitle___54gEo","contentExcerpt":"ContentCardHorizontal-module__contentExcerpt___tqg1v"};
+var styles$7 = {"filtersPanel":"Filters-module__filtersPanel___T3SlK","filtersList":"Filters-module__filtersList___jPgkP","filterAccordion":"Filters-module__filterAccordion___Mf9Oe","accordionHeader":"Filters-module__accordionHeader___DtPJx","accordionTitle":"Filters-module__accordionTitle___YtHXW","accordionIcon":"Filters-module__accordionIcon___zRGrv","accordionIconExpanded":"Filters-module__accordionIconExpanded___pkkjv","accordionContent":"Filters-module__accordionContent___SqhIu","accordionSearch":"Filters-module__accordionSearch___V0A74","filterSearch":"Filters-module__filterSearch___Jc8AX","searchIcon":"Filters-module__searchIcon___pas1t","searchInput":"Filters-module__searchInput___nzOMK","clearButton":"Filters-module__clearButton___tHl6L","filterList":"Filters-module__filterList___TLqBu","filterItem":"Filters-module__filterItem___lA2rv","filterCheckboxInput":"Filters-module__filterCheckboxInput___NAcGz","filterCheckbox":"Filters-module__filterCheckbox___9In3q","filterLabel":"Filters-module__filterLabel___w-M8J","filterCount":"Filters-module__filterCount___XMsmy","filterItemMobile":"Filters-module__filterItemMobile___bqRMi","filterItemMobileRefined":"Filters-module__filterItemMobileRefined___VnLfK","filterItemDesktopNoCheckbox":"Filters-module__filterItemDesktopNoCheckbox___rX7Vy","filterItemDesktopRefined":"Filters-module__filterItemDesktopRefined___XaVGp","noResults":"Filters-module__noResults___ZdZ4V","loadingState":"Filters-module__loadingState___k6olr","spinner":"Filters-module__spinner___hvTaP","appliedFilters":"Filters-module__appliedFilters___hP4x-","appliedFiltersTitle":"Filters-module__appliedFiltersTitle___k6VbJ","appliedFiltersList":"Filters-module__appliedFiltersList___-fx9D","appliedFilterTag":"Filters-module__appliedFilterTag___hd5yc","tagLabel":"Filters-module__tagLabel___0ImQk","tagRemoveButton":"Filters-module__tagRemoveButton___JaA8M"};
 
-var ContentCardHorizontal = function (_a) {
-  _a.id;
-    var title = _a.title,
-    url = _a.url,
-    category = _a.category,
-    meta = _a.meta,
-    excerpt = _a.excerpt,
-    _b = _a.className,
-    className = _b === void 0 ? "" : _b;
-  return /*#__PURE__*/React.createElement("a", {
-    href: url,
-    className: "".concat(styles$5.contentCard, " ").concat(className),
-    "aria-label": "View content: ".concat(title)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.contentMeta
-  }, category && /*#__PURE__*/React.createElement("span", {
-    className: styles$5.contentCategory
-  }, category), meta && /*#__PURE__*/React.createElement("span", {
-    className: styles$5.contentMetaText
-  }, meta)), /*#__PURE__*/React.createElement("h3", {
-    className: styles$5.contentTitle
-  }, title), excerpt && /*#__PURE__*/React.createElement("p", {
-    className: styles$5.contentExcerpt
-  }, excerpt));
+/*!
+ * Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+const faMagnifyingGlass = {
+  prefix: 'fal',
+  iconName: 'magnifying-glass',
+  icon: [512, 512, [128269, "search"], "f002", "M384 208A176 176 0 1 0 32 208a176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z"]
 };
-
-var styles$4 = {"instantResultsLayout":"InstantResults-module__instantResultsLayout___oy-o4","queryHeader":"InstantResults-module__queryHeader___Vmbul","queryText":"InstantResults-module__queryText___uVCCc","queryHighlight":"InstantResults-module__queryHighlight___C3hP1","columnsGrid":"InstantResults-module__columnsGrid___bHRUM"};
-
-var FederatedInstantResultsLayout = function (_a) {
-  var query = _a.query,
-    products = _a.products,
-    contents = _a.contents,
-    isLoadingProducts = _a.isLoadingProducts,
-    isLoadingContents = _a.isLoadingContents,
-    productsError = _a.productsError,
-    contentsError = _a.contentsError,
-    onSeeAllProducts = _a.onSeeAllProducts,
-    onSeeAllContents = _a.onSeeAllContents,
-    onSeeAllCombined = _a.onSeeAllCombined;
-  var totalResults = products.length + contents.length;
-  var hasResults = totalResults > 0;
-  var showCombinedButton = hasResults && !isLoadingProducts && !isLoadingContents;
-  // Show first 3 results from each category
-  var displayProducts = products.slice(0, 3);
-  var displayContents = contents.slice(0, 3);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$4.instantResultsLayout
-  }, query && /*#__PURE__*/React.createElement("div", {
-    className: styles$4.queryHeader
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$4.queryText
-  }, "Results for ", /*#__PURE__*/React.createElement("span", {
-    className: styles$4.queryHighlight
-  }, "\"", query, "\"")), showCombinedButton && /*#__PURE__*/React.createElement(SeeAllLinkButton, {
-    onClick: onSeeAllCombined,
-    label: "See all results"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$4.columnsGrid
-  }, /*#__PURE__*/React.createElement(ResultsColumn, {
-    title: "Products",
-    count: products.length,
-    isLoading: isLoadingProducts,
-    error: productsError,
-    onSeeAll: onSeeAllProducts
-  }, displayProducts.map(function (product) {
-    return /*#__PURE__*/React.createElement(ProductCardHorizontal, _extends({
-      key: product.id
-    }, product));
-  })), /*#__PURE__*/React.createElement(ResultsColumn, {
-    title: "Content",
-    count: contents.length,
-    isLoading: isLoadingContents,
-    error: contentsError,
-    onSeeAll: onSeeAllContents
-  }, displayContents.map(function (content) {
-    return /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({
-      key: content.id
-    }, content));
-  }))));
+const faXmark = {
+  prefix: 'fal',
+  iconName: 'xmark',
+  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"]
 };
 
-var styles$3 = {"filtersPanel":"Filters-module__filtersPanel___T3SlK","filtersPanelHeader":"Filters-module__filtersPanelHeader___XOBTi","filtersPanelTitle":"Filters-module__filtersPanelTitle___Mnn10","filtersList":"Filters-module__filtersList___jPgkP","filterAccordion":"Filters-module__filterAccordion___Mf9Oe","accordionHeader":"Filters-module__accordionHeader___DtPJx","accordionTitle":"Filters-module__accordionTitle___YtHXW","accordionIcon":"Filters-module__accordionIcon___zRGrv","accordionIconExpanded":"Filters-module__accordionIconExpanded___pkkjv","accordionContent":"Filters-module__accordionContent___SqhIu","accordionSearch":"Filters-module__accordionSearch___V0A74","filterSearch":"Filters-module__filterSearch___Jc8AX","searchIcon":"Filters-module__searchIcon___pas1t","searchInput":"Filters-module__searchInput___nzOMK","clearButton":"Filters-module__clearButton___tHl6L","filterList":"Filters-module__filterList___TLqBu","filterItem":"Filters-module__filterItem___lA2rv","filterCheckbox":"Filters-module__filterCheckbox___9In3q","filterLabel":"Filters-module__filterLabel___w-M8J","filterCount":"Filters-module__filterCount___XMsmy","noResults":"Filters-module__noResults___ZdZ4V","loadingState":"Filters-module__loadingState___k6olr","spinner":"Filters-module__spinner___hvTaP","appliedFilters":"Filters-module__appliedFilters___hP4x-","appliedFiltersHeader":"Filters-module__appliedFiltersHeader___w-ZBN","appliedFiltersTitle":"Filters-module__appliedFiltersTitle___k6VbJ","appliedFiltersCount":"Filters-module__appliedFiltersCount___UQikX","clearAllButton":"Filters-module__clearAllButton___yviGV","appliedFiltersList":"Filters-module__appliedFiltersList___-fx9D","appliedFilterTag":"Filters-module__appliedFilterTag___hd5yc","tagLabel":"Filters-module__tagLabel___0ImQk","tagRemoveButton":"Filters-module__tagRemoveButton___JaA8M"};
-
 /**
  * FilterSearch - Search input for filtering facet values
  */
@@ -1526,61 +1617,51 @@ var FilterSearch = function (_a) {
     onChange("");
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$3.filterSearch, " ").concat(className || "")
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: styles$3.searchIcon,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    className: "".concat(styles$7.filterSearch, " ").concat(className || "")
+  }, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faMagnifyingGlass,
+    className: styles$7.searchIcon,
     "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13Z",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M15 15L11.5 11.5",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })), /*#__PURE__*/React.createElement("input", {
+  }), /*#__PURE__*/React.createElement("input", {
     type: "text",
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
-    className: styles$3.searchInput,
+    className: styles$7.searchInput,
     "aria-label": placeholder
   }), value && /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleClear,
-    className: styles$3.clearButton,
+    className: styles$7.clearButton,
     "aria-label": "Clear search"
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M9 3L3 9M3 3L9 9",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }))));
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faXmark$1
+  })));
 };
 
+var CheckIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "9",
+    height: "7",
+    viewBox: "0 0 9 7",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.73456 0.104504C9.02185 0.279451 9.08614 0.615889 8.8772 0.856441L3.7342 6.77774C3.62371 6.90558 3.45294 6.98465 3.2641 6.99811C3.07525 7.01156 2.89244 6.95269 2.75984 6.84166L0.188342 4.68846C-0.0627808 4.47819 -0.0627808 4.13671 0.188342 3.92643C0.439465 3.71616 0.847289 3.71616 1.09841 3.92643L3.13753 5.63385L7.83856 0.222257C8.04749 -0.0182957 8.44929 -0.0721258 8.73658 0.102822L8.73456 0.104504Z",
+    fill: "#E2001A"
+  }));
+};
 /**
  * FilterItem - Individual facet item with checkbox and count
  */
 var FilterItem = function (_a) {
   var value = _a.value,
     onToggle = _a.onToggle,
-    className = _a.className;
+    className = _a.className,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'desktop' : _b,
+    _c = _a.showCheckbox,
+    showCheckbox = _c === void 0 ? true : _c;
   var handleChange = function () {
     onToggle(value.value);
   };
@@ -1590,19 +1671,50 @@ var FilterItem = function (_a) {
       onToggle(value.value);
     }
   };
+  // Mobile variant: Plain button (no checkbox)
+  if (variant === 'mobile') {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(styles$7.filterItemMobile, " ").concat(value.isRefined ? styles$7.filterItemMobileRefined : '', " ").concat(className || ""),
+      onClick: handleChange,
+      onKeyDown: handleKeyDown,
+      "aria-pressed": value.isRefined
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles$7.filterLabel
+    }, value.value), value.count > 0 && /*#__PURE__*/React.createElement("span", {
+      className: styles$7.filterCount
+    }, "(", value.count, ")"));
+  }
+  // Desktop without checkbox (Content tab): Plain button with red text when selected
+  if (!showCheckbox) {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(styles$7.filterItemDesktopNoCheckbox, " ").concat(value.isRefined ? styles$7.filterItemDesktopRefined : '', " ").concat(className || ""),
+      onClick: handleChange,
+      onKeyDown: handleKeyDown,
+      "aria-pressed": value.isRefined
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles$7.filterLabel
+    }, value.value), value.count > 0 && /*#__PURE__*/React.createElement("span", {
+      className: styles$7.filterCount
+    }, "(", value.count, ")"));
+  }
+  // Desktop with checkbox (Products tab): Multi-select checkboxes
   return /*#__PURE__*/React.createElement("label", {
-    className: "".concat(styles$3.filterItem, " ").concat(className || ""),
+    className: "".concat(styles$7.filterItem, " ").concat(className || ""),
     onKeyDown: handleKeyDown
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     checked: value.isRefined,
     onChange: handleChange,
-    className: styles$3.filterCheckbox,
+    className: styles$7.filterCheckboxInput,
     "aria-label": "".concat(value.value, " (").concat(value.count, " results)")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles$3.filterLabel
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$7.filterCheckbox
+  }, value.isRefined && /*#__PURE__*/React.createElement(CheckIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: styles$7.filterLabel
   }, value.value), /*#__PURE__*/React.createElement("span", {
-    className: styles$3.filterCount
+    className: styles$7.filterCount
   }, "(", value.count, ")"));
 };
 
@@ -1614,10 +1726,14 @@ var FilterAccordion = function (_a) {
     isExpanded = _a.isExpanded,
     onToggle = _a.onToggle,
     onValueToggle = _a.onValueToggle,
-    className = _a.className;
-  var _b = useState(""),
-    searchQuery = _b[0],
-    setSearchQuery = _b[1];
+    className = _a.className,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'desktop' : _b,
+    _c = _a.showCheckbox,
+    showCheckbox = _c === void 0 ? true : _c;
+  var _d = useState(""),
+    searchQuery = _d[0],
+    setSearchQuery = _d[1];
   // Filter facet values based on search query
   var filteredValues = useMemo(function () {
     if (!searchQuery.trim()) {
@@ -1645,18 +1761,18 @@ var FilterAccordion = function (_a) {
     onValueToggle(facet.attribute, value);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$3.filterAccordion, " ").concat(className || "")
+    className: "".concat(styles$7.filterAccordion, " ").concat(className || "")
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(styles$3.accordionHeader, " ").concat(isExpanded ? styles$3.accordionHeaderExpanded : ""),
+    className: "".concat(styles$7.accordionHeader, " ").concat(isExpanded ? styles$7.accordionHeaderExpanded : ""),
     onClick: handleToggle,
     onKeyDown: handleKeyDown,
     "aria-expanded": isExpanded,
     "aria-controls": "accordion-".concat(facet.id)
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$3.accordionTitle
+    className: styles$7.accordionTitle
   }, facet.label), /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(styles$3.accordionIcon, " ").concat(isExpanded ? styles$3.accordionIconExpanded : ""),
+    className: "".concat(styles$7.accordionIcon, " ").concat(isExpanded ? styles$7.accordionIconExpanded : ""),
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -1671,23 +1787,25 @@ var FilterAccordion = function (_a) {
     strokeLinejoin: "round"
   }))), isExpanded && /*#__PURE__*/React.createElement("div", {
     id: "accordion-".concat(facet.id),
-    className: styles$3.accordionContent
-  }, facet.searchable && facet.values.length > 5 && /*#__PURE__*/React.createElement("div", {
-    className: styles$3.accordionSearch
+    className: styles$7.accordionContent
+  }, variant === 'desktop' && facet.searchable && facet.values.length > 5 && /*#__PURE__*/React.createElement("div", {
+    className: styles$7.accordionSearch
   }, /*#__PURE__*/React.createElement(FilterSearch, {
     value: searchQuery,
     onChange: setSearchQuery,
     placeholder: "Search"
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.filterList
+    className: styles$7.filterList
   }, filteredValues.length > 0 ? filteredValues.map(function (value) {
     return /*#__PURE__*/React.createElement(FilterItem, {
       key: value.value,
       value: value,
-      onToggle: handleValueToggle
+      onToggle: handleValueToggle,
+      variant: variant,
+      showCheckbox: showCheckbox
     });
   }) : /*#__PURE__*/React.createElement("div", {
-    className: styles$3.noResults
+    className: styles$7.noResults
   }, "No results found"))));
 };
 
@@ -1710,26 +1828,26 @@ var AppliedFilterTag = function (_a) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$3.appliedFilterTag, " ").concat(className || "")
+    className: "".concat(styles$7.appliedFilterTag, " ").concat(className || "")
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$3.tagLabel
+    className: styles$7.tagLabel
   }, label || value), /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleRemove,
     onKeyDown: handleKeyDown,
-    className: styles$3.tagRemoveButton,
+    className: styles$7.tagRemoveButton,
     "aria-label": "Remove ".concat(label || value, " filter")
   }, /*#__PURE__*/React.createElement("svg", {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M9 3L3 9M3 3L9 9",
+    d: "M8 2L2 8M2 2L8 8",
     stroke: "currentColor",
-    strokeWidth: "2",
+    strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }))));
@@ -1740,9 +1858,9 @@ var AppliedFilterTag = function (_a) {
  */
 var AppliedFilters = function (_a) {
   var facets = _a.facets,
-    onRemove = _a.onRemove,
-    onClearAll = _a.onClearAll,
-    className = _a.className;
+    onRemove = _a.onRemove;
+    _a.onClearAll;
+    var className = _a.className;
   // Extract all refined (selected) filters
   var appliedFilters = useMemo(function () {
     var filters = [];
@@ -1764,31 +1882,12 @@ var AppliedFilters = function (_a) {
   if (appliedFilters.length === 0) {
     return null;
   }
-  var handleClearAll = function () {
-    if (onClearAll) {
-      onClearAll();
-    } else {
-      // If no clearAll handler, remove each filter individually
-      appliedFilters.forEach(function (filter) {
-        onRemove(filter.attribute, filter.value);
-      });
-    }
-  };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$3.appliedFilters, " ").concat(className || "")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.appliedFiltersHeader
+    className: "".concat(styles$7.appliedFilters, " ").concat(className || "")
   }, /*#__PURE__*/React.createElement("h4", {
-    className: styles$3.appliedFiltersTitle
-  }, "Applied filters", appliedFilters.length > 0 && /*#__PURE__*/React.createElement("span", {
-    className: styles$3.appliedFiltersCount
-  }, "(", appliedFilters.length, ")")), appliedFilters.length > 1 && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: handleClearAll,
-    className: styles$3.clearAllButton,
-    "aria-label": "Clear all filters"
-  }, "Clear all")), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.appliedFiltersList
+    className: styles$7.appliedFiltersTitle
+  }, "Applied filters"), /*#__PURE__*/React.createElement("div", {
+    className: styles$7.appliedFiltersList
   }, appliedFilters.map(function (filter) {
     return /*#__PURE__*/React.createElement(AppliedFilterTag, {
       key: "".concat(filter.attribute, "-").concat(filter.value),
@@ -1802,15 +1901,23 @@ var AppliedFilters = function (_a) {
 
 /**
  * FiltersPanel - Main container for all filters
+ *
+ * Fully controlled component - renders based on facets prop.
+ * When facets change (e.g., after API refetch), component re-renders with new data.
+ * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
  */
 var FiltersPanel = function (_a) {
   var facets = _a.facets,
     onFacetToggle = _a.onFacetToggle,
     _b = _a.isLoading,
     isLoading = _b === void 0 ? false : _b,
-    className = _a.className;
-  // Track which accordions are expanded
-  var _c = useState(function () {
+    className = _a.className,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'desktop' : _c,
+    _d = _a.showCheckbox,
+    showCheckbox = _d === void 0 ? true : _d;
+  // Track which accordions are expanded (transient UI state)
+  var _e = useState(function () {
       // Initialize with default expanded facets
       var expanded = new Set();
       facets.forEach(function (facet) {
@@ -1820,8 +1927,30 @@ var FiltersPanel = function (_a) {
       });
       return expanded;
     }),
-    expandedAccordions = _c[0],
-    setExpandedAccordions = _c[1];
+    expandedAccordions = _e[0],
+    setExpandedAccordions = _e[1];
+  // Sync expansion state when facets change (e.g., new facets appear after refetch)
+  useEffect(function () {
+    setExpandedAccordions(function (prev) {
+      var next = new Set(prev);
+      // Add new facets with defaultExpanded
+      facets.forEach(function (facet) {
+        if (facet.defaultExpanded && !next.has(facet.id)) {
+          next.add(facet.id);
+        }
+      });
+      // Remove facets that no longer exist
+      var currentFacetIds = new Set(facets.map(function (f) {
+        return f.id;
+      }));
+      next.forEach(function (id) {
+        if (!currentFacetIds.has(id)) {
+          next.delete(id);
+        }
+      });
+      return next;
+    });
+  }, [facets]);
   var handleAccordionToggle = useCallback(function (facetId) {
     setExpandedAccordions(function (prev) {
       var next = new Set(prev);
@@ -1851,32 +1980,24 @@ var FiltersPanel = function (_a) {
   }, [facets, onFacetToggle]);
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$3.filtersPanel, " ").concat(className || "")
+      className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$3.filtersPanelHeader
-    }, /*#__PURE__*/React.createElement("h3", {
-      className: styles$3.filtersPanelTitle
-    }, "Filters")), /*#__PURE__*/React.createElement("div", {
-      className: styles$3.loadingState
+      className: styles$7.loadingState
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$3.spinner
+      className: styles$7.spinner
     }), /*#__PURE__*/React.createElement("p", null, "Loading filters...")));
   }
   if (!facets || facets.length === 0) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$3.filtersPanel, " ").concat(className || "")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.filtersPanelHeader
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$3.filtersPanelTitle
-  }, "Filters")), /*#__PURE__*/React.createElement(AppliedFilters, {
+    className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
+  }, showCheckbox && /*#__PURE__*/React.createElement(AppliedFilters, {
     facets: facets,
     onRemove: handleRemoveFilter,
     onClearAll: handleClearAll
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.filtersList
+    className: styles$7.filtersList
   }, facets.map(function (facet) {
     return /*#__PURE__*/React.createElement(FilterAccordion, {
       key: facet.id,
@@ -1885,12 +2006,87 @@ var FiltersPanel = function (_a) {
       onToggle: function () {
         return handleAccordionToggle(facet.id);
       },
-      onValueToggle: handleValueToggle
+      onValueToggle: handleValueToggle,
+      variant: variant,
+      showCheckbox: showCheckbox
     });
   })));
 };
 
-var styles$2 = {"resultsView":"ResultsView-module__resultsView___S4Wh2","searchBarWrapper":"ResultsView-module__searchBarWrapper___XNtwR","tabsContainer":"ResultsView-module__tabsContainer___mB-Q2","tabs":"ResultsView-module__tabs___rOexd","tab":"ResultsView-module__tab___IWPLf","tabActive":"ResultsView-module__tabActive___YLWB0","tabCount":"ResultsView-module__tabCount___trVav","resultsContainer":"ResultsView-module__resultsContainer___J4URa","sidebar":"ResultsView-module__sidebar___nQq5J","mainContent":"ResultsView-module__mainContent___S9eIG","resultsList":"ResultsView-module__resultsList___8eYNX","resultsSection":"ResultsView-module__resultsSection___sCUaO","sectionTitle":"ResultsView-module__sectionTitle___mfvH3","loadingState":"ResultsView-module__loadingState___W5YXx","errorState":"ResultsView-module__errorState___UkkG-","emptyState":"ResultsView-module__emptyState___D0Iyn","spinner":"ResultsView-module__spinner___nk8E5","emptyIcon":"ResultsView-module__emptyIcon___fes8T","paginationWrapper":"ResultsView-module__paginationWrapper___mDTyl"};
+var styles$6 = {"productCardVertical":"ProductCardVertical-module__productCardVertical___kXgmt","productCardVertical--hover":"ProductCardVertical-module__productCardVertical--hover___8Nsyp","productCardVertical__button":"ProductCardVertical-module__productCardVertical__button___oQPJG","productCardVertical--focus":"ProductCardVertical-module__productCardVertical--focus___8U57I","productCardVertical__imageWrapper":"ProductCardVertical-module__productCardVertical__imageWrapper___SgKoZ","productCardVertical__image":"ProductCardVertical-module__productCardVertical__image___kg-QU","productCardVertical__content":"ProductCardVertical-module__productCardVertical__content___sZdOs","productCardVertical__title":"ProductCardVertical-module__productCardVertical__title___PPKWb","productCardVertical__description":"ProductCardVertical-module__productCardVertical__description___Ai90p","productCardVertical__footer":"ProductCardVertical-module__productCardVertical__footer___rv6BH"};
+
+/**
+ * ProductCardVertical - Vertical product card for grid layouts
+ *
+ * Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
+ * Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
+ *
+ * @example
+ * ```tsx
+ * <ProductCardVertical
+ *   title="TURBOVAC i - High vacuum turbopump"
+ *   url="/products/turbovac-i"
+ *   imageUrl="/assets/search-product.png"
+ *   productId="21312VISH"
+ *   description="Premium high-performance turbomolecular pump"
+ *   buttonLabel="BUY ONLINE"
+ * />
+ * ```
+ */
+var ProductCardVertical = function (_a) {
+  var _b;
+  var id = _a.id,
+    title = _a.title,
+    url = _a.url,
+    imageUrl = _a.imageUrl;
+    _a.productId;
+    var description = _a.description,
+    _c = _a.buttonLabel,
+    buttonLabel = _c === void 0 ? 'BUY ONLINE' : _c,
+    onButtonClick = _a.onButtonClick,
+    className = _a.className,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'desktop' : _d,
+    forceState = _a["data-force-state"];
+  var handleButtonClick = function (e) {
+    e.preventDefault(); // Prevent card link navigation
+    e.stopPropagation(); // Stop event bubbling
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick();
+  };
+  var cardClasses = classNames(styles$6.productCardVertical, styles$6["productCardVertical--".concat(variant)], (_b = {}, _b[styles$6['productCardVertical--hover']] = forceState === 'hover', _b[styles$6['productCardVertical--focus']] = forceState === 'focus', _b), className);
+  return /*#__PURE__*/React.createElement("a", {
+    href: url,
+    className: cardClasses,
+    "aria-label": "View product: ".concat(title),
+    "data-product-id": id
+  }, imageUrl && /*#__PURE__*/React.createElement("div", {
+    className: styles$6.productCardVertical__imageWrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: imageUrl,
+    alt: title,
+    className: styles$6.productCardVertical__image,
+    objectFit: "contain",
+    objectPosition: "center",
+    loading: "lazy"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$6.productCardVertical__content
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles$6.productCardVertical__title
+  }, title), description && /*#__PURE__*/React.createElement("p", {
+    className: styles$6.productCardVertical__description
+  }, description)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: handleButtonClick,
+    className: styles$6.productCardVertical__button,
+    "aria-label": "".concat(buttonLabel, " - ").concat(title),
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowUpRightFromSquare$1,
+    "aria-hidden": "true"
+  })));
+};
+
+var styles$5 = {"resultsView":"ResultsView-module__resultsView___S4Wh2","searchBarWrapper":"ResultsView-module__searchBarWrapper___XNtwR","tabsContainer":"ResultsView-module__tabsContainer___mB-Q2","tabs":"ResultsView-module__tabs___rOexd","tabSeparator":"ResultsView-module__tabSeparator___MSq9p","mobileFilterButton":"ResultsView-module__mobileFilterButton___ZrMQY","resultsContainer":"ResultsView-module__resultsContainer___J4URa","sidebar":"ResultsView-module__sidebar___nQq5J","assistanceBanner":"ResultsView-module__assistanceBanner___1r72a","mainContent":"ResultsView-module__mainContent___S9eIG","productsGrid":"ResultsView-module__productsGrid___gnAQ-","contentsList":"ResultsView-module__contentsList___tcfNG","contentDivider":"ResultsView-module__contentDivider___5n6sl","resultsList":"ResultsView-module__resultsList___8eYNX","resultsSection":"ResultsView-module__resultsSection___sCUaO","sectionTitle":"ResultsView-module__sectionTitle___mfvH3","loadingState":"ResultsView-module__loadingState___W5YXx","errorState":"ResultsView-module__errorState___UkkG-","emptyState":"ResultsView-module__emptyState___D0Iyn","spinner":"ResultsView-module__spinner___nk8E5","emptyIcon":"ResultsView-module__emptyIcon___fes8T","paginationWrapper":"ResultsView-module__paginationWrapper___mDTyl","searchBarDesktopOnly":"ResultsView-module__searchBarDesktopOnly___dZHUw","tabsContainerDesktopOnly":"ResultsView-module__tabsContainerDesktopOnly___-MQpa"};
 
 var ResultsList = function (_a) {
   var type = _a.type,
@@ -1904,15 +2100,15 @@ var ResultsList = function (_a) {
     className = _d === void 0 ? '' : _d;
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$2.loadingState, " ").concat(className)
+      className: "".concat(styles$5.loadingState, " ").concat(className)
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$2.spinner,
+      className: styles$5.spinner,
       "aria-label": "Loading..."
     }), /*#__PURE__*/React.createElement("p", null, "Loading results..."));
   }
   if (error) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$2.errorState, " ").concat(className)
+      className: "".concat(styles$5.errorState, " ").concat(className)
     }, /*#__PURE__*/React.createElement("p", null, error));
   }
   var hasProducts = products.length > 0;
@@ -1920,7 +2116,7 @@ var ResultsList = function (_a) {
   var hasResults = hasProducts || hasContents;
   if (!hasResults) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$2.emptyState, " ").concat(className)
+      className: "".concat(styles$5.emptyState, " ").concat(className)
     }, /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
@@ -1929,7 +2125,7 @@ var ResultsList = function (_a) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className: styles$2.emptyIcon
+      className: styles$5.emptyIcon
     }, /*#__PURE__*/React.createElement("circle", {
       cx: "11",
       cy: "11",
@@ -1941,42 +2137,322 @@ var ResultsList = function (_a) {
   // Render based on type
   if (type === 'products') {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$2.resultsList, " ").concat(className)
+      className: "".concat(styles$5.productsGrid, " ").concat(className)
     }, products.map(function (product) {
-      return /*#__PURE__*/React.createElement(ProductCardHorizontal, _extends({
+      return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
         key: product.id
-      }, product));
+      }, product, {
+        buttonLabel: "BUY ONLINE"
+      }));
     }));
   }
   if (type === 'content') {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$2.resultsList, " ").concat(className)
-    }, contents.map(function (content) {
-      return /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({
+      className: "".concat(styles$5.contentsList, " ").concat(className)
+    }, contents.map(function (content, index) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
         key: content.id
-      }, content));
+      }, index > 0 && /*#__PURE__*/React.createElement("hr", {
+        className: styles$5.contentDivider
+      }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
+        variant: "results-view"
+      })));
     }));
   }
-  // type === 'all' - Show mixed results
+  // type === 'all' - Show mixed results (not in current Figma design, but keep for compatibility)
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$2.resultsList, " ").concat(className)
+    className: "".concat(styles$5.resultsList, " ").concat(className)
   }, hasProducts && /*#__PURE__*/React.createElement("div", {
-    className: styles$2.resultsSection
+    className: styles$5.resultsSection
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$2.sectionTitle
-  }, "Products (", products.length, ")"), products.map(function (product) {
-    return /*#__PURE__*/React.createElement(ProductCardHorizontal, _extends({
+    className: styles$5.sectionTitle
+  }, "Products (", products.length, ")"), /*#__PURE__*/React.createElement("div", {
+    className: styles$5.productsGrid
+  }, products.map(function (product) {
+    return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
       key: product.id
-    }, product));
-  })), hasContents && /*#__PURE__*/React.createElement("div", {
-    className: styles$2.resultsSection
+    }, product, {
+      buttonLabel: "BUY ONLINE"
+    }));
+  }))), hasContents && /*#__PURE__*/React.createElement("div", {
+    className: styles$5.resultsSection
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$2.sectionTitle
-  }, "Content (", contents.length, ")"), contents.map(function (content) {
-    return /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({
+    className: styles$5.sectionTitle
+  }, "Content (", contents.length, ")"), /*#__PURE__*/React.createElement("div", {
+    className: styles$5.contentsList
+  }, contents.map(function (content, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
       key: content.id
-    }, content));
-  })));
+    }, index > 0 && /*#__PURE__*/React.createElement("hr", {
+      className: styles$5.contentDivider
+    }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
+      variant: "results-view"
+    })));
+  }))));
+};
+
+var styles$4 = {"tabButton":"TabButton-module__tabButton___cMU45","tabButton__count":"TabButton-module__tabButton__count___nlS1p","tabButton__label":"TabButton-module__tabButton__label___YGpiC","tabButton__results":"TabButton-module__tabButton__results___Nr6gr","tabButton--desktop":"TabButton-module__tabButton--desktop___fbAaC","tabButton--active":"TabButton-module__tabButton--active___gj6Jp","tabButton--mobile":"TabButton-module__tabButton--mobile___AnLwy"};
+
+/**
+ * TabButton - Tab navigation component with result counts
+ *
+ * Supports two layout variants:
+ * - Desktop: Background colours, top red underline when active, rounded corners
+ * - Mobile: Text-only with bottom border underline when active
+ *
+ * @example
+ * ```tsx
+ * // Desktop variant
+ * <TabButton
+ *   label="WEB SHOP RESULTS"
+ *   count={542}
+ *   isActive={true}
+ *   onClick={() => setActiveTab('products')}
+ *   variant="desktop"
+ * />
+ *
+ * // Mobile variant
+ * <TabButton
+ *   label="WEB SHOP"
+ *   isActive={false}
+ *   onClick={() => setActiveTab('content')}
+ *   variant="mobile"
+ * />
+ * ```
+ */
+var TabButton = function (_a) {
+  var _b;
+  var label = _a.label,
+    count = _a.count,
+    isActive = _a.isActive,
+    onClick = _a.onClick,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'desktop' : _c,
+    className = _a.className;
+  var buttonClasses = classNames(styles$4.tabButton, styles$4["tabButton--".concat(variant)], (_b = {}, _b[styles$4['tabButton--active']] = isActive, _b), className);
+  // Split label to hide " RESULTS" on mobile
+  var labelParts = label.split(' RESULTS');
+  var mainLabel = labelParts[0];
+  var hasResults = labelParts.length > 1;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    role: "tab",
+    "aria-selected": isActive,
+    "aria-controls": "tabpanel-".concat(label.toLowerCase().replace(/\s+/g, '-')),
+    onClick: onClick,
+    className: buttonClasses
+  }, count !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: styles$4.tabButton__count
+  }, count), ' '), /*#__PURE__*/React.createElement("span", {
+    className: styles$4.tabButton__label
+  }, mainLabel, hasResults && /*#__PURE__*/React.createElement("span", {
+    className: styles$4.tabButton__results
+  }, " RESULTS")));
+};
+
+var AssistanceIcon = function (props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "87",
+    height: "87",
+    viewBox: "0 0 87 87",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10.875 4.83247H47.125C50.463 4.83247 53.1667 7.53564 53.1667 10.8731V39.8679C53.1667 43.2053 50.463 45.9085 47.125 45.9085H33.6068C31.6281 45.9085 29.7099 46.6032 28.1844 47.8717L19.3333 55.2412V48.3247C19.3333 46.9958 18.2458 45.9085 16.9167 45.9085H10.875C7.53698 45.9085 4.83333 43.2053 4.83333 39.8679V10.8731C4.83333 7.53564 7.53698 4.83247 10.875 4.83247ZM0 10.8731V39.8679C0 45.8783 4.86354 50.741 10.875 50.741H14.5V60.4059C14.5 61.3422 15.0437 62.203 15.8896 62.5956C16.7354 62.9883 17.7474 62.8675 18.4573 62.2634L31.2807 51.5867C31.9302 51.043 32.7609 50.741 33.6068 50.741H47.125C53.1365 50.741 58 45.8783 58 39.8679V10.8731C58 4.86268 53.1365 0 47.125 0H10.875C4.86354 0 0 4.86268 0 10.8731ZM33.8333 64.0303V58.8958L29 62.9279V64.0454C29 70.0558 33.8635 74.9184 39.875 74.9184H53.3932C54.2391 74.9184 55.0698 75.2205 55.7193 75.7641L68.5427 86.4409C69.2677 87.0449 70.2646 87.1657 71.1104 86.7731C71.9563 86.3804 72.5 85.5197 72.5 84.5834V74.9184H76.125C82.1365 74.9184 87 70.0558 87 64.0454V35.0505C87 29.0401 82.1365 24.1775 76.125 24.1775H65.25V29.0099H76.125C79.463 29.0099 82.1667 31.7131 82.1667 35.0505V64.0454C82.1667 67.3828 79.463 70.086 76.125 70.086H70.0833C68.7542 70.086 67.6667 71.1733 67.6667 72.5022V79.4187L58.8156 72.034C57.2901 70.7655 55.3719 70.0709 53.3932 70.0709H39.875C36.537 70.0709 33.8333 67.3677 33.8333 64.0303ZM29 13.2893C32.1115 13.2893 34.6188 15.8112 34.6188 18.907C34.6188 21.5951 32.9573 22.9844 31.1146 23.815C28.8943 24.8117 26.5682 27.0618 26.5682 30.203C26.5682 31.5319 27.6557 32.6192 28.9849 32.6192C30.3141 32.6192 31.4016 31.5319 31.4016 30.203C31.4016 29.6291 31.9151 28.7532 33.0781 28.2247C35.7667 27.0165 39.437 24.3134 39.437 18.907C39.437 13.1383 34.7547 8.45683 28.9849 8.45683C23.2151 8.45683 18.5328 13.1383 18.5328 18.907C18.5328 20.236 19.6203 21.3233 20.9495 21.3233C22.2786 21.3233 23.3661 20.236 23.3661 18.907C23.3813 15.8112 25.8885 13.2893 29 13.2893ZM32.0208 39.8679C32.0208 38.2067 30.6615 36.8476 29 36.8476C27.3385 36.8476 25.9792 38.2067 25.9792 39.8679C25.9792 41.5291 27.3385 42.8882 29 42.8882C30.6615 42.8882 32.0208 41.5291 32.0208 39.8679Z",
+    fill: "#39788E"
+  }));
+};
+
+var styles$3 = {"assistanceBanner":"AssistanceBanner-module__assistanceBanner___b97es","assistanceBanner__icon":"AssistanceBanner-module__assistanceBanner__icon___8NzJj","assistanceBanner__title":"AssistanceBanner-module__assistanceBanner__title___Wtkkt","assistanceBanner__description":"AssistanceBanner-module__assistanceBanner__description___AjoOr","assistanceBanner__link":"AssistanceBanner-module__assistanceBanner__link___5L45N","assistanceBanner__chevron":"AssistanceBanner-module__assistanceBanner__chevron___4km-f"};
+
+/**
+ * AssistanceBanner - Help widget for search sidebar
+ *
+ * Displays a call-to-action for users who need assistance finding products.
+ * Features chat icon, heading, description, and contact link with chevron.
+ *
+ * Desktop only - hidden on mobile to save space.
+ *
+ * @example
+ * ```tsx
+ * <AssistanceBanner
+ *   title="Need Assistance?"
+ *   description="Can't find what you're looking for? Our team is ready to help."
+ *   linkText="Contact support"
+ *   linkUrl="/contact"
+ * />
+ * ```
+ */
+var AssistanceBanner = function (_a) {
+  var _b = _a.title,
+    title = _b === void 0 ? 'Need Assistance?' : _b,
+    _c = _a.description,
+    description = _c === void 0 ? "Can't find what you're looking for? Our team is ready to help." : _c,
+    _d = _a.linkText,
+    linkText = _d === void 0 ? 'Contact support' : _d,
+    _e = _a.linkUrl,
+    linkUrl = _e === void 0 ? '/contact' : _e,
+    onLinkClick = _a.onLinkClick,
+    className = _a.className;
+  var handleLinkClick = function (e) {
+    if (onLinkClick) {
+      e.preventDefault();
+      onLinkClick();
+    }
+  };
+  var bannerClasses = classNames(styles$3.assistanceBanner, className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: bannerClasses
+  }, /*#__PURE__*/React.createElement(AssistanceIcon, {
+    className: styles$3.assistanceBanner__icon,
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("h3", {
+    className: styles$3.assistanceBanner__title
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: styles$3.assistanceBanner__description
+  }, description), /*#__PURE__*/React.createElement("a", {
+    href: linkUrl,
+    onClick: onLinkClick ? handleLinkClick : undefined,
+    className: styles$3.assistanceBanner__link
+  }, /*#__PURE__*/React.createElement("span", null, linkText), /*#__PURE__*/React.createElement("svg", {
+    className: styles$3.assistanceBanner__chevron,
+    width: "12",
+    height: "6",
+    viewBox: "0 0 12 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 1L6 5L11 1",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))));
+};
+
+var styles$2 = {"drawerOverlay":"FilterDrawer-module__drawerOverlay___P6M4y","drawerOverlay--open":"FilterDrawer-module__drawerOverlay--open___blJZo","drawerPanel":"FilterDrawer-module__drawerPanel___35h-U","drawerPanel--open":"FilterDrawer-module__drawerPanel--open___Fw1SY","drawerCloseButton":"FilterDrawer-module__drawerCloseButton___cfMmf","drawerContent":"FilterDrawer-module__drawerContent___KBff6"};
+
+/**
+ * FilterDrawer - Mobile slide-in filter panel
+ *
+ * Slides in from the right with a dark overlay. Used on mobile to show filters
+ * when screen space is limited. Includes focus trap, escape key handling, and
+ * body scroll prevention.
+ *
+ * Desktop: Hidden (filters shown in sidebar)
+ * Mobile: Slide-in drawer overlay
+ *
+ * @example
+ * ```tsx
+ * <FilterDrawer
+ *   isOpen={isFilterDrawerOpen}
+ *   onClose={() => setIsFilterDrawerOpen(false)}
+ * >
+ *   <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
+ * </FilterDrawer>
+ * ```
+ */
+var FilterDrawer = function (_a) {
+  var _b, _c;
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    children = _a.children,
+    className = _a.className;
+  var drawerRef = useRef(null);
+  var previouslyFocusedElement = useRef(null);
+  // Focus management
+  useEffect(function () {
+    if (isOpen) {
+      // Store previously focused element
+      previouslyFocusedElement.current = document.activeElement;
+      // Focus the drawer
+      if (drawerRef.current) {
+        drawerRef.current.focus();
+      }
+      // Prevent body scroll
+      document.body.style.overflow = 'hidden';
+    } else {
+      // Restore body scroll
+      document.body.style.overflow = '';
+      // Return focus to previously focused element
+      if (previouslyFocusedElement.current) {
+        previouslyFocusedElement.current.focus();
+      }
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+  // Escape key handler
+  useEffect(function () {
+    var handleEscape = function (event) {
+      if (event.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return function () {
+      return document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose]);
+  // Focus trap implementation
+  useEffect(function () {
+    if (!isOpen || !drawerRef.current) return;
+    var drawer = drawerRef.current;
+    var focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    var firstElement = focusableElements[0];
+    var lastElement = focusableElements[focusableElements.length - 1];
+    var handleTab = function (event) {
+      if (event.key !== 'Tab') return;
+      if (event.shiftKey) {
+        // Shift + Tab
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+        }
+      } else {
+        // Tab
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+        }
+      }
+    };
+    drawer.addEventListener('keydown', handleTab);
+    return function () {
+      return drawer.removeEventListener('keydown', handleTab);
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  var handleOverlayClick = function (event) {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  var overlayClasses = classNames(styles$2.drawerOverlay, (_b = {}, _b[styles$2['drawerOverlay--open']] = isOpen, _b));
+  var panelClasses = classNames(styles$2.drawerPanel, (_c = {}, _c[styles$2['drawerPanel--open']] = isOpen, _c), className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: overlayClasses,
+    onClick: handleOverlayClick,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onClose,
+    "aria-label": "Close filters",
+    className: styles$2.drawerCloseButton
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faXmark
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: drawerRef,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": "Filter options",
+    tabIndex: -1,
+    className: panelClasses
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.drawerContent
+  }, children)));
 };
 
 var FederatedResultsView = function (_a) {
@@ -1995,58 +2471,112 @@ var FederatedResultsView = function (_a) {
     totalPages = _a.totalPages,
     onPageChange = _a.onPageChange,
     facets = _a.facets,
-    onFacetToggle = _a.onFacetToggle;
-  var tabs = [{
-    id: "products",
-    label: "Products",
-    count: products.length
-  }, {
-    id: "content",
-    label: "Content",
-    count: contents.length
-  }];
+    onFacetToggle = _a.onFacetToggle,
+    isFilterDrawerOpen = _a.isFilterDrawerOpen,
+    onFilterDrawerToggle = _a.onFilterDrawerToggle,
+    onFilterDrawerClose = _a.onFilterDrawerClose;
   var isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
   var error = activeTab === "products" ? productsError : contentsError;
   // Filter results based on active tab
   var displayProducts = activeTab === "content" ? [] : products;
   var displayContents = activeTab === "products" ? [] : contents;
+  // Content tab single-select handler (clears all others when selecting)
+  var handleContentCategorySelect = useCallback(function (attribute, value) {
+    var facet = facets.find(function (f) {
+      return f.attribute === attribute;
+    });
+    if (!facet) return;
+    // Clear ALL values in this facet first
+    facet.values.forEach(function (v) {
+      if (v.isRefined) {
+        onFacetToggle(attribute, v.value); // Unselect
+      }
+    });
+    // Then select the clicked value (if not already selected)
+    var clickedValue = facet.values.find(function (v) {
+      return v.value === value;
+    });
+    if (clickedValue && !clickedValue.isRefined) {
+      onFacetToggle(attribute, value); // Select
+    }
+  }, [facets, onFacetToggle]);
+  // Track if any filters applied
+  var hasAppliedFilters = useMemo(function () {
+    return facets.some(function (facet) {
+      return facet.values.some(function (value) {
+        return value.isRefined;
+      });
+    });
+  }, [facets]);
+  // Track previous filter state to detect transitions
+  var prevHasAppliedFilters = useRef(hasAppliedFilters);
+  // Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
+  useEffect(function () {
+    // Only close if we HAD filters and now have NONE (not on initial open)
+    if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
+      onFilterDrawerClose();
+    }
+    prevHasAppliedFilters.current = hasAppliedFilters;
+  }, [hasAppliedFilters, isFilterDrawerOpen, onFilterDrawerClose]);
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$2.resultsView
+    className: styles$5.resultsView
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.searchBarWrapper
+    className: "".concat(styles$5.searchBarWrapper, " ").concat(styles$5.searchBarDesktopOnly)
   }, /*#__PURE__*/React.createElement(SearchBar, {
     value: query,
     onChange: onQueryChange,
     onSubmit: onSearchSubmit,
-    placeholder: "Refine your search..."
+    placeholder: "Refine your search...",
+    variant: "results"
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.tabsContainer
+    className: "".concat(styles$5.tabsContainer, " ").concat(styles$5.tabsContainerDesktopOnly)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.tabs,
+    className: styles$5.tabs,
     role: "tablist"
-  }, tabs.map(function (tab) {
-    return /*#__PURE__*/React.createElement("button", {
-      key: tab.id,
-      type: "button",
-      role: "tab",
-      "aria-selected": activeTab === tab.id,
-      "aria-controls": "tabpanel-".concat(tab.id),
-      onClick: function () {
-        return onTabChange(tab.id);
-      },
-      className: "".concat(styles$2.tab, " ").concat(activeTab === tab.id ? styles$2.tabActive : "")
-    }, tab.label, tab.count > 0 && /*#__PURE__*/React.createElement("span", {
-      className: styles$2.tabCount
-    }, tab.count));
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.resultsContainer
+  }, /*#__PURE__*/React.createElement(TabButton, {
+    label: "WEB SHOP RESULTS",
+    count: products.length,
+    isActive: activeTab === "products",
+    onClick: function () {
+      return onTabChange("products");
+    },
+    variant: "desktop"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$5.tabSeparator
+  }), /*#__PURE__*/React.createElement(TabButton, {
+    label: "WEBSITE RESULTS",
+    count: contents.length,
+    isActive: activeTab === "content",
+    onClick: function () {
+      return onTabChange("content");
+    },
+    variant: "desktop"
+  })), onFilterDrawerToggle && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles$5.mobileFilterButton,
+    onClick: onFilterDrawerToggle
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "15",
+    height: "11",
+    viewBox: "0 0 15 11",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0.6875C0 0.30651 0.313477 0 0.703125 0H14.2969C14.6865 0 15 0.30651 15 0.6875C15 1.06849 14.6865 1.375 14.2969 1.375H0.703125C0.313477 1.375 0 1.06849 0 0.6875ZM2.8125 5.5C2.8125 5.11901 3.12598 4.8125 3.51562 4.8125H11.4844C11.874 4.8125 12.1875 5.11901 12.1875 5.5C12.1875 5.88099 11.874 6.1875 11.4844 6.1875H3.51562C3.12598 6.1875 2.8125 5.88099 2.8125 5.5ZM9.375 10.3125C9.375 10.6935 9.06152 11 8.67188 11H6.32812C5.93848 11 5.625 10.6935 5.625 10.3125C5.625 9.93151 5.93848 9.625 6.32812 9.625H8.67188C9.06152 9.625 9.375 9.93151 9.375 10.3125Z",
+    fill: "currentColor"
+  })), /*#__PURE__*/React.createElement("span", null, "Filter"))), /*#__PURE__*/React.createElement("div", {
+    className: styles$5.resultsContainer
   }, /*#__PURE__*/React.createElement("aside", {
-    className: styles$2.sidebar
+    className: styles$5.sidebar
   }, /*#__PURE__*/React.createElement(FiltersPanel, {
     facets: facets,
-    onFacetToggle: onFacetToggle
+    onFacetToggle: activeTab === "products" ? onFacetToggle : handleContentCategorySelect,
+    showCheckbox: activeTab === "products"
+  }), /*#__PURE__*/React.createElement(AssistanceBanner, {
+    className: styles$5.assistanceBanner
   })), /*#__PURE__*/React.createElement("main", {
-    className: styles$2.mainContent
+    className: styles$5.mainContent
   }, /*#__PURE__*/React.createElement("div", {
     id: "tabpanel-".concat(activeTab),
     role: "tabpanel",
@@ -2058,17 +2588,26 @@ var FederatedResultsView = function (_a) {
     isLoading: isLoading,
     error: error
   }), !isLoading && !error && (displayProducts.length > 0 || displayContents.length > 0) && /*#__PURE__*/React.createElement("div", {
-    className: styles$2.paginationWrapper
+    className: styles$5.paginationWrapper
   }, /*#__PURE__*/React.createElement(Pagination, {
     currentPage: currentPage,
     totalPages: totalPages,
     onPageChange: onPageChange,
     maxVisiblePages: 10,
+    showPrevious: false,
     ariaLabel: "".concat(activeTab === "products" ? "Products" : "Content", " pagination")
-  }))))));
+  }))))), onFilterDrawerClose && /*#__PURE__*/React.createElement(FilterDrawer, {
+    isOpen: isFilterDrawerOpen || false,
+    onClose: onFilterDrawerClose
+  }, /*#__PURE__*/React.createElement(FiltersPanel, {
+    facets: facets,
+    onFacetToggle: activeTab === "products" ? onFacetToggle : handleContentCategorySelect,
+    variant: "mobile",
+    showCheckbox: activeTab === "products"
+  })));
 };
 
-var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExperience___gug9X","searchBarSection":"FederatedSearchExperience-module__searchBarSection___f0Ykq","instantResultsSection":"FederatedSearchExperience-module__instantResultsSection___AG3qn","fullResultsSection":"FederatedSearchExperience-module__fullResultsSection___NH16U"};
+var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExperience___gug9X","searchBarSection":"FederatedSearchExperience-module__searchBarSection___f0Ykq","searchBarDesktopOnly":"FederatedSearchExperience-module__searchBarDesktopOnly___CetKZ","searchBarMobileOnly":"FederatedSearchExperience-module__searchBarMobileOnly___Ityxp","resultsHeaderMobileOnly":"FederatedSearchExperience-module__resultsHeaderMobileOnly___09ef-","tabsContainerSticky":"FederatedSearchExperience-module__tabsContainerSticky___-HdY5","tabs":"FederatedSearchExperience-module__tabs___Vatv8","tabSeparator":"FederatedSearchExperience-module__tabSeparator___AUjhW","mobileFilterButtonWrapper":"FederatedSearchExperience-module__mobileFilterButtonWrapper___JkRtk","mobileFilterButton":"FederatedSearchExperience-module__mobileFilterButton___sRc-w","filterIndicatorDot":"FederatedSearchExperience-module__filterIndicatorDot___vqVi2","instantResultsSection":"FederatedSearchExperience-module__instantResultsSection___AG3qn","fullResultsSection":"FederatedSearchExperience-module__fullResultsSection___NH16U"};
 
 /**
  * FederatedSearchExperience - Top-level search experience component
@@ -2129,21 +2668,93 @@ var FederatedSearchExperience = function (_a) {
     totalPages = _a.totalPages,
     onPageChange = _a.onPageChange,
     facets = _a.facets,
-    onFacetToggle = _a.onFacetToggle;
+    onFacetToggle = _a.onFacetToggle,
+    isFilterDrawerOpen = _a.isFilterDrawerOpen,
+    onFilterDrawerToggle = _a.onFilterDrawerToggle,
+    onFilterDrawerClose = _a.onFilterDrawerClose;
+  // Track if any filters are active (for red dot indicator)
+  var hasAppliedFilters = useMemo(function () {
+    return facets.some(function (facet) {
+      return facet.values.some(function (value) {
+        return value.isRefined;
+      });
+    });
+  }, [facets]);
   return /*#__PURE__*/React.createElement(SearchModal, {
     isOpen: isOpen,
     onClose: onClose,
-    title: "Search"
+    title: "Search",
+    stickyHeaderContent: activeView === "instant" ? /*#__PURE__*/React.createElement("div", {
+      className: styles$1.searchBarMobileOnly
+    }, /*#__PURE__*/React.createElement(SearchBar, {
+      value: query,
+      onChange: onQueryChange,
+      onSubmit: onSearchSubmit,
+      placeholder: "Discover products, innovations, and resources...",
+      autoFocus: true,
+      variant: "instant"
+    })) : activeView === "results" ? /*#__PURE__*/React.createElement("div", {
+      className: styles$1.resultsHeaderMobileOnly
+    }, /*#__PURE__*/React.createElement(SearchBar, {
+      value: query,
+      onChange: onQueryChange,
+      onSubmit: onSearchSubmit,
+      placeholder: "Refine your search...",
+      variant: "results"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles$1.tabsContainerSticky
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$1.tabs,
+      role: "tablist"
+    }, /*#__PURE__*/React.createElement(TabButton, {
+      label: "WEB SHOP RESULTS",
+      count: products.length,
+      isActive: activeTab === "products",
+      onClick: function () {
+        return onTabChange("products");
+      },
+      variant: "mobile"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles$1.tabSeparator
+    }), /*#__PURE__*/React.createElement(TabButton, {
+      label: "WEBSITE RESULTS",
+      count: contents.length,
+      isActive: activeTab === "content",
+      onClick: function () {
+        return onTabChange("content");
+      },
+      variant: "mobile"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: styles$1.mobileFilterButtonWrapper
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: styles$1.mobileFilterButton,
+      onClick: onFilterDrawerToggle
+    }, /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "15",
+      height: "11",
+      viewBox: "0 0 15 11",
+      fill: "none",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0 0.6875C0 0.30651 0.313477 0 0.703125 0H14.2969C14.6865 0 15 0.30651 15 0.6875C15 1.06849 14.6865 1.375 14.2969 1.375H0.703125C0.313477 1.375 0 1.06849 0 0.6875ZM2.8125 5.5C2.8125 5.11901 3.12598 4.8125 3.51562 4.8125H11.4844C11.874 4.8125 12.1875 5.11901 12.1875 5.5C12.1875 5.88099 11.874 6.1875 11.4844 6.1875H3.51562C3.12598 6.1875 2.8125 5.88099 2.8125 5.5ZM9.375 10.3125C9.375 10.6935 9.06152 11 8.67188 11H6.32812C5.93848 11 5.625 10.6935 5.625 10.3125C5.625 9.93151 5.93848 9.625 6.32812 9.625H8.67188C9.06152 9.625 9.375 9.93151 9.375 10.3125Z",
+      fill: "currentColor"
+    })), /*#__PURE__*/React.createElement("span", null, "Filter")), hasAppliedFilters && /*#__PURE__*/React.createElement("span", {
+      className: styles$1.filterIndicatorDot,
+      "aria-hidden": "true"
+    })))) : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$1.searchExperience
   }, activeView === "instant" && /*#__PURE__*/React.createElement("div", {
-    className: styles$1.searchBarSection
+    className: "".concat(styles$1.searchBarSection, " ").concat(styles$1.searchBarDesktopOnly)
   }, /*#__PURE__*/React.createElement(SearchBar, {
     value: query,
     onChange: onQueryChange,
     onSubmit: onSearchSubmit,
     placeholder: "Discover products, innovations, and resources...",
-    autoFocus: true
+    autoFocus: true,
+    variant: "instant"
   })), activeView === "instant" && /*#__PURE__*/React.createElement("div", {
     className: styles$1.instantResultsSection
   }, query ? /*#__PURE__*/React.createElement(FederatedInstantResultsLayout, {
@@ -2195,7 +2806,10 @@ var FederatedSearchExperience = function (_a) {
     totalPages: totalPages,
     onPageChange: onPageChange,
     facets: facets,
-    onFacetToggle: onFacetToggle
+    onFacetToggle: onFacetToggle,
+    isFilterDrawerOpen: isFilterDrawerOpen,
+    onFilterDrawerToggle: onFilterDrawerToggle,
+    onFilterDrawerClose: onFilterDrawerClose
   }))));
 };
 
@@ -2241,5 +2855,5 @@ var SearchTriggerButton = function (_a) {
   }, label));
 };
 
-export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, Footer, FooterBottom, FooterLink, FooterLinkGroup, FooterSocialIcon, FooterSocialIcons, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
+export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, Footer, FooterBottom, FooterLink, FooterLinkGroup, FooterSocialIcon, FooterSocialIcons, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, ProductCardVertical, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
 //# sourceMappingURL=index.esm.js.map