@asante-org/leybold-design-system 1.3.1 → 1.3.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 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';
@@ -15,7 +15,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-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"};
+var styles$m = {"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;
@@ -92,20 +92,20 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-/**
- * Button variant types
+/**
+ * Button variant types
  */
 
-/**
- * Icon types for button
+/**
+ * Icon types for button
  */
 
-/**
- * Icon position
+/**
+ * Icon position
  */
 
-/**
- * Get the icon component based on icon type
+/**
+ * Get the icon component based on icon type
  */
 const getIcon = icon => {
   switch (icon) {
@@ -130,8 +130,8 @@ const getIcon = icon => {
   }
 };
 
-/**
- * Get default icon for certain variants
+/**
+ * Get default icon for certain variants
  */
 const getDefaultIcon = variant => {
   switch (variant) {
@@ -151,8 +151,8 @@ const getDefaultIcon = variant => {
   }
 };
 
-/**
- * Map alias variants to their actual CSS class variants
+/**
+ * Map alias variants to their actual CSS class variants
  */
 const mapVariantToClass = variant => {
   switch (variant) {
@@ -163,8 +163,8 @@ const mapVariantToClass = variant => {
   }
 };
 
-/**
- * Primary UI component for user interaction
+/**
+ * Primary UI component for user interaction
  */
 const Button = ({
   children,
@@ -191,10 +191,10 @@ const Button = ({
   const isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
   const isCarouselLeft = variant === "carousel-arrow-left";
   const isCarouselRight = variant === "carousel-arrow-right";
-  const buttonClasses = classNames(styles$k.button, styles$k[`button--${cssVariant}`], styles$k[`button--${size}`], {
-    [styles$k["button--disabled"]]: disabled
+  const buttonClasses = classNames(styles$m.button, styles$m[`button--${cssVariant}`], styles$m[`button--${size}`], {
+    [styles$m["button--disabled"]]: disabled
   }, className);
-  const iconClasses = classNames(styles$k.button__icon, styles$k[`button__icon--${iconPosition}`]);
+  const iconClasses = classNames(styles$m.button__icon, styles$m[`button__icon--${iconPosition}`]);
 
   // Generate accessible label for icon-only buttons
   const accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
@@ -204,32 +204,194 @@ const Button = ({
     disabled: disabled,
     onClick: onClick,
     "aria-label": accessibleLabel,
-    "data-force-state": props['data-force-state']
+    "data-force-state": props["data-force-state"]
   }, props), !isIconOnly && children, isCarouselLeft && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeft,
-    className: styles$k.button__icon__default
+    className: styles$m.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeftLong,
-    className: styles$k.button__icon__hover
+    className: styles$m.button__icon__hover
   })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight,
-    className: styles$k.button__icon__default
+    className: styles$m.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRightLong,
-    className: styles$k.button__icon__hover
+    className: styles$m.button__icon__hover
   })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, iconElement));
 };
 
+var styles$l = {"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"};
+
+const Image = ({
+  src,
+  alt,
+  width,
+  height,
+  loading = "lazy",
+  decoding = "async",
+  objectFit = "cover",
+  objectPosition = "center",
+  aspectRatio,
+  isDecorative = false,
+  fallbackSrc,
+  onLoad,
+  onError,
+  className = "",
+  srcSet,
+  sizes
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [currentSrc, setCurrentSrc] = useState(src);
+
+  // Keep internal state in sync when parent updates `src` (e.g. async data).
+  useEffect(() => {
+    setCurrentSrc(src);
+    setIsLoading(true);
+    setHasError(false);
+  }, [src]);
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+    setHasError(false);
+    onLoad?.();
+  }, [onLoad]);
+  const handleError = useCallback(() => {
+    setIsLoading(false);
+    setHasError(true);
+
+    // Try fallback if available and not already using it
+    if (fallbackSrc && currentSrc !== fallbackSrc) {
+      setCurrentSrc(fallbackSrc);
+      setHasError(false);
+      setIsLoading(true);
+    } else {
+      onError?.();
+    }
+  }, [fallbackSrc, currentSrc, onError]);
+
+  // Accessibility: decorative images should have empty alt and be hidden from screen readers
+  const accessibilityProps = isDecorative ? {
+    alt: "",
+    "aria-hidden": true,
+    role: "presentation"
+  } : {
+    alt
+  };
+  const containerStyle = {
+    ...(aspectRatio && {
+      aspectRatio
+    }),
+    ...(width && {
+      width: typeof width === "number" ? `${width}px` : width
+    }),
+    ...(height && {
+      height: typeof height === "number" ? `${height}px` : height
+    })
+  };
+  const imageStyle = {
+    objectFit,
+    objectPosition
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles$l.imageContainer} ${className} ${isLoading ? styles$l.loading : ""} ${hasError ? styles$l.error : ""}`,
+    style: containerStyle
+  }, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: styles$l.skeleton,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$l.shimmer
+  })), hasError && !fallbackSrc ? /*#__PURE__*/React.createElement("div", {
+    className: styles$l.errorState,
+    role: "img",
+    "aria-label": alt || "Image failed to load"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: styles$l.errorIcon,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "3",
+    width: "18",
+    height: "18",
+    rx: "2",
+    ry: "2"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "8.5",
+    cy: "8.5",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "21 15 16 10 5 21"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles$l.errorText
+  }, "Image unavailable")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", _extends({
+    src: currentSrc
+  }, accessibilityProps, {
+    width: width,
+    height: height,
+    loading: loading,
+    decoding: decoding,
+    onLoad: handleLoad,
+    onError: handleError,
+    className: styles$l.image,
+    style: imageStyle,
+    srcSet: srcSet,
+    sizes: sizes
+  }))));
+};
+
+var styles$k = {"carouselCard":"CarouselCard-module__carouselCard___7SltX","carouselCard__content":"CarouselCard-module__carouselCard__content___SEDzm","carouselCard__linkText":"CarouselCard-module__carouselCard__linkText___fe3NV","carouselCard__icon":"CarouselCard-module__carouselCard__icon___sQ26Z","carouselCard__imageWrapper":"CarouselCard-module__carouselCard__imageWrapper___i-uYe","carouselCard__title":"CarouselCard-module__carouselCard__title___PN7o3"};
+
+const CarouselCard = ({
+  imageUrl,
+  imageAlt,
+  title,
+  linkText,
+  linkUrl,
+  className,
+  ariaLabel
+}) => {
+  return /*#__PURE__*/React.createElement("a", {
+    href: linkUrl,
+    className: classNames(styles$k.carouselCard, className),
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: imageUrl,
+    alt: imageAlt,
+    className: styles$k.carouselCard__imageWrapper,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    objectPosition: "center"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$k.carouselCard__content
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles$k.carouselCard__title
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: styles$k.carouselCard__linkText
+  }, linkText, /*#__PURE__*/React.createElement("span", {
+    className: styles$k.carouselCard__icon,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight
+  })))));
+};
+
 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
+/**
+ * External link icon (↗) for footer links that open in new tabs
  */
 const ExternalLinkIcon = ({
   className,
@@ -250,8 +412,8 @@ const ExternalLinkIcon = ({
   strokeLinejoin: "round"
 }));
 
-/**
- * Atlas Copco Group badge icon (square)
+/**
+ * Atlas Copco Group badge icon (square)
  */
 const AtlasCopcoIcon = ({
   className,
@@ -427,11 +589,11 @@ const FooterBottom = ({
 // MAIN FOOTER COMPONENT
 // =============================================================================
 
-/**
- * Footer component with brand identity, navigation links, social icons, and legal information.
- * Supports two layout variants:
- * - desktop: Logo at top, 3-column main content
- * - mobile: Logo at bottom, stacked layout with CTA button
+/**
+ * Footer component with brand identity, navigation links, social icons, and legal information.
+ * Supports two layout variants:
+ * - desktop: Logo at top, 3-column main content
+ * - mobile: Logo at bottom, stacked layout with CTA button
  */
 const Footer = ({
   variant = 'desktop',
@@ -631,8 +793,8 @@ const PaginationEllipsis = ({
   }, "..."));
 };
 
-/**
- * Generate page numbers to display with ellipsis logic
+/**
+ * Generate page numbers to display with ellipsis logic
  */
 const generatePageNumbers = (currentPage, totalPages, maxVisiblePages) => {
   if (totalPages <= maxVisiblePages) {
@@ -745,125 +907,7 @@ const Pagination = ({
   })));
 };
 
-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$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"};
-
-const Image = ({
-  src,
-  alt,
-  width,
-  height,
-  loading = "lazy",
-  decoding = "async",
-  objectFit = "cover",
-  objectPosition = "center",
-  aspectRatio,
-  isDecorative = false,
-  fallbackSrc,
-  onLoad,
-  onError,
-  className = "",
-  srcSet,
-  sizes
-}) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasError, setHasError] = useState(false);
-  const [currentSrc, setCurrentSrc] = useState(src);
-  const handleLoad = useCallback(() => {
-    setIsLoading(false);
-    setHasError(false);
-    onLoad?.();
-  }, [onLoad]);
-  const handleError = useCallback(() => {
-    setIsLoading(false);
-    setHasError(true);
-
-    // Try fallback if available and not already using it
-    if (fallbackSrc && currentSrc !== fallbackSrc) {
-      setCurrentSrc(fallbackSrc);
-      setHasError(false);
-      setIsLoading(true);
-    } else {
-      onError?.();
-    }
-  }, [fallbackSrc, currentSrc, onError]);
-
-  // Accessibility: decorative images should have empty alt and be hidden from screen readers
-  const accessibilityProps = isDecorative ? {
-    alt: "",
-    "aria-hidden": true,
-    role: "presentation"
-  } : {
-    alt
-  };
-  const containerStyle = {
-    ...(aspectRatio && {
-      aspectRatio
-    }),
-    ...(width && {
-      width: typeof width === "number" ? `${width}px` : width
-    }),
-    ...(height && {
-      height: typeof height === "number" ? `${height}px` : height
-    })
-  };
-  const imageStyle = {
-    objectFit,
-    objectPosition
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$g.imageContainer} ${className} ${isLoading ? styles$g.loading : ""} ${hasError ? styles$g.error : ""}`,
-    style: containerStyle
-  }, isLoading && /*#__PURE__*/React.createElement("div", {
-    className: styles$g.skeleton,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.shimmer
-  })), hasError && !fallbackSrc ? /*#__PURE__*/React.createElement("div", {
-    className: styles$g.errorState,
-    role: "img",
-    "aria-label": alt || "Image failed to load"
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: styles$g.errorIcon,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "3",
-    y: "3",
-    width: "18",
-    height: "18",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "8.5",
-    cy: "8.5",
-    r: "1.5"
-  }), /*#__PURE__*/React.createElement("polyline", {
-    points: "21 15 16 10 5 21"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: styles$g.errorText
-  }, "Image unavailable")) : /*#__PURE__*/React.createElement("img", _extends({
-    src: currentSrc
-  }, accessibilityProps, {
-    width: width,
-    height: height,
-    loading: loading,
-    decoding: decoding,
-    onLoad: handleLoad,
-    onError: handleError,
-    className: styles$g.image,
-    style: imageStyle,
-    srcSet: srcSet,
-    sizes: sizes
-  })));
-};
+var styles$h = {"productCard":"ProductCardHorizontal-module__productCard___Nl4jK","productWrapper":"ProductCardHorizontal-module__productWrapper___gs8fn","withImage":"ProductCardHorizontal-module__withImage___pPFw2","withPlaceholder":"ProductCardHorizontal-module__withPlaceholder___x8IUh","productTitle":"ProductCardHorizontal-module__productTitle___xBuu7","productPrice":"ProductCardHorizontal-module__productPrice___lf32A","productImage":"ProductCardHorizontal-module__productImage___sQsUO","placeholderImage":"ProductCardHorizontal-module__placeholderImage___kT1sp","productId":"ProductCardHorizontal-module__productId___3oOQV","productTitleDescriptionWrapper":"ProductCardHorizontal-module__productTitleDescriptionWrapper___Obv-j","productPriceCtaWrapper":"ProductCardHorizontal-module__productPriceCtaWrapper___Npkfl","productArrowIcon":"ProductCardHorizontal-module__productArrowIcon___1-A76"};
 
 /*!
  * Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
@@ -876,9 +920,16 @@ const faArrowUpRight = {
   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"]
 };
 
+const PLACEHOLDER_INDICATOR$1 = "?placeholder-storybook";
+const PLACEHOLDER_SVG$1 = `<svg xmlns="http://www.w3.org/2000/svg" width="440" height="133" viewBox="218.446 219.139 440 133" role="img" aria-label="Leybold placeholder logo"><g fill="#ffff"><path d="M290.317,313.442h37.784v12.782h-53.654v-70.62h15.87V313.442z"/><path d="M386.309,310.883c-3.912,12.593-15.135,16.722-24.761,16.722c-15.878,0-28.046-7.084-28.046-28.62c0-6.296,2.322-26.458,26.98-26.458c11.116,0,26.457,4.917,26.457,28.819v2.457h-38.626c0.428,3.935,1.274,12.785,13.232,12.785c4.125,0,8.356-1.965,9.521-5.704L386.309,310.883L386.309,310.883z M371.709,294.852c-0.85-8.456-6.666-11.017-11.434-11.017c-6.979,0-10.686,4.129-11.532,11.017H371.709z"/><path d="M423.556,325.343c-6.986,19.374-8.892,21.932-21.799,21.932c-2.014,0-4.553-0.096-6.665-0.194v-11.02c0.629,0.104,1.582,0.197,2.854,0.197c5.397,0,8.36-0.688,9.737-7.864l-20.741-54.488h16.508l12.062,38.553h0.209l11.539-38.553h15.658L423.556,325.343z"/><path d="M463.54,280.689h0.213c2.328-3.344,6.775-8.164,16.297-8.164c12.385,0,23.389,8.854,23.389,26.949c0,14.359-6.98,28.129-23.703,28.129c-6.141,0-12.701-2.067-16.299-7.968h-0.211v6.589h-14.498v-70.62h14.812V280.689z M475.604,284.427c-10.158,0-12.701,8.455-12.701,16.815c0,7.773,3.707,15.049,13.129,15.049c9.521,0,12.168-9.641,12.168-15.83C488.198,292.192,485.02,284.427,475.604,284.427z"/><path d="M538.094,327.604c-15.141,0-28.787-8.652-28.787-27.542c0-18.881,13.646-27.536,28.787-27.536c15.129,0,28.785,8.655,28.785,27.536C566.88,318.95,553.223,327.604,538.094,327.604z M538.094,284.129c-11.434,0-13.547,9.244-13.547,15.934c0,6.691,2.113,15.939,13.547,15.939c11.426,0,13.547-9.248,13.547-15.939C551.641,293.373,549.52,284.129,538.094,284.129z"/><path d="M588.811,326.225h-14.814v-70.62h14.814V326.225z"/><path d="M651.969,326.225h-14.5v-6.589h-0.213c-3.598,5.898-10.156,7.968-16.295,7.968c-16.727,0-23.703-13.77-23.703-28.129c0-18.097,11.004-26.949,23.381-26.949c9.523,0,13.975,4.82,16.295,8.164h0.221v-25.085h14.814V326.225z M624.663,316.291c9.418,0,13.121-7.273,13.121-15.05c0-8.359-2.537-16.814-12.703-16.814c-9.416,0-12.592,7.767-12.592,16.034C612.49,306.651,615.135,316.291,624.663,316.291z"/></g><g fill="#ffff"><path d="M268.323,226.771h-41.551v39.685C230.996,246.516,247.442,230.811,268.323,226.771z"/><path d="M226.771,286.726v39.688h41.551C247.442,322.371,230.996,306.67,226.771,286.726z"/><path d="M331.122,266.455V226.77h-41.552C310.449,230.811,326.892,246.516,331.122,266.455z"/></g></svg>`;
+const PLACEHOLDER_IMAGE_DATA_URI$1 = `data:image/svg+xml,${encodeURIComponent(PLACEHOLDER_SVG$1)}`;
+const isPlaceholderImg$1 = url => {
+  return !!url && url.includes(PLACEHOLDER_INDICATOR$1);
+};
 const ProductCardHorizontal = ({
   id,
   imageUrl,
+  showProductImage = true,
   url,
   title,
   description,
@@ -886,34 +937,43 @@ const ProductCardHorizontal = ({
   productId,
   button,
   utm,
-  className = ""
+  className = "",
+  style,
+  code,
+  showProductPrice
 }) => {
   if (!title) {
     return null;
   }
+  const hasPlaceholderImage = showProductImage && (!imageUrl || isPlaceholderImg$1(imageUrl));
+  const productImage = hasPlaceholderImage === true ? PLACEHOLDER_IMAGE_DATA_URI$1 : imageUrl;
   const href = !utm || url && url.indexOf("utm") > -1 ? url : url + `?utm_source=${utm.utmSource}&utm_medium=${utm.utmMedium}&utm_campaign=${utm.utmCampaign}`;
   return /*#__PURE__*/React.createElement("a", {
     href: href,
     className: `${styles$h.productCard} ${className}`,
     "aria-label": `View product: ${title}`
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$h.productWrapper} ${imageUrl ? styles$h.withImage : ""}`
-  }, imageUrl && /*#__PURE__*/React.createElement("div", {
+    className: `${styles$h.productWrapper} ${showProductImage ? hasPlaceholderImage ? styles$h.withPlaceholder : styles$h.withImage : ""}`,
+    style: style
+  }, showProductImage && /*#__PURE__*/React.createElement("div", {
     className: styles$h.productImage
   }, /*#__PURE__*/React.createElement(Image, {
-    src: imageUrl,
-    alt: title
+    src: productImage,
+    alt: title,
+    className: hasPlaceholderImage ? styles$h.placeholderImage : "",
+    objectFit: hasPlaceholderImage ? "contain" : "cover",
+    fallbackSrc: PLACEHOLDER_IMAGE_DATA_URI$1
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$h.productTitleDescriptionWrapper
   }, /*#__PURE__*/React.createElement("h3", {
     className: styles$h.productTitle
-  }, title), productId && /*#__PURE__*/React.createElement("p", {
+  }, title), productId || code ? /*#__PURE__*/React.createElement("p", {
     className: styles$h.productId
-  }, productId)), /*#__PURE__*/React.createElement("div", {
+  }, productId || code) : null), /*#__PURE__*/React.createElement("div", {
     className: styles$h.productPriceCtaWrapper
   }, /*#__PURE__*/React.createElement("p", {
     className: styles$h.productPrice
-  }, price || " "), button ? /*#__PURE__*/React.createElement(Button, {
+  }, showProductPrice ? price || "" : ""), button ? /*#__PURE__*/React.createElement(Button, {
     className: styles$h.productButton,
     onClick: button.onClick,
     size: "extra-small"
@@ -927,7 +987,7 @@ const ProductCardHorizontal = ({
 // Alias for backward compatibility
 const ProductCardHorizontalParts = ProductCardHorizontal;
 
-var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
+var styles$g = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
 
 // Adapter to map design system props to ProductCardHorizontalParts props
 const SpareCardAdapter = props => {
@@ -936,13 +996,16 @@ const SpareCardAdapter = props => {
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
-    className: styles$f.spareCard,
+    className: styles$g.spareCard,
     url: spare?.url || spare?.link || "#",
     title: spare?.name || spare?.title || "",
     description: spare?.description || "",
-    price: spare?.priceValue || spare?.price || "",
-    imageUrl: spare?.["img-product"] || spare?.image || "",
+    price: spare?.priceValue || spare?.price || props?.productPrice || ""
+    // imageUrl={spare?.["img-product"] || spare?.image || ""}
+    ,
     utm: props.utm,
+    showProductPrice: props.showProductPrice,
+    showProductImage: false,
     button: {
       label: rest.cta || "View Product",
       onClick: () => window.open(spare?.url || spare?.link || "#", "_blank")
@@ -963,7 +1026,9 @@ const ProductCardDetails = ({
   utm,
   className = "",
   ProductCardComponent,
-  hidespares
+  hidespares,
+  showProductPrice,
+  showProductImage = true
 }) => {
   // Build the hit object expected by ProductDetailsCard
   const hitData = hit || {
@@ -975,23 +1040,146 @@ const ProductCardDetails = ({
     image: imageUrl
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$f.productDetails
+    className: styles$g.productDetails
   }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
     className: `${className}`,
     title: title,
-    imageUrl: imageUrl,
+    imageUrl: showProductImage ? imageUrl : "",
     imageAlt: title,
     hit: hitData,
     utm: utm,
     facets: facets,
     usePlainClasses: true,
     ProductCardComponent: ProductCardComponent || SpareCardAdapter,
-    hidespares: hidespares
+    hidespares: hidespares,
+    showProductPrice: showProductPrice,
+    showProductImage: showProductImage
   }));
 };
 
+const ContentCardBase = ({
+  title,
+  variant,
+  url,
+  imageUrl,
+  category,
+  meta = "something interesting",
+  excerpt,
+  className = "",
+  style,
+  ariaLabel,
+  contentMetaClassName,
+  contentCategoryClassName,
+  contentMetaTextClassName,
+  contentTitleClassName,
+  contentExcerptClassName,
+  showButton
+}) => {
+  console.log("variant in ContentCardBase:", variant);
+  const fallbackImage = "/assets/list-card.png";
+  const isCareerView = variant === "career-view";
+  const seperator = category && meta ? " | " : "";
+  const defaultAriaLabel = isCareerView ? `View career opportunity: ${title}` : `View content: ${title}`;
+  return /*#__PURE__*/React.createElement("a", {
+    href: url,
+    className: className,
+    style: style,
+    "aria-label": ariaLabel || defaultAriaLabel
+  }, imageUrl && /*#__PURE__*/React.createElement("div", {
+    className: "content-card-image-wrapper"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: imageUrl,
+    alt: title,
+    className: "content-card-image",
+    aspectRatio: "16 / 9",
+    loading: "lazy",
+    decoding: "async",
+    fallbackSrc: fallbackImage
+  })), isCareerView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
+    className: contentTitleClassName
+  }, title), category && /*#__PURE__*/React.createElement("span", {
+    className: contentCategoryClassName
+  }, category), meta && /*#__PURE__*/React.createElement("span", {
+    className: contentMetaTextClassName
+  }, meta), /*#__PURE__*/React.createElement(Button, {
+    "aria-label": ariaLabel || defaultAriaLabel,
+    variant: "link-text-alt",
+    className: "career-button"
+  }, "See more")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: contentMetaClassName
+  }, category && /*#__PURE__*/React.createElement("span", {
+    className: contentCategoryClassName
+  }, category), seperator && /*#__PURE__*/React.createElement("span", {
+    className: `${contentCategoryClassName} separator`
+  }, seperator), meta && /*#__PURE__*/React.createElement("span", {
+    className: contentMetaTextClassName
+  }, meta)), /*#__PURE__*/React.createElement("h3", {
+    className: contentTitleClassName
+  }, title), excerpt && /*#__PURE__*/React.createElement("p", {
+    className: contentExcerptClassName
+  }, excerpt), showButton && /*#__PURE__*/React.createElement(Button, {
+    "aria-label": ariaLabel || defaultAriaLabel
+  }, "Read More")));
+};
+
+var styles$f = {"contentCard":"ContentCardVertical-module__contentCard___EoYej","contentCard--instant-view":"ContentCardVertical-module__contentCard--instant-view___dsIUf","contentCard--results-view":"ContentCardVertical-module__contentCard--results-view___6mSHQ","contentMeta":"ContentCardVertical-module__contentMeta___l2GtO","contentCategory":"ContentCardVertical-module__contentCategory___78vrj","contentMetaText":"ContentCardVertical-module__contentMetaText___Rl-ln","contentTitle":"ContentCardVertical-module__contentTitle___rEiHm","contentExcerpt":"ContentCardVertical-module__contentExcerpt___5Gb2G"};
+
+const ContentCardVertical = ({
+  id,
+  title,
+  url,
+  imageUrl,
+  category,
+  meta,
+  excerpt,
+  className = "",
+  variant
+}) => {
+  const cardClasses = classNames(styles$f.contentCard, styles$f[`contentCard--${variant}`], className);
+  console.log("Rendering ContentCardVertical with variant:", variant);
+  return /*#__PURE__*/React.createElement(ContentCardBase, {
+    id: id,
+    variant: variant,
+    title: title,
+    url: url,
+    imageUrl: imageUrl,
+    category: category,
+    meta: meta,
+    excerpt: excerpt,
+    className: cardClasses,
+    contentMetaClassName: styles$f.contentMeta,
+    contentCategoryClassName: styles$f.contentCategory,
+    contentMetaTextClassName: styles$f.contentMetaText,
+    contentTitleClassName: styles$f.contentTitle,
+    contentExcerptClassName: styles$f.contentExcerpt
+  });
+};
+
 // Adapter component that maps props from AlgoliaDynamicSearchRaw to ProductCardHorizontal
 // AlgoliaDynamicSearchRaw passes: title, cardLink, productPrice, cta, hit (original data)
+
+const cardAdapter = props => {
+  const {
+    hit,
+    title,
+    cardLink,
+    productPrice,
+    showProductPrice,
+    className,
+    queryType
+  } = props;
+  return /*#__PURE__*/React.createElement(ContentCardVertical, {
+    id: hit?.id || "",
+    variant: queryType && queryType === "careers" ? "career-view" : "content-view",
+    title: title || hit?.title || "",
+    url: cardLink || hit?.link || "#",
+    imageUrl: hit?.image || "",
+    category: hit?.category || "",
+    meta: showProductPrice ? productPrice || hit?.price || "" : "",
+    excerpt: hit?.description || "",
+    className: className
+  });
+};
 const ProductCardAdapter = props => {
   const {
     hit,
@@ -1000,20 +1188,22 @@ const ProductCardAdapter = props => {
     productPrice,
     cta,
     showProductPrice,
+    showProductImage,
     className,
     code,
     utm
   } = props;
-  console.log(props);
+
   // Get values from direct props or fallback to hit object
   const url = cardLink || hit?.link || "#";
-  const imageUrl = "";
+  const imageUrl = hit?.image || "";
   const price = showProductPrice ? productPrice || hit?.price || "" : "";
   const productTitle = title || hit?.title || "";
   const productCode = code || hit?.code || "";
   const buttonLabel = cta || "View Product";
   return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
     imageUrl: imageUrl,
+    showProductImage: showProductImage,
     url: url,
     utm: utm,
     title: productTitle,
@@ -1023,17 +1213,23 @@ const ProductCardAdapter = props => {
       label: buttonLabel,
       onClick: () => window.open(url, "_blank")
     },
-    className: className
+    className: className,
+    style: {
+      ...(showProductImage ? {
+        minHeight: "130px"
+      } : {})
+    },
+    code: productCode,
+    showProductPrice: showProductPrice
   });
 };
 const ProductCardDetailsAdapter = props => {
   const {
     hit,
     title,
-    cardLink,
     productPrice,
-    cta,
     showProductPrice,
+    showProductImage,
     className,
     code,
     utm,
@@ -1055,13 +1251,44 @@ const ProductCardDetailsAdapter = props => {
     className: className,
     facets: facets,
     relatedProducts: hit?.related_products || related_products,
-    hidespares: hidespares
+    hidespares: hidespares,
+    showProductPrice: showProductPrice,
+    showProductImage: showProductImage
   });
 };
+const ButtonAdapter = props => {
+  const {
+    label,
+    onClick,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(Button, {
+    className: className,
+    onClick: onClick
+  }, label);
+};
 const AlgoliaDynamicSearchLeybold = props => {
+  const parentComponentProps = {
+    queryType: props?.queryType,
+    showProductPrice: props?.showProductPrice,
+    showProductImage: props?.showProductImage,
+    hitCta: props?.hitCta,
+    hidespares: props?.hidespares
+  };
   const innerComponents = {
-    ProductCard: ProductCardAdapter,
-    ProductDetailsCard: ProductCardDetailsAdapter
+    Card: innerProps => cardAdapter({
+      ...parentComponentProps,
+      ...innerProps
+    }),
+    ProductCard: innerProps => ProductCardAdapter({
+      ...parentComponentProps,
+      ...innerProps
+    }),
+    ProductDetailsCard: innerProps => ProductCardDetailsAdapter({
+      ...parentComponentProps,
+      ...innerProps
+    }),
+    Button: ButtonAdapter
   };
   return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
     innerComponents: innerComponents
@@ -1121,7 +1348,7 @@ const QrFormLeybold = props => {
   })));
 };
 
-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 styles$e = {"overlay":"SearchModal-module__overlay___Vbvg9","overlayOpen":"SearchModal-module__overlayOpen___Ipajg","overlayClosing":"SearchModal-module__overlayClosing___yXsw3","modal":"SearchModal-module__modal___1k5gO","modalOpen":"SearchModal-module__modalOpen___t3hpr","modalClosing":"SearchModal-module__modalClosing___W3m8i","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","closeButtonMobileWrapper":"SearchModal-module__closeButtonMobileWrapper___LSynI","closeButtonMobileWrapperHidden":"SearchModal-module__closeButtonMobileWrapperHidden___O9nRE","stickyHeader":"SearchModal-module__stickyHeader___wp-gA","stickyHeaderHidden":"SearchModal-module__stickyHeaderHidden___-UI7O","scrollableContent":"SearchModal-module__scrollableContent___lrZP3"};
 
 const ModalCloseButton = ({
   onClick,
@@ -1159,16 +1386,111 @@ const ModalCloseButton = ({
   }, "CLOSE X"));
 };
 
+const CLOSE_ANIMATION_MS = 600;
+const prefersReducedMotion = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
 const SearchModal = ({
   isOpen,
   onClose,
-  title = 'Search',
+  title = "Search",
   children,
-  className = '',
+  className = "",
   stickyHeaderContent
 }) => {
   const modalRef = useRef(null);
+  const scrollableContentRef = useRef(null);
   const previouslyFocusedElement = useRef(null);
+  const lastScrollTopRef = useRef(0);
+  const scrollTickingRef = useRef(false);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [isClosing, setIsClosing] = useState(false);
+  const closeTimerRef = useRef(null);
+  const [isMobileCloseVisible, setIsMobileCloseVisible] = useState(true);
+  const stateClassNames = useMemo(() => {
+    if (isClosing) {
+      return {
+        overlay: styles$e.overlayClosing,
+        modal: styles$e.modalClosing
+      };
+    }
+    return {
+      overlay: styles$e.overlayOpen,
+      modal: styles$e.modalOpen
+    };
+  }, [isClosing]);
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) {
+        window.clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      if (closeTimerRef.current) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setShouldRender(true);
+      setIsClosing(false);
+      setIsMobileCloseVisible(true);
+      return;
+    }
+    if (!shouldRender) return;
+    setIsClosing(true);
+    const duration = prefersReducedMotion() ? 0 : CLOSE_ANIMATION_MS;
+    closeTimerRef.current = window.setTimeout(() => {
+      setShouldRender(false);
+      setIsClosing(false);
+      closeTimerRef.current = null;
+    }, duration);
+  }, [isOpen, shouldRender]);
+
+  // Mobile-only: hide close button when scrolling down, show when scrolling up.
+  useEffect(() => {
+    if (!isOpen) return;
+    // Important: this component renders `null` until `shouldRender` becomes true.
+    // We need to wait for that render so `scrollableContentRef.current` exists.
+    if (!shouldRender) return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    if (!isMobile) return;
+    const el = scrollableContentRef.current;
+    if (!el) return;
+    lastScrollTopRef.current = el.scrollTop;
+    setIsMobileCloseVisible(true);
+    const thresholdPx = 10;
+    const topRevealPx = 8;
+    const update = () => {
+      scrollTickingRef.current = false;
+      const current = el.scrollTop;
+      const prev = lastScrollTopRef.current;
+      const delta = current - prev;
+      if (current <= topRevealPx) {
+        setIsMobileCloseVisible(true);
+      } else if (delta > thresholdPx) {
+        setIsMobileCloseVisible(false);
+      } else if (delta < -thresholdPx) {
+        setIsMobileCloseVisible(true);
+      }
+      lastScrollTopRef.current = current;
+    };
+    const onScroll = () => {
+      if (scrollTickingRef.current) return;
+      scrollTickingRef.current = true;
+      window.requestAnimationFrame(update);
+    };
+    el.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+    };
+  }, [isOpen, shouldRender]);
   useEffect(() => {
     if (isOpen) {
       // Store the previously focused element
@@ -1180,28 +1502,32 @@ const SearchModal = ({
       }
 
       // Prevent body scroll
-      document.body.style.overflow = 'hidden';
+      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();
       }
     }
+  }, [isOpen]);
+  useEffect(() => {
+    if (shouldRender) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
     return () => {
-      document.body.style.overflow = '';
+      document.body.style.overflow = "";
     };
-  }, [isOpen]);
+  }, [shouldRender]);
   useEffect(() => {
     const handleEscape = event => {
-      if (event.key === 'Escape' && isOpen) {
+      if (event.key === "Escape" && isOpen) {
         onClose();
       }
     };
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
 
   // Focus trap implementation
@@ -1212,7 +1538,7 @@ const SearchModal = ({
     const firstElement = focusableElements[0];
     const lastElement = focusableElements[focusableElements.length - 1];
     const handleTab = event => {
-      if (event.key !== 'Tab') return;
+      if (event.key !== "Tab") return;
       if (event.shiftKey) {
         // Shift + Tab
         if (document.activeElement === firstElement) {
@@ -1227,17 +1553,18 @@ const SearchModal = ({
         }
       }
     };
-    modal.addEventListener('keydown', handleTab);
-    return () => modal.removeEventListener('keydown', handleTab);
+    modal.addEventListener("keydown", handleTab);
+    return () => modal.removeEventListener("keydown", handleTab);
   }, [isOpen]);
-  if (!isOpen) return null;
+  if (!shouldRender) return null;
   const handleOverlayClick = event => {
+    if (isClosing) return;
     if (event.target === event.currentTarget) {
       onClose();
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$e.overlay,
+    className: `${styles$e.overlay} ${stateClassNames.overlay}`,
     onClick: handleOverlayClick,
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("div", {
@@ -1246,13 +1573,16 @@ const SearchModal = ({
     "aria-modal": "true",
     "aria-label": title,
     tabIndex: -1,
-    className: `${styles$e.modal} ${className}`
+    className: `${styles$e.modal} ${stateClassNames.modal} ${className}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$e.stickyHeader}` + ` ${!isMobileCloseVisible ? styles$e.stickyHeaderHidden : ""}`
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$e.stickyHeader
+    className: `${styles$e.closeButtonMobileWrapper} ${isMobileCloseVisible ? "" : styles$e.closeButtonMobileWrapperHidden}`
   }, /*#__PURE__*/React.createElement(ModalCloseButton, {
     onClick: onClose,
     className: styles$e.closeButtonMobile
-  }), stickyHeaderContent), /*#__PURE__*/React.createElement("div", {
+  })), stickyHeaderContent), /*#__PURE__*/React.createElement("div", {
+    ref: scrollableContentRef,
     className: styles$e.scrollableContent
   }, /*#__PURE__*/React.createElement(ModalCloseButton, {
     onClick: onClose,
@@ -1310,17 +1640,23 @@ const SearchInput = ({
 const SearchSubmitButton = ({
   onClick,
   disabled = false,
-  ariaLabel = 'Search',
-  label = 'Search',
-  variant = 'instant',
-  className = ''
+  ariaLabel = "Search",
+  label = "Search",
+  variant = "instant",
+  className = ""
 }) => {
-  return /*#__PURE__*/React.createElement("button", {
+  const transformVariant = variant === "instant" ? "solid-grey" : "primary";
+  return /*#__PURE__*/React.createElement(Button, {
     type: "submit",
+    size: "small",
     onClick: onClick,
     disabled: disabled,
     "aria-label": ariaLabel,
-    className: `${styles$d.submitButton} ${className}`
+    className: `${styles$d.submitButton} ${className}`,
+    variant: transformVariant,
+    style: {
+      minWidth: "unset" // Ensure button doesn't shrink too much when only showing icon
+    }
   }, /*#__PURE__*/React.createElement("span", {
     className: styles$d.submitButton__text
   }, label), /*#__PURE__*/React.createElement("span", {
@@ -1334,21 +1670,21 @@ const SearchBar = ({
   onSubmit,
   placeholder,
   autoFocus = false,
-  className = '',
-  variant = 'instant'
+  className = "",
+  variant = "instant"
 }) => {
   const handleSubmit = event => {
     event.preventDefault();
     onSubmit();
   };
   const handleKeyDown = event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       event.preventDefault();
       onSubmit();
     }
   };
   const handleClear = () => {
-    onChange('');
+    onChange("");
   };
   const showClearButton = value.length > 0;
   return /*#__PURE__*/React.createElement("form", {
@@ -1370,7 +1706,7 @@ const SearchBar = ({
   }, "CLEAR X")), /*#__PURE__*/React.createElement(SearchSubmitButton, {
     onClick: onSubmit,
     label: "SEE ALL RESULTS",
-    variant: variant
+    variant: "results"
   }));
 };
 
@@ -1387,21 +1723,20 @@ const ContentCardHorizontal = ({
   variant = "instant-view"
 }) => {
   const cardClasses = classNames(styles$c.contentCard, styles$c[`contentCard--${variant}`], className);
-  return /*#__PURE__*/React.createElement("a", {
-    href: url,
+  return /*#__PURE__*/React.createElement(ContentCardBase, {
+    id: id,
+    title: title,
+    url: url,
+    category: category,
+    meta: meta,
+    excerpt: excerpt,
     className: cardClasses,
-    "aria-label": `View content: ${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));
+    contentMetaClassName: styles$c.contentMeta,
+    contentCategoryClassName: styles$c.contentCategory,
+    contentMetaTextClassName: styles$c.contentMetaText,
+    contentTitleClassName: styles$c.contentTitle,
+    contentExcerptClassName: styles$c.contentExcerpt
+  });
 };
 
 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-"};
