@asante-org/leybold-design-system 1.3.0 → 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,46 +15,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-var __assign = function () {
-  __assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var styles$l = {"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;
@@ -131,10 +92,22 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+/**
+ * Button variant types
+ */
+
+/**
+ * Icon types for button
+ */
+
+/**
+ * Icon position
+ */
+
 /**
  * Get the icon component based on icon type
  */
-var getIcon = function (icon) {
+const getIcon = icon => {
   switch (icon) {
     case "arrow-right":
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -156,10 +129,11 @@ var getIcon = function (icon) {
       return null;
   }
 };
+
 /**
  * Get default icon for certain variants
  */
-var getDefaultIcon = function (variant) {
+const getDefaultIcon = variant => {
   switch (variant) {
     case "link-text":
     case "link-text-alt":
@@ -176,10 +150,11 @@ var getDefaultIcon = function (variant) {
       return "none";
   }
 };
+
 /**
  * Map alias variants to their actual CSS class variants
  */
-var mapVariantToClass = function (variant) {
+const mapVariantToClass = variant => {
   switch (variant) {
     case "text":
       return "link-text";
@@ -187,41 +162,42 @@ var mapVariantToClass = function (variant) {
       return variant;
   }
 };
+
 /**
  * Primary UI component for user interaction
  */
-var Button = function (_a) {
-  var _b;
-  var children = _a.children,
-    _c = _a.variant,
-    variant = _c === void 0 ? "primary" : _c,
-    _d = _a.size,
-    size = _d === void 0 ? "medium" : _d,
-    _e = _a.disabled,
-    disabled = _e === void 0 ? false : _e,
-    onClick = _a.onClick,
-    _f = _a.type,
-    type = _f === void 0 ? "button" : _f,
-    className = _a.className,
-    icon = _a.icon,
-    _g = _a.iconPosition,
-    iconPosition = _g === void 0 ? "right" : _g,
-    ariaLabel = _a.ariaLabel;
-    _a.opensInNewTab;
-    var props = __rest(_a, ["children", "variant", "size", "disabled", "onClick", "type", "className", "icon", "iconPosition", "ariaLabel", "opensInNewTab"]);
+const Button = ({
+  children,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  onClick,
+  type = "button",
+  className,
+  icon,
+  iconPosition = "right",
+  ariaLabel,
+  opensInNewTab,
+  ...props
+}) => {
   // Map alias variants to actual class names
-  var cssVariant = mapVariantToClass(variant);
+  const cssVariant = mapVariantToClass(variant);
+
   // Determine the icon to display
-  var displayIcon = icon !== null && icon !== void 0 ? icon : getDefaultIcon(variant);
-  var iconElement = getIcon(displayIcon);
+  const displayIcon = icon ?? getDefaultIcon(variant);
+  const iconElement = getIcon(displayIcon);
+
   // Check if this is an icon-only button (carousel arrows)
-  var isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
-  var isCarouselLeft = variant === "carousel-arrow-left";
-  var isCarouselRight = variant === "carousel-arrow-right";
-  var buttonClasses = classNames(styles$l.button, styles$l["button--".concat(cssVariant)], styles$l["button--".concat(size)], (_b = {}, _b[styles$l["button--disabled"]] = disabled, _b), className);
-  var iconClasses = classNames(styles$l.button__icon, styles$l["button__icon--".concat(iconPosition)]);
+  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$m.button, styles$m[`button--${cssVariant}`], styles$m[`button--${size}`], {
+    [styles$m["button--disabled"]]: disabled
+  }, className);
+  const iconClasses = classNames(styles$m.button__icon, styles$m[`button__icon--${iconPosition}`]);
+
   // Generate accessible label for icon-only buttons
-  var accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
+  const accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
   return /*#__PURE__*/React.createElement("button", _extends({
     type: type,
     className: buttonClasses,
@@ -233,81 +209,245 @@ var Button = function (_a) {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeft,
-    className: styles$l.button__icon__default
+    className: styles$m.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeftLong,
-    className: styles$l.button__icon__hover
+    className: styles$m.button__icon__hover
   })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight,
-    className: styles$l.button__icon__default
+    className: styles$m.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRightLong,
-    className: styles$l.button__icon__hover
+    className: styles$m.button__icon__hover
   })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, iconElement));
 };
 
-var styles$k = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Footer-module__footer--mobile___9HQC-","footer__container":"Footer-module__footer__container___ohvnm","footer__links":"Footer-module__footer__links___DdVK8","footer__linkGroup":"Footer-module__footer__linkGroup___1B7JA","footer__linkList":"Footer-module__footer__linkList___j-DWF","footer__linkHeading":"Footer-module__footer__linkHeading___LtE6X","footer__link":"Footer-module__footer__link___G5HPW","footer__cta":"Footer-module__footer__cta___MRJLr","footer__socialIcons":"Footer-module__footer__socialIcons___j0aRp","footer__socialIcon":"Footer-module__footer__socialIcon___1uVTm","footer__countrySelector":"Footer-module__footer__countrySelector___pVtN5","footer__bottom":"Footer-module__footer__bottom___77bPL","footer__bottomLeft":"Footer-module__footer__bottomLeft___tlst1","footer__bottomLinks":"Footer-module__footer__bottomLinks___s22h7","footer__bottomLink":"Footer-module__footer__bottomLink___SLzwY","footer__copyright":"Footer-module__footer__copyright___4bZOF","footer__brandSection":"Footer-module__footer__brandSection___BBr5f","footer__logo":"Footer-module__footer__logo___mv-9M","footer__leftCol":"Footer-module__footer__leftCol___vmKNN","footer__motto":"Footer-module__footer__motto___QtB2m","footer__main":"Footer-module__footer__main___NSU9d","footer__badge":"Footer-module__footer__badge___faejb","footer__badgeIcon":"Footer-module__footer__badgeIcon___xJ519","footer__badgeText":"Footer-module__footer__badgeText___imXgG","footer__linkText":"Footer-module__footer__linkText___Gc18Z","footer__linkIcon":"Footer-module__footer__linkIcon___IZzJM","footer__countrySelectorIcon":"Footer-module__footer__countrySelectorIcon___hhEd4"};
+var styles$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]);
 
-/**
- * External link icon (↗) for footer links that open in new tabs
- */
-var ExternalLinkIcon = function (_a) {
-  var className = _a.className,
-    _b = _a.size,
-    size = _b === void 0 ? 15 : _b;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
+  // 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("path", {
-    d: "M11.25 8.125V11.875C11.25 12.2065 11.1183 12.5245 10.8839 12.7589C10.6495 12.9933 10.3315 13.125 10 13.125H3.125C2.79348 13.125 2.47554 12.9933 2.24112 12.7589C2.0067 12.5245 1.875 12.2065 1.875 11.875V5C1.875 4.66848 2.0067 4.35054 2.24112 4.11612C2.47554 3.8817 2.79348 3.75 3.125 3.75H6.875M9.375 1.875H13.125M13.125 1.875V5.625M13.125 1.875L6.25 8.75",
+  }, /*#__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"
-  }));
+    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
+ */
+const ExternalLinkIcon = ({
+  className,
+  size = 15
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 15 15",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  className: className,
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M11.25 8.125V11.875C11.25 12.2065 11.1183 12.5245 10.8839 12.7589C10.6495 12.9933 10.3315 13.125 10 13.125H3.125C2.79348 13.125 2.47554 12.9933 2.24112 12.7589C2.0067 12.5245 1.875 12.2065 1.875 11.875V5C1.875 4.66848 2.0067 4.35054 2.24112 4.11612C2.47554 3.8817 2.79348 3.75 3.125 3.75H6.875M9.375 1.875H13.125M13.125 1.875V5.625M13.125 1.875L6.25 8.75",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+
 /**
  * Atlas Copco Group badge icon (square)
  */
-var AtlasCopcoIcon = function (_a) {
-  var className = _a.className,
-    _b = _a.size,
-    size = _b === void 0 ? 14 : _b;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "0.5",
-    y: "0.5",
-    width: "13",
-    height: "13",
-    rx: "1.5",
-    fill: "#D9D9D9",
-    stroke: "#D9D9D9"
-  }));
-};
+const AtlasCopcoIcon = ({
+  className,
+  size = 14
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 14 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  className: className,
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "13",
+  height: "13",
+  rx: "1.5",
+  fill: "#D9D9D9",
+  stroke: "#D9D9D9"
+}));
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
 
 // =============================================================================
 // SOCIAL ICON COMPONENT
 // =============================================================================
-var SocialIconComponent = function (_a) {
-  var platform = _a.platform;
-  var iconMap = {
+
+const SocialIconComponent = ({
+  platform
+}) => {
+  const iconMap = {
     facebook: faFacebookF,
     x: faXTwitter,
     linkedin: faLinkedinIn,
@@ -318,14 +458,19 @@ var SocialIconComponent = function (_a) {
     icon: iconMap[platform]
   });
 };
-var FooterLink = function (_a) {
-  var item = _a.item,
-    className = _a.className,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'default' : _b;
-  var baseClass = variant === 'bottom' ? styles$k.footer__bottomLink : styles$k.footer__link;
-  var linkClasses = classNames(baseClass, className);
-  var handleClick = function (e) {
+
+// =============================================================================
+// FOOTER LINK COMPONENT
+// =============================================================================
+
+const FooterLink = ({
+  item,
+  className,
+  variant = 'default'
+}) => {
+  const baseClass = variant === 'bottom' ? styles$j.footer__bottomLink : styles$j.footer__link;
+  const linkClasses = classNames(baseClass, className);
+  const handleClick = e => {
     if (item.onClick) {
       e.preventDefault();
       item.onClick();
@@ -339,151 +484,169 @@ var FooterLink = function (_a) {
     target: '_blank',
     rel: 'noopener noreferrer'
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles$k.footer__linkText
+    className: styles$j.footer__linkText
   }, item.label), item.external && /*#__PURE__*/React.createElement("span", {
-    className: styles$k.footer__linkIcon
+    className: styles$j.footer__linkIcon
   }, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
     size: 15
   })));
 };
-var FooterLinkGroup = function (_a) {
-  var heading = _a.heading,
-    links = _a.links,
-    className = _a.className,
-    children = _a.children;
+
+// =============================================================================
+// FOOTER LINK GROUP COMPONENT
+// =============================================================================
+
+const FooterLinkGroup = ({
+  heading,
+  links,
+  className,
+  children
+}) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$k.footer__linkGroup, className)
+    className: classNames(styles$j.footer__linkGroup, className)
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$k.footer__linkHeading
+    className: styles$j.footer__linkHeading
   }, heading), /*#__PURE__*/React.createElement("ul", {
-    className: styles$k.footer__linkList
-  }, links.map(function (link, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: index
-    }, /*#__PURE__*/React.createElement(FooterLink, {
-      item: link
-    }));
-  })), children);
+    className: styles$j.footer__linkList
+  }, links.map((link, index) => /*#__PURE__*/React.createElement("li", {
+    key: index
+  }, /*#__PURE__*/React.createElement(FooterLink, {
+    item: link
+  })))), children);
 };
-var FooterSocialIcons = function (_a) {
-  var links = _a.links,
-    className = _a.className;
+
+// =============================================================================
+// FOOTER SOCIAL ICONS COMPONENT
+// =============================================================================
+
+const FooterSocialIcons = ({
+  links,
+  className
+}) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$k.footer__socialIcons, className)
-  }, links.map(function (link, index) {
-    return /*#__PURE__*/React.createElement("a", {
-      key: index,
-      href: link.href,
-      className: styles$k.footer__socialIcon,
-      "aria-label": link.ariaLabel,
-      target: "_blank",
-      rel: "noopener noreferrer"
-    }, /*#__PURE__*/React.createElement(SocialIconComponent, {
-      platform: link.platform
-    }));
-  }));
+    className: classNames(styles$j.footer__socialIcons, className)
+  }, links.map((link, index) => /*#__PURE__*/React.createElement("a", {
+    key: index,
+    href: link.href,
+    className: styles$j.footer__socialIcon,
+    "aria-label": link.ariaLabel,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(SocialIconComponent, {
+    platform: link.platform
+  }))));
 };
-var FooterSocialIcon = function (_a) {
-  var platform = _a.platform,
-    className = _a.className;
-  var iconClasses = classNames(styles$k.footer__socialIcon, className);
+
+// =============================================================================
+// FOOTER SOCIAL ICON (STANDALONE) COMPONENT
+// =============================================================================
+
+const FooterSocialIcon = ({
+  platform,
+  className
+}) => {
+  const iconClasses = classNames(styles$j.footer__socialIcon, className);
   return /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(SocialIconComponent, {
     platform: platform
   }));
 };
-var FooterBottom = function (_a) {
-  var links = _a.links,
-    copyright = _a.copyright,
-    countrySelector = _a.countrySelector,
-    className = _a.className;
+
+// =============================================================================
+// FOOTER BOTTOM COMPONENT
+// =============================================================================
+
+const FooterBottom = ({
+  links,
+  copyright,
+  countrySelector,
+  className
+}) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$k.footer__bottom, className)
+    className: classNames(styles$j.footer__bottom, className)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$k.footer__bottomLeft
+    className: styles$j.footer__bottomLeft
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$k.footer__bottomLinks
-  }, links.map(function (link, index) {
-    return /*#__PURE__*/React.createElement(FooterLink, {
-      key: index,
-      item: link,
-      variant: "bottom"
-    });
-  })), /*#__PURE__*/React.createElement("p", {
-    className: styles$k.footer__copyright
+    className: styles$j.footer__bottomLinks
+  }, links.map((link, index) => /*#__PURE__*/React.createElement(FooterLink, {
+    key: index,
+    item: link,
+    variant: "bottom"
+  }))), /*#__PURE__*/React.createElement("p", {
+    className: styles$j.footer__copyright
   }, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
     href: countrySelector.href || '#',
-    className: styles$k.footer__countrySelector
+    className: styles$j.footer__countrySelector
   }, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
