@asantemedia-org/leybold-design-system 1.0.9 → 1.0.11

package/dist/index.js

@@ -1,5 +1,11 @@
-import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
-import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
+'use strict';
+
+var React = require('react');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var Slider = require('react-slick');
+var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
+var edwardsvacuumDesignSystem = require('@asantemedia-org/edwardsvacuum-design-system');
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -11,7 +17,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$f = {"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--outline":"Button-module__button--outline___wB6-g","button--text":"Button-module__button--text___iZIMo","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"};
+var styles$h = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--default":"Button-module__button--default___MDa35","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--solid-red":"Button-module__button--solid-red___YPpnL","button--solid-grey":"Button-module__button--solid-grey___oRbEy","button--solid-black":"Button-module__button--solid-black___1Ma5K","button--solid-white":"Button-module__button--solid-white___bE-Z0","button--outlined-red":"Button-module__button--outlined-red___cgZXa","button--outlined-grey":"Button-module__button--outlined-grey___xWGbB","button--outlined-black":"Button-module__button--outlined-black___qfX5o","button--outlined-white":"Button-module__button--outlined-white___QLXNP","button--link-text":"Button-module__button--link-text___R2kun","button__icon":"Button-module__button__icon___hlcHo","button--link-text-alt":"Button-module__button--link-text-alt___1p7wH","button--external-link":"Button-module__button--external-link___Mhxuk","button--carousel-arrow-left":"Button-module__button--carousel-arrow-left___Wx-Jo","button--carousel-arrow-right":"Button-module__button--carousel-arrow-right___3ZtgT","button__icon__default":"Button-module__button__icon__default___0qlF1","button__icon__hover":"Button-module__button__icon__hover___3xPGT","button--extra-small":"Button-module__button--extra-small___R0QTM","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5","button__icon--left":"Button-module__button__icon--left___wMCeH","button__icon--right":"Button-module__button__icon--right___-pGHl"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -88,6 +94,79 @@ 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
+ */
+const getIcon = icon => {
+  switch (icon) {
+    case "arrow-right":
+      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+        icon: freeSolidSvgIcons.faArrowRight
+      });
+    case "external":
+      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+        icon: freeSolidSvgIcons.faArrowUpRightFromSquare
+      });
+    case "chevron-left":
+      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+        icon: freeSolidSvgIcons.faChevronLeft
+      });
+    case "chevron-right":
+      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+        icon: freeSolidSvgIcons.faChevronRight
+      });
+    default:
+      return null;
+  }
+};
+
+/**
+ * Get default icon for certain variants
+ */
+const getDefaultIcon = variant => {
+  switch (variant) {
+    case "link-text":
+    case "link-text-alt":
+    case "text":
+      // Alias
+      return "arrow-right";
+    case "external-link":
+      return "external";
+    case "carousel-arrow-left":
+      return "chevron-left";
+    case "carousel-arrow-right":
+      return "chevron-right";
+    default:
+      return "none";
+  }
+};
+
+/**
+ * Map alias variants to their actual CSS class variants
+ */
+const mapVariantToClass = variant => {
+  switch (variant) {
+    case "outline":
+      return "outlined-red";
+    case "text":
+      return "link-text";
+    default:
+      return variant;
+  }
+};
+
 /**
  * Primary UI component for user interaction
  */