@@ -1462,7 +1797,10 @@ const FederatedInstantResultsLayout = ({
     className: styles$b.resultsList
   }, displayProducts.map((product, index) => /*#__PURE__*/React.createElement(React.Fragment, {
     key: product.id
-  }, /*#__PURE__*/React.createElement(ProductCardHorizontal, product), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
+  }, /*#__PURE__*/React.createElement(ProductCardHorizontal, _extends({}, product, {
+    showProductPrice: true,
+    className: "search-result"
+  })), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
     className: styles$b.divider
   })))) : null), /*#__PURE__*/React.createElement("div", {
     className: styles$b.resultsColumn
@@ -1601,8 +1939,8 @@ const faXmark = {
   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"]
 };
 
-/**
- * FilterSearch - Search input for filtering facet values
+/**
+ * FilterSearch - Search input for filtering facet values
  */
 const FilterSearch = ({
   value,
@@ -1650,8 +1988,8 @@ const CheckIcon = () => /*#__PURE__*/React.createElement("svg", {
   fill: "#E2001A"
 }));
 
-/**
- * FilterItem - Individual facet item with checkbox and count
+/**
+ * FilterItem - Individual facet item with checkbox and count
  */
 const FilterItem = ({
   value,
@@ -1663,6 +2001,13 @@ const FilterItem = ({
   const handleChange = () => {
     onToggle(value.value);
   };
+  const handleCheckboxKeyDown = e => {
+    // Space toggles native checkboxes by default; add Enter support.
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleChange();
+    }
+  };
   const handleKeyDown = e => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -1702,12 +2047,12 @@ const FilterItem = ({
 
   // Desktop with checkbox (Products tab): Multi-select checkboxes
   return /*#__PURE__*/React.createElement("label", {
-    className: `${styles$7.filterItem} ${className || ""}`,
-    onKeyDown: handleKeyDown
+    className: `${styles$7.filterItem} ${className || ""}`
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     checked: value.isRefined,
     onChange: handleChange,
+    onKeyDown: handleCheckboxKeyDown,
     className: styles$7.filterCheckboxInput,
     "aria-label": `${value.value} (${value.count} results)`
   }), /*#__PURE__*/React.createElement("div", {
@@ -1719,8 +2064,8 @@ const FilterItem = ({
   }, "(", value.count, ")"));
 };
 
-/**
- * FilterAccordion - Collapsible facet section with optional search
+/**
+ * FilterAccordion - Collapsible facet section with optional search
  */
 const FilterAccordion = ({
   facet,
@@ -1728,7 +2073,7 @@ const FilterAccordion = ({
   onToggle,
   onValueToggle,
   className,
-  variant = 'desktop',
+  variant = "desktop",
   showCheckbox = true
 }) => {
   const [searchQuery, setSearchQuery] = useState("");
@@ -1785,7 +2130,7 @@ const FilterAccordion = ({
   }))), isExpanded && /*#__PURE__*/React.createElement("div", {
     id: `accordion-${facet.id}`,
     className: styles$7.accordionContent
-  }, variant === 'desktop' && facet.searchable && facet.values.length > 5 && /*#__PURE__*/React.createElement("div", {
+  }, facet.searchable && facet.values.length > 5 && (variant === "desktop" || variant === "mobile" && showCheckbox) && /*#__PURE__*/React.createElement("div", {
     className: styles$7.accordionSearch
   }, /*#__PURE__*/React.createElement(FilterSearch, {
     value: searchQuery,
@@ -1804,8 +2149,8 @@ const FilterAccordion = ({
   }, "No results found"))));
 };
 
-/**
- * AppliedFilterTag - Individual removable filter tag/chip
+/**
+ * AppliedFilterTag - Individual removable filter tag/chip
  */
 const AppliedFilterTag = ({
   attribute,
@@ -1849,8 +2194,8 @@ const AppliedFilterTag = ({
   }))));
 };
 
-/**
- * AppliedFilters - Shows all active filters as removable tags
+/**
+ * AppliedFilters - Shows all active filters as removable tags
  */
 const AppliedFilters = ({
   facets,
@@ -1895,12 +2240,12 @@ const AppliedFilters = ({
   }))));
 };
 
-/**
- * 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.
+/**
+ * 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.
  */
 const FiltersPanel = ({
   facets,
@@ -2000,25 +2345,32 @@ const FiltersPanel = ({
   }))));
 };
 
-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 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__placeholderImage":"ProductCardVertical-module__productCardVertical__placeholderImage___w0sd0","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"};
+
+const PLACEHOLDER_INDICATOR = "?placeholder-storybook";
+const PLACEHOLDER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="440" height="133" viewBox="218.446 219.139 440 133" role="img" aria-label="Leybold placeholder logo"><g fill="#ffff"><path d="M290.317,313.442h37.784v12.782h-53.654v-70.62h15.87V313.442z"/><path d="M386.309,310.883c-3.912,12.593-15.135,16.722-24.761,16.722c-15.878,0-28.046-7.084-28.046-28.62c0-6.296,2.322-26.458,26.98-26.458c11.116,0,26.457,4.917,26.457,28.819v2.457h-38.626c0.428,3.935,1.274,12.785,13.232,12.785c4.125,0,8.356-1.965,9.521-5.704L386.309,310.883L386.309,310.883z M371.709,294.852c-0.85-8.456-6.666-11.017-11.434-11.017c-6.979,0-10.686,4.129-11.532,11.017H371.709z"/><path d="M423.556,325.343c-6.986,19.374-8.892,21.932-21.799,21.932c-2.014,0-4.553-0.096-6.665-0.194v-11.02c0.629,0.104,1.582,0.197,2.854,0.197c5.397,0,8.36-0.688,9.737-7.864l-20.741-54.488h16.508l12.062,38.553h0.209l11.539-38.553h15.658L423.556,325.343z"/><path d="M463.54,280.689h0.213c2.328-3.344,6.775-8.164,16.297-8.164c12.385,0,23.389,8.854,23.389,26.949c0,14.359-6.98,28.129-23.703,28.129c-6.141,0-12.701-2.067-16.299-7.968h-0.211v6.589h-14.498v-70.62h14.812V280.689z M475.604,284.427c-10.158,0-12.701,8.455-12.701,16.815c0,7.773,3.707,15.049,13.129,15.049c9.521,0,12.168-9.641,12.168-15.83C488.198,292.192,485.02,284.427,475.604,284.427z"/><path d="M538.094,327.604c-15.141,0-28.787-8.652-28.787-27.542c0-18.881,13.646-27.536,28.787-27.536c15.129,0,28.785,8.655,28.785,27.536C566.88,318.95,553.223,327.604,538.094,327.604z M538.094,284.129c-11.434,0-13.547,9.244-13.547,15.934c0,6.691,2.113,15.939,13.547,15.939c11.426,0,13.547-9.248,13.547-15.939C551.641,293.373,549.52,284.129,538.094,284.129z"/><path d="M588.811,326.225h-14.814v-70.62h14.814V326.225z"/><path d="M651.969,326.225h-14.5v-6.589h-0.213c-3.598,5.898-10.156,7.968-16.295,7.968c-16.727,0-23.703-13.77-23.703-28.129c0-18.097,11.004-26.949,23.381-26.949c9.523,0,13.975,4.82,16.295,8.164h0.221v-25.085h14.814V326.225z M624.663,316.291c9.418,0,13.121-7.273,13.121-15.05c0-8.359-2.537-16.814-12.703-16.814c-9.416,0-12.592,7.767-12.592,16.034C612.49,306.651,615.135,316.291,624.663,316.291z"/></g><g fill="#ffff"><path d="M268.323,226.771h-41.551v39.685C230.996,246.516,247.442,230.811,268.323,226.771z"/><path d="M226.771,286.726v39.688h41.551C247.442,322.371,230.996,306.67,226.771,286.726z"/><path d="M331.122,266.455V226.77h-41.552C310.449,230.811,326.892,246.516,331.122,266.455z"/></g></svg>`;
+const PLACEHOLDER_IMAGE_DATA_URI = `data:image/svg+xml,${encodeURIComponent(PLACEHOLDER_SVG)}`;
+const isPlaceholderImg = url => {
+  return !!url && url.includes(PLACEHOLDER_INDICATOR);
+};
+
+/**
+ * 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"
+ * />
+ * ```
  */
 const ProductCardVertical = ({
   id,
@@ -2027,35 +2379,38 @@ const ProductCardVertical = ({
   imageUrl,
   productId,
   description,
-  buttonLabel = 'BUY ONLINE',
+  buttonLabel = "BUY ONLINE",
   onButtonClick,
   className,
-  variant = 'desktop',
-  'data-force-state': forceState
+  variant = "desktop",
+  "data-force-state": forceState
 }) => {
+  const hasPlaceholderImage = !imageUrl || isPlaceholderImg(imageUrl);
+  const productImage = hasPlaceholderImage ? PLACEHOLDER_IMAGE_DATA_URI : imageUrl;
   const handleButtonClick = e => {
     e.preventDefault(); // Prevent card link navigation
     e.stopPropagation(); // Stop event bubbling
     onButtonClick?.();
   };
   const cardClasses = classNames(styles$6.productCardVertical, styles$6[`productCardVertical--${variant}`], {
-    [styles$6['productCardVertical--hover']]: forceState === 'hover',
-    [styles$6['productCardVertical--focus']]: forceState === 'focus'
+    [styles$6["productCardVertical--hover"]]: forceState === "hover",
+    [styles$6["productCardVertical--focus"]]: forceState === "focus"
   }, className);
   return /*#__PURE__*/React.createElement("a", {
     href: url,
     className: cardClasses,
     "aria-label": `View product: ${title}`,
     "data-product-id": id
-  }, imageUrl && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$6.productCardVertical__imageWrapper
   }, /*#__PURE__*/React.createElement(Image, {
-    src: imageUrl,
+    src: productImage,
     alt: title,
-    className: styles$6.productCardVertical__image,
+    className: styles$6.productCardVertical__image + (hasPlaceholderImage ? ` ${styles$6.productCardVertical__placeholderImage}` : ""),
     objectFit: "contain",
     objectPosition: "center",
-    loading: "lazy"
+    loading: "lazy",
+    fallbackSrc: PLACEHOLDER_IMAGE_DATA_URI
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$6.productCardVertical__content
   }, /*#__PURE__*/React.createElement("h3", {
@@ -2074,7 +2429,7 @@ const ProductCardVertical = ({
   })));
 };
 
-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 styles$5 = {"resultsView":"ResultsView-module__resultsView___S4Wh2","searchBarWrapper":"ResultsView-module__searchBarWrapper___XNtwR","tabsContainer":"ResultsView-module__tabsContainer___mB-Q2","tabs":"ResultsView-module__tabs___rOexd","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"};
 
 const ResultsList = ({
   type,
@@ -2173,32 +2528,32 @@ const ResultsList = ({
 
 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"
- * />
- * ```
+/**
+ * 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"
+ * />
+ * ```
  */
 const TabButton = ({
   label,
@@ -2247,23 +2602,23 @@ const AssistanceIcon = props => {
 
 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"
- * />
- * ```
+/**
+ * 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"
+ * />
+ * ```
  */
 const AssistanceBanner = ({
   title = 'Need Assistance?',
@@ -2310,27 +2665,31 @@ const AssistanceBanner = ({
   }))));
 };
 
-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 styles$2 = {"drawerOverlay":"FilterDrawer-module__drawerOverlay___P6M4y","drawerOverlay--open":"FilterDrawer-module__drawerOverlay--open___blJZo","drawerOverlay--closing":"FilterDrawer-module__drawerOverlay--closing___diQr0","drawerPanel":"FilterDrawer-module__drawerPanel___35h-U","drawerPanel--open":"FilterDrawer-module__drawerPanel--open___Fw1SY","drawerCloseButton":"FilterDrawer-module__drawerCloseButton___cfMmf","drawerContent":"FilterDrawer-module__drawerContent___KBff6"};
+
+const OVERLAY_FADE_MS = 300;
+const PANEL_SLIDE_MS = 300;
+const CLOSE_ANIMATION_BUFFER_MS = 50;
+
+/**
+ * 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>
+ * ```
  */
 const FilterDrawer = ({
   isOpen,
@@ -2340,54 +2699,95 @@ const FilterDrawer = ({
 }) => {
   const drawerRef = useRef(null);
   const previouslyFocusedElement = useRef(null);
+  const [renderState, setRenderState] = useState(isOpen ? "opening" : "closed");
 
-  // Focus management
+  // Mount/unmount sequencing for transitions.
   useEffect(() => {
+    let closeTimer;
+    let raf1;
+    let raf2;
     if (isOpen) {
-      // Store previously focused element
-      previouslyFocusedElement.current = document.activeElement;
+      // Ensure it is mounted in the "closed" styles first, then flip to "open" next frame.
+      setRenderState("opening");
+
+      // Double rAF: guarantees at least one paint with the base styles
+      // before we apply the `--open` classes.
+      raf1 = window.requestAnimationFrame(() => {
+        raf2 = window.requestAnimationFrame(() => {
+          setRenderState("open");
+        });
+      });
+      return () => {
+        if (raf1) window.cancelAnimationFrame(raf1);
+        if (raf2) window.cancelAnimationFrame(raf2);
+      };
+    }
 
-      // Focus the drawer
-      if (drawerRef.current) {
-        drawerRef.current.focus();
-      }
+    // If we're currently rendered, play exit animation before unmounting.
+    setRenderState(prev => prev === "closed" ? "closed" : "closing");
+    closeTimer = window.setTimeout(() => {
+      setRenderState("closed");
+    }, PANEL_SLIDE_MS + OVERLAY_FADE_MS + CLOSE_ANIMATION_BUFFER_MS);
+    return () => {
+      if (closeTimer) window.clearTimeout(closeTimer);
+    };
+  }, [isOpen]);
 
-      // Prevent body scroll
-      document.body.style.overflow = 'hidden';
-    } else {
+  // Focus management
+  useEffect(() => {
+    const isRendered = renderState !== "closed";
+    if (!isRendered) {
       // Restore body scroll
-      document.body.style.overflow = '';
+      document.body.style.overflow = "";
 
       // Return focus to previously focused element
       if (previouslyFocusedElement.current) {
         previouslyFocusedElement.current.focus();
       }
+
+      // Reset for next open cycle
+      previouslyFocusedElement.current = null;
+      return;
+    }
+
+    // Store previously focused element (once per open)
+    if (!previouslyFocusedElement.current) {
+      previouslyFocusedElement.current = document.activeElement;
+    }
+
+    // Prevent body scroll for the whole time the drawer is mounted (open + closing animation)
+    document.body.style.overflow = "hidden";
+
+    // Focus the drawer once it reaches open state
+    if (renderState === "open" && drawerRef.current) {
+      drawerRef.current.focus();
     }
     return () => {
-      document.body.style.overflow = '';
+      // In case the component unmounts unexpectedly.
+      document.body.style.overflow = "";
     };
-  }, [isOpen]);
+  }, [renderState]);
 
   // Escape key handler
   useEffect(() => {
     const handleEscape = event => {
-      if (event.key === 'Escape' && isOpen) {
+      if (event.key === "Escape" && renderState !== "closed") {
         onClose();
       }
     };
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, onClose]);
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [renderState, onClose]);
 
   // Focus trap implementation
   useEffect(() => {
-    if (!isOpen || !drawerRef.current) return;
+    if (renderState !== "open" || !drawerRef.current) return;
     const drawer = drawerRef.current;
     const focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
     const firstElement = focusableElements[0];
     const lastElement = focusableElements[focusableElements.length - 1];
     const handleTab = event => {
-      if (event.key !== 'Tab') return;
+      if (event.key !== "Tab") return;
       if (event.shiftKey) {
         // Shift + Tab
         if (document.activeElement === firstElement) {
@@ -2402,20 +2802,21 @@ const FilterDrawer = ({
         }
       }
     };
-    drawer.addEventListener('keydown', handleTab);
-    return () => drawer.removeEventListener('keydown', handleTab);
-  }, [isOpen]);
-  if (!isOpen) return null;
+    drawer.addEventListener("keydown", handleTab);
+    return () => drawer.removeEventListener("keydown", handleTab);
+  }, [renderState]);
+  if (renderState === "closed") return null;
   const handleOverlayClick = event => {
     if (event.target === event.currentTarget) {
       onClose();
     }
   };
   const overlayClasses = classNames(styles$2.drawerOverlay, {
-    [styles$2['drawerOverlay--open']]: isOpen
+    [styles$2["drawerOverlay--open"]]: renderState === "open",
+    [styles$2["drawerOverlay--closing"]]: renderState === "closing"
   });
   const panelClasses = classNames(styles$2.drawerPanel, {
-    [styles$2['drawerPanel--open']]: isOpen
+    [styles$2["drawerPanel--open"]]: renderState === "open"
   }, className);
   return /*#__PURE__*/React.createElement("div", {
     className: overlayClasses,
@@ -2461,6 +2862,23 @@ const FederatedResultsView = ({
   onFilterDrawerToggle,
   onFilterDrawerClose
 }) => {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mql = window.matchMedia("(max-width: 768px)");
+    const update = () => setIsMobile(mql.matches);
+    update();
+
+    // Safari < 14 fallback
+    if (typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", update);
+      return () => mql.removeEventListener("change", update);
+    }
+    mql.addListener(update);
+    return () => mql.removeListener(update);
+  }, []);
   const isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
   const error = activeTab === "products" ? productsError : contentsError;
 
@@ -2524,8 +2942,6 @@ const FederatedResultsView = ({
     isActive: activeTab === "products",
     onClick: () => onTabChange("products"),
     variant: "desktop"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$5.tabSeparator
   }), /*#__PURE__*/React.createElement(TabButton, {
     label: "WEBSITE RESULTS",
     count: contents.length,
@@ -2574,7 +2990,7 @@ const FederatedResultsView = ({
     currentPage: currentPage,
     totalPages: totalPages,
     onPageChange: onPageChange,
-    maxVisiblePages: 10,
+    maxVisiblePages: isMobile ? 3 : 10,
     showPrevious: false,
     ariaLabel: `${activeTab === "products" ? "Products" : "Content"} pagination`
   }))))), onFilterDrawerClose && /*#__PURE__*/React.createElement(FilterDrawer, {
@@ -2590,41 +3006,41 @@ const FederatedResultsView = ({
 
 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
- *
- * This component orchestrates the entire federated search experience, including:
- * - Modal container
- * - Search input
- * - Instant results (2-column layout)
- * - Full results view with tabs and filters
- *
- * The component is fully controlled and does not contain any data fetching logic.
- * All data and callbacks are passed in via props, making it suitable for use in AEM
- * where a controller layer will handle Algolia integration.
- *
- * @example
- * ```tsx
- * <FederatedSearchExperience
- *   isOpen={isOpen}
- *   onOpen={handleOpen}
- *   onClose={handleClose}
- *   query={query}
- *   onQueryChange={setQuery}
- *   onSearchSubmit={handleSubmit}
- *   products={products}
- *   contents={contents}
- *   isLoadingProducts={isLoadingProducts}
- *   isLoadingContents={isLoadingContents}
- *   onSeeAllProducts={handleSeeAllProducts}
- *   onSeeAllContents={handleSeeAllContents}
- *   onSeeAllCombined={handleSeeAllCombined}
- *   activeView={activeView}
- *   onChangeView={setActiveView}
- *   activeTab={activeTab}
- *   onTabChange={setActiveTab}
- * />
- * ```
+/**
+ * FederatedSearchExperience - Top-level search experience component
+ *
+ * This component orchestrates the entire federated search experience, including:
+ * - Modal container
+ * - Search input
+ * - Instant results (2-column layout)
+ * - Full results view with tabs and filters
+ *
+ * The component is fully controlled and does not contain any data fetching logic.
+ * All data and callbacks are passed in via props, making it suitable for use in AEM
+ * where a controller layer will handle Algolia integration.
+ *
+ * @example
+ * ```tsx
+ * <FederatedSearchExperience
+ *   isOpen={isOpen}
+ *   onOpen={handleOpen}
+ *   onClose={handleClose}
+ *   query={query}
+ *   onQueryChange={setQuery}
+ *   onSearchSubmit={handleSubmit}
+ *   products={products}
+ *   contents={contents}
+ *   isLoadingProducts={isLoadingProducts}
+ *   isLoadingContents={isLoadingContents}
+ *   onSeeAllProducts={handleSeeAllProducts}
+ *   onSeeAllContents={handleSeeAllContents}
+ *   onSeeAllCombined={handleSeeAllCombined}
+ *   activeView={activeView}
+ *   onChangeView={setActiveView}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
  */
 const FederatedSearchExperience = ({
   isOpen,
@@ -2700,7 +3116,7 @@ const FederatedSearchExperience = ({
       variant: "mobile"
     })), /*#__PURE__*/React.createElement("div", {
       className: styles$1.mobileFilterButtonWrapper
-    }, /*#__PURE__*/React.createElement("button", {
+    }, onFilterDrawerToggle && /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: styles$1.mobileFilterButton,
       onClick: onFilterDrawerToggle
@@ -2828,5 +3244,5 @@ const SearchTriggerButton = ({
   }, 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, ProductCardVertical, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
+export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, CarouselCard, ContentCardBase, 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