@asantemedia-org/leybold-design-system 1.0.21 → 1.0.23

package/dist/index.esm.js

@@ -925,7 +925,7 @@ var ProductCardHorizontal = function (_a) {
 // Alias for backward compatibility
 var ProductCardHorizontalParts = ProductCardHorizontal;
 
-var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l"};
+var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
 
 // Adapter to map design system props to ProductCardHorizontalParts props
 var SpareCardAdapter = function (props) {

package/dist/index.esm.scss

@@ -1815,6 +1815,50 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 .ProductCardDetails-module__productDetails___-sx2l .accordion-section__content {
   padding: 0 0 1rem 0;
 }
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__value {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #4a4e54;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__unit {
+  font-size: 0.85rem;
+  color: #99a1ab;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
+  font-size: 0.85rem;
+  color: #e2001a;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown:hover {
+  background-color: #dae0e3;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(196, 38, 46, 0.15);
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown option {
+  padding: 0.5rem;
+}
+.ProductCardDetails-module__productDetails___-sx2l .ProductCardDetails-module__spareCard___vC1Ju {
+  background-color: white;
+}
 :root {
   --leybold-red: #e2001a;
   --leybold-black: #000000;

package/dist/index.js

@@ -1,11 +1,9 @@
-'use strict';
-
-var React = require('react');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
-var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
-var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var edwardsvacuumDesignSystem = require('@asantemedia-org/edwardsvacuum-design-system');
+import React, { useMemo, useState, useCallback, useRef, useEffect } 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';
+import { faChevronRight as faChevronRight$1, faArrowUpRightFromSquare as faArrowUpRightFromSquare$1 } from '@fortawesome/pro-solid-svg-icons';
+import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -139,20 +137,20 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 var getIcon = function (icon) {
   switch (icon) {
     case "arrow-right":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faArrowRight
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faArrowRight
       });
     case "external":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faArrowUpRightFromSquare
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faArrowUpRightFromSquare
       });
     case "chevron-left":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faChevronLeft
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faChevronLeft
       });
     case "chevron-right":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faChevronRight
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faChevronRight
       });
     default:
       return null;
@@ -233,19 +231,19 @@ var Button = function (_a) {
     "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,
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowLeft,
     className: styles$k.button__icon__default
-  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowLeftLong,
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowLeftLong,
     className: styles$k.button__icon__hover
   })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowRight,
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight,
     className: styles$k.button__icon__default
-  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowRightLong,
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRightLong,
     className: styles$k.button__icon__hover
   })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
@@ -310,13 +308,13 @@ var AtlasCopcoIcon = function (_a) {
 var SocialIconComponent = function (_a) {
   var platform = _a.platform;
   var iconMap = {
-    facebook: freeBrandsSvgIcons.faFacebookF,
-    x: freeBrandsSvgIcons.faXTwitter,
-    linkedin: freeBrandsSvgIcons.faLinkedinIn,
-    youtube: freeBrandsSvgIcons.faYoutube,
-    instagram: freeBrandsSvgIcons.faInstagram
+    facebook: faFacebookF,
+    x: faXTwitter,
+    linkedin: faLinkedinIn,
+    youtube: faYoutube,
+    instagram: faInstagram
   };
-  return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: iconMap[platform]
   });
 };
@@ -419,8 +417,8 @@ var FooterBottom = function (_a) {
     className: styles$j.footer__countrySelector
   }, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
     className: styles$j.footer__countrySelectorIcon
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faGlobe
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faGlobe
   })), countrySelector.label));
 };
 // =============================================================================
@@ -611,8 +609,8 @@ var PaginationButton = function (_a) {
     className: "".concat(styles$i.navButton, " ").concat(styles$i["navButton--".concat(direction)], " ").concat(disabled ? styles$i.navButtonDisabled : "", " ").concat(className || ""),
     "aria-label": ariaLabel || label,
     tabIndex: disabled ? -1 : 0
-  }, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faChevronRight,
+  }, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faChevronRight$1,
     className: styles$i.navIcon,
     "aria-hidden": "true"
   })));