-    className: styles$k.footer__countrySelectorIcon
+    className: styles$j.footer__countrySelectorIcon
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faGlobe
   })), countrySelector.label));
 };
+
 // =============================================================================
 // 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
  */
-var Footer = function (_a) {
-  var _b = _a.variant,
-    variant = _b === void 0 ? 'desktop' : _b,
-    logo = _a.logo,
-    motto = _a.motto,
-    atlasCopcoBadge = _a.atlasCopcoBadge,
-    quickLinks = _a.quickLinks,
-    _c = _a.quickLinksHeading,
-    quickLinksHeading = _c === void 0 ? 'Quick links' : _c,
-    contactLinks = _a.contactLinks,
-    _d = _a.contactHeading,
-    contactHeading = _d === void 0 ? 'Contact us' : _d,
-    socialLinks = _a.socialLinks,
-    contactFormButton = _a.contactFormButton,
-    bottomLinks = _a.bottomLinks,
-    copyright = _a.copyright,
-    countrySelector = _a.countrySelector,
-    className = _a.className;
-  var isMobile = variant === 'mobile';
-  var footerClasses = classNames(styles$k.footer, isMobile && styles$k['footer--mobile'], className);
-  var LogoWrapper = logo.href ? 'a' : 'div';
-  var logoProps = logo.href ? {
+const Footer = ({
+  variant = 'desktop',
+  logo,
+  motto,
+  atlasCopcoBadge,
+  quickLinks,
+  quickLinksHeading = 'Quick links',
+  contactLinks,
+  contactHeading = 'Contact us',
+  socialLinks,
+  contactFormButton,
+  bottomLinks,
+  copyright,
+  countrySelector,
+  className
+}) => {
+  const isMobile = variant === 'mobile';
+  const footerClasses = classNames(styles$j.footer, isMobile && styles$j['footer--mobile'], className);
+  const LogoWrapper = logo.href ? 'a' : 'div';
+  const logoProps = logo.href ? {
     href: logo.href,
-    className: styles$k.footer__logo
+    className: styles$j.footer__logo
   } : {
-    className: styles$k.footer__logo
+    className: styles$j.footer__logo
   };
+
   // Logo + Motto + Badge component (used in both layouts)
-  var LogoSection = function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
-      src: logo.src,
-      alt: logo.alt
-    })), /*#__PURE__*/React.createElement("div", {
-      className: styles$k.footer__leftCol
-    }, /*#__PURE__*/React.createElement("h2", {
-      className: styles$k.footer__motto
-    }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
-      className: styles$k.footer__badge
-    }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
-      className: styles$k.footer__badgeIcon
-    }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
-      size: 14
-    })), /*#__PURE__*/React.createElement("span", {
-      className: styles$k.footer__badgeText
-    }, atlasCopcoBadge.text))));
-  };
+  const LogoSection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
+    src: logo.src,
+    alt: logo.alt
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$j.footer__leftCol
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$j.footer__motto
+  }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
+    className: styles$j.footer__badge
+  }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
+    className: styles$j.footer__badgeIcon
+  }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles$j.footer__badgeText
+  }, atlasCopcoBadge.text))));
+
   // Mobile layout: Links at top, logo/motto at bottom
   if (isMobile) {
     return /*#__PURE__*/React.createElement("footer", {
       className: footerClasses
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$k.footer__container
+      className: styles$j.footer__container
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$k.footer__links
+      className: styles$j.footer__links
     }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
       heading: quickLinksHeading,
       links: quickLinks
@@ -491,7 +654,7 @@ var Footer = function (_a) {
       heading: contactHeading,
       links: contactLinks
     })), contactFormButton && /*#__PURE__*/React.createElement("div", {
-      className: styles$k.footer__cta
+      className: styles$j.footer__cta
     }, /*#__PURE__*/React.createElement("a", {
       href: contactFormButton.href,
       style: {
@@ -510,33 +673,34 @@ var Footer = function (_a) {
       copyright: copyright,
       countrySelector: countrySelector
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$k.footer__brandSection
+      className: styles$j.footer__brandSection
     }, /*#__PURE__*/React.createElement(LogoSection, null))));
   }
+
   // Desktop layout: Logo at top, 3-column main content
   return /*#__PURE__*/React.createElement("footer", {
     className: footerClasses
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$k.footer__container
+    className: styles$j.footer__container
   }, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
     src: logo.src,
     alt: logo.alt
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$k.footer__main
+    className: styles$j.footer__main
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$k.footer__leftCol
+    className: styles$j.footer__leftCol
   }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$k.footer__motto
+    className: styles$j.footer__motto
   }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
-    className: styles$k.footer__badge
+    className: styles$j.footer__badge
   }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
-    className: styles$k.footer__badgeIcon
+    className: styles$j.footer__badgeIcon
   }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
     size: 14
   })), /*#__PURE__*/React.createElement("span", {
-    className: styles$k.footer__badgeText
+    className: styles$j.footer__badgeText
   }, atlasCopcoBadge.text))), /*#__PURE__*/React.createElement("div", {
-    className: styles$k.footer__links
+    className: styles$j.footer__links
   }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
     heading: quickLinksHeading,
     links: quickLinks
@@ -552,46 +716,48 @@ var Footer = function (_a) {
   })));
 };
 
-var styles$j = {"pagination":"Pagination-module__pagination___Kih79","dividerLine":"Pagination-module__dividerLine___85LAX","paginationList":"Pagination-module__paginationList___-lZpm","paginationItem":"Pagination-module__paginationItem___VsGFa","pageButton":"Pagination-module__pageButton___b6UNF","pageButtonActive":"Pagination-module__pageButtonActive___D9m18","navButton":"Pagination-module__navButton___ZCIai","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","navIcon":"Pagination-module__navIcon___-BVJ3","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
+var styles$i = {"pagination":"Pagination-module__pagination___Kih79","dividerLine":"Pagination-module__dividerLine___85LAX","paginationList":"Pagination-module__paginationList___-lZpm","paginationItem":"Pagination-module__paginationItem___VsGFa","pageButton":"Pagination-module__pageButton___b6UNF","pageButtonActive":"Pagination-module__pageButtonActive___D9m18","navButton":"Pagination-module__navButton___ZCIai","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","navIcon":"Pagination-module__navIcon___-BVJ3","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
 
-var PaginationItem = function (_a) {
-  var page = _a.page,
-    isActive = _a.isActive,
-    onClick = _a.onClick,
-    className = _a.className;
-  var handleClick = function () {
+const PaginationItem = ({
+  page,
+  isActive,
+  onClick,
+  className
+}) => {
+  const handleClick = () => {
     if (!isActive) {
       onClick(page);
     }
   };
-  var handleKeyDown = function (event) {
+  const handleKeyDown = event => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       handleClick();
     }
   };
   return /*#__PURE__*/React.createElement("li", {
-    className: styles$j.paginationItem
+    className: styles$i.paginationItem
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    className: "".concat(styles$j.pageButton, " ").concat(isActive ? styles$j.pageButtonActive : "", " ").concat(className || ""),
+    className: `${styles$i.pageButton} ${isActive ? styles$i.pageButtonActive : ""} ${className || ""}`,
     "aria-current": isActive ? "page" : undefined,
-    "aria-label": "Page ".concat(page),
+    "aria-label": `Page ${page}`,
     disabled: isActive,
     tabIndex: isActive ? -1 : 0
   }, page));
 };
 
-var PaginationButton = function (_a) {
-  var label = _a.label,
-    disabled = _a.disabled,
-    onClick = _a.onClick,
-    direction = _a.direction,
-    className = _a.className,
-    ariaLabel = _a.ariaLabel;
-  var handleKeyDown = function (event) {
+const PaginationButton = ({
+  label,
+  disabled,
+  onClick,
+  direction,
+  className,
+  ariaLabel
+}) => {
+  const handleKeyDown = event => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       if (!disabled) {
@@ -600,130 +766,130 @@ var PaginationButton = function (_a) {
     }
   };
   return /*#__PURE__*/React.createElement("li", {
-    className: styles$j.paginationItem
+    className: styles$i.paginationItem
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
     onKeyDown: handleKeyDown,
     disabled: disabled,
-    className: "".concat(styles$j.navButton, " ").concat(styles$j["navButton--".concat(direction)], " ").concat(disabled ? styles$j.navButtonDisabled : "", " ").concat(className || ""),
+    className: `${styles$i.navButton} ${styles$i[`navButton--${direction}`]} ${disabled ? styles$i.navButtonDisabled : ""} ${className || ""}`,
     "aria-label": ariaLabel || label,
     tabIndex: disabled ? -1 : 0
   }, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faChevronRight$1,
-    className: styles$j.navIcon,
+    className: styles$i.navIcon,
     "aria-hidden": "true"
   })));
 };
 
-var PaginationEllipsis = function (_a) {
-  var className = _a.className;
+const PaginationEllipsis = ({
+  className
+}) => {
   return /*#__PURE__*/React.createElement("li", {
-    className: "".concat(styles$j.paginationItem, " ").concat(styles$j.ellipsis),
+    className: `${styles$i.paginationItem} ${styles$i.ellipsis}`,
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(styles$j.ellipsisText, " ").concat(className || "")
+    className: `${styles$i.ellipsisText} ${className || ""}`
   }, "..."));
 };
 
 /**
  * Generate page numbers to display with ellipsis logic
  */
-var generatePageNumbers = function (currentPage, totalPages, maxVisiblePages) {
+const generatePageNumbers = (currentPage, totalPages, maxVisiblePages) => {
   if (totalPages <= maxVisiblePages) {
     return Array.from({
       length: totalPages
-    }, function (_, i) {
-      return i + 1;
-    });
+    }, (_, i) => i + 1);
   }
-  var pages = [];
-  var halfVisible = Math.floor(maxVisiblePages / 2);
+  const pages = [];
+  const halfVisible = Math.floor(maxVisiblePages / 2);
+
   // Always show first page
   pages.push(1);
-  var startPage = Math.max(2, currentPage - halfVisible);
-  var endPage = Math.min(totalPages - 1, currentPage + halfVisible);
+  let startPage = Math.max(2, currentPage - halfVisible);
+  let endPage = Math.min(totalPages - 1, currentPage + halfVisible);
+
   // Adjust if we're near the start
   if (currentPage <= halfVisible + 1) {
     endPage = Math.min(maxVisiblePages - 1, totalPages - 1);
     startPage = 2;
   }
+
   // Adjust if we're near the end
   if (currentPage >= totalPages - halfVisible) {
     startPage = Math.max(2, totalPages - maxVisiblePages + 2);
     endPage = totalPages - 1;
   }
+
   // Add ellipsis after first page if needed
   if (startPage > 2) {
     pages.push("ellipsis-start");
   }
+
   // Add middle pages
-  for (var i = startPage; i <= endPage; i++) {
+  for (let i = startPage; i <= endPage; i++) {
     pages.push(i);
   }
+
   // Add ellipsis before last page if needed
   if (endPage < totalPages - 1) {
     pages.push("ellipsis-end");
   }
+
   // Always show last page
   if (totalPages > 1) {
     pages.push(totalPages);
   }
   return pages;
 };
-var Pagination = function (_a) {
-  var currentPage = _a.currentPage,
-    totalPages = _a.totalPages,
-    onPageChange = _a.onPageChange,
-    _b = _a.maxVisiblePages,
-    maxVisiblePages = _b === void 0 ? 10 : _b,
-    _c = _a.showPrevious,
-    showPrevious = _c === void 0 ? true : _c,
-    _d = _a.showNext,
-    showNext = _d === void 0 ? true : _d,
-    _e = _a.previousLabel,
-    previousLabel = _e === void 0 ? "Previous" : _e,
-    _f = _a.nextLabel,
-    nextLabel = _f === void 0 ? "Next" : _f,
-    className = _a.className,
-    _g = _a.ariaLabel,
-    ariaLabel = _g === void 0 ? "Pagination" : _g;
-  var pageNumbers = useMemo(function () {
-    return generatePageNumbers(currentPage, totalPages, maxVisiblePages);
-  }, [currentPage, totalPages, maxVisiblePages]);
-  var handlePageChange = function (page) {
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  maxVisiblePages = 10,
+  showPrevious = true,
+  showNext = true,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  className,
+  ariaLabel = "Pagination"
+}) => {
+  const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
+  const handlePageChange = page => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
       onPageChange(page);
     }
   };
