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

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;
@@ -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,28 +204,190 @@ 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"};
 
 /**
@@ -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
@@ -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", {
@@ -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,
@@ -2000,7 +2345,14 @@ 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"};
+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
@@ -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,
@@ -2310,7 +2665,11 @@ 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"};
+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
@@ -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, {
@@ -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