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

package/dist/index.esm.js

@@ -1,4 +1,8 @@
-import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import Slider from 'react-slick';
+import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
 import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
 
 function _extends() {
@@ -11,7 +15,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 +92,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(FontAwesomeIcon, {
+        icon: faArrowRight
+      });
+    case "external":
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faArrowUpRightFromSquare
+      });
+    case "chevron-left":
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faChevronLeft
+      });
+    case "chevron-right":
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: 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 +176,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(FontAwesomeIcon, {
+    icon: faArrowLeft,
+    className: styles$h.button__icon__default
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowLeftLong,
+    className: styles$h.button__icon__hover
+  })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight,
+    className: styles$h.button__icon__default
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: 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 = useRef(null);
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  // Uses document.documentElement.clientWidth to work correctly in iframes (Storybook)
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return document.documentElement.clientWidth < 768;
+    }
+    return false;
+  });
+  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: faFacebookF,
+    x: faXTwitter,
+    linkedin: faLinkedinIn,
+    youtube: faYoutube,
+    instagram: faInstagram
+  };
+  return /*#__PURE__*/React.createElement(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(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
+ */
+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"};
@@ -1773,5 +2326,5 @@ 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 };
+export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, Carousel, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, Footer, FooterBottom, FooterLink, FooterLinkGroup, FooterSocialIcon, FooterSocialIcons, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
 //# sourceMappingURL=index.esm.js.map