-  var handlePrevious = function () {
+  const handlePrevious = () => {
     handlePageChange(currentPage - 1);
   };
-  var handleNext = function () {
+  const handleNext = () => {
     handlePageChange(currentPage + 1);
   };
+
   // Don't render if there's only one page or no pages
   if (totalPages <= 1) {
     return null;
   }
   return /*#__PURE__*/React.createElement("nav", {
-    className: "".concat(styles$j.pagination, " ").concat(className || ""),
+    className: `${styles$i.pagination} ${className || ""}`,
     "aria-label": ariaLabel,
     role: "navigation"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$j.dividerLine
+    className: styles$i.dividerLine
   }), /*#__PURE__*/React.createElement("ul", {
-    className: styles$j.paginationList
+    className: styles$i.paginationList
   }, showPrevious && /*#__PURE__*/React.createElement(PaginationButton, {
     label: previousLabel,
     disabled: currentPage === 1,
     onClick: handlePrevious,
     direction: "previous",
     ariaLabel: "Go to previous page"
-  }), pageNumbers.map(function (page, index) {
+  }), pageNumbers.map((page, index) => {
     if (page === "ellipsis-start" || page === "ellipsis-end") {
       return /*#__PURE__*/React.createElement(PaginationEllipsis, {
-        key: "ellipsis-".concat(index)
+        key: `ellipsis-${index}`
       });
     }
     return /*#__PURE__*/React.createElement(PaginationItem, {
@@ -741,130 +907,7 @@ var Pagination = function (_a) {
   })));
 };
 
-var styles$i = {"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"};
-
-var styles$h = {"imageContainer":"Image-module__imageContainer___iD5Kd","loading":"Image-module__loading___Sh1zO","image":"Image-module__image___1pa50","error":"Image-module__error___0LGZ2","skeleton":"Image-module__skeleton___0bGS6","shimmer":"Image-module__shimmer___aanrl","errorState":"Image-module__errorState___TjV-8","errorIcon":"Image-module__errorIcon___QCKvj","errorText":"Image-module__errorText___Q8pnb"};
-
-var Image = function (_a) {
-  var src = _a.src,
-    alt = _a.alt,
-    width = _a.width,
-    height = _a.height,
-    _b = _a.loading,
-    loading = _b === void 0 ? "lazy" : _b,
-    _c = _a.decoding,
-    decoding = _c === void 0 ? "async" : _c,
-    _d = _a.objectFit,
-    objectFit = _d === void 0 ? "cover" : _d,
-    _e = _a.objectPosition,
-    objectPosition = _e === void 0 ? "center" : _e,
-    aspectRatio = _a.aspectRatio,
-    _f = _a.isDecorative,
-    isDecorative = _f === void 0 ? false : _f,
-    fallbackSrc = _a.fallbackSrc,
-    onLoad = _a.onLoad,
-    onError = _a.onError,
-    _g = _a.className,
-    className = _g === void 0 ? "" : _g,
-    srcSet = _a.srcSet,
-    sizes = _a.sizes;
-  var _h = useState(true),
-    isLoading = _h[0],
-    setIsLoading = _h[1];
-  var _j = useState(false),
-    hasError = _j[0],
-    setHasError = _j[1];
-  var _k = useState(src),
-    currentSrc = _k[0],
-    setCurrentSrc = _k[1];
-  var handleLoad = useCallback(function () {
-    setIsLoading(false);
-    setHasError(false);
-    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
-  }, [onLoad]);
-  var handleError = useCallback(function () {
-    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 === null || onError === void 0 ? void 0 : onError();
-    }
-  }, [fallbackSrc, currentSrc, onError]);
-  // Accessibility: decorative images should have empty alt and be hidden from screen readers
-  var accessibilityProps = isDecorative ? {
-    alt: "",
-    "aria-hidden": true,
-    role: "presentation"
-  } : {
-    alt: alt
-  };
-  var containerStyle = __assign(__assign(__assign({}, aspectRatio && {
-    aspectRatio: aspectRatio
-  }), width && {
-    width: typeof width === "number" ? "".concat(width, "px") : width
-  }), height && {
-    height: typeof height === "number" ? "".concat(height, "px") : height
-  });
-  var imageStyle = {
-    objectFit: objectFit,
-    objectPosition: objectPosition
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$h.imageContainer, " ").concat(className, " ").concat(isLoading ? styles$h.loading : "", " ").concat(hasError ? styles$h.error : ""),
-    style: containerStyle
-  }, isLoading && /*#__PURE__*/React.createElement("div", {
-    className: styles$h.skeleton,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$h.shimmer
-  })), hasError && !fallbackSrc ? /*#__PURE__*/React.createElement("div", {
-    className: styles$h.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$h.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$h.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$h.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
@@ -877,89 +920,87 @@ 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"]
 };
 
-var PLACEHOLDER_INDICATOR = "?placeholder-storybook";
-var 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>";
-var PLACEHOLDER_IMAGE_DATA_URI = "data:image/svg+xml,".concat(encodeURIComponent(PLACEHOLDER_SVG));
-var isPlaceholderImg = function (url) {
-  return !!url && url.includes(PLACEHOLDER_INDICATOR);
-};
-var ProductCardHorizontal = function (_a) {
-  _a.id;
-    var imageUrl = _a.imageUrl,
-    _b = _a.showProductImage,
-    showProductImage = _b === void 0 ? true : _b,
-    url = _a.url,
-    title = _a.title;
-    _a.description;
-    var price = _a.price,
-    productId = _a.productId,
-    button = _a.button,
-    utm = _a.utm,
-    _c = _a.className,
-    className = _c === void 0 ? "" : _c,
-    style = _a.style,
-    code = _a.code,
-    showProductPrice = _a.showProductPrice;
+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,
+  price,
+  productId,
+  button,
+  utm,
+  className = "",
+  style,
+  code,
+  showProductPrice
+}) => {
   if (!title) {
     return null;
   }
-  console.log("Rendering ProductCardHorizontal with props:", {
-    showProductPrice: showProductPrice,
-    price: price
-  });
-  var hasPlaceholderImage = showProductImage && (!imageUrl || isPlaceholderImg(imageUrl));
-  var productImage = hasPlaceholderImage ? PLACEHOLDER_IMAGE_DATA_URI : imageUrl;
-  var href = !utm || url && url.indexOf("utm") > -1 ? url : url + "?utm_source=".concat(utm.utmSource, "&utm_medium=").concat(utm.utmMedium, "&utm_campaign=").concat(utm.utmCampaign);
+  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: "".concat(styles$i.productCard, " ").concat(className),
-    "aria-label": "View product: ".concat(title)
+    className: `${styles$h.productCard} ${className}`,
+    "aria-label": `View product: ${title}`
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$i.productWrapper, " ").concat(showProductImage ? hasPlaceholderImage ? styles$i.withPlaceholder : styles$i.withImage : ""),
+    className: `${styles$h.productWrapper} ${showProductImage ? hasPlaceholderImage ? styles$h.withPlaceholder : styles$h.withImage : ""}`,
     style: style
   }, showProductImage && /*#__PURE__*/React.createElement("div", {
-    className: styles$i.productImage
+    className: styles$h.productImage
   }, /*#__PURE__*/React.createElement(Image, {
-    src: productImage || PLACEHOLDER_IMAGE_DATA_URI,
+    src: productImage,
     alt: title,
-    className: hasPlaceholderImage ? styles$i.placeholderImage : "",
+    className: hasPlaceholderImage ? styles$h.placeholderImage : "",
     objectFit: hasPlaceholderImage ? "contain" : "cover",
-    fallbackSrc: PLACEHOLDER_IMAGE_DATA_URI
+    fallbackSrc: PLACEHOLDER_IMAGE_DATA_URI$1
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$i.productTitleDescriptionWrapper
+    className: styles$h.productTitleDescriptionWrapper
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$i.productTitle
+    className: styles$h.productTitle
   }, title), productId || code ? /*#__PURE__*/React.createElement("p", {
-    className: styles$i.productId
+    className: styles$h.productId
   }, productId || code) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$i.productPriceCtaWrapper
+    className: styles$h.productPriceCtaWrapper
   }, /*#__PURE__*/React.createElement("p", {
-    className: styles$i.productPrice
+    className: styles$h.productPrice
   }, showProductPrice ? price || "" : ""), button ? /*#__PURE__*/React.createElement(Button, {
-    className: styles$i.productButton,
+    className: styles$h.productButton,
     onClick: button.onClick,
     size: "extra-small"
   }, button.label) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowUpRight,
-    className: styles$i.productArrowIcon,
+    className: styles$h.productArrowIcon,
     "aria-hidden": "true"
   }))));
 };
+
 // Alias for backward compatibility
-var ProductCardHorizontalParts = ProductCardHorizontal;
+const ProductCardHorizontalParts = ProductCardHorizontal;
 
 var styles$g = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
 
 // Adapter to map design system props to ProductCardHorizontalParts props