@@ -690,7 +688,7 @@ var Pagination = function (_a) {
     className = _a.className,
     _g = _a.ariaLabel,
     ariaLabel = _g === void 0 ? "Pagination" : _g;
-  var pageNumbers = React.useMemo(function () {
+  var pageNumbers = useMemo(function () {
     return generatePageNumbers(currentPage, totalPages, maxVisiblePages);
   }, [currentPage, totalPages, maxVisiblePages]);
   var handlePageChange = function (page) {
@@ -770,21 +768,21 @@ var Image = function (_a) {
     className = _g === void 0 ? "" : _g,
     srcSet = _a.srcSet,
     sizes = _a.sizes;
-  var _h = React.useState(true),
+  var _h = useState(true),
     isLoading = _h[0],
     setIsLoading = _h[1];
-  var _j = React.useState(false),
+  var _j = useState(false),
     hasError = _j[0],
     setHasError = _j[1];
-  var _k = React.useState(src),
+  var _k = useState(src),
     currentSrc = _k[0],
     setCurrentSrc = _k[1];
-  var handleLoad = React.useCallback(function () {
+  var handleLoad = useCallback(function () {
     setIsLoading(false);
     setHasError(false);
     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
   }, [onLoad]);
-  var handleError = React.useCallback(function () {
+  var handleError = useCallback(function () {
     setIsLoading(false);
     setHasError(true);
     // Try fallback if available and not already using it
@@ -918,7 +916,7 @@ var ProductCardHorizontal = function (_a) {
     className: styles$h.productButton,
     onClick: button.onClick,
     size: "extra-small"
-  }, button.label) : /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  }, button.label) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowUpRight,
     className: styles$h.productArrowIcon,
     "aria-hidden": "true"
@@ -927,7 +925,7 @@ var ProductCardHorizontal = function (_a) {
 // Alias for backward compatibility
 var ProductCardHorizontalParts = ProductCardHorizontal;
 
-var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l"};
+var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
 
 // Adapter to map design system props to ProductCardHorizontalParts props
 var SpareCardAdapter = function (props) {
@@ -973,7 +971,7 @@ var ProductCardDetails = function (_a) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$f.productDetails
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.ProductDetailsCard, {
+  }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
     className: "".concat(className),
     title: title,
     imageUrl: imageUrl,
@@ -1053,7 +1051,7 @@ var AlgoliaDynamicSearchLeybold = function (props) {
     ProductCard: ProductCardAdapter,
     ProductDetailsCard: ProductCardDetailsAdapter
   };
-  return /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.AlgoliaDynamicSearchRaw, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
     innerComponents: innerComponents
   }));
 };
@@ -1105,7 +1103,7 @@ var QrFormButtonAdapter = function (_a) {
 var QrFormLeybold = function (props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.QrForm, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
     ButtonComponent: QrFormButtonAdapter
   })));
 };
@@ -1158,9 +1156,9 @@ var SearchModal = function (_a) {
     _c = _a.className,
     className = _c === void 0 ? '' : _c,
     stickyHeaderContent = _a.stickyHeaderContent;
-  var modalRef = React.useRef(null);
-  var previouslyFocusedElement = React.useRef(null);
-  React.useEffect(function () {
+  var modalRef = useRef(null);
+  var previouslyFocusedElement = useRef(null);
+  useEffect(function () {
     if (isOpen) {
       // Store the previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -1182,7 +1180,7 @@ var SearchModal = function (_a) {
       document.body.style.overflow = '';
     };
   }, [isOpen]);
-  React.useEffect(function () {
+  useEffect(function () {
     var handleEscape = function (event) {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -1194,7 +1192,7 @@ var SearchModal = function (_a) {
     };
   }, [isOpen, onClose]);
   // Focus trap implementation
-  React.useEffect(function () {
+  useEffect(function () {
     if (!isOpen || !modalRef.current) return;
     var modal = modalRef.current;
     var focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -1620,7 +1618,7 @@ var FilterSearch = function (_a) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles$7.filterSearch, " ").concat(className || "")
-  }, !value && /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  }, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMagnifyingGlass,
     className: styles$7.searchIcon,
     "aria-hidden": "true"
@@ -1636,8 +1634,8 @@ var FilterSearch = function (_a) {
     onClick: handleClear,
     className: styles$7.clearButton,
     "aria-label": "Clear search"
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faXmark
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faXmark$1
   })));
 };
 
@@ -1733,11 +1731,11 @@ var FilterAccordion = function (_a) {
     variant = _b === void 0 ? 'desktop' : _b,
     _c = _a.showCheckbox,
     showCheckbox = _c === void 0 ? true : _c;
-  var _d = React.useState(""),
+  var _d = useState(""),
     searchQuery = _d[0],
     setSearchQuery = _d[1];
   // Filter facet values based on search query
-  var filteredValues = React.useMemo(function () {
+  var filteredValues = useMemo(function () {
     if (!searchQuery.trim()) {
       return facet.values;
     }
@@ -1864,7 +1862,7 @@ var AppliedFilters = function (_a) {
     _a.onClearAll;
     var className = _a.className;
   // Extract all refined (selected) filters
-  var appliedFilters = React.useMemo(function () {
+  var appliedFilters = useMemo(function () {
     var filters = [];
     facets.forEach(function (facet) {
       facet.values.forEach(function (value) {
@@ -1919,7 +1917,7 @@ var FiltersPanel = function (_a) {
     _d = _a.showCheckbox,
     showCheckbox = _d === void 0 ? true : _d;
   // Track which accordions are expanded (transient UI state)
-  var _e = React.useState(function () {
+  var _e = useState(function () {
       // Initialize with default expanded facets
       var expanded = new Set();
       facets.forEach(function (facet) {
@@ -1932,7 +1930,7 @@ var FiltersPanel = function (_a) {
     expandedAccordions = _e[0],
     setExpandedAccordions = _e[1];
   // Sync expansion state when facets change (e.g., new facets appear after refetch)
-  React.useEffect(function () {
+  useEffect(function () {
     setExpandedAccordions(function (prev) {
       var next = new Set(prev);
       // Add new facets with defaultExpanded
@@ -1953,7 +1951,7 @@ var FiltersPanel = function (_a) {
       return next;
     });
   }, [facets]);
-  var handleAccordionToggle = React.useCallback(function (facetId) {
+  var handleAccordionToggle = useCallback(function (facetId) {
     setExpandedAccordions(function (prev) {
       var next = new Set(prev);
       if (next.has(facetId)) {
@@ -1964,13 +1962,13 @@ var FiltersPanel = function (_a) {
       return next;
     });
   }, []);
-  var handleValueToggle = React.useCallback(function (attribute, value) {
+  var handleValueToggle = useCallback(function (attribute, value) {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  var handleRemoveFilter = React.useCallback(function (attribute, value) {
+  var handleRemoveFilter = useCallback(function (attribute, value) {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  var handleClearAll = React.useCallback(function () {
+  var handleClearAll = useCallback(function () {
     // Remove all refined facets
     facets.forEach(function (facet) {
       facet.values.forEach(function (value) {
@@ -2082,8 +2080,8 @@ var ProductCardVertical = function (_a) {
     className: styles$6.productCardVertical__button,
     "aria-label": "".concat(buttonLabel, " - ").concat(title),
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faArrowUpRightFromSquare,
+  }, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowUpRightFromSquare$1,
     "aria-hidden": "true"
   })));
 };
@@ -2361,10 +2359,10 @@ var FilterDrawer = function (_a) {
     onClose = _a.onClose,
     children = _a.children,
     className = _a.className;
-  var drawerRef = React.useRef(null);
-  var previouslyFocusedElement = React.useRef(null);
+  var drawerRef = useRef(null);
+  var previouslyFocusedElement = useRef(null);
   // Focus management
-  React.useEffect(function () {
+  useEffect(function () {
     if (isOpen) {
       // Store previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -2387,7 +2385,7 @@ var FilterDrawer = function (_a) {
     };
   }, [isOpen]);
   // Escape key handler
-  React.useEffect(function () {
+  useEffect(function () {
     var handleEscape = function (event) {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -2399,7 +2397,7 @@ var FilterDrawer = function (_a) {
     };
   }, [isOpen, onClose]);
   // Focus trap implementation
-  React.useEffect(function () {
+  useEffect(function () {
     if (!isOpen || !drawerRef.current) return;
     var drawer = drawerRef.current;
     var focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -2443,7 +2441,7 @@ var FilterDrawer = function (_a) {
     onClick: onClose,
     "aria-label": "Close filters",
     className: styles$2.drawerCloseButton
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faXmark
   })), /*#__PURE__*/React.createElement("div", {
     ref: drawerRef,
@@ -2483,7 +2481,7 @@ var FederatedResultsView = function (_a) {
   var displayProducts = activeTab === "content" ? [] : products;
   var displayContents = activeTab === "products" ? [] : contents;
   // Content tab single-select handler (clears all others when selecting)
-  var handleContentCategorySelect = React.useCallback(function (attribute, value) {
+  var handleContentCategorySelect = useCallback(function (attribute, value) {
     var facet = facets.find(function (f) {
       return f.attribute === attribute;
     });
@@ -2503,7 +2501,7 @@ var FederatedResultsView = function (_a) {
     }
   }, [facets, onFacetToggle]);
   // Track if any filters applied
-  var hasAppliedFilters = React.useMemo(function () {
+  var hasAppliedFilters = useMemo(function () {
     return facets.some(function (facet) {
       return facet.values.some(function (value) {
         return value.isRefined;
@@ -2511,9 +2509,9 @@ var FederatedResultsView = function (_a) {
     });
   }, [facets]);
   // Track previous filter state to detect transitions
-  var prevHasAppliedFilters = React.useRef(hasAppliedFilters);
+  var prevHasAppliedFilters = useRef(hasAppliedFilters);
   // Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
-  React.useEffect(function () {
+  useEffect(function () {
     // Only close if we HAD filters and now have NONE (not on initial open)
     if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
       onFilterDrawerClose();
@@ -2675,7 +2673,7 @@ var FederatedSearchExperience = function (_a) {
     onFilterDrawerToggle = _a.onFilterDrawerToggle,
     onFilterDrawerClose = _a.onFilterDrawerClose;
   // Track if any filters are active (for red dot indicator)
-  var hasAppliedFilters = React.useMemo(function () {
+  var hasAppliedFilters = useMemo(function () {
     return facets.some(function (facet) {
       return facet.values.some(function (value) {
         return value.isRefined;
@@ -2857,42 +2855,4 @@ var SearchTriggerButton = function (_a) {
   }, label));
 };
 
-exports.AlgoliaDynamicSearch = AlgoliaDynamicSearchLeybold;
-exports.AlgoliaDynamicSearchLeybold = AlgoliaDynamicSearchLeybold;
-exports.AppliedFilterTag = AppliedFilterTag;
-exports.AppliedFilters = AppliedFilters;
-exports.Button = Button;
-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;
-exports.PaginationEllipsis = PaginationEllipsis;
-exports.PaginationItem = PaginationItem;
-exports.ProductCardHorizontal = ProductCardHorizontal;
-exports.ProductCardVertical = ProductCardVertical;
-exports.QrForm = QrFormLeybold;
-exports.QrFormLeybold = QrFormLeybold;
-exports.ResultsColumn = ResultsColumn;
-exports.ResultsCount = ResultsCount;
-exports.ResultsList = ResultsList;
-exports.SearchBar = SearchBar;
-exports.SearchIcon = SearchIcon;
-exports.SearchInput = SearchInput;
-exports.SearchModal = SearchModal;
-exports.SearchSubmitButton = SearchSubmitButton;
-exports.SearchTriggerButton = SearchTriggerButton;
-exports.SeeAllLinkButton = SeeAllLinkButton;
-//# sourceMappingURL=index.js.map
+export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, Footer, FooterBottom, FooterLink, FooterLinkGroup, FooterSocialIcon, FooterSocialIcons, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, ProductCardVertical, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };

package/dist/index.scss

@@ -1815,6 +1815,50 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 .ProductCardDetails-module__productDetails___-sx2l .accordion-section__content {
   padding: 0 0 1rem 0;
 }
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__value {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #4a4e54;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__unit {
+  font-size: 0.85rem;
+  color: #99a1ab;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
+  font-size: 0.85rem;
+  color: #e2001a;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown:hover {
+  background-color: #dae0e3;
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(196, 38, 46, 0.15);
+}
+.ProductCardDetails-module__productDetails___-sx2l .facet-unit-selector__dropdown option {
+  padding: 0.5rem;
+}
+.ProductCardDetails-module__productDetails___-sx2l .ProductCardDetails-module__spareCard___vC1Ju {
+  background-color: white;
+}
 :root {
   --leybold-red: #e2001a;
   --leybold-black: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asantemedia-org/leybold-design-system",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Design system for Leybold",
   "license": "UNLICENSED",
   "main": "dist/index.js",