@@ -99,17 +178,493 @@ const Button = ({
   onClick,
   type = "button",
   className,
+  icon,
+  iconPosition = "right",
+  ariaLabel,
+  opensInNewTab,
   ...props
 }) => {
-  const buttonClasses = classNames(styles$f.button, styles$f[`button--${variant}`], styles$f[`button--${size}`], {
-    [styles$f["button--disabled"]]: disabled
+  // Map alias variants to actual class names
+  const cssVariant = mapVariantToClass(variant);
+
+  // Determine the icon to display
+  const displayIcon = icon ?? getDefaultIcon(variant);
+  const iconElement = getIcon(displayIcon);
+
+  // Check if this is an icon-only button (carousel arrows)
+  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$h.button, styles$h[`button--${cssVariant}`], styles$h[`button--${size}`], {
+    [styles$h["button--disabled"]]: disabled
   }, className);
+  const iconClasses = classNames(styles$h.button__icon, styles$h[`button__icon--${iconPosition}`]);
+
+  // Generate accessible label for icon-only buttons
+  const accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
   return /*#__PURE__*/React.createElement("button", _extends({
     type: type,
     className: buttonClasses,
     disabled: disabled,
-    onClick: onClick
-  }, props), children);
+    onClick: onClick,
+    "aria-label": accessibleLabel,
+    "data-force-state": props['data-force-state']
+  }, props), !isIconOnly && children, isCarouselLeft && /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faArrowLeft,
+    className: styles$h.button__icon__default
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faArrowLeftLong,
+    className: styles$h.button__icon__hover
+  })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faArrowRight,
+    className: styles$h.button__icon__default
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faArrowRightLong,
+    className: styles$h.button__icon__hover
+  })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, iconElement));
+};
+
+var styles$g = {"carousel":"Carousel-module__carousel___hkXkF","carousel__header":"Carousel-module__carousel__header___IMcN5","carousel__headerContent":"Carousel-module__carousel__headerContent___9uU-H","carousel__title":"Carousel-module__carousel__title___CCgcY","carousel__subtitle":"Carousel-module__carousel__subtitle___aj4q1","carousel__slider":"Carousel-module__carousel__slider___b27-P","carousel__slideWrapper":"Carousel-module__carousel__slideWrapper___PjXgD","carousel__card":"Carousel-module__carousel__card___lga-D","carousel__cardContent":"Carousel-module__carousel__cardContent___v0jc-","carousel__cardImageWrapper":"Carousel-module__carousel__cardImageWrapper___aFqXD","carousel__cardImage":"Carousel-module__carousel__cardImage___4MrRU","carousel__cardTitle":"Carousel-module__carousel__cardTitle___z-mMo","carousel__navigation":"Carousel-module__carousel__navigation___dMbcP","carousel__arrows":"Carousel-module__carousel__arrows___uj5nF","carousel__dotsList":"Carousel-module__carousel__dotsList___upZ7L","carousel__dot":"Carousel-module__carousel__dot___HwZc0","carousel__dot--active":"Carousel-module__carousel__dot--active___NxRvq"};
+
+/**
+ * Carousel component for displaying multiple content cards in a sliding format.
+ * Supports responsive layouts with 3 cards on desktop and 1 card on mobile.
+ */
+const Carousel = ({
+  title,
+  subtitle,
+  buttonText,
+  buttonUrl,
+  cards,
+  showDots = true,
+  showArrows = true,
+  className
+}) => {
+  const sliderRef = React.useRef(null);
+  const [currentSlide, setCurrentSlide] = React.useState(0);
+
+  // Uses document.documentElement.clientWidth to work correctly in iframes (Storybook)
+  const [isMobile, setIsMobile] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      return document.documentElement.clientWidth < 768;
+    }
+    return false;
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(document.documentElement.clientWidth < 768);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  const handlePrev = () => sliderRef.current?.slickPrev();
+  const handleNext = () => sliderRef.current?.slickNext();
+  const goToSlide = index => sliderRef.current?.slickGoTo(index);
+  const settings = {
+    dots: false,
+    infinite: true,
+    speed: 500,
+    slidesToShow: isMobile ? 1 : 3,
+    slidesToScroll: 1,
+    arrows: false,
+    beforeChange: (_, next) => setCurrentSlide(next)
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$g.carousel, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.carousel__header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.carousel__headerContent
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$g.carousel__title
+  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
+    className: styles$g.carousel__subtitle
+  }, subtitle)), buttonText && buttonUrl && /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined-black",
+    onClick: () => window.location.href = buttonUrl,
+    style: {
+      minWidth: '215px',
+      minHeight: '56px'
+    }
+  }, buttonText)), /*#__PURE__*/React.createElement(Slider, _extends({
+    ref: sliderRef
+  }, settings, {
+    className: styles$g.carousel__slider
+  }), cards.map((card, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    className: styles$g.carousel__slideWrapper
+  }, /*#__PURE__*/React.createElement("a", {
+    href: card.linkUrl,
+    className: styles$g.carousel__card,
+    "aria-label": `${card.title} - ${card.linkText}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.carousel__cardImageWrapper
+  }, /*#__PURE__*/React.createElement("img", {
+    src: card.imageUrl,
+    alt: card.imageAlt,
+    className: styles$g.carousel__cardImage
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$g.carousel__cardContent
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles$g.carousel__cardTitle
+  }, card.title), /*#__PURE__*/React.createElement(Button, {
+    variant: "link-text-alt",
+    icon: "arrow-right"
+  }, card.linkText)))))), /*#__PURE__*/React.createElement("div", {
+    className: styles$g.carousel__navigation
+  }, !isMobile && showDots && /*#__PURE__*/React.createElement("div", {
+    className: styles$g.carousel__dotsList
+  }, cards.map((_, index) => /*#__PURE__*/React.createElement("button", {
+    key: index,
+    type: "button",
+    className: classNames(styles$g.carousel__dot, currentSlide === index && styles$g['carousel__dot--active']),
+    onClick: () => goToSlide(index),
+    "aria-label": `Go to slide ${index + 1}`
+  }))), showArrows && /*#__PURE__*/React.createElement("div", {
+    className: styles$g.carousel__arrows
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "carousel-arrow-left",
+    onClick: handlePrev,
+    ariaLabel: "Previous"
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "carousel-arrow-right",
+    onClick: handleNext,
+    ariaLabel: "Next"
+  }))));
+};
+
+var styles$f = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Footer-module__footer--mobile___9HQC-","footer__container":"Footer-module__footer__container___ohvnm","footer__links":"Footer-module__footer__links___DdVK8","footer__linkGroup":"Footer-module__footer__linkGroup___1B7JA","footer__linkList":"Footer-module__footer__linkList___j-DWF","footer__linkHeading":"Footer-module__footer__linkHeading___LtE6X","footer__link":"Footer-module__footer__link___G5HPW","footer__cta":"Footer-module__footer__cta___MRJLr","footer__socialIcons":"Footer-module__footer__socialIcons___j0aRp","footer__socialIcon":"Footer-module__footer__socialIcon___1uVTm","footer__countrySelector":"Footer-module__footer__countrySelector___pVtN5","footer__bottom":"Footer-module__footer__bottom___77bPL","footer__bottomLeft":"Footer-module__footer__bottomLeft___tlst1","footer__bottomLinks":"Footer-module__footer__bottomLinks___s22h7","footer__bottomLink":"Footer-module__footer__bottomLink___SLzwY","footer__copyright":"Footer-module__footer__copyright___4bZOF","footer__brandSection":"Footer-module__footer__brandSection___BBr5f","footer__logo":"Footer-module__footer__logo___mv-9M","footer__leftCol":"Footer-module__footer__leftCol___vmKNN","footer__motto":"Footer-module__footer__motto___QtB2m","footer__main":"Footer-module__footer__main___NSU9d","footer__badge":"Footer-module__footer__badge___faejb","footer__badgeIcon":"Footer-module__footer__badgeIcon___xJ519","footer__badgeText":"Footer-module__footer__badgeText___imXgG","footer__linkText":"Footer-module__footer__linkText___Gc18Z","footer__linkIcon":"Footer-module__footer__linkIcon___IZzJM","footer__countrySelectorIcon":"Footer-module__footer__countrySelectorIcon___hhEd4"};
+
+/**
+ * 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)
+ */
+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
+// =============================================================================
+
+const SocialIconComponent = ({
+  platform
+}) => {
+  const iconMap = {
+    facebook: freeBrandsSvgIcons.faFacebookF,
+    x: freeBrandsSvgIcons.faXTwitter,
+    linkedin: freeBrandsSvgIcons.faLinkedinIn,
+    youtube: freeBrandsSvgIcons.faYoutube,
+    instagram: freeBrandsSvgIcons.faInstagram
+  };
+  return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: iconMap[platform]
+  });
+};
+
+// =============================================================================
+// FOOTER LINK COMPONENT
+// =============================================================================
+
+const FooterLink = ({
+  item,
+  className,
+  variant = 'default'
+}) => {
+  const baseClass = variant === 'bottom' ? styles$f.footer__bottomLink : styles$f.footer__link;
+  const linkClasses = classNames(baseClass, className);
+  const handleClick = e => {
+    if (item.onClick) {
+      e.preventDefault();
+      item.onClick();
+    }
+  };
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: item.href,
+    className: linkClasses,
+    onClick: item.onClick ? handleClick : undefined
+  }, item.external && {
+    target: '_blank',
+    rel: 'noopener noreferrer'
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__linkText
+  }, item.label), item.external && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__linkIcon
+  }, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
+    size: 15
+  })));
+};
+
+// =============================================================================
+// FOOTER LINK GROUP COMPONENT
+// =============================================================================
+
+const FooterLinkGroup = ({
+  heading,
+  links,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$f.footer__linkGroup, className)
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles$f.footer__linkHeading
+  }, heading), /*#__PURE__*/React.createElement("ul", {
+    className: styles$f.footer__linkList
+  }, links.map((link, index) => /*#__PURE__*/React.createElement("li", {
+    key: index
+  }, /*#__PURE__*/React.createElement(FooterLink, {
+    item: link
+  })))), children);
+};
+
+// =============================================================================
+// FOOTER SOCIAL ICONS COMPONENT
+// =============================================================================
+
+const FooterSocialIcons = ({
+  links,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$f.footer__socialIcons, className)
+  }, links.map((link, index) => /*#__PURE__*/React.createElement("a", {
+    key: index,
+    href: link.href,
+    className: styles$f.footer__socialIcon,
+    "aria-label": link.ariaLabel,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(SocialIconComponent, {
+    platform: link.platform
+  }))));
+};
+
+// =============================================================================
+// FOOTER SOCIAL ICON (STANDALONE) COMPONENT
+// =============================================================================
+
+const FooterSocialIcon = ({
+  platform,
+  className
+}) => {
+  const iconClasses = classNames(styles$f.footer__socialIcon, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, /*#__PURE__*/React.createElement(SocialIconComponent, {
+    platform: platform
+  }));
+};
+
+// =============================================================================
+// FOOTER BOTTOM COMPONENT
+// =============================================================================
+
+const FooterBottom = ({
+  links,
+  copyright,
+  countrySelector,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$f.footer__bottom, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__bottomLeft
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__bottomLinks
+  }, links.map((link, index) => /*#__PURE__*/React.createElement(FooterLink, {
+    key: index,
+    item: link,
+    variant: "bottom"
+  }))), /*#__PURE__*/React.createElement("p", {
+    className: styles$f.footer__copyright
+  }, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
+    href: countrySelector.href || '#',
+    className: styles$f.footer__countrySelector
+  }, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__countrySelectorIcon
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.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
+ */
+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$f.footer, isMobile && styles$f['footer--mobile'], className);
+  const LogoWrapper = logo.href ? 'a' : 'div';
+  const logoProps = logo.href ? {
+    href: logo.href,
+    className: styles$f.footer__logo
+  } : {
+    className: styles$f.footer__logo
+  };
+
+  // Logo + Motto + Badge component (used in both layouts)
+  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$f.footer__leftCol
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$f.footer__motto
+  }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__badge
+  }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__badgeIcon
+  }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles$f.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$f.footer__container
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$f.footer__links
+    }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
+      heading: quickLinksHeading,
+      links: quickLinks
+    }), /*#__PURE__*/React.createElement(FooterLinkGroup, {
+      heading: contactHeading,
+      links: contactLinks
+    })), contactFormButton && /*#__PURE__*/React.createElement("div", {
+      className: styles$f.footer__cta
+    }, /*#__PURE__*/React.createElement("a", {
+      href: contactFormButton.href,
+      style: {
+        textDecoration: 'none',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "solid-red",
+      style: {
+        width: '100%'
+      }
+    }, contactFormButton.label))), socialLinks.length > 0 && /*#__PURE__*/React.createElement(FooterSocialIcons, {
+      links: socialLinks
+    }), /*#__PURE__*/React.createElement(FooterBottom, {
+      links: bottomLinks,
+      copyright: copyright,
+      countrySelector: countrySelector
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles$f.footer__brandSection
+    }, /*#__PURE__*/React.createElement(LogoSection, null))));
+  }
+
+  // Desktop layout: Logo at top, 3-column main content
+  return /*#__PURE__*/React.createElement("footer", {
+    className: footerClasses
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__container
+  }, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
+    src: logo.src,
+    alt: logo.alt
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__main
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__leftCol
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$f.footer__motto
+  }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__badge
+  }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__badgeIcon
+  }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__badgeText
+  }, atlasCopcoBadge.text))), /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__links
+  }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
+    heading: quickLinksHeading,
+    links: quickLinks
+  }), /*#__PURE__*/React.createElement(FooterLinkGroup, {
+    heading: contactHeading,
+    links: contactLinks
+  }, socialLinks.length > 0 && /*#__PURE__*/React.createElement(FooterSocialIcons, {
+    links: socialLinks
+  })))), /*#__PURE__*/React.createElement(FooterBottom, {
+    links: bottomLinks,
+    copyright: copyright,
+    countrySelector: countrySelector
+  })));
 };
 
 var styles$e = {"pagination":"Pagination-module__pagination___Kih79","paginationList":"Pagination-module__paginationList___-lZpm","paginationItem":"Pagination-module__paginationItem___VsGFa","pageButton":"Pagination-module__pageButton___b6UNF","pageButtonActive":"Pagination-module__pageButtonActive___D9m18","navButton":"Pagination-module__navButton___ZCIai","navIcon":"Pagination-module__navIcon___-BVJ3","navButton--previous":"Pagination-module__navButton--previous___Cy5TE","navButton--next":"Pagination-module__navButton--next___kTmgK","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
@@ -275,7 +830,7 @@ const Pagination = ({
   className,
   ariaLabel = "Pagination"
 }) => {
-  const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
+  const pageNumbers = React.useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
   const handlePageChange = page => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
       onPageChange(page);
@@ -347,15 +902,15 @@ const Image = ({
   srcSet,
   sizes
 }) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasError, setHasError] = useState(false);
-  const [currentSrc, setCurrentSrc] = useState(src);
-  const handleLoad = useCallback(() => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const [currentSrc, setCurrentSrc] = React.useState(src);
+  const handleLoad = React.useCallback(() => {
     setIsLoading(false);
     setHasError(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = useCallback(() => {
+  const handleError = React.useCallback(() => {
     setIsLoading(false);
     setHasError(true);
 
@@ -534,7 +1089,7 @@ const ProductCardDetails = ({
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$b.productDetails
-  }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
+  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.ProductDetailsCard, {
     className: `${className}`,
     title: title,
     imageUrl: imageUrl,
@@ -613,7 +1168,7 @@ const AlgoliaDynamicSearchLeybold = props => {
     ProductCard: ProductCardAdapter,
     ProductDetailsCard: ProductCardDetailsAdapter
   };
-  return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.AlgoliaDynamicSearchRaw, _extends({}, props, {
     innerComponents: innerComponents
   }));
 };
@@ -666,7 +1221,7 @@ const QrFormButtonAdapter = ({
 const QrFormLeybold = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.QrForm, _extends({}, props, {
     ButtonComponent: QrFormButtonAdapter
   })));
 };
@@ -712,9 +1267,9 @@ const SearchModal = ({
   children,
   className = ''
 }) => {
-  const modalRef = useRef(null);
-  const previouslyFocusedElement = useRef(null);
-  useEffect(() => {
+  const modalRef = React.useRef(null);
+  const previouslyFocusedElement = React.useRef(null);
+  React.useEffect(() => {
     if (isOpen) {
       // Store the previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -739,7 +1294,7 @@ const SearchModal = ({
       document.body.style.overflow = '';
     };
   }, [isOpen]);
-  useEffect(() => {
+  React.useEffect(() => {
     const handleEscape = event => {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -750,7 +1305,7 @@ const SearchModal = ({
   }, [isOpen, onClose]);
 
   // Focus trap implementation
-  useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen || !modalRef.current) return;
     const modal = modalRef.current;
     const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -1167,10 +1722,10 @@ const FilterAccordion = ({
   onValueToggle,
   className
 }) => {
-  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuery, setSearchQuery] = React.useState("");
 
   // Filter facet values based on search query
-  const filteredValues = useMemo(() => {
+  const filteredValues = React.useMemo(() => {
     if (!searchQuery.trim()) {
       return facet.values;
     }
@@ -1293,7 +1848,7 @@ const AppliedFilters = ({
   className
 }) => {
   // Extract all refined (selected) filters
-  const appliedFilters = useMemo(() => {
+  const appliedFilters = React.useMemo(() => {
     const filters = [];
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1358,7 +1913,7 @@ const FiltersPanel = ({
   className
 }) => {
   // Track which accordions are expanded
-  const [expandedAccordions, setExpandedAccordions] = useState(() => {
+  const [expandedAccordions, setExpandedAccordions] = React.useState(() => {
     // Initialize with default expanded facets
     const expanded = new Set();
     facets.forEach(facet => {
@@ -1368,7 +1923,7 @@ const FiltersPanel = ({
     });
     return expanded;
   });
-  const handleAccordionToggle = useCallback(facetId => {
+  const handleAccordionToggle = React.useCallback(facetId => {
     setExpandedAccordions(prev => {
       const next = new Set(prev);
       if (next.has(facetId)) {
@@ -1379,13 +1934,13 @@ const FiltersPanel = ({
       return next;
     });
   }, []);
-  const handleValueToggle = useCallback((attribute, value) => {
+  const handleValueToggle = React.useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleRemoveFilter = useCallback((attribute, value) => {
+  const handleRemoveFilter = React.useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleClearAll = useCallback(() => {
+  const handleClearAll = React.useCallback(() => {
     // Remove all refined facets
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1773,12 +2328,26 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
-archExperience;
+exports.AlgoliaDynamicSearch = AlgoliaDynamicSearchLeybold;
+exports.AlgoliaDynamicSearchLeybold = AlgoliaDynamicSearchLeybold;
+exports.AppliedFilterTag = AppliedFilterTag;
+exports.AppliedFilters = AppliedFilters;
+exports.Button = Button;
+exports.Carousel = Carousel;
+exports.ContentCardHorizontal = ContentCardHorizontal;
+exports.FederatedInstantResultsLayout = FederatedInstantResultsLayout;
+exports.FederatedResultsView = FederatedResultsView;
+exports.FederatedSearchExperience = FederatedSearchExperience;
 exports.FilterAccordion = FilterAccordion;
 exports.FilterItem = FilterItem;
 exports.FilterSearch = FilterSearch;
 exports.FiltersPanel = FiltersPanel;
+exports.Footer = Footer;
+exports.FooterBottom = FooterBottom;
+exports.FooterLink = FooterLink;
+exports.FooterLinkGroup = FooterLinkGroup;
+exports.FooterSocialIcon = FooterSocialIcon;
+exports.FooterSocialIcons = FooterSocialIcons;
 exports.ModalCloseButton = ModalCloseButton;
 exports.Pagination = Pagination;
 exports.PaginationButton = PaginationButton;