-var SpareCardAdapter = function (props) {
-  var spare = props.spare,
-    rest = __rest(props, ["spare"]);
+const SpareCardAdapter = props => {
+  const {
+    spare,
+    ...rest
+  } = props;
   return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
     className: styles$g.spareCard,
-    url: (spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#",
-    title: (spare === null || spare === void 0 ? void 0 : spare.name) || (spare === null || spare === void 0 ? void 0 : spare.title) || "",
-    description: (spare === null || spare === void 0 ? void 0 : spare.description) || "",
-    price: (spare === null || spare === void 0 ? void 0 : spare.priceValue) || (spare === null || spare === void 0 ? void 0 : spare.price) || (props === null || props === void 0 ? void 0 : props.productPrice) || ""
+    url: spare?.url || spare?.link || "#",
+    title: spare?.name || spare?.title || "",
+    description: spare?.description || "",
+    price: spare?.priceValue || spare?.price || props?.productPrice || ""
     // imageUrl={spare?.["img-product"] || spare?.image || ""}
     ,
     utm: props.utm,
@@ -967,43 +1008,41 @@ var SpareCardAdapter = function (props) {
     showProductImage: false,
     button: {
       label: rest.cta || "View Product",
-      onClick: function () {
-        return window.open((spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#", "_blank");
-      }
+      onClick: () => window.open(spare?.url || spare?.link || "#", "_blank")
     }
   });
 };
+
 // Re-export the design system component with Leybold styling
-var ProductCardDetails = function (_a) {
-  var id = _a.id,
-    imageUrl = _a.imageUrl,
-    title = _a.title,
-    description = _a.description,
-    price = _a.price,
-    code = _a.code,
-    facets = _a.facets,
-    hit = _a.hit,
-    utm = _a.utm,
-    _b = _a.className,
-    className = _b === void 0 ? "" : _b,
-    ProductCardComponent = _a.ProductCardComponent,
-    hidespares = _a.hidespares,
-    showProductPrice = _a.showProductPrice,
-    _c = _a.showProductImage,
-    showProductImage = _c === void 0 ? true : _c;
+const ProductCardDetails = ({
+  id,
+  imageUrl,
+  title,
+  description,
+  price,
+  code,
+  facets,
+  hit,
+  utm,
+  className = "",
+  ProductCardComponent,
+  hidespares,
+  showProductPrice,
+  showProductImage = true
+}) => {
   // Build the hit object expected by ProductDetailsCard
-  var hitData = hit || {
-    id: id,
-    title: title,
-    description: description,
-    price: price,
-    code: code,
+  const hitData = hit || {
+    id,
+    title,
+    description,
+    price,
+    code,
     image: imageUrl
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$g.productDetails
   }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
-    className: "".concat(className),
+    className: `${className}`,
     title: title,
     imageUrl: showProductImage ? imageUrl : "",
     imageAlt: title,
@@ -1018,27 +1057,29 @@ var ProductCardDetails = function (_a) {
   }));
 };
 
-var ContentCardBase = function (_a) {
-  var title = _a.title,
-    variant = _a.variant,
-    url = _a.url,
-    imageUrl = _a.imageUrl,
-    category = _a.category,
-    meta = _a.meta,
-    excerpt = _a.excerpt,
-    _b = _a.className,
-    className = _b === void 0 ? "" : _b,
-    style = _a.style,
-    ariaLabel = _a.ariaLabel,
-    contentMetaClassName = _a.contentMetaClassName,
-    contentCategoryClassName = _a.contentCategoryClassName,
-    contentMetaTextClassName = _a.contentMetaTextClassName,
-    contentTitleClassName = _a.contentTitleClassName,
-    contentExcerptClassName = _a.contentExcerptClassName;
+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);
-  var fallbackImage = "/assets/list-card.png";
-  var isCareerView = variant === "career-view";
-  var defaultAriaLabel = isCareerView ? "View career opportunity: ".concat(title) : "View content: ".concat(title);
+  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,
@@ -1068,31 +1109,33 @@ var ContentCardBase = function (_a) {
     className: contentMetaClassName
   }, category && /*#__PURE__*/React.createElement("span", {
     className: contentCategoryClassName
-  }, category), meta && /*#__PURE__*/React.createElement("span", {
+  }, 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), /*#__PURE__*/React.createElement(Button, {
+  }, 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"};
 
-var ContentCardVertical = function (_a) {
-  var id = _a.id,
-    title = _a.title,
-    url = _a.url,
-    imageUrl = _a.imageUrl,
-    category = _a.category,
-    meta = _a.meta,
-    excerpt = _a.excerpt,
-    _b = _a.className,
-    className = _b === void 0 ? "" : _b,
-    variant = _a.variant;
-  var cardClasses = classNames(styles$f.contentCard, styles$f["contentCard--".concat(variant)], className);
+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,
@@ -1114,45 +1157,50 @@ var ContentCardVertical = function (_a) {
 
 // Adapter component that maps props from AlgoliaDynamicSearchRaw to ProductCardHorizontal
 // AlgoliaDynamicSearchRaw passes: title, cardLink, productPrice, cta, hit (original data)
-var cardAdapter = function (props) {
-  var hit = props.hit,
-    title = props.title,
-    cardLink = props.cardLink,
-    productPrice = props.productPrice;
-    props.cta;
-    var showProductPrice = props.showProductPrice,
-    className = props.className,
-    queryType = props.queryType;
+
+const cardAdapter = props => {
+  const {
+    hit,
+    title,
+    cardLink,
+    productPrice,
+    showProductPrice,
+    className,
+    queryType
+  } = props;
   return /*#__PURE__*/React.createElement(ContentCardVertical, {
-    id: (hit === null || hit === void 0 ? void 0 : hit.id) || "",
+    id: hit?.id || "",
     variant: queryType && queryType === "careers" ? "career-view" : "content-view",
-    title: title || (hit === null || hit === void 0 ? void 0 : hit.title) || "",
-    url: cardLink || (hit === null || hit === void 0 ? void 0 : hit.link) || "#",
-    imageUrl: (hit === null || hit === void 0 ? void 0 : hit.image) || "",
-    category: (hit === null || hit === void 0 ? void 0 : hit.category) || "",
-    meta: showProductPrice ? productPrice || (hit === null || hit === void 0 ? void 0 : hit.price) || "" : "",
-    excerpt: (hit === null || hit === void 0 ? void 0 : hit.description) || "",
+    title: title || hit?.title || "",
+    url: cardLink || hit?.link || "#",
+    imageUrl: hit?.image || "",
+    category: hit?.category || "",
+    meta: showProductPrice ? productPrice || hit?.price || "" : "",
+    excerpt: hit?.description || "",
     className: className
   });
 };
-var ProductCardAdapter = function (props) {
-  var hit = props.hit,
-    title = props.title,
-    cardLink = props.cardLink,
-    productPrice = props.productPrice,
-    cta = props.cta,
-    showProductPrice = props.showProductPrice,
-    showProductImage = props.showProductImage,
-    className = props.className,
-    code = props.code,
-    utm = props.utm;
+const ProductCardAdapter = props => {
+  const {
+    hit,
+    title,
+    cardLink,
+    productPrice,
+    cta,
+    showProductPrice,
+    showProductImage,
+    className,
+    code,
+    utm
+  } = props;
+
   // Get values from direct props or fallback to hit object
-  var url = cardLink || (hit === null || hit === void 0 ? void 0 : hit.link) || "#";
-  var imageUrl = (hit === null || hit === void 0 ? void 0 : hit.image) || "";
-  var price = showProductPrice ? productPrice || (hit === null || hit === void 0 ? void 0 : hit.price) || "" : "";
-  var productTitle = title || (hit === null || hit === void 0 ? void 0 : hit.title) || "";
-  var productCode = code || (hit === null || hit === void 0 ? void 0 : hit.code) || "";
-  var buttonLabel = cta || "View Product";
+  const url = cardLink || hit?.link || "#";
+  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,
@@ -1163,78 +1211,83 @@ var ProductCardAdapter = function (props) {
     price: price,
     button: {
       label: buttonLabel,
-      onClick: function () {
-        return window.open(url, "_blank");
-      }
+      onClick: () => window.open(url, "_blank")
     },
     className: className,
-    style: __assign({}, showProductImage ? {
-      minHeight: "130px"
-    } : {}),
+    style: {
+      ...(showProductImage ? {
+        minHeight: "130px"
+      } : {})
+    },
     code: productCode,
     showProductPrice: showProductPrice
   });
 };
-var ProductCardDetailsAdapter = function (props) {
-  var hit = props.hit,
-    title = props.title;
-    props.cardLink;
-    var productPrice = props.productPrice;
-    props.cta;
-    var showProductPrice = props.showProductPrice,
-    showProductImage = props.showProductImage,
-    className = props.className,
-    code = props.code,
-    utm = props.utm,
-    facets = props.facets,
-    related_products = props.related_products,
-    hidespares = props.hidespares;
+const ProductCardDetailsAdapter = props => {
+  const {
+    hit,
+    title,
+    productPrice,
+    showProductPrice,
+    showProductImage,
+    className,
+    code,
+    utm,
+    facets,
+    related_products,
+    hidespares
+  } = props;
   if (!title) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ProductCardDetails, {
-    imageUrl: (hit === null || hit === void 0 ? void 0 : hit.image) || "",
+    imageUrl: hit?.image || "",
     title: title,
-    description: (hit === null || hit === void 0 ? void 0 : hit.description) || "",
-    price: (hit === null || hit === void 0 ? void 0 : hit.price) || "" || productPrice,
-    code: (hit === null || hit === void 0 ? void 0 : hit.code) || "" || code,
+    description: hit?.description || "",
+    price: hit?.price || "" || productPrice,
+    code: hit?.code || "" || code,
     hit: hit,
     utm: utm,
     className: className,
     facets: facets,
-    relatedProducts: (hit === null || hit === void 0 ? void 0 : hit.related_products) || related_products,
+    relatedProducts: hit?.related_products || related_products,
     hidespares: hidespares,
     showProductPrice: showProductPrice,
     showProductImage: showProductImage
   });
 };
-var ButtonAdapter = function (props) {
-  var label = props.label,
-    onClick = props.onClick,
-    className = props.className;
+const ButtonAdapter = props => {
+  const {
+    label,
+    onClick,
+    className
+  } = props;
   return /*#__PURE__*/React.createElement(Button, {
     className: className,
     onClick: onClick
   }, label);
 };
-var AlgoliaDynamicSearchLeybold = function (props) {
-  var parentComponentProps = {
-    queryType: props === null || props === void 0 ? void 0 : props.queryType,
-    showProductPrice: props === null || props === void 0 ? void 0 : props.showProductPrice,
-    showProductImage: props === null || props === void 0 ? void 0 : props.showProductImage,
-    hitCta: props === null || props === void 0 ? void 0 : props.hitCta,
-    hidespares: props === null || props === void 0 ? void 0 : props.hidespares
+const AlgoliaDynamicSearchLeybold = props => {
+  const parentComponentProps = {
+    queryType: props?.queryType,
+    showProductPrice: props?.showProductPrice,
+    showProductImage: props?.showProductImage,
+    hitCta: props?.hitCta,
+    hidespares: props?.hidespares
   };
-  var innerComponents = {
-    Card: function (innerProps) {
-      return cardAdapter(__assign(__assign({}, parentComponentProps), innerProps));
-    },
-    ProductCard: function (innerProps) {
-      return ProductCardAdapter(__assign(__assign({}, parentComponentProps), innerProps));
-    },
-    ProductDetailsCard: function (innerProps) {
-      return ProductCardDetailsAdapter(__assign(__assign({}, parentComponentProps), innerProps));
-    },
+  const innerComponents = {
+    Card: innerProps => cardAdapter({
+      ...parentComponentProps,
+      ...innerProps
+    }),
+    ProductCard: innerProps => ProductCardAdapter({
+      ...parentComponentProps,
+      ...innerProps
+    }),
+    ProductDetailsCard: innerProps => ProductCardDetailsAdapter({
+      ...parentComponentProps,
+      ...innerProps
+    }),
     Button: ButtonAdapter
   };
   return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
@@ -1242,20 +1295,22 @@ var AlgoliaDynamicSearchLeybold = function (props) {
   }));
 };
 
-var QrFormButtonAdapter = function (_a) {
-  var label = _a.label,
-    onClick = _a.onClick,
-    _b = _a.buttonStyle,
-    buttonStyle = _b === void 0 ? "primary" : _b,
-    href = _a.href,
-    target = _a.target,
-    _c = _a.type,
-    type = _c === void 0 ? "button" : _c,
-    element = _a.element,
-    pageTarget = _a["data-page_target"],
-    className = _a.className;
+// Adapter to map QrForm's expected button props to our Button component
+
+const QrFormButtonAdapter = ({
+  label,
+  onClick,
+  buttonStyle = "primary",
+  href,
+  target,
+  type = "button",
+  element,
+  "data-page_target": pageTarget,
+  className
+}) => {
   // Map buttonStyle to our variant
-  var variant = buttonStyle === "secondary" ? "secondary" : "primary";
+  const variant = buttonStyle === "secondary" ? "secondary" : "primary";
+
   // If it's an anchor element (has href or element='a'), render as link
   if (element === "a" || href) {
     return /*#__PURE__*/React.createElement("a", {
@@ -1274,19 +1329,18 @@ var QrFormButtonAdapter = function (_a) {
       size: "small"
     }, label));
   }
+
   // Otherwise render as button
   return /*#__PURE__*/React.createElement(Button, {
     variant: variant,
     type: type,
-    onClick: onClick ? function (e) {
-      return onClick(e);
-    } : undefined,
+    onClick: onClick ? e => onClick(e) : undefined,
     className: className,
     "data-page_target": pageTarget,
     size: "small"
   }, label);
 };
-var QrFormLeybold = function (props) {
+const QrFormLeybold = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
   }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
@@ -1294,19 +1348,18 @@ var QrFormLeybold = function (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"};
 
-var ModalCloseButton = function (_a) {
-  var onClick = _a.onClick,
-    _b = _a.ariaLabel,
-    ariaLabel = _b === void 0 ? 'Close search' : _b,
-    _c = _a.className,
-    className = _c === void 0 ? '' : _c;
+const ModalCloseButton = ({
+  onClick,
+  ariaLabel = 'Close search',
+  className = ''
+}) => {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
     "aria-label": ariaLabel,
-    className: "".concat(styles$e.closeButton, " ").concat(className)
+    className: `${styles$e.closeButton} ${className}`
   }, /*#__PURE__*/React.createElement("span", {
     className: styles$e.closeButton__icon
   }, /*#__PURE__*/React.createElement("svg", {
@@ -1333,86 +1386,185 @@ var ModalCloseButton = function (_a) {
   }, "CLOSE X"));
 };
 
-var SearchModal = function (_a) {
-  var isOpen = _a.isOpen,
-    onClose = _a.onClose,
-    _b = _a.title,
-    title = _b === void 0 ? 'Search' : _b,
-    children = _a.children,
-    _c = _a.className,
-    className = _c === void 0 ? '' : _c,
-    stickyHeaderContent = _a.stickyHeaderContent;
-  var modalRef = useRef(null);
-  var previouslyFocusedElement = useRef(null);
-  useEffect(function () {
+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",
+  children,
+  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
       previouslyFocusedElement.current = document.activeElement;
+
       // Focus the modal
       if (modalRef.current) {
         modalRef.current.focus();
       }
+
       // 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();
       }
     }
-    return function () {
-      document.body.style.overflow = '';
-    };
   }, [isOpen]);
-  useEffect(function () {
-    var handleEscape = function (event) {
-      if (event.key === 'Escape' && isOpen) {
+  useEffect(() => {
+    if (shouldRender) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [shouldRender]);
+  useEffect(() => {
+    const handleEscape = event => {
+      if (event.key === "Escape" && isOpen) {
         onClose();
       }
     };
-    document.addEventListener('keydown', handleEscape);
-    return function () {
-      return document.removeEventListener('keydown', handleEscape);
-    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
+
   // Focus trap implementation
-  useEffect(function () {
+  useEffect(() => {
     if (!isOpen || !modalRef.current) return;
-    var modal = modalRef.current;
-    var focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    var firstElement = focusableElements[0];
-    var lastElement = focusableElements[focusableElements.length - 1];
-    var handleTab = function (event) {
-      if (event.key !== 'Tab') return;
+    const modal = modalRef.current;
+    const focusableElements = modal.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.shiftKey) {
         // Shift + Tab
         if (document.activeElement === firstElement) {
           event.preventDefault();
-          lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+          lastElement?.focus();
         }
       } else {
         // Tab
         if (document.activeElement === lastElement) {
           event.preventDefault();
-          firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+          firstElement?.focus();
         }
       }
     };
-    modal.addEventListener('keydown', handleTab);
-    return function () {
-      return modal.removeEventListener('keydown', handleTab);
-    };
+    modal.addEventListener("keydown", handleTab);
+    return () => modal.removeEventListener("keydown", handleTab);
   }, [isOpen]);
-  if (!isOpen) return null;
-  var handleOverlayClick = function (event) {
+  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", {
@@ -1421,13 +1573,16 @@ var SearchModal = function (_a) {
     "aria-modal": "true",
     "aria-label": title,
     tabIndex: -1,
-    className: "".concat(styles$e.modal, " ").concat(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,
@@ -1437,11 +1592,11 @@ var SearchModal = function (_a) {
 
 var styles$d = {"searchBar":"SearchBar-module__searchBar___5ak1g","inputWrapper":"SearchBar-module__inputWrapper___-4wrM","searchIcon":"SearchBar-module__searchIcon___VAuDz","searchInput":"SearchBar-module__searchInput___1K4GN","clearButton":"SearchBar-module__clearButton___JQYg-","submitButton":"SearchBar-module__submitButton___DZWsQ","submitButton__text":"SearchBar-module__submitButton__text___WkUsL","submitButton__icon":"SearchBar-module__submitButton__icon___s-ltv"};
 
-var SearchIcon = function (_a) {
-  var _b = _a.className,
-    className = _b === void 0 ? '' : _b;
+const SearchIcon = ({
+  className = ''
+}) => {
   return /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(styles$d.searchIcon, " ").concat(className),
+    className: `${styles$d.searchIcon} ${className}`,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "none",
@@ -1459,17 +1614,15 @@ var SearchIcon = function (_a) {
   }));
 };
 
-var SearchInput = function (_a) {
-  var value = _a.value,
-    onChange = _a.onChange,
-    onKeyDown = _a.onKeyDown,
-    _b = _a.placeholder,
-    placeholder = _b === void 0 ? 'Discover products, innovations, and resources...' : _b,
-    _c = _a.autoFocus,
-    autoFocus = _c === void 0 ? false : _c,
-    _d = _a.className,
-    className = _d === void 0 ? '' : _d;
-  var handleChange = function (event) {
+const SearchInput = ({
+  value,
+  onChange,
+  onKeyDown,
+  placeholder = 'Discover products, innovations, and resources...',
+  autoFocus = false,
+  className = ''
+}) => {
+  const handleChange = event => {
     onChange(event.target.value);
   };
   return /*#__PURE__*/React.createElement("input", {
@@ -1480,27 +1633,30 @@ var SearchInput = function (_a) {
     placeholder: placeholder,
     autoFocus: autoFocus,
     "aria-label": "Search",
-    className: "".concat(styles$d.searchInput, " ").concat(className)
+    className: `${styles$d.searchInput} ${className}`
   });
 };
 
-var SearchSubmitButton = function (_a) {
-  var onClick = _a.onClick,
-    _b = _a.disabled,
-    disabled = _b === void 0 ? false : _b,
-    _c = _a.ariaLabel,
-    ariaLabel = _c === void 0 ? 'Search' : _c,
-    _d = _a.label,
-    label = _d === void 0 ? 'Search' : _d;
-    _a.variant;
-    var _f = _a.className,
-    className = _f === void 0 ? '' : _f;
-  return /*#__PURE__*/React.createElement("button", {
+const SearchSubmitButton = ({
+  onClick,
+  disabled = false,
+  ariaLabel = "Search",
+  label = "Search",
+  variant = "instant",
+  className = ""
+}) => {
+  const transformVariant = variant === "instant" ? "solid-grey" : "primary";
+  return /*#__PURE__*/React.createElement(Button, {
     type: "submit",
+    size: "small",
     onClick: onClick,
     disabled: disabled,
     "aria-label": ariaLabel,
-    className: "".concat(styles$d.submitButton, " ").concat(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", {
@@ -1508,34 +1664,32 @@ var SearchSubmitButton = function (_a) {
   }, /*#__PURE__*/React.createElement(SearchIcon, null)));
 };
 
-var SearchBar = function (_a) {
-  var value = _a.value,
-    onChange = _a.onChange,
-    onSubmit = _a.onSubmit,
-    placeholder = _a.placeholder,
-    _b = _a.autoFocus,
-    autoFocus = _b === void 0 ? false : _b,
-    _c = _a.className,
-    className = _c === void 0 ? '' : _c,
-    _d = _a.variant,
-    variant = _d === void 0 ? 'instant' : _d;
-  var handleSubmit = function (event) {
+const SearchBar = ({
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  autoFocus = false,
+  className = "",
+  variant = "instant"
+}) => {
+  const handleSubmit = event => {
     event.preventDefault();
     onSubmit();
   };
-  var handleKeyDown = function (event) {
-    if (event.key === 'Enter') {
+  const handleKeyDown = event => {
+    if (event.key === "Enter") {
       event.preventDefault();
       onSubmit();
     }
   };
-  var handleClear = function () {
-    onChange('');
+  const handleClear = () => {
+    onChange("");
   };
-  var showClearButton = value.length > 0;
+  const showClearButton = value.length > 0;
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit,
-    className: "".concat(styles$d.searchBar, " ").concat(className)
+    className: `${styles$d.searchBar} ${className}`
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$d.inputWrapper
   }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(SearchInput, {
@@ -1552,24 +1706,23 @@ var SearchBar = function (_a) {
   }, "CLEAR X")), /*#__PURE__*/React.createElement(SearchSubmitButton, {
     onClick: onSubmit,
     label: "SEE ALL RESULTS",
-    variant: variant
+    variant: "results"
   }));
 };
 
 var styles$c = {"contentCard":"ContentCardHorizontal-module__contentCard___l-Kim","contentCard--instant-view":"ContentCardHorizontal-module__contentCard--instant-view___4wK9-","contentExcerpt":"ContentCardHorizontal-module__contentExcerpt___tqg1v","contentCard--results-view":"ContentCardHorizontal-module__contentCard--results-view___oBP2u","contentMeta":"ContentCardHorizontal-module__contentMeta___rEW-X","contentCategory":"ContentCardHorizontal-module__contentCategory___NssVD","contentMetaText":"ContentCardHorizontal-module__contentMetaText___muYBN","contentTitle":"ContentCardHorizontal-module__contentTitle___54gEo"};
 
-var ContentCardHorizontal = function (_a) {
-  var id = _a.id,
-    title = _a.title,
-    url = _a.url,
-    category = _a.category,
-    meta = _a.meta,
-    excerpt = _a.excerpt,
-    _b = _a.className,
-    className = _b === void 0 ? "" : _b,
-    _c = _a.variant,
-    variant = _c === void 0 ? "instant-view" : _c;
-  var cardClasses = classNames(styles$c.contentCard, styles$c["contentCard--".concat(variant)], className);
+const ContentCardHorizontal = ({
+  id,
+  title,
+  url,
+  category,
+  meta,
+  excerpt,
+  className = "",
+  variant = "instant-view"
+}) => {
+  const cardClasses = classNames(styles$c.contentCard, styles$c[`contentCard--${variant}`], className);
   return /*#__PURE__*/React.createElement(ContentCardBase, {
     id: id,
     title: title,
@@ -1588,21 +1741,23 @@ var ContentCardHorizontal = function (_a) {
 
 var styles$b = {"instantResultsLayout":"InstantResults-module__instantResultsLayout___oy-o4","columnsGrid":"InstantResults-module__columnsGrid___bHRUM","resultsColumn":"InstantResults-module__resultsColumn___ZBSlT","columnHeader":"InstantResults-module__columnHeader___VYYhi","showingText":"InstantResults-module__showingText___lECiA","seeAllButton":"InstantResults-module__seeAllButton___xEDAX","chevronIcon":"InstantResults-module__chevronIcon___bjb3q","resultsList":"InstantResults-module__resultsList___7s3PT","divider":"InstantResults-module__divider___Ky6zK","loadingState":"InstantResults-module__loadingState___l0fMq","errorState":"InstantResults-module__errorState___hTBbE","spinner":"InstantResults-module__spinner___85jF-"};
 
-var FederatedInstantResultsLayout = function (_a) {
-  _a.query;
-    var products = _a.products,
-    contents = _a.contents,
-    isLoadingProducts = _a.isLoadingProducts,
-    isLoadingContents = _a.isLoadingContents,
-    productsError = _a.productsError,
-    contentsError = _a.contentsError,
-    onSeeAllProducts = _a.onSeeAllProducts,
-    onSeeAllContents = _a.onSeeAllContents;
-    _a.onSeeAllCombined;
+const FederatedInstantResultsLayout = ({
+  query,
+  products,
+  contents,
+  isLoadingProducts,
+  isLoadingContents,
+  productsError,
+  contentsError,
+  onSeeAllProducts,
+  onSeeAllContents,
+  onSeeAllCombined
+}) => {
   products.length + contents.length;
+
   // Show first 3 results from each category
-  var displayProducts = products.slice(0, 3);
-  var displayContents = contents.slice(0, 3);
+  const displayProducts = products.slice(0, 3);
+  const displayContents = contents.slice(0, 3);
   return /*#__PURE__*/React.createElement("div", {
     className: styles$b.instantResultsLayout
   }, /*#__PURE__*/React.createElement("div", {
@@ -1640,13 +1795,14 @@ var FederatedInstantResultsLayout = function (_a) {
     className: styles$b.errorState
   }, /*#__PURE__*/React.createElement("p", null, productsError)) : displayProducts.length > 0 ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.resultsList
-  }, displayProducts.map(function (product, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: product.id
-    }, /*#__PURE__*/React.createElement(ProductCardHorizontal, product), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
-      className: styles$b.divider
-    }));
-  })) : null), /*#__PURE__*/React.createElement("div", {
+  }, displayProducts.map((product, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: product.id
+  }, /*#__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
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$b.columnHeader
@@ -1679,42 +1835,39 @@ var FederatedInstantResultsLayout = function (_a) {
     className: styles$b.errorState
   }, /*#__PURE__*/React.createElement("p", null, contentsError)) : displayContents.length > 0 ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.resultsList
-  }, displayContents.map(function (content, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: content.id
-    }, /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
-      variant: "instant-view"
-    })), index < displayContents.length - 1 && /*#__PURE__*/React.createElement("hr", {
-      className: styles$b.divider
-    }));
-  })) : null)));
+  }, displayContents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: content.id
+  }, /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
+    variant: "instant-view"
+  })), index < displayContents.length - 1 && /*#__PURE__*/React.createElement("hr", {
+    className: styles$b.divider
+  })))) : null)));
 };
 
 var styles$a = {"resultsCount":"ResultsCount-module__resultsCount___cNM6f"};
 
-var ResultsCount = function (_a) {
-  var count = _a.count,
-    type = _a.type,
-    _b = _a.className,
-    className = _b === void 0 ? '' : _b;
-  var label = count === 1 ? type.slice(0, -1) : type;
+const ResultsCount = ({
+  count,
+  type,
+  className = ''
+}) => {
+  const label = count === 1 ? type.slice(0, -1) : type;
   return /*#__PURE__*/React.createElement("span", {
-    className: "".concat(styles$a.resultsCount, " ").concat(className)
+    className: `${styles$a.resultsCount} ${className}`
   }, count, " ", label);
 };
 
 var styles$9 = {"seeAllButton":"SeeAllLinkButton-module__seeAllButton___eAQqJ"};
 
-var SeeAllLinkButton = function (_a) {
-  var onClick = _a.onClick,
-    _b = _a.label,
-    label = _b === void 0 ? 'See all results' : _b,
-    _c = _a.className,
-    className = _c === void 0 ? '' : _c;
+const SeeAllLinkButton = ({
+  onClick,
+  label = 'See all results',
+  className = ''
+}) => {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
-    className: "".concat(styles$9.seeAllButton, " ").concat(className)
+    className: `${styles$9.seeAllButton} ${className}`
   }, label, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -1731,17 +1884,17 @@ var SeeAllLinkButton = function (_a) {
 
 var styles$8 = {"resultsColumn":"ResultsColumn-module__resultsColumn___AexF5","columnHeader":"ResultsColumn-module__columnHeader___-aUWU","columnTitle":"ResultsColumn-module__columnTitle___Gddr-","resultsList":"ResultsColumn-module__resultsList___BkEie","columnFooter":"ResultsColumn-module__columnFooter___4zJUp","loadingState":"ResultsColumn-module__loadingState___wme5F","errorState":"ResultsColumn-module__errorState___NI4fW","emptyState":"ResultsColumn-module__emptyState___tvefj","spinner":"ResultsColumn-module__spinner___hhntn"};
 
-var ResultsColumn = function (_a) {
-  var title = _a.title,
-    count = _a.count,
-    isLoading = _a.isLoading,
-    error = _a.error,
-    onSeeAll = _a.onSeeAll,
-    children = _a.children,
-    _b = _a.className,
-    className = _b === void 0 ? '' : _b;
+const ResultsColumn = ({
+  title,
+  count,
+  isLoading,
+  error,
+  onSeeAll,
+  children,
+  className = ''
+}) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$8.resultsColumn, " ").concat(className)
+    className: `${styles$8.resultsColumn} ${className}`
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$8.columnHeader
   }, /*#__PURE__*/React.createElement("h3", {
@@ -1764,7 +1917,7 @@ var ResultsColumn = function (_a) {
     className: styles$8.columnFooter
   }, /*#__PURE__*/React.createElement(SeeAllLinkButton, {
     onClick: onSeeAll,
-    label: "See all ".concat(title.toLowerCase())
+    label: `See all ${title.toLowerCase()}`
   }))));
 };
 
@@ -1789,20 +1942,20 @@ const faXmark = {
 /**
  * FilterSearch - Search input for filtering facet values
  */
-var FilterSearch = function (_a) {
-  var value = _a.value,
-    onChange = _a.onChange,
-    _b = _a.placeholder,
-    placeholder = _b === void 0 ? "Search" : _b,
-    className = _a.className;
-  var handleChange = function (e) {
+const FilterSearch = ({
+  value,
+  onChange,
+  placeholder = "Search",
+  className
+}) => {
+  const handleChange = e => {
     onChange(e.target.value);
   };
-  var handleClear = function () {
+  const handleClear = () => {
     onChange("");
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$7.filterSearch, " ").concat(className || "")
+    className: `${styles$7.filterSearch} ${className || ""}`
   }, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMagnifyingGlass,
     className: styles$7.searchIcon,
@@ -1824,43 +1977,49 @@ var FilterSearch = function (_a) {
   })));
 };
 
-var CheckIcon = function () {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "9",
-    height: "7",
-    viewBox: "0 0 9 7",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8.73456 0.104504C9.02185 0.279451 9.08614 0.615889 8.8772 0.856441L3.7342 6.77774C3.62371 6.90558 3.45294 6.98465 3.2641 6.99811C3.07525 7.01156 2.89244 6.95269 2.75984 6.84166L0.188342 4.68846C-0.0627808 4.47819 -0.0627808 4.13671 0.188342 3.92643C0.439465 3.71616 0.847289 3.71616 1.09841 3.92643L3.13753 5.63385L7.83856 0.222257C8.04749 -0.0182957 8.44929 -0.0721258 8.73658 0.102822L8.73456 0.104504Z",
-    fill: "#E2001A"
-  }));
-};
+const CheckIcon = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "9",
+  height: "7",
+  viewBox: "0 0 9 7",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M8.73456 0.104504C9.02185 0.279451 9.08614 0.615889 8.8772 0.856441L3.7342 6.77774C3.62371 6.90558 3.45294 6.98465 3.2641 6.99811C3.07525 7.01156 2.89244 6.95269 2.75984 6.84166L0.188342 4.68846C-0.0627808 4.47819 -0.0627808 4.13671 0.188342 3.92643C0.439465 3.71616 0.847289 3.71616 1.09841 3.92643L3.13753 5.63385L7.83856 0.222257C8.04749 -0.0182957 8.44929 -0.0721258 8.73658 0.102822L8.73456 0.104504Z",
+  fill: "#E2001A"
+}));
+
 /**
  * FilterItem - Individual facet item with checkbox and count
  */
-var FilterItem = function (_a) {
-  var value = _a.value,
-    onToggle = _a.onToggle,
-    className = _a.className,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'desktop' : _b,
-    _c = _a.showCheckbox,
-    showCheckbox = _c === void 0 ? true : _c;
-  var handleChange = function () {
+const FilterItem = ({
+  value,
+  onToggle,
+  className,
+  variant = 'desktop',
+  showCheckbox = true
+}) => {
+  const handleChange = () => {
     onToggle(value.value);
   };
-  var handleKeyDown = function (e) {
+  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();
       onToggle(value.value);
     }
   };
+
   // Mobile variant: Plain button (no checkbox)
   if (variant === 'mobile') {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: "".concat(styles$7.filterItemMobile, " ").concat(value.isRefined ? styles$7.filterItemMobileRefined : '', " ").concat(className || ""),
+      className: `${styles$7.filterItemMobile} ${value.isRefined ? styles$7.filterItemMobileRefined : ''} ${className || ""}`,
       onClick: handleChange,
       onKeyDown: handleKeyDown,
       "aria-pressed": value.isRefined
@@ -1870,11 +2029,12 @@ var FilterItem = function (_a) {
       className: styles$7.filterCount
     }, "(", value.count, ")"));
   }
+
   // Desktop without checkbox (Content tab): Plain button with red text when selected
   if (!showCheckbox) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: "".concat(styles$7.filterItemDesktopNoCheckbox, " ").concat(value.isRefined ? styles$7.filterItemDesktopRefined : '', " ").concat(className || ""),
+      className: `${styles$7.filterItemDesktopNoCheckbox} ${value.isRefined ? styles$7.filterItemDesktopRefined : ''} ${className || ""}`,
       onClick: handleChange,
       onKeyDown: handleKeyDown,
       "aria-pressed": value.isRefined
@@ -1884,16 +2044,17 @@ var FilterItem = function (_a) {
       className: styles$7.filterCount
     }, "(", value.count, ")"));
   }
+
   // Desktop with checkbox (Products tab): Multi-select checkboxes
   return /*#__PURE__*/React.createElement("label", {
-    className: "".concat(styles$7.filterItem, " ").concat(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": "".concat(value.value, " (").concat(value.count, " results)")
+    "aria-label": `${value.value} (${value.count} results)`
   }), /*#__PURE__*/React.createElement("div", {
     className: styles$7.filterCheckbox
   }, value.isRefined && /*#__PURE__*/React.createElement(CheckIcon, null)), /*#__PURE__*/React.createElement("span", {
@@ -1906,58 +2067,54 @@ var FilterItem = function (_a) {
 /**
  * FilterAccordion - Collapsible facet section with optional search
  */
-var FilterAccordion = function (_a) {
-  var facet = _a.facet,
-    isExpanded = _a.isExpanded,
-    onToggle = _a.onToggle,
-    onValueToggle = _a.onValueToggle,
-    className = _a.className,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'desktop' : _b,
-    _c = _a.showCheckbox,
-    showCheckbox = _c === void 0 ? true : _c;
-  var _d = useState(""),
-    searchQuery = _d[0],
-    setSearchQuery = _d[1];
+const FilterAccordion = ({
+  facet,
+  isExpanded,
+  onToggle,
+  onValueToggle,
+  className,
+  variant = "desktop",
+  showCheckbox = true
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+
   // Filter facet values based on search query
-  var filteredValues = useMemo(function () {
+  const filteredValues = useMemo(() => {
     if (!searchQuery.trim()) {
       return facet.values;
     }
-    var query = searchQuery.toLowerCase();
-    return facet.values.filter(function (value) {
-      return value.value.toLowerCase().includes(query);
-    });
+    const query = searchQuery.toLowerCase();
+    return facet.values.filter(value => value.value.toLowerCase().includes(query));
   }, [facet.values, searchQuery]);
-  var handleToggle = function () {
+  const handleToggle = () => {
     onToggle();
     // Clear search when collapsing
     if (isExpanded) {
       setSearchQuery("");
     }
   };
-  var handleKeyDown = function (e) {
+  const handleKeyDown = e => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       handleToggle();
     }
   };
-  var handleValueToggle = function (value) {
+  const handleValueToggle = value => {
     onValueToggle(facet.attribute, value);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$7.filterAccordion, " ").concat(className || "")
+    className: `${styles$7.filterAccordion} ${className || ""}`
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(styles$7.accordionHeader, " ").concat(isExpanded ? styles$7.accordionHeaderExpanded : ""),
+    className: `${styles$7.accordionHeader} ${isExpanded ? styles$7.accordionHeaderExpanded : ""}`,
     onClick: handleToggle,
     onKeyDown: handleKeyDown,
     "aria-expanded": isExpanded,
-    "aria-controls": "accordion-".concat(facet.id)
+    "aria-controls": `accordion-${facet.id}`
   }, /*#__PURE__*/React.createElement("span", {
     className: styles$7.accordionTitle
   }, facet.label), /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(styles$7.accordionIcon, " ").concat(isExpanded ? styles$7.accordionIconExpanded : ""),
+    className: `${styles$7.accordionIcon} ${isExpanded ? styles$7.accordionIconExpanded : ""}`,
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -1971,9 +2128,9 @@ var FilterAccordion = function (_a) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }))), isExpanded && /*#__PURE__*/React.createElement("div", {
-    id: "accordion-".concat(facet.id),
+    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,
@@ -1981,15 +2138,13 @@ var FilterAccordion = function (_a) {
     placeholder: "Search"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$7.filterList
-  }, filteredValues.length > 0 ? filteredValues.map(function (value) {
-    return /*#__PURE__*/React.createElement(FilterItem, {
-      key: value.value,
-      value: value,
-      onToggle: handleValueToggle,
-      variant: variant,
-      showCheckbox: showCheckbox
-    });
-  }) : /*#__PURE__*/React.createElement("div", {
+  }, filteredValues.length > 0 ? filteredValues.map(value => /*#__PURE__*/React.createElement(FilterItem, {
+    key: value.value,
+    value: value,
+    onToggle: handleValueToggle,
+    variant: variant,
+    showCheckbox: showCheckbox
+  })) : /*#__PURE__*/React.createElement("div", {
     className: styles$7.noResults
   }, "No results found"))));
 };
@@ -1997,23 +2152,24 @@ var FilterAccordion = function (_a) {
 /**
  * AppliedFilterTag - Individual removable filter tag/chip
  */
-var AppliedFilterTag = function (_a) {
-  var attribute = _a.attribute,
-    value = _a.value,
-    label = _a.label,
-    onRemove = _a.onRemove,
-    className = _a.className;
-  var handleRemove = function () {
+const AppliedFilterTag = ({
+  attribute,
+  value,
+  label,
+  onRemove,
+  className
+}) => {
+  const handleRemove = () => {
     onRemove(attribute, value);
   };
-  var handleKeyDown = function (e) {
+  const handleKeyDown = e => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       handleRemove();
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$7.appliedFilterTag, " ").concat(className || "")
+    className: `${styles$7.appliedFilterTag} ${className || ""}`
   }, /*#__PURE__*/React.createElement("span", {
     className: styles$7.tagLabel
   }, label || value), /*#__PURE__*/React.createElement("button", {
@@ -2021,7 +2177,7 @@ var AppliedFilterTag = function (_a) {
     onClick: handleRemove,
     onKeyDown: handleKeyDown,
     className: styles$7.tagRemoveButton,
-    "aria-label": "Remove ".concat(label || value, " filter")
+    "aria-label": `Remove ${label || value} filter`
   }, /*#__PURE__*/React.createElement("svg", {
     width: "10",
     height: "10",
@@ -2041,16 +2197,17 @@ var AppliedFilterTag = function (_a) {
 /**
  * AppliedFilters - Shows all active filters as removable tags
  */
-var AppliedFilters = function (_a) {
-  var facets = _a.facets,
-    onRemove = _a.onRemove;
-    _a.onClearAll;
-    var className = _a.className;
+const AppliedFilters = ({
+  facets,
+  onRemove,
+  onClearAll,
+  className
+}) => {
   // Extract all refined (selected) filters
-  var appliedFilters = useMemo(function () {
-    var filters = [];
-    facets.forEach(function (facet) {
-      facet.values.forEach(function (value) {
+  const appliedFilters = useMemo(() => {
+    const filters = [];
+    facets.forEach(facet => {
+      facet.values.forEach(value => {
         if (value.isRefined) {
           filters.push({
             attribute: facet.attribute,
@@ -2063,25 +2220,24 @@ var AppliedFilters = function (_a) {
     });
     return filters;
   }, [facets]);
+
   // Don't render if no filters are applied
   if (appliedFilters.length === 0) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$7.appliedFilters, " ").concat(className || "")
+    className: `${styles$7.appliedFilters} ${className || ""}`
   }, /*#__PURE__*/React.createElement("h4", {
     className: styles$7.appliedFiltersTitle
   }, "Applied filters"), /*#__PURE__*/React.createElement("div", {
     className: styles$7.appliedFiltersList
-  }, appliedFilters.map(function (filter) {
-    return /*#__PURE__*/React.createElement(AppliedFilterTag, {
-      key: "".concat(filter.attribute, "-").concat(filter.value),
-      attribute: filter.attribute,
-      value: filter.value,
-      label: filter.label,
-      onRemove: onRemove
-    });
-  })));
+  }, appliedFilters.map(filter => /*#__PURE__*/React.createElement(AppliedFilterTag, {
+    key: `${filter.attribute}-${filter.value}`,
+    attribute: filter.attribute,
+    value: filter.value,
+    label: filter.label,
+    onRemove: onRemove
+  }))));
 };
 
 /**
@@ -2091,44 +2247,39 @@ var AppliedFilters = function (_a) {
  * When facets change (e.g., after API refetch), component re-renders with new data.
  * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
  */
-var FiltersPanel = function (_a) {
-  var facets = _a.facets,
-    onFacetToggle = _a.onFacetToggle,
-    _b = _a.isLoading,
-    isLoading = _b === void 0 ? false : _b,
-    className = _a.className,
-    _c = _a.variant,
-    variant = _c === void 0 ? 'desktop' : _c,
-    _d = _a.showCheckbox,
-    showCheckbox = _d === void 0 ? true : _d;
+const FiltersPanel = ({
+  facets,
+  onFacetToggle,
+  isLoading = false,
+  className,
+  variant = 'desktop',
+  showCheckbox = true
+}) => {
   // Track which accordions are expanded (transient UI state)
-  var _e = useState(function () {
-      // Initialize with default expanded facets
-      var expanded = new Set();
-      facets.forEach(function (facet) {
-        if (facet.defaultExpanded) {
-          expanded.add(facet.id);
-        }
-      });
-      return expanded;
-    }),
-    expandedAccordions = _e[0],
-    setExpandedAccordions = _e[1];
+  const [expandedAccordions, setExpandedAccordions] = useState(() => {
+    // Initialize with default expanded facets
+    const expanded = new Set();
+    facets.forEach(facet => {
+      if (facet.defaultExpanded) {
+        expanded.add(facet.id);
+      }
+    });
+    return expanded;
+  });
+
   // Sync expansion state when facets change (e.g., new facets appear after refetch)
-  useEffect(function () {
-    setExpandedAccordions(function (prev) {
-      var next = new Set(prev);
+  useEffect(() => {
+    setExpandedAccordions(prev => {
+      const next = new Set(prev);
       // Add new facets with defaultExpanded
-      facets.forEach(function (facet) {
+      facets.forEach(facet => {
         if (facet.defaultExpanded && !next.has(facet.id)) {
           next.add(facet.id);
         }
       });
       // Remove facets that no longer exist
-      var currentFacetIds = new Set(facets.map(function (f) {
-        return f.id;
-      }));
-      next.forEach(function (id) {
+      const currentFacetIds = new Set(facets.map(f => f.id));
+      next.forEach(id => {
         if (!currentFacetIds.has(id)) {
           next.delete(id);
         }
@@ -2136,9 +2287,9 @@ var FiltersPanel = function (_a) {
       return next;
     });
   }, [facets]);
-  var handleAccordionToggle = useCallback(function (facetId) {
-    setExpandedAccordions(function (prev) {
-      var next = new Set(prev);
+  const handleAccordionToggle = useCallback(facetId => {
+    setExpandedAccordions(prev => {
+      const next = new Set(prev);
       if (next.has(facetId)) {
         next.delete(facetId);
       } else {
@@ -2147,16 +2298,16 @@ var FiltersPanel = function (_a) {
       return next;
     });
   }, []);
-  var handleValueToggle = useCallback(function (attribute, value) {
+  const handleValueToggle = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  var handleRemoveFilter = useCallback(function (attribute, value) {
+  const handleRemoveFilter = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  var handleClearAll = useCallback(function () {
+  const handleClearAll = useCallback(() => {
     // Remove all refined facets
-    facets.forEach(function (facet) {
-      facet.values.forEach(function (value) {
+    facets.forEach(facet => {
+      facet.values.forEach(value => {
         if (value.isRefined) {
           onFacetToggle(facet.attribute, value.value);
         }
@@ -2165,7 +2316,7 @@ var FiltersPanel = function (_a) {
   }, [facets, onFacetToggle]);
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
+      className: `${styles$7.filtersPanel} ${className || ""}`
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$7.loadingState
     }, /*#__PURE__*/React.createElement("div", {
@@ -2176,29 +2327,32 @@ var FiltersPanel = function (_a) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
+    className: `${styles$7.filtersPanel} ${className || ""}`
   }, showCheckbox && /*#__PURE__*/React.createElement(AppliedFilters, {
     facets: facets,
     onRemove: handleRemoveFilter,
     onClearAll: handleClearAll
   }), /*#__PURE__*/React.createElement("div", {
     className: styles$7.filtersList
-  }, facets.map(function (facet) {
-    return /*#__PURE__*/React.createElement(FilterAccordion, {
-      key: facet.id,
-      facet: facet,
-      isExpanded: expandedAccordions.has(facet.id),
-      onToggle: function () {
-        return handleAccordionToggle(facet.id);
-      },
-      onValueToggle: handleValueToggle,
-      variant: variant,
-      showCheckbox: showCheckbox
-    });
-  })));
+  }, facets.map(facet => /*#__PURE__*/React.createElement(FilterAccordion, {
+    key: facet.id,
+    facet: facet,
+    isExpanded: expandedAccordions.has(facet.id),
+    onToggle: () => handleAccordionToggle(facet.id),
+    onValueToggle: handleValueToggle,
+    variant: variant,
+    showCheckbox: showCheckbox
+  }))));
 };
 
-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
@@ -2218,41 +2372,45 @@ var styles$6 = {"productCardVertical":"ProductCardVertical-module__productCardVe
  * />
  * ```
  */
-var ProductCardVertical = function (_a) {
-  var _b;
-  var id = _a.id,
-    title = _a.title,
-    url = _a.url,
-    imageUrl = _a.imageUrl;
-    _a.productId;
-    var description = _a.description,
-    _c = _a.buttonLabel,
-    buttonLabel = _c === void 0 ? 'BUY ONLINE' : _c,
-    onButtonClick = _a.onButtonClick,
-    className = _a.className,
-    _d = _a.variant,
-    variant = _d === void 0 ? 'desktop' : _d,
-    forceState = _a["data-force-state"];
-  var handleButtonClick = function (e) {
+const ProductCardVertical = ({
+  id,
+  title,
+  url,
+  imageUrl,
+  productId,
+  description,
+  buttonLabel = "BUY ONLINE",
+  onButtonClick,
+  className,
+  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 === null || onButtonClick === void 0 ? void 0 : onButtonClick();
+    onButtonClick?.();
   };
-  var cardClasses = classNames(styles$6.productCardVertical, styles$6["productCardVertical--".concat(variant)], (_b = {}, _b[styles$6['productCardVertical--hover']] = forceState === 'hover', _b[styles$6['productCardVertical--focus']] = forceState === 'focus', _b), className);
+  const cardClasses = classNames(styles$6.productCardVertical, styles$6[`productCardVertical--${variant}`], {
+    [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: ".concat(title),
+    "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", {
@@ -2263,7 +2421,7 @@ var ProductCardVertical = function (_a) {
     type: "button",
     onClick: handleButtonClick,
     className: styles$6.productCardVertical__button,
-    "aria-label": "".concat(buttonLabel, " - ").concat(title),
+    "aria-label": `${buttonLabel} - ${title}`,
     tabIndex: -1
   }, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowUpRightFromSquare$1,
@@ -2271,21 +2429,19 @@ var ProductCardVertical = function (_a) {
   })));
 };
 
-var styles$5 = {"resultsView":"ResultsView-module__resultsView___S4Wh2","searchBarWrapper":"ResultsView-module__searchBarWrapper___XNtwR","tabsContainer":"ResultsView-module__tabsContainer___mB-Q2","tabs":"ResultsView-module__tabs___rOexd","tabSeparator":"ResultsView-module__tabSeparator___MSq9p","mobileFilterButton":"ResultsView-module__mobileFilterButton___ZrMQY","resultsContainer":"ResultsView-module__resultsContainer___J4URa","sidebar":"ResultsView-module__sidebar___nQq5J","assistanceBanner":"ResultsView-module__assistanceBanner___1r72a","mainContent":"ResultsView-module__mainContent___S9eIG","productsGrid":"ResultsView-module__productsGrid___gnAQ-","contentsList":"ResultsView-module__contentsList___tcfNG","contentDivider":"ResultsView-module__contentDivider___5n6sl","resultsList":"ResultsView-module__resultsList___8eYNX","resultsSection":"ResultsView-module__resultsSection___sCUaO","sectionTitle":"ResultsView-module__sectionTitle___mfvH3","loadingState":"ResultsView-module__loadingState___W5YXx","errorState":"ResultsView-module__errorState___UkkG-","emptyState":"ResultsView-module__emptyState___D0Iyn","spinner":"ResultsView-module__spinner___nk8E5","emptyIcon":"ResultsView-module__emptyIcon___fes8T","paginationWrapper":"ResultsView-module__paginationWrapper___mDTyl","searchBarDesktopOnly":"ResultsView-module__searchBarDesktopOnly___dZHUw","tabsContainerDesktopOnly":"ResultsView-module__tabsContainerDesktopOnly___-MQpa"};
-
-var ResultsList = function (_a) {
-  var type = _a.type,
-    _b = _a.products,
-    products = _b === void 0 ? [] : _b,
-    _c = _a.contents,
-    contents = _c === void 0 ? [] : _c,
-    isLoading = _a.isLoading,
-    error = _a.error,
-    _d = _a.className,
-    className = _d === void 0 ? '' : _d;
+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,
+  products = [],
+  contents = [],
+  isLoading,
+  error,
+  className = ''
+}) => {
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$5.loadingState, " ").concat(className)
+      className: `${styles$5.loadingState} ${className}`
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$5.spinner,
       "aria-label": "Loading..."
@@ -2293,15 +2449,15 @@ var ResultsList = function (_a) {
   }
   if (error) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$5.errorState, " ").concat(className)
+      className: `${styles$5.errorState} ${className}`
     }, /*#__PURE__*/React.createElement("p", null, error));
   }
-  var hasProducts = products.length > 0;
-  var hasContents = contents.length > 0;
-  var hasResults = hasProducts || hasContents;
+  const hasProducts = products.length > 0;
+  const hasContents = contents.length > 0;
+  const hasResults = hasProducts || hasContents;
   if (!hasResults) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$5.emptyState, " ").concat(className)
+      className: `${styles$5.emptyState} ${className}`
     }, /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
@@ -2319,61 +2475,55 @@ var ResultsList = function (_a) {
       d: "m21 21-4.35-4.35"
     })), /*#__PURE__*/React.createElement("h3", null, "No results found"), /*#__PURE__*/React.createElement("p", null, "Try adjusting your search or filters to find what you're looking for."));
   }
+
   // Render based on type
   if (type === 'products') {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$5.productsGrid, " ").concat(className)
-    }, products.map(function (product) {
-      return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
-        key: product.id
-      }, product, {
-        buttonLabel: "BUY ONLINE"
-      }));
-    }));
+      className: `${styles$5.productsGrid} ${className}`
+    }, products.map(product => /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
+      key: product.id
+    }, product, {
+      buttonLabel: "BUY ONLINE"
+    }))));
   }
   if (type === 'content') {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles$5.contentsList, " ").concat(className)
-    }, contents.map(function (content, index) {
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: content.id
-      }, index > 0 && /*#__PURE__*/React.createElement("hr", {
-        className: styles$5.contentDivider
-      }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
-        variant: "results-view"
-      })));
-    }));
+      className: `${styles$5.contentsList} ${className}`
+    }, contents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: content.id
+    }, index > 0 && /*#__PURE__*/React.createElement("hr", {
+      className: styles$5.contentDivider
+    }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
+      variant: "results-view"
+    })))));
   }
+
   // type === 'all' - Show mixed results (not in current Figma design, but keep for compatibility)
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$5.resultsList, " ").concat(className)
+    className: `${styles$5.resultsList} ${className}`
   }, hasProducts && /*#__PURE__*/React.createElement("div", {
     className: styles$5.resultsSection
   }, /*#__PURE__*/React.createElement("h3", {
     className: styles$5.sectionTitle
   }, "Products (", products.length, ")"), /*#__PURE__*/React.createElement("div", {
     className: styles$5.productsGrid
-  }, products.map(function (product) {
-    return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
-      key: product.id
-    }, product, {
-      buttonLabel: "BUY ONLINE"
-    }));
-  }))), hasContents && /*#__PURE__*/React.createElement("div", {
+  }, products.map(product => /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
+    key: product.id
+  }, product, {
+    buttonLabel: "BUY ONLINE"
+  }))))), hasContents && /*#__PURE__*/React.createElement("div", {
     className: styles$5.resultsSection
   }, /*#__PURE__*/React.createElement("h3", {
     className: styles$5.sectionTitle
   }, "Content (", contents.length, ")"), /*#__PURE__*/React.createElement("div", {
     className: styles$5.contentsList
-  }, contents.map(function (content, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: content.id
-    }, index > 0 && /*#__PURE__*/React.createElement("hr", {
-      className: styles$5.contentDivider
-    }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
-      variant: "results-view"
-    })));
-  }))));
+  }, contents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: content.id
+  }, index > 0 && /*#__PURE__*/React.createElement("hr", {
+    className: styles$5.contentDivider
+  }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
+    variant: "results-view"
+  })))))));
 };
 
 var styles$4 = {"tabButton":"TabButton-module__tabButton___cMU45","tabButton__count":"TabButton-module__tabButton__count___nlS1p","tabButton__label":"TabButton-module__tabButton__label___YGpiC","tabButton__results":"TabButton-module__tabButton__results___Nr6gr","tabButton--desktop":"TabButton-module__tabButton--desktop___fbAaC","tabButton--active":"TabButton-module__tabButton--active___gj6Jp","tabButton--mobile":"TabButton-module__tabButton--mobile___AnLwy"};
@@ -2405,25 +2555,27 @@ var styles$4 = {"tabButton":"TabButton-module__tabButton___cMU45","tabButton__co
  * />
  * ```
  */
-var TabButton = function (_a) {
-  var _b;
-  var label = _a.label,
-    count = _a.count,
-    isActive = _a.isActive,
-    onClick = _a.onClick,
-    _c = _a.variant,
-    variant = _c === void 0 ? 'desktop' : _c,
-    className = _a.className;
-  var buttonClasses = classNames(styles$4.tabButton, styles$4["tabButton--".concat(variant)], (_b = {}, _b[styles$4['tabButton--active']] = isActive, _b), className);
+const TabButton = ({
+  label,
+  count,
+  isActive,
+  onClick,
+  variant = 'desktop',
+  className
+}) => {
+  const buttonClasses = classNames(styles$4.tabButton, styles$4[`tabButton--${variant}`], {
+    [styles$4['tabButton--active']]: isActive
+  }, className);
+
   // Split label to hide " RESULTS" on mobile
-  var labelParts = label.split(' RESULTS');
-  var mainLabel = labelParts[0];
-  var hasResults = labelParts.length > 1;
+  const labelParts = label.split(' RESULTS');
+  const mainLabel = labelParts[0];
+  const hasResults = labelParts.length > 1;
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     role: "tab",
     "aria-selected": isActive,
-    "aria-controls": "tabpanel-".concat(label.toLowerCase().replace(/\s+/g, '-')),
+    "aria-controls": `tabpanel-${label.toLowerCase().replace(/\s+/g, '-')}`,
     onClick: onClick,
     className: buttonClasses
   }, count !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -2435,7 +2587,7 @@ var TabButton = function (_a) {
   }, " RESULTS")));
 };
 
-var AssistanceIcon = function (props) {
+const AssistanceIcon = props => {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: "87",
@@ -2468,24 +2620,21 @@ var styles$3 = {"assistanceBanner":"AssistanceBanner-module__assistanceBanner___
  * />
  * ```
  */
-var AssistanceBanner = function (_a) {
-  var _b = _a.title,
-    title = _b === void 0 ? 'Need Assistance?' : _b,
-    _c = _a.description,
-    description = _c === void 0 ? "Can't find what you're looking for? Our team is ready to help." : _c,
-    _d = _a.linkText,
-    linkText = _d === void 0 ? 'Contact support' : _d,
-    _e = _a.linkUrl,
-    linkUrl = _e === void 0 ? '/contact' : _e,
-    onLinkClick = _a.onLinkClick,
-    className = _a.className;
-  var handleLinkClick = function (e) {
+const AssistanceBanner = ({
+  title = 'Need Assistance?',
+  description = "Can't find what you're looking for? Our team is ready to help.",
+  linkText = 'Contact support',
+  linkUrl = '/contact',
+  onLinkClick,
+  className
+}) => {
+  const handleLinkClick = e => {
     if (onLinkClick) {
       e.preventDefault();
       onLinkClick();
     }
   };
-  var bannerClasses = classNames(styles$3.assistanceBanner, className);
+  const bannerClasses = classNames(styles$3.assistanceBanner, className);
   return /*#__PURE__*/React.createElement("div", {
     className: bannerClasses
   }, /*#__PURE__*/React.createElement(AssistanceIcon, {
@@ -2516,7 +2665,11 @@ var AssistanceBanner = function (_a) {
   }))));
 };
 
-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
@@ -2538,85 +2691,133 @@ var styles$2 = {"drawerOverlay":"FilterDrawer-module__drawerOverlay___P6M4y","dr
  * </FilterDrawer>
  * ```
  */
-var FilterDrawer = function (_a) {
-  var _b, _c;
-  var isOpen = _a.isOpen,
-    onClose = _a.onClose,
-    children = _a.children,
-    className = _a.className;
-  var drawerRef = useRef(null);
-  var previouslyFocusedElement = useRef(null);
-  // Focus management
-  useEffect(function () {
+const FilterDrawer = ({
+  isOpen,
+  onClose,
+  children,
+  className
+}) => {
+  const drawerRef = useRef(null);
+  const previouslyFocusedElement = useRef(null);
+  const [renderState, setRenderState] = useState(isOpen ? "opening" : "closed");
+
+  // Mount/unmount sequencing for transitions.
+  useEffect(() => {
+    let closeTimer;
+    let raf1;
+    let raf2;
     if (isOpen) {
-      // Store previously focused element
-      previouslyFocusedElement.current = document.activeElement;
-      // Focus the drawer
-      if (drawerRef.current) {
-        drawerRef.current.focus();
-      }
-      // Prevent body scroll
-      document.body.style.overflow = 'hidden';
-    } else {
+      // 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);
+      };
+    }
+
+    // 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]);
+
+  // 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;
     }
-    return function () {
-      document.body.style.overflow = '';
+
+    // 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 () => {
+      // In case the component unmounts unexpectedly.
+      document.body.style.overflow = "";
     };
-  }, [isOpen]);
+  }, [renderState]);
+
   // Escape key handler
-  useEffect(function () {
-    var handleEscape = function (event) {
-      if (event.key === 'Escape' && isOpen) {
+  useEffect(() => {
+    const handleEscape = event => {
+      if (event.key === "Escape" && renderState !== "closed") {
         onClose();
       }
     };
-    document.addEventListener('keydown', handleEscape);
-    return function () {
-      return document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, onClose]);
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [renderState, onClose]);
+
   // Focus trap implementation
-  useEffect(function () {
-    if (!isOpen || !drawerRef.current) return;
-    var drawer = drawerRef.current;
-    var focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    var firstElement = focusableElements[0];
-    var lastElement = focusableElements[focusableElements.length - 1];
-    var handleTab = function (event) {
-      if (event.key !== 'Tab') return;
+  useEffect(() => {
+    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.shiftKey) {
         // Shift + Tab
         if (document.activeElement === firstElement) {
           event.preventDefault();
-          lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+          lastElement?.focus();
         }
       } else {
         // Tab
         if (document.activeElement === lastElement) {
           event.preventDefault();
-          firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+          firstElement?.focus();
         }
       }
     };
-    drawer.addEventListener('keydown', handleTab);
-    return function () {
-      return drawer.removeEventListener('keydown', handleTab);
-    };
-  }, [isOpen]);
-  if (!isOpen) return null;
-  var handleOverlayClick = function (event) {
+    drawer.addEventListener("keydown", handleTab);
+    return () => drawer.removeEventListener("keydown", handleTab);
+  }, [renderState]);
+  if (renderState === "closed") return null;
+  const handleOverlayClick = event => {
     if (event.target === event.currentTarget) {
       onClose();
     }
   };
-  var overlayClasses = classNames(styles$2.drawerOverlay, (_b = {}, _b[styles$2['drawerOverlay--open']] = isOpen, _b));
-  var panelClasses = classNames(styles$2.drawerPanel, (_c = {}, _c[styles$2['drawerPanel--open']] = isOpen, _c), className);
+  const overlayClasses = classNames(styles$2.drawerOverlay, {
+    [styles$2["drawerOverlay--open"]]: renderState === "open",
+    [styles$2["drawerOverlay--closing"]]: renderState === "closing"
+  });
+  const panelClasses = classNames(styles$2.drawerPanel, {
+    [styles$2["drawerPanel--open"]]: renderState === "open"
+  }, className);
   return /*#__PURE__*/React.createElement("div", {
     className: overlayClasses,
     onClick: handleOverlayClick,
@@ -2640,63 +2841,80 @@ var FilterDrawer = function (_a) {
   }, children)));
 };
 
-var FederatedResultsView = function (_a) {
-  var query = _a.query,
-    onQueryChange = _a.onQueryChange,
-    onSearchSubmit = _a.onSearchSubmit,
-    activeTab = _a.activeTab,
-    onTabChange = _a.onTabChange,
-    products = _a.products,
-    contents = _a.contents,
-    isLoadingProducts = _a.isLoadingProducts,
-    isLoadingContents = _a.isLoadingContents,
-    productsError = _a.productsError,
-    contentsError = _a.contentsError,
-    currentPage = _a.currentPage,
-    totalPages = _a.totalPages,
-    onPageChange = _a.onPageChange,
-    facets = _a.facets,
-    onFacetToggle = _a.onFacetToggle,
-    isFilterDrawerOpen = _a.isFilterDrawerOpen,
-    onFilterDrawerToggle = _a.onFilterDrawerToggle,
-    onFilterDrawerClose = _a.onFilterDrawerClose;
-  var isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
-  var error = activeTab === "products" ? productsError : contentsError;
+const FederatedResultsView = ({
+  query,
+  onQueryChange,
+  onSearchSubmit,
+  activeTab,
+  onTabChange,
+  products,
+  contents,
+  isLoadingProducts,
+  isLoadingContents,
+  productsError,
+  contentsError,
+  currentPage,
+  totalPages,
+  onPageChange,
+  facets,
+  onFacetToggle,
+  isFilterDrawerOpen,
+  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;
+
   // Filter results based on active tab
-  var displayProducts = activeTab === "content" ? [] : products;
-  var displayContents = activeTab === "products" ? [] : contents;
+  const displayProducts = activeTab === "content" ? [] : products;
+  const displayContents = activeTab === "products" ? [] : contents;
+
   // Content tab single-select handler (clears all others when selecting)
-  var handleContentCategorySelect = useCallback(function (attribute, value) {
-    var facet = facets.find(function (f) {
-      return f.attribute === attribute;
-    });
+  const handleContentCategorySelect = useCallback((attribute, value) => {
+    const facet = facets.find(f => f.attribute === attribute);
     if (!facet) return;
+
     // Clear ALL values in this facet first
-    facet.values.forEach(function (v) {
+    facet.values.forEach(v => {
       if (v.isRefined) {
         onFacetToggle(attribute, v.value); // Unselect
       }
     });
+
     // Then select the clicked value (if not already selected)
-    var clickedValue = facet.values.find(function (v) {
-      return v.value === value;
-    });
+    const clickedValue = facet.values.find(v => v.value === value);
     if (clickedValue && !clickedValue.isRefined) {
       onFacetToggle(attribute, value); // Select
     }
   }, [facets, onFacetToggle]);
+
   // Track if any filters applied
-  var hasAppliedFilters = useMemo(function () {
-    return facets.some(function (facet) {
-      return facet.values.some(function (value) {
-        return value.isRefined;
-      });
-    });
+  const hasAppliedFilters = useMemo(() => {
+    return facets.some(facet => facet.values.some(value => value.isRefined));
   }, [facets]);
+
   // Track previous filter state to detect transitions
-  var prevHasAppliedFilters = useRef(hasAppliedFilters);
+  const prevHasAppliedFilters = useRef(hasAppliedFilters);
+
   // Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
-  useEffect(function () {
+  useEffect(() => {
     // Only close if we HAD filters and now have NONE (not on initial open)
     if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
       onFilterDrawerClose();
@@ -2706,7 +2924,7 @@ var FederatedResultsView = function (_a) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles$5.resultsView
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$5.searchBarWrapper, " ").concat(styles$5.searchBarDesktopOnly)
+    className: `${styles$5.searchBarWrapper} ${styles$5.searchBarDesktopOnly}`
   }, /*#__PURE__*/React.createElement(SearchBar, {
     value: query,
     onChange: onQueryChange,
@@ -2714,7 +2932,7 @@ var FederatedResultsView = function (_a) {
     placeholder: "Refine your search...",
     variant: "results"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$5.tabsContainer, " ").concat(styles$5.tabsContainerDesktopOnly)
+    className: `${styles$5.tabsContainer} ${styles$5.tabsContainerDesktopOnly}`
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$5.tabs,
     role: "tablist"
@@ -2722,19 +2940,13 @@ var FederatedResultsView = function (_a) {
     label: "WEB SHOP RESULTS",
     count: products.length,
     isActive: activeTab === "products",
-    onClick: function () {
-      return onTabChange("products");
-    },
+    onClick: () => onTabChange("products"),
     variant: "desktop"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$5.tabSeparator
   }), /*#__PURE__*/React.createElement(TabButton, {
     label: "WEBSITE RESULTS",
     count: contents.length,
     isActive: activeTab === "content",
-    onClick: function () {
-      return onTabChange("content");
-    },
+    onClick: () => onTabChange("content"),
     variant: "desktop"
   })), onFilterDrawerToggle && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -2763,9 +2975,9 @@ var FederatedResultsView = function (_a) {
   })), /*#__PURE__*/React.createElement("main", {
     className: styles$5.mainContent
   }, /*#__PURE__*/React.createElement("div", {
-    id: "tabpanel-".concat(activeTab),
+    id: `tabpanel-${activeTab}`,
     role: "tabpanel",
-    "aria-labelledby": "tab-".concat(activeTab)
+    "aria-labelledby": `tab-${activeTab}`
   }, /*#__PURE__*/React.createElement(ResultsList, {
     type: activeTab,
     products: displayProducts,
@@ -2778,9 +2990,9 @@ var FederatedResultsView = function (_a) {
     currentPage: currentPage,
     totalPages: totalPages,
     onPageChange: onPageChange,
-    maxVisiblePages: 10,
+    maxVisiblePages: isMobile ? 3 : 10,
     showPrevious: false,
-    ariaLabel: "".concat(activeTab === "products" ? "Products" : "Content", " pagination")
+    ariaLabel: `${activeTab === "products" ? "Products" : "Content"} pagination`
   }))))), onFilterDrawerClose && /*#__PURE__*/React.createElement(FilterDrawer, {
     isOpen: isFilterDrawerOpen || false,
     onClose: onFilterDrawerClose
@@ -2830,40 +3042,37 @@ var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExpe
  * />
  * ```
  */
-var FederatedSearchExperience = function (_a) {
-  var isOpen = _a.isOpen,
-    onClose = _a.onClose,
-    query = _a.query,
-    onQueryChange = _a.onQueryChange,
-    onSearchSubmit = _a.onSearchSubmit,
-    products = _a.products,
-    contents = _a.contents,
-    isLoadingProducts = _a.isLoadingProducts,
-    isLoadingContents = _a.isLoadingContents,
-    productsError = _a.productsError,
-    contentsError = _a.contentsError,
-    onSeeAllProducts = _a.onSeeAllProducts,
-    onSeeAllContents = _a.onSeeAllContents,
-    onSeeAllCombined = _a.onSeeAllCombined,
-    activeView = _a.activeView;
-    _a.onChangeView;
-    var activeTab = _a.activeTab,
-    onTabChange = _a.onTabChange,
-    currentPage = _a.currentPage,
-    totalPages = _a.totalPages,
-    onPageChange = _a.onPageChange,
-    facets = _a.facets,
-    onFacetToggle = _a.onFacetToggle,
-    isFilterDrawerOpen = _a.isFilterDrawerOpen,
-    onFilterDrawerToggle = _a.onFilterDrawerToggle,
-    onFilterDrawerClose = _a.onFilterDrawerClose;
+const FederatedSearchExperience = ({
+  isOpen,
+  onClose,
+  query,
+  onQueryChange,
+  onSearchSubmit,
+  products,
+  contents,
+  isLoadingProducts,
+  isLoadingContents,
+  productsError,
+  contentsError,
+  onSeeAllProducts,
+  onSeeAllContents,
+  onSeeAllCombined,
+  activeView,
+  onChangeView,
+  activeTab,
+  onTabChange,
+  currentPage,
+  totalPages,
+  onPageChange,
+  facets,
+  onFacetToggle,
+  isFilterDrawerOpen,
+  onFilterDrawerToggle,
+  onFilterDrawerClose
+}) => {
   // Track if any filters are active (for red dot indicator)
-  var hasAppliedFilters = useMemo(function () {
-    return facets.some(function (facet) {
-      return facet.values.some(function (value) {
-        return value.isRefined;
-      });
-    });
+  const hasAppliedFilters = useMemo(() => {
+    return facets.some(facet => facet.values.some(value => value.isRefined));
   }, [facets]);
   return /*#__PURE__*/React.createElement(SearchModal, {
     isOpen: isOpen,
@@ -2895,9 +3104,7 @@ var FederatedSearchExperience = function (_a) {
       label: "WEB SHOP RESULTS",
       count: products.length,
       isActive: activeTab === "products",
-      onClick: function () {
-        return onTabChange("products");
-      },
+      onClick: () => onTabChange("products"),
       variant: "mobile"
     }), /*#__PURE__*/React.createElement("div", {
       className: styles$1.tabSeparator
@@ -2905,13 +3112,11 @@ var FederatedSearchExperience = function (_a) {
       label: "WEBSITE RESULTS",
       count: contents.length,
       isActive: activeTab === "content",
-      onClick: function () {
-        return onTabChange("content");
-      },
+      onClick: () => onTabChange("content"),
       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
@@ -2932,7 +3137,7 @@ var FederatedSearchExperience = function (_a) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$1.searchExperience
   }, activeView === "instant" && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles$1.searchBarSection, " ").concat(styles$1.searchBarDesktopOnly)
+    className: `${styles$1.searchBarSection} ${styles$1.searchBarDesktopOnly}`
   }, /*#__PURE__*/React.createElement(SearchBar, {
     value: query,
     onChange: onQueryChange,
@@ -3000,14 +3205,13 @@ var FederatedSearchExperience = function (_a) {
 
 var styles = {"searchTrigger":"SearchTriggerButton-module__searchTrigger___PDbDB","searchIcon":"SearchTriggerButton-module__searchIcon___izByW","label":"SearchTriggerButton-module__label___mkS7T"};
 
-var SearchTriggerButton = function (_a) {
-  var onOpen = _a.onOpen,
-    _b = _a.ariaLabel,
-    ariaLabel = _b === void 0 ? 'Open search' : _b,
-    label = _a.label,
-    _c = _a.className,
-    className = _c === void 0 ? '' : _c;
-  var handleKeyDown = function (event) {
+const SearchTriggerButton = ({
+  onOpen,
+  ariaLabel = 'Open search',
+  label,
+  className = ''
+}) => {
+  const handleKeyDown = event => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       onOpen();
@@ -3018,7 +3222,7 @@ var SearchTriggerButton = function (_a) {
     onClick: onOpen,
     onKeyDown: handleKeyDown,
     "aria-label": ariaLabel,
-    className: "".concat(styles.searchTrigger, " ").concat(className)
+    className: `${styles.searchTrigger} ${className}`
   }, /*#__PURE__*/React.createElement("svg", {
     className: styles.searchIcon,
     xmlns: "http://www.w3.org/2000/svg",
@@ -3040,5 +3244,5 @@ var SearchTriggerButton = function (_a) {
   }, label));
 };
 
-export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, 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 };